/* ============================================================
   On the Road Again Lending — COMPONENTS (L1-L4)
   One block per component. If a style is used twice it lives
   here, never in pages.css.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) ease;
  text-decoration: none !important;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

.btn-primary {
  background: var(--blue-600);
  color: var(--text-on-action);
  box-shadow: var(--shadow-action);
}
.btn-primary:hover { background: var(--blue-700); }

.btn-navy { background: var(--navy-900); color: var(--text-inverse); }
.btn-navy:hover { background: var(--navy-800); }

.btn-secondary {
  background: transparent;
  color: var(--navy-900);
  box-shadow: inset 0 0 0 1.5px var(--gray-300);
}
.btn-secondary:hover { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--navy-600); }

.btn-ghost { color: var(--navy-800); padding: 10px 16px; }
.btn-ghost:hover { background: var(--navy-050); }

.btn-danger { background: var(--status-danger); color: var(--text-on-action); }
.btn-danger-soft { background: var(--status-danger-bg); color: var(--status-danger); }
.btn-danger-soft:hover { background: color-mix(in srgb, var(--status-danger) 14%, var(--white)); }

.btn-amber { background: var(--amber-500); color: var(--navy-950); }
.btn-amber:hover { background: var(--amber-400); }

.btn-lg { padding: 16px 32px; font-size: var(--fs-body); }
.btn-sm { padding: 8px 16px; font-size: var(--fs-xs); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.card-pad { padding: var(--sp-6); }
.card-hover { transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}

.card-dark {
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: var(--text-inverse);
  border: 1px solid var(--navy-700);
  border-radius: var(--r-lg);
}
.card-dark h1, .card-dark h2, .card-dark h3, .card-dark h4 { color: var(--text-inverse); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-plain::before { display: none; }
.badge-success { background: var(--status-success-bg); color: var(--status-success); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge-danger { background: var(--status-danger-bg); color: var(--status-danger); }
.badge-info { background: var(--status-info-bg); color: var(--status-info); }
.badge-neutral { background: var(--status-neutral-bg); color: var(--status-neutral); }
.badge-amber { background: var(--amber-100); color: var(--status-warning-fg); }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--sp-5); }
.field label, .field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--navy-800);
}
.field .hint { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 5px; }
.field .error-msg { display: none; font-size: var(--fs-xs); color: var(--status-danger); margin-top: 5px; font-weight: 550; }
.field.has-error .error-msg { display: block; }
.field.has-error .input { border-color: var(--status-danger); background: color-mix(in srgb, var(--status-danger) 2%, var(--white)); }

.input, select.input, textarea.input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.input:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-600) 14%, transparent);
}
.input::placeholder { color: var(--text-tertiary); }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234E5D6E' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.input-group { position: relative; }
.input-group .prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary); font-weight: 600; pointer-events: none;
}
.input-group .input.has-prefix { padding-left: 30px; }

/* Segmented control */
.segmented {
  display: inline-flex;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
}
.segmented button {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.segmented button:active { transform: scale(0.97); }
.segmented button.active {
  background: var(--white);
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
}
.segmented.segmented-block { display: flex; width: 100%; }
.segmented.segmented-block button { flex: 1; }

/* Choice cards (radio-as-card) */
.choice-grid { display: grid; gap: var(--sp-3); }
.choice-card {
  position: relative;
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--r-md);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.choice-card:active { transform: scale(0.99); }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card.selected, .choice-card:has(input:checked) {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-600) 12%, transparent), var(--shadow-sm);
}
.choice-card .check {
  position: absolute; top: 14px; right: 14px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  display: grid; place-items: center;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.choice-card .check svg { opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.choice-card.selected .check, .choice-card:has(input:checked) .check {
  background: var(--blue-600); border-color: var(--blue-600);
  color: var(--text-on-action);   /* the tick sits on the fill, not on the card */
}
.choice-card.selected .check svg, .choice-card:has(input:checked) .check svg { opacity: 1; transform: scale(1); }

/* Toggle switch */
.toggle {
  position: relative; display: inline-block;
  width: 44px; height: 26px; flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle .track {
  position: absolute; inset: 0;
  background: var(--gray-300);
  border-radius: var(--r-pill);
  transition: background-color var(--dur-med) ease;
  cursor: pointer;
}
.toggle .track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out);
}
.toggle input:checked + .track { background: var(--blue-600); }
.toggle input:checked + .track::after { transform: translateX(18px); }

/* Checkbox */
.checkbox-row {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary);
}
.checkbox-row input { position: absolute; opacity: 0; }
.checkbox-row .box {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  border: 1.5px solid var(--gray-300); border-radius: 6px;
  display: grid; place-items: center;
  background: var(--white);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.checkbox-row .box svg { opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.checkbox-row input:checked ~ .box { background: var(--blue-600); border-color: var(--blue-600); color: var(--text-on-action); }
.checkbox-row input:checked ~ .box svg { opacity: 1; transform: scale(1); }
.checkbox-row input:focus-visible ~ .box { outline: 2px solid var(--blue-600); outline-offset: 2px; }
/* Radio: a circle with a dot rather than a square with a tick. */
.checkbox-row .box-radio { border-radius: 50%; }
.checkbox-row .box-radio .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-on-action); opacity: 0; transform: scale(0.5); transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.checkbox-row input:checked ~ .box-radio .dot { opacity: 1; transform: scale(1); }

/* Range slider */
input[type="range"].slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--blue-600) 0%, var(--blue-600) var(--fill, 50%), var(--gray-200) var(--fill, 50%), var(--gray-200) 100%);
  outline: none;
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue-600);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform var(--dur-fast) var(--ease-out);
}
input[type="range"].slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
input[type="range"].slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue-600);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--gray-200); background: var(--white); }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table thead th {
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-100);
  white-space: nowrap;
}
.table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color var(--dur-fast) ease; }
.table tbody tr.row-link { cursor: pointer; }
@media (hover: hover) { .table tbody tr.row-link:hover { background: var(--gray-100); } }
.table .cell-right { text-align: right; }

/* ---------- Page headers ----------
   Driven by C.PageHead. Every officer and portal screen opens with the same
   block, so the type sizes live here rather than in sixteen inline styles. */
.page-head { margin-bottom: var(--sp-8); }
.page-head .crumb { font-size: var(--fs-xs); color: var(--text-tertiary); margin-bottom: var(--sp-2); font-weight: 550; }
.page-head .crumb a { color: var(--text-tertiary); }
.page-head .crumb a:hover { color: var(--blue-700); }
.page-head h1 { margin: 0; font-size: var(--fs-h2); }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.page-head-main { min-width: 0; }
.page-head-sub { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); max-width: 78ch; line-height: 1.55; }
.page-head-aside { display: inline-block; vertical-align: middle; margin-left: var(--sp-2); }
.page-head-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* The way back. Seven officer pages each wrote their own arrow-plus-anchor. */
.page-back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: var(--sp-3); padding: 4px 10px 4px 7px; margin-left: -7px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 550;
  color: var(--text-secondary); text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.page-back:hover { background: var(--gray-100); color: var(--navy-900); text-decoration: none; }
.page-back svg { flex: none; }

/* ---------- Stat tiles (public and marketing surfaces) ----------
   Consoles use .stat-card instead: a filled tile reads as a control-panel
   figure, where a bare one suits a marketing page. C.StatTile emits
   .sec-label and .num-strong, so it needs no label/value rules of its own. */
.stat-tile { padding: var(--sp-5) var(--sp-6); }
.stat-tile .stat-delta { font-size: var(--fs-xs); font-weight: 600; margin-top: 4px; }
.stat-delta.up { color: var(--status-success); }
.stat-delta.down { color: var(--status-danger); }

/* ---------- Modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--navy-950) 55%, transparent);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: var(--sp-5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) ease;
}
.modal-scrim.show { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  max-width: 480px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  padding: var(--sp-8);
  transform: scale(0.95) translateY(8px); opacity: 0;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) ease;
}
.modal-scrim.show .modal { transform: scale(1) translateY(0); opacity: 1; }

/* ---------- Toast ---------- */
.toast-holder { position: fixed; bottom: var(--sp-6); right: var(--sp-6); z-index: 300; display: flex; flex-direction: column; gap: var(--sp-2); }
.toast {
  background: var(--navy-900);
  color: var(--text-inverse);
  padding: 13px 20px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  font-weight: 550;
  display: flex; align-items: center; gap: var(--sp-3);
  transform: translateY(12px); opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) ease;
  max-width: 380px;
}
.toast.in { transform: translateY(0); opacity: 1; }
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-500); flex-shrink: 0; }
.toast.toast-danger .dot { background: var(--status-danger); }
.toast.toast-warning .dot { background: var(--amber-500); }

/* ---------- Progress ring ---------- */
.ring-wrap { position: relative; display: grid; place-items: center; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-wrap .ring-track { fill: none; stroke: color-mix(in srgb, var(--white) 14%, transparent); }
.ring-wrap .ring-fill {
  fill: none;
  stroke: var(--amber-400);
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms var(--ease-in-out);
}
.ring-center { position: absolute; text-align: center; }

/* ---------- Wizard steps ---------- */
.wizard-steps { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.wizard-steps .ws {
  flex: 1; height: 5px; border-radius: var(--r-pill);
  background: var(--gray-200);
  position: relative; overflow: hidden;
}
.wizard-steps .ws::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--blue-600);
  transform: translateX(-101%);
  transition: transform var(--dur-slow) var(--ease-in-out);
  border-radius: inherit;
}
.wizard-steps .ws.done::after, .wizard-steps .ws.current::after { transform: translateX(0); }
.wizard-steps .ws.current::after { background: var(--blue-500); }

.wizard-pane { display: none; }
.wizard-pane.active { display: block; animation: paneIn var(--dur-slow) var(--ease-out) both; }
@keyframes paneIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Finance-grade components (v2 revamp)
   ============================================================ */

/* ---- Page header with as-of stamp ---- */
.as-of { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: 550; }
.as-of strong { color: var(--text-secondary); }

/* ---- KPI card: value + delta + benchmark + sparkline ---- */
.kpi {
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: 2px;
  position: relative; overflow: hidden;
}
.kpi .kpi-label {
  font-size: var(--fs-2xs); font-weight: 650; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-tertiary);
  display: flex; align-items: center; gap: 6px;
}
.kpi .kpi-value {
  font-family: var(--font-display); font-size: 1.85rem; font-weight: 560;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15;
  margin-top: 5px;
}
.kpi .kpi-sub { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.kpi-delta { font-size: var(--fs-xs); font-weight: 650; display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.kpi-delta.up { color: var(--status-success); }
.kpi-delta.down { color: var(--status-danger); }
.kpi-delta.flat { color: var(--text-tertiary); }
.kpi-spark { height: 30px; width: 92px; flex-shrink: 0; }
.kpi-target { font-size: var(--fs-2xs); color: var(--text-tertiary); }
.kpi.kpi-accent { border-top: 3px solid var(--blue-600); }
.kpi.kpi-warn { border-top: 3px solid var(--amber-500); }
.kpi.kpi-danger { border-top: 3px solid var(--status-danger); }

/* ---- DPD / aging stacked bar ---- */
.aging-bar { display: flex; height: 30px; border-radius: 7px; overflow: hidden; gap: 2px; }
.aging-bar .seg { position: relative; min-width: 3px; transition: opacity var(--dur-fast) ease; }
.aging-bar .seg:hover { opacity: 0.82; }
.aging-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.aging-legend .al {
  display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-xs);
  padding: 4px 0;
}
.aging-legend .al .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; align-self: center; }
.aging-legend .al .al-lab { color: var(--text-secondary); font-weight: 550; }
.aging-legend .al .al-val { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
.aging-legend .al .al-cnt { color: var(--text-tertiary); font-size: var(--fs-2xs); }

/* ---- Dense data table ---- */
.table.table-dense thead th { padding: 10px 14px; }
.table.table-dense tbody td { padding: 10px 14px; }
.table .cell-sub { font-size: var(--fs-2xs); color: var(--text-tertiary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table th.sortable:hover { color: var(--navy-700); }
.table th.sortable .arw { opacity: 0; margin-left: 4px; font-size: 9px; }
.table th.sortable.asc .arw, .table th.sortable.desc .arw { opacity: 1; }
.table th.sortable.desc .arw { transform: rotate(180deg); display: inline-block; }
.num-strong { font-weight: 650; font-variant-numeric: tabular-nums; }

/* grade chip */
.grade {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-on-action);
  font-variant-numeric: tabular-nums;
}
.grade-A { background: var(--grade-a); } .grade-B { background: var(--grade-b); }
.grade-C { background: var(--grade-c); } .grade-D { background: var(--grade-d); }
.grade-E { background: var(--grade-e); }

/* ---- Risk tier (Green / Yellow / Red) ---- */
.tier {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.01em;
  padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap;
}
.tier .tdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tier-green  { background: var(--status-success-bg); color: var(--status-success); }
.tier-green .tdot  { background: var(--status-success); }
.tier-yellow { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.tier-yellow .tdot { background: var(--amber-500); }
.tier-red    { background: var(--status-danger-bg); color: var(--status-danger); }
.tier-red .tdot    { background: var(--status-danger); }
/* solid dot-only variant for dense tables */
.tier-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.tier-dot.green { background: var(--status-success); } .tier-dot.yellow { background: var(--amber-500); } .tier-dot.red { background: var(--status-danger); }

/* ---- Risk matrix (6-metric underwriting table) ---- */
.risk-matrix { display: grid; gap: 0; }
.rm-row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.rm-row:last-child { border-bottom: none; }
.rm-label { font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: 9px; }
.rm-icon { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; background: var(--gray-100); flex-shrink: 0; }
.rm-value { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: 550; }
.rm-band { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 6px; }
.rm-band.green  { background: var(--status-success-bg); color: var(--status-success); }
.rm-band.yellow { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.rm-band.red    { background: var(--status-danger-bg); color: var(--status-danger); }

/* ---- Assessment step strip (4-step progressive flow) ---- */
.assess-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .assess-strip { grid-template-columns: repeat(2, 1fr); } }
.assess-step { border: 1px solid var(--gray-200); border-radius: var(--r-md); padding: 14px; background: var(--surface); position: relative; }
.assess-step .as-num { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.08em; }
.assess-step .as-title { font-size: var(--fs-sm); font-weight: 650; margin-top: 4px; }
.assess-step .as-vendor { font-size: var(--fs-2xs); color: var(--text-tertiary); margin-top: 2px; }
.assess-step .as-result { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); font-weight: 700; margin-top: 10px; padding: 3px 8px; border-radius: 6px; }
.assess-step.ok { border-color: color-mix(in srgb, var(--status-success) 34%, var(--gray-200)); }
.assess-step.ok .as-result { background: var(--status-success-bg); color: var(--status-success); }
.assess-step.flag .as-result { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.assess-step.fail { border-color: color-mix(in srgb, var(--status-danger) 34%, var(--gray-200)); }
.assess-step.fail .as-result { background: var(--status-danger-bg); color: var(--status-danger); }

/* DPD chip */
.dpd { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.dpd-0 { color: var(--status-success); } .dpd-1 { color: var(--status-warning-fg); }
.dpd-2 { color: var(--status-danger); }

/* mini progress inline */
.mini-bar { width: 84px; height: 6px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.mini-bar .fill { height: 100%; border-radius: inherit; background: var(--blue-600); }

/* ---- Segmentation / breakdown panel ---- */
.seg-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--gray-100); }
.seg-row:last-child { border-bottom: none; }
.seg-row .seg-lab { font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.seg-row .seg-track { height: 8px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.seg-row .seg-fill { height: 100%; border-radius: inherit; }
.seg-row .seg-val { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.seg-row .seg-cnt { font-size: var(--fs-2xs); color: var(--text-tertiary); }

/* ---- Metric list (key: value rows) ---- */
.metric-list { display: grid; gap: 0; }
.metric-list .ml-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--gray-100); }
.metric-list .ml-row:last-child { border-bottom: none; }
.metric-list .ml-k { color: var(--text-secondary); }
.metric-list .ml-v { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }

/* ---- Priority / collections queue item ---- */
.pq-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--gray-100); cursor: pointer; }
.pq-item:last-child { border-bottom: none; }
.pq-item:hover { background: var(--gray-100); }
.pq-flag { width: 4px; align-self: stretch; border-radius: 999px; }

/* ---- Funnel ---- */
.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel .fn-row { display: grid; grid-template-columns: 130px 1fr 56px; gap: 12px; align-items: center; }
.funnel .fn-lab { font-size: var(--fs-sm); font-weight: 600; }
.funnel .fn-bar-wrap { background: var(--gray-100); border-radius: 6px; height: 34px; overflow: hidden; }
.funnel .fn-bar { height: 100%; display: flex; align-items: center; padding-left: 12px; color: var(--text-on-action); font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; border-radius: 6px; transition: width 700ms var(--ease-out); }
.funnel .fn-pct { font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Tab strip ---- */
/* overflow-y: hidden because overflow-x: auto makes the strip a scroll box in both
   directions, and the tabs' -1px margin over a fractional line height leaves them
   1px taller than it: Windows then draws a vertical scrollbar beside the tabs. */
.tabstrip { display: flex; gap: 4px; flex-wrap: wrap; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--gray-200); margin-bottom: var(--sp-5); }
.tabstrip button, .tabstrip a {
  padding: 10px 16px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.tabstrip button:hover, .tabstrip a:hover { color: var(--navy-800); }
.tabstrip button.active, .tabstrip a.active { color: var(--blue-700); border-bottom-color: var(--blue-600); }

/* ---- Ledger row ---- */
.ledger-amt.credit { color: var(--status-success); }
.ledger-amt.debit { color: var(--text-primary); }

/* Let grid/flex children shrink so inner tables scroll instead of overflowing the page */
.two-col > *, .charts-grid > *, .detail-layout > *, .book-top > *,
.kpi-grid-5 > *, .app-content .card { min-width: 0; }

/* dense KPI grid helper */
.kpi-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .kpi-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .kpi-grid-5 { grid-template-columns: repeat(2, 1fr); } }

/* section label */
.sec-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--sp-3); }


/* ============================================================
   L2 · FORM — additions
   ============================================================ */

/* ---- Field: label + required + control + hint + error ---- */
.field-label { display:flex; align-items:baseline; gap:6px; font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); margin-bottom:6px; }
.req { color:var(--status-danger); font-weight:700; line-height:1; }
.optional { color:var(--text-tertiary); font-weight:500; font-size:var(--fs-xs); }
.field-hint { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:5px; line-height:1.45; }
.field-error { display:flex; align-items:flex-start; gap:5px; font-size:var(--fs-xs); color:var(--status-danger); margin-top:5px; font-weight:500; }
.field-error::before { content:"!"; flex:none; width:14px; height:14px; border-radius:50%; background:var(--status-danger); color:var(--text-on-action); font-size:10px; font-weight:700; display:grid; place-items:center; margin-top:1px; }
.is-invalid .input, .input.is-invalid, .is-invalid select, .is-invalid textarea { border-color:var(--status-danger); background:var(--status-danger-bg); }
.is-invalid .input:focus, .input.is-invalid:focus { box-shadow:0 0 0 3px color-mix(in srgb, var(--status-danger) 14%, transparent); }
.field-row { display:grid; gap:var(--sp-4); }
@media (min-width:640px){
  .field-row-2 { grid-template-columns:1fr 1fr; }
  .field-row-3 { grid-template-columns:1fr 1fr 1fr; }
  .field-row-21 { grid-template-columns:2fr 1fr; }
}
fieldset.fieldset { border:1px solid var(--gray-200); border-radius:var(--r-md); padding:var(--sp-5); margin:0; }
fieldset.fieldset > legend { padding:0 var(--sp-2); font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); }

/* ---- Prefix / suffix affix ---- */
.affix { position:relative; display:block; }
.affix > .input { padding-left:30px; }
.affix-suffix > .input { padding-left:14px; padding-right:44px; }
.affix-mark { position:absolute; top:50%; transform:translateY(-50%); left:12px; color:var(--text-tertiary); font-size:var(--fs-sm); pointer-events:none; }
.affix-suffix .affix-mark { left:auto; right:12px; }

/* ---- Masked / sensitive input ---- */
.input-secure { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.pii-tag { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--status-warning-fg); background:var(--status-warning-bg); border-radius:var(--r-pill); padding:1px 7px; }

/* ---- File drop ---- */
.filedrop { border:1.5px dashed var(--gray-300); border-radius:var(--r-lg); background:var(--gray-100); padding:var(--sp-8) var(--sp-5); text-align:center; transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.filedrop:hover, .filedrop.is-over { border-color:var(--blue-600); background:var(--blue-050); }
.filedrop-icon { width:44px; height:44px; border-radius:var(--r-md); background:var(--white); border:1px solid var(--gray-200); display:grid; place-items:center; margin:0 auto var(--sp-3); }
.filelist { display:flex; flex-direction:column; gap:8px; margin-top:var(--sp-4); }
.fileitem { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--gray-200); border-radius:var(--r-sm); background:var(--white); font-size:var(--fs-sm); }
.fileitem .fname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fileitem .fsize { color:var(--text-tertiary); font-size:var(--fs-xs); }

/* ---- Consent block ---- */
.consent { display:flex; gap:11px; align-items:flex-start; padding:var(--sp-4); border:1px solid var(--gray-200); border-radius:var(--r-md); background:var(--white); }
.consent input[type=checkbox] { margin-top:3px; flex:none; }
.consent-body { font-size:var(--fs-sm); line-height:1.55; color:var(--text-secondary); }
.consent-body strong { color:var(--text-primary); }
/* A consent the borrower must give before they can continue. It was marked with
   a colored left edge, which is decoration standing in for a statement: the
   stripe cannot say what it means. The whole block carries the tint instead,
   and C.ConsentCheck says "Required" in words beside the box. */
.consent.is-required { border-color: var(--gray-300); background: var(--gray-50); }
.consent-required-tag {
  display: inline-block; margin-left: 6px;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---- Validation summary ---- */
.validation-summary { border:1px solid var(--status-danger); background:var(--status-danger-bg); border-radius:var(--r-md); padding:var(--sp-4); }
.validation-summary h4 { font-size:var(--fs-sm); color:var(--status-danger); margin:0 0 6px; }
.validation-summary ul { margin:0; padding-left:18px; font-size:var(--fs-sm); color:var(--text-secondary); }
.validation-summary a { color:var(--status-danger); }

/* ============================================================
   L3 · DATA DISPLAY — additions
   ============================================================ */

/* ---- As-at stamp: every Bryt-sourced figure carries one (SOW 3.3) ---- */
.as-at { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); color:var(--text-tertiary); }
.as-at::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--status-success); flex:none; }
.as-at.is-stale { color:var(--status-warning-fg); font-weight:600; }
.as-at.is-stale::before { background:var(--status-warning); }
.as-at.is-failed { color:var(--status-danger); font-weight:600; }
.as-at.is-failed::before { background:var(--status-danger); }

/* ---- Empty / error / warning state blocks ---- */
.state-block { text-align:center; padding:var(--sp-12) var(--sp-6); border:1px dashed var(--gray-300); border-radius:var(--r-lg); background:var(--gray-100); }
.state-block .state-icon { width:48px; height:48px; border-radius:var(--r-md); display:grid; place-items:center; margin:0 auto var(--sp-4); background:var(--white); border:1px solid var(--gray-200); }
.state-block h3 { font-size:var(--fs-h4); margin:0 0 6px; }
.state-block p { font-size:var(--fs-sm); color:var(--text-secondary); max-width:44ch; margin:0 auto; line-height:1.6; }
.state-block .btn { margin-top:var(--sp-5); }
.state-error { border-color:color-mix(in srgb, var(--status-danger) 35%, transparent); background:var(--status-danger-bg); }
.state-error .state-icon { border-color:color-mix(in srgb, var(--status-danger) 30%, transparent); }
.state-warn { border-color:color-mix(in srgb, var(--status-warning) 35%, transparent); background:var(--status-warning-bg); }

/* ---- Skeleton ---- */
.skel { background:linear-gradient(90deg,var(--navy-050) 25%,var(--white) 50%,var(--navy-050) 75%); background-size:200% 100%; animation:skel 1.4s linear infinite; border-radius:var(--r-sm); height:12px; }
.skel-line { height:12px; margin-bottom:9px; }
.skel-line:last-child { width:60%; }
.skel-block { height:96px; }
@keyframes skel { to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .skel { animation:none; } }

/* ---- Spinner ---- */
.spinner { width:18px; height:18px; border:2px solid var(--navy-100); border-top-color:var(--blue-600); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:-3px; }
.spinner-lg { width:34px; height:34px; border-width:3px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spinner { animation-duration:2.4s; } }

/* ---- Definition list ---- */
.deflist { display:grid; gap:0; margin:0; }
.deflist > div { display:flex; justify-content:space-between; gap:var(--sp-4); padding:10px 0; border-bottom:1px solid var(--gray-200); font-size:var(--fs-sm); }
.deflist > div:last-child { border-bottom:0; }
.deflist dt { color:var(--text-secondary); }
.deflist dd { margin:0; font-weight:600; text-align:right; color:var(--text-primary); }
.deflist-boxed { border:1px solid var(--gray-200); border-radius:var(--r-md); padding:0 var(--sp-4); background:var(--white); }

/* ---- Timeline ---- */
.timeline { position:relative; padding-left:26px; }
.timeline::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--gray-200); }
.tl-item { position:relative; padding-bottom:var(--sp-5); }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:""; position:absolute; left:-24px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--white); border:2px solid var(--gray-300); }
.tl-item.is-done::before { background:var(--status-success); border-color:var(--status-success); }
.tl-item.is-active::before { background:var(--blue-600); border-color:var(--blue-600); box-shadow:0 0 0 4px var(--blue-100); }
.tl-item.is-failed::before { background:var(--status-danger); border-color:var(--status-danger); }
.tl-title { font-size:var(--fs-sm); font-weight:600; }
.tl-meta { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; }

/* ---- Stepper ---- */
.stepper { display:flex; align-items:center; gap:0; }
.stepper-step { display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--text-tertiary); font-weight:600; }
.stepper-num { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--navy-050); color:var(--text-tertiary); font-size:var(--fs-2xs); font-weight:700; flex:none; }
.stepper-step.is-active { color:var(--text-primary); }
.stepper-step.is-active .stepper-num { background:var(--blue-600); color:var(--text-on-action); }
.stepper-step.is-done .stepper-num { background:var(--blue-100); color:var(--blue-700); }
.stepper-bar { flex:1; height:2px; background:var(--gray-200); margin:0 12px; min-width:16px; }
.stepper-step.is-done + .stepper-bar { background:var(--blue-500); }

/* ---- Pagination + filter bar ---- */
.pagination { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); }
.pagination button { min-width:32px; height:32px; border:1px solid var(--gray-200); background:var(--white); border-radius:var(--r-sm); cursor:pointer; font-size:var(--fs-sm); color:var(--text-secondary); }
.pagination button[aria-current="page"] { background:var(--navy-900); color:var(--text-on-action); border-color:var(--navy-900); font-weight:700; }
.pagination button:disabled { opacity:.4; cursor:not-allowed; }
/* .filterbar is defined once, in the officer console section below. */

/* ---- Callout ---- */
.callout { display:flex; gap:11px; padding:var(--sp-4); border-radius:var(--r-md); font-size:var(--fs-sm); line-height:1.55; border:1px solid; }
.callout-icon { flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--text-on-action); margin-top:1px; }
.callout-info { background:var(--status-info-bg); border-color:color-mix(in srgb, var(--status-info) 20%, transparent); color:var(--text-secondary); }
.callout-info .callout-icon { background:var(--status-info); }
.callout-warn { background:var(--status-warning-bg); border-color:color-mix(in srgb, var(--status-warning) 25%, transparent); color:var(--status-warning-ink); }
.callout-warn .callout-icon { background:var(--status-warning); }
.callout-danger { background:var(--status-danger-bg); border-color:color-mix(in srgb, var(--status-danger) 25%, transparent); color:var(--status-danger-ink); }
.callout-danger .callout-icon { background:var(--status-danger); }
.callout-success { background:var(--status-success-bg); border-color:color-mix(in srgb, var(--status-success) 25%, transparent); color:var(--blue-800); }
.callout-success .callout-icon { background:var(--status-success); }

/* ---- Linear progress ---- */
.progress-linear { height:6px; border-radius:var(--r-pill); background:var(--navy-050); overflow:hidden; }
.progress-linear > span { display:block; height:100%; background:var(--blue-600); border-radius:var(--r-pill); transition:width var(--dur-slow) var(--ease-out); }

/* ============================================================
   L4 · DOMAIN
   ============================================================ */

/* ---- OfferMatrix: term x frequency (SOW 6.4.1) ---- */
.offer-matrix { border:1px solid var(--gray-200); border-radius:var(--r-lg); overflow:hidden; background:var(--white); }
.offer-matrix table { width:100%; border-collapse:collapse; }
.offer-matrix th, .offer-matrix td { padding:12px 14px; text-align:center; font-size:var(--fs-sm); border-bottom:1px solid var(--gray-200); }
.offer-matrix thead th { background:var(--navy-050); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); }
.offer-matrix tbody th { text-align:left; font-weight:600; background:var(--gray-100); }
.offer-cell { cursor:pointer; transition:background var(--dur-fast) var(--ease-out); }
.offer-cell:hover { background:var(--blue-050); }
.offer-cell.is-selected { background:var(--blue-600); color:var(--text-on-action); font-weight:700; }
.offer-cell .amt { display:block; font-family:var(--font-display); font-size:1.15rem; font-weight:600; }
.offer-cell .sub { display:block; font-size:var(--fs-2xs); opacity:.75; margin-top:2px; }

/* ---- TILA disclosure, federal box format (SOW 6.4.1) ---- */
.tila { border:2px solid var(--navy-900); border-radius:var(--r-sm); overflow:hidden; background:var(--white); }
.tila-grid { display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .tila-grid { grid-template-columns:repeat(4,1fr); } }
.tila-cell { padding:var(--sp-4); border-right:1px solid var(--navy-900); border-bottom:1px solid var(--navy-900); text-align:center; }
.tila-cell:last-child { border-right:0; }
.tila-label { font-size:var(--fs-2xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.tila-sub { font-size:var(--fs-2xs); color:var(--text-tertiary); line-height:1.35; margin-top:3px; min-height:2.4em; }
.tila-value { font-family:var(--font-display); font-size:1.5rem; font-weight:600; margin-top:8px; }
.tila-foot { padding:var(--sp-4); font-size:var(--fs-xs); line-height:1.6; color:var(--text-secondary); }
.legal-placeholder { border:1.5px dashed var(--amber-500); background:var(--amber-050); border-radius:var(--r-md); padding:var(--sp-4); font-size:var(--fs-sm); color:var(--status-warning-ink); }

/* ---- Document page: agreement, adverse action, notices ---- */
.doc-page { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r-md); padding:var(--sp-8); font-size:var(--fs-sm); line-height:1.7; color:var(--text-secondary); max-width:74ch; }
.doc-page h2, .doc-page h3 { color:var(--text-primary); }
.doc-head { border-bottom:1px solid var(--gray-200); padding-bottom:var(--sp-4); margin-bottom:var(--sp-5); }

/* Licensing (C.LicensingCards): the client's certificates, as issued. */
.licensing { display:grid; gap:var(--sp-4); }
.lic-nmls, .lic-card { border:1px solid var(--gray-200); border-radius:var(--r-lg); background:var(--white); color:inherit; text-decoration:none; transition:border-color var(--dur-fast) ease, box-shadow var(--dur-med) ease, transform var(--dur-med) var(--ease-out); }
.lic-nmls:hover, .lic-card:hover { border-color:var(--blue-600); box-shadow:var(--shadow-md); text-decoration:none; }
.lic-card:hover { transform:translateY(-2px); }
.lic-nmls:focus-visible, .lic-card:focus-visible { outline:2px solid var(--blue-600); outline-offset:3px; }
.lic-nmls { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); }
.lic-ic { flex:none; width:40px; height:40px; border-radius:var(--r-md); background:var(--blue-050); color:var(--blue-700); display:grid; place-items:center; }
.lic-nmls-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lic-nmls-body strong { color:var(--text-primary); font-size:1rem; }
.lic-nmls-body span { font-size:var(--fs-sm); color:var(--text-secondary); }
.lic-go { flex:none; color:var(--blue-700); }
.lic-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-4); }
.lic-card { display:flex; flex-direction:column; overflow:hidden; }
.lic-thumb { height:208px; display:grid; place-items:center; padding:var(--sp-4); background:var(--gray-100); border-bottom:1px solid var(--gray-200); }
.lic-thumb img { max-width:100%; max-height:176px; box-shadow:var(--shadow-sm); }
.lic-body { display:flex; flex-direction:column; gap:4px; padding:var(--sp-5); }
.lic-title { font-weight:650; color:var(--text-primary); }
.lic-num { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-tertiary); }
.lic-says { margin-top:4px; font-size:var(--fs-sm); line-height:1.5; color:var(--text-secondary); }
.lic-dates { font-size:var(--fs-xs); color:var(--text-tertiary); }
.lic-link { display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-3); font-size:var(--fs-sm); font-weight:650; color:var(--blue-700); }
.lic-note { margin:0; font-size:var(--fs-xs); color:var(--text-tertiary); }
@media (max-width: 640px) { .lic-grid { grid-template-columns:1fr; } }

/* ---- Payment method card ---- */
.method-card { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4); border:1.5px solid var(--gray-200); border-radius:var(--r-md); background:var(--white); }
.method-card.is-default { border-color:var(--blue-600); background:var(--blue-050); }
.method-icon { width:44px; height:30px; border-radius:5px; background:var(--navy-900); color:var(--text-on-action); display:grid; place-items:center; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.04em; flex:none; }
.method-num { font-variant-numeric:tabular-nums; letter-spacing:.04em; white-space:nowrap; }
/* Inside a modal on a phone there is not enough room for the badge on the
   same line: it wraps beneath rather than squeezing the account details. */
@media (max-width: 560px) {
  .method-card { flex-wrap: wrap; gap: var(--sp-3); }
  .method-card .badge { order: 3; }
  /* Two classes deep so it beats the base .method-body rule that follows
     this block: a media query carries no extra specificity of its own. */
  .method-card .method-body { flex: 1 1 60%; }
}

/* ---- Payment network / rail marks ---- */
.method-mark { width:48px; height:32px; border-radius:6px; border:1px solid var(--gray-200); background:var(--white); display:inline-grid; place-items:center; flex:none; font-size:11px; font-weight:800; letter-spacing:.05em; }
.mm-visa { color:var(--mark-visa); font-style:italic; }
.mm-mc { position:relative; }
.mm-mc i { width:15px; height:15px; border-radius:50%; position:absolute; top:50%; transform:translateY(-50%); }
.mm-mc i:first-child { left:9px; background:var(--mark-mc-red); }
.mm-mc i:last-child { right:9px; background:var(--mark-mc-gold); opacity:.92; mix-blend-mode:multiply; }
.mm-ach { color:var(--navy-700); background:var(--navy-050); border-color:var(--navy-100); }

/* ---- Choice cards: two comparable options, one possibly flagged ---- */
.choice-card .cc-title { display: block; font-weight: 650; font-size: var(--fs-sm); padding-right: 26px; }
.choice-card .cc-headline { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 5px; }
.choice-card .cc-sub { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 3px; }
.choice-badge { position: absolute; top: -10px; left: var(--sp-4); z-index: 1; background: var(--blue-600); color: var(--text-on-action); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); }
.choice-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .choice-grid-2 { grid-template-columns: 1fr; } }

/* ---- Modal close: a comfortable target, not a stray glyph ---- */
.modal-close { flex: none; width: 40px; height: 40px; margin: -6px -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-tertiary); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.modal-close:hover { background: var(--gray-100); color: var(--navy-900); }
.modal-close:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* ---- Feature cards: what a page holds, said before the detail ---- */
.feature-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) { .feature-cards { grid-template-columns: 1fr; } }
.feature-card { display: block; background: var(--gray-100); border-radius: var(--r-lg); padding: var(--sp-6); color: inherit; text-decoration: none; transition: background-color var(--dur-fast) ease; }
button.feature-card { width: 100%; text-align: left; border: 0; font: inherit; cursor: pointer; }
a.feature-card:hover, button.feature-card:not([disabled]):hover { background: var(--blue-050); text-decoration: none; }
a.feature-card:focus-visible, button.feature-card:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
button.feature-card[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Modal head, note and the processed-by footer ---- */
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--gray-200); margin-bottom: var(--sp-5); }
.modal-head h2 { margin: 0; font-size: var(--fs-h3); }
.modal-note { font-weight: 650; font-size: var(--fs-sm); margin: 0 0 var(--sp-5); }
.modal-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: var(--sp-6) calc(var(--sp-8) * -1) calc(var(--sp-8) * -1);
  padding: var(--sp-4); border-top: 1px solid var(--gray-200); background: var(--gray-50);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary);
}
.modal-foot svg { color: var(--status-success); }

/* ---- Hero split: message beside a figure that carries real data ---- */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-12); align-items: center; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: var(--sp-8); } }
.hero-art { display: grid; place-items: center; }
.fc-ic { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--white); color: var(--blue-700); display: grid; place-items: center; margin-bottom: var(--sp-5); }
.fc-title { display: block; font-weight: 650; font-size: var(--fs-h4); }
.fc-body { display: block; font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 6px; line-height: 1.55; }

/* ---- Dismissible page banner ---- */
.page-banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--gray-200); border-radius: var(--r-md); background: var(--white); font-size: var(--fs-sm); }
.page-banner .pb-ic { width: 20px; height: 20px; border-radius: 50%; background: var(--blue-600); color: var(--text-on-action); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.page-banner .modal-close { margin-left: auto; }

/* ---- Method options: the chooser rows inside the modal ---- */
.method-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--gray-200); border-radius: var(--r-md); background: var(--white); color: inherit; text-decoration: none; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.method-option + .method-option { margin-top: var(--sp-3); }
.method-option:hover { border-color: var(--blue-600); background: var(--blue-050); text-decoration: none; }
.method-option:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.mo-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--blue-050); color: var(--blue-700); display: grid; place-items: center; flex: none; }
.mo-title { display: block; font-weight: 650; }
.mo-sub { display: block; font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 1px; }
.mo-desc { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 6px; line-height: 1.5; }
.method-option .brk-chev { align-self: center; }

/* ---- Add-a-method page: hero mark and the two-column opening ---- */
.add-open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
@media (max-width: 900px) { .add-open { grid-template-columns: 1fr; gap: var(--sp-8); } }
.add-mark { width: 92px; height: 92px; border-radius: 50%; background: var(--blue-600); color: var(--text-on-action); display: grid; place-items: center; margin-bottom: var(--sp-6); }
.add-mark svg { width: 42px; height: 42px; }
.add-lede, .page-lede { font-family: var(--font-display); font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 600; letter-spacing: -0.028em; line-height: 1.1; margin: 0; }
.add-note { color: var(--blue-700); font-weight: 600; font-size: 1.05rem; margin-top: var(--sp-4); }

/* ---- Secure note: the lock line under any button that moves money ---- */
.secure-note { display:flex; align-items:flex-start; justify-content:center; gap:7px; font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:var(--sp-3); line-height:1.5; }
.secure-note svg { color:var(--status-success); flex:none; margin-top:2px; }

/* ---- Trust panel: security assurances, spelled out ---- */
.trust-panel .trust-title { display:flex; align-items:center; gap:9px; }
.trust-panel .trust-title svg { color:var(--status-success); flex:none; }
.trust-panel .trust-title h3 { margin:0; font-size:var(--fs-h4); }
.trust-row { display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--gray-100); font-size:var(--fs-sm); }
.trust-title + .trust-row { border-top:0; margin-top:var(--sp-3); }
.trust-row:last-child { padding-bottom:0; }
.trust-row svg { flex:none; margin-top:2px; color:var(--blue-600); }
.trust-row p { margin:2px 0 0; color:var(--text-secondary); font-size:var(--fs-xs); line-height:1.5; }

/* ---- Secure flag: the lock in the application header ---- */
.secure-flag { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:7px 13px; border-radius:var(--r-pill); background:var(--status-success-bg); color:var(--status-success); font-size:var(--fs-xs); font-weight:650; }
.secure-flag svg { flex:none; }
@media (max-width: 480px) { .secure-flag span { display:none; } .secure-flag { padding:7px 9px; } }

/* ---- Funnel progress: where the applicant stands, on every auth step ---- */
.funnel-progress { margin-bottom: var(--sp-5); }
.fp-track { height: 5px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.fp-track span { display: block; height: 100%; background: var(--blue-600); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }
.fp-label { display: block; font-size: var(--fs-2xs); color: var(--text-tertiary); margin-top: 6px; text-align: center; letter-spacing: .02em; }

/* ---- Vendor rails: the processors named on the marketing site ---- */
.rail-row { display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-8); align-items:flex-start; }
.rail-chip { display:flex; flex-direction:column; gap:2px; min-width:130px; }
.rail-chip strong { font-size:1.05rem; letter-spacing:-0.01em; color:var(--navy-800); font-weight:750; }
.rail-chip span { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.45; }

/* ---- Help strip: a person answers ---- */
.help-strip { display:flex; gap:12px; align-items:flex-start; padding:var(--sp-4) var(--sp-5); border:1px solid var(--gray-200); border-radius:var(--r-md); background:var(--white); font-size:var(--fs-sm); }
.help-strip svg { flex:none; margin-top:3px; color:var(--blue-600); }
.help-strip strong { display:block; }
.help-strip span { color:var(--text-secondary); font-size:var(--fs-xs); line-height:1.55; }

/* ---- Statement tables: totals row + settled/next row states ---- */
.table tfoot td { padding:12px 16px; border-top:2px solid var(--gray-200); font-weight:650; font-variant-numeric:tabular-nums; background:var(--gray-100); }
.row-settled td { color:var(--text-tertiary); }
.row-settled td .badge { opacity:.85; }
.row-current td { background:var(--blue-050); }

/* ---- Receipt (rendered inside the modal) ---- */
.receipt { text-align:left; }
.receipt-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; padding-bottom:var(--sp-4); border-bottom:1px solid var(--gray-200); margin-bottom:var(--sp-4); }
.receipt-ref { font-size:var(--fs-xs); color:var(--text-tertiary); }
.receipt-amount { font-family:var(--font-display); font-size:2.1rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1; }
.receipt-status { margin:6px 0 var(--sp-3); }
.method-body { flex:1; min-width:0; }
.method-title { font-size:var(--fs-sm); font-weight:600; }
.method-sub { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; }

/* ---- Autopay enrolment ---- */
.autopay { border:1px solid var(--blue-600); background:var(--blue-050); border-radius:var(--r-lg); padding:var(--sp-5); }
.autopay-head { display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-4); }
.autopay-head h3 { margin:0; font-size:var(--fs-h4); }

/* ---- Bryt deep link (SOW 7.2.3) ---- */
.bryt-link { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--navy-600); border-radius:var(--r-sm); background:var(--white); color:var(--navy-700); font-size:var(--fs-sm); font-weight:600; text-decoration:none; }
.bryt-link:hover { background:var(--navy-050); }

/* ---- Sync status (SOW 7.3.3 / 8.3.1) ---- */
.sync-status { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4); border:1px solid var(--gray-200); border-radius:var(--r-md); background:var(--white); }
.sync-dot { width:10px; height:10px; border-radius:50%; flex:none; }
.sync-ok .sync-dot { background:var(--status-success); }
.sync-warn .sync-dot { background:var(--status-warning); }
.sync-fail .sync-dot { background:var(--status-danger); }
.sync-body { flex:1; }
.sync-title { font-size:var(--fs-sm); font-weight:600; }
.sync-meta { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; }

/* ---- Import preview (SOW 10.1) ---- */
.import-legend { display:flex; flex-wrap:wrap; gap:var(--sp-5); font-size:var(--fs-sm); }
.import-legend span { display:inline-flex; align-items:center; gap:6px; }
.import-legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.row-matched   { background:var(--status-success-bg); }
.row-unmatched { background:var(--status-warning-bg); }
.row-duplicate { background:var(--status-danger-bg); }
.i-matched { background:var(--status-success); }
.i-unmatched { background:var(--status-warning); }
.i-duplicate { background:var(--status-danger); }
.colmap { display:grid; gap:10px; }
.colmap-row { display:grid; grid-template-columns:1fr 24px 1fr; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--gray-200); border-radius:var(--r-sm); background:var(--white); font-size:var(--fs-sm); }
.colmap-arrow { text-align:center; color:var(--text-tertiary); }

/* ---- Notice preview: SMS / email (SOW 6.6) ---- */
.notice-preview { border:1px solid var(--gray-200); border-radius:var(--r-md); background:var(--white); overflow:hidden; }
.notice-head { padding:10px var(--sp-4); background:var(--navy-050); border-bottom:1px solid var(--gray-200); font-size:var(--fs-xs); color:var(--text-tertiary); }
.notice-body { padding:var(--sp-4); font-size:var(--fs-sm); line-height:1.6; color:var(--text-secondary); }
.sms-bubble { max-width:300px; background:var(--navy-050); border-radius:16px 16px 16px 4px; padding:11px 14px; font-size:var(--fs-sm); line-height:1.5; }

/* ============================================================
   L4 · BORROWER DASHBOARD
   ------------------------------------------------------------
   A persistent action rail beside a divided reading column:
   the balance first, then what is due, then what has happened.
   Sections are separated by hairlines rather than stacked cards,
   which is how a bank presents an account and how this platform
   avoids the box-inside-box look.
   ============================================================ */
.dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  grid-template-areas: "top rail" "rest rail";
  column-gap: var(--sp-8);
  align-items: start;
}
.dash-top { grid-area: top; min-width: 0; }
.dash-rest { grid-area: rest; min-width: 0; }
.dash-rail {
  grid-area: rail;
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
  align-self: start;
  border-left: 1px solid var(--gray-200);
  padding-left: var(--sp-6);
}
/* The rail costs 366px and the officer/borrower sidebar costs another 248,
   so the two-column split only earns its place once the reading column can
   still hold a breakdown row comfortably. Below that the rail stacks second,
   directly under the balance, because paying is the reason people come. */
@media (max-width: 1240px) {
  .dash { grid-template-columns: 1fr; grid-template-areas: "top" "rail" "rest"; row-gap: var(--sp-6); }
  .dash-rail { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--gray-200); padding-top: var(--sp-6); }
}

/* ---- Balance hero ---- */
.dash-balance { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.db-value { font-family: var(--font-display); font-size: clamp(2.1rem, 3.8vw, 2.9rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 2px; }
.db-sub { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 8px; }
.db-trend { text-align: right; }
.db-trend-cap { font-size: var(--fs-2xs); color: var(--text-tertiary); margin-top: 2px; }

/* ---- Breakdown rows: what is due, what is set up, what closes it ---- */
.brk { margin-top: var(--sp-6); border-top: 1px solid var(--gray-200); }
.brk-row {
  display: grid;
  grid-template-columns: auto minmax(110px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--gray-100);
  border-radius: var(--r-sm);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease;
}
.brk-row:hover { background: var(--gray-100); text-decoration: none; }
.brk-row:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.brk-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--blue-050); color: var(--blue-700); display: grid; place-items: center; flex: none; }
.brk-name { font-weight: 600; }
.brk-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-4); align-items: baseline; }
.brk-k { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); }
.brk-v { font-weight: 650; font-variant-numeric: tabular-nums; }
.brk-v.is-danger { color: var(--status-danger); }
.brk-chev { color: var(--text-tertiary); display: grid; }
@media (max-width: 760px) {
  .brk-row { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--sp-4) var(--sp-2); }
  .brk-meta { grid-template-columns: 1fr; gap: 2px; }
  .brk-name { grid-column: 2; }
  .brk-meta { grid-column: 2; }
}

/* ---- Stat cards: a row of figures that opens a screen ---- */
.stat-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.stat-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .stat-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-3); padding-bottom: 4px; }
  .stat-cards > * { scroll-snap-align: start; min-width: 168px; flex: none; }
}
.stat-card { background: var(--gray-100); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.sc-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: var(--blue-700); display: grid; place-items: center; margin-bottom: var(--sp-4); }
.sc-ic.is-success { color: var(--status-success); }
.sc-ic.is-warning { color: var(--status-warning-fg); }
.sc-k { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--text-tertiary); }
.sc-v { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 5px; line-height: 1.15; }
.sc-d { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 3px; }
.sc-spark { display: block; margin-top: var(--sp-3); }
.sc-spark svg { display: block; width: 100%; height: 30px; }
/* A stat that is also the way into the screen behind it. */
.stat-card.is-link { position: relative; color: inherit; text-decoration: none; transition: background-color var(--dur-fast) ease; }
.stat-card.is-link:hover { background: var(--blue-050); text-decoration: none; }
.stat-card.is-link:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.stat-card.is-link .brk-chev { position: absolute; top: var(--sp-4); right: var(--sp-4); }

/* ---- Schedule rows: the installment list, with its detail on selection ----
   An eight-column amortisation table never fitted beside the rail. The list
   carries the date, what it is and the amount; principal, interest and the
   balance after belong to the one row you are actually asking about. */
.list-month { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--text-tertiary); padding: var(--sp-5) var(--sp-2) var(--sp-2); }
.sched-row {
  display: grid; grid-template-columns: auto minmax(74px, auto) minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--sp-4);
  width: 100%; text-align: left; cursor: pointer; color: inherit;
  background: none; border: 0; border-bottom: 1px solid var(--gray-100);
  padding: 13px var(--sp-2); border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) ease;
}
.sched-row:hover { background: var(--gray-100); }
.sched-row:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.sched-row.is-next { background: var(--blue-050); }
.sched-row.is-selected { background: var(--blue-050); box-shadow: inset 3px 0 0 var(--blue-600); }
.sched-date { font-weight: 600; font-variant-numeric: tabular-nums; }
.sched-title { display: block; font-weight: 600; }
.sched-sub { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.sched-amt { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sched-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--gray-100); color: var(--text-tertiary); }
.sched-ic.is-paid { background: var(--status-success-bg); color: var(--status-success); }
.sched-ic.is-next { background: var(--blue-100); color: var(--blue-700); }
@media (max-width: 700px) {
  .sched-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; }
  .sched-date { grid-column: 2; grid-row: 1; font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: 500; }
  .sched-row > .sched-body { grid-column: 2; grid-row: 2; }
  .sched-amt { grid-column: 3; grid-row: 1 / span 2; }
  .sched-row .brk-chev { display: none; }
}

/* ---- Manage strip: the few things you can change from a list screen ---- */
.manage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 760px) { .manage-grid { grid-template-columns: 1fr; } }
.manage-tile { position: relative; display: block; padding: var(--sp-4); border: 1px solid var(--gray-200); border-radius: var(--r-md); background: var(--white); color: inherit; text-decoration: none; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.manage-tile:hover { border-color: var(--blue-600); background: var(--blue-050); text-decoration: none; }
.manage-tile:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.mt-ic { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--blue-050); color: var(--blue-700); display: grid; place-items: center; }
.manage-tile:hover .mt-ic { background: var(--white); }
.mt-flag { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.mt-label { display: block; font-weight: 600; margin-top: var(--sp-4); }
.mt-sub { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }

/* ---- Filter pills ---- */
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.pill-select {
  appearance: none; border: 0; cursor: pointer;
  background-color: var(--gray-100); border-radius: var(--r-pill);
  padding: 9px 34px 9px 15px; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-800);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234E5D6E' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.pill-select:hover { background-color: var(--gray-200); }
.pill-select:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.pill-select.is-set { background-color: var(--blue-050); color: var(--blue-700); }
.filter-count { font-size: var(--fs-sm); color: var(--text-tertiary); margin-left: auto; }

/* ---- Activity rows: a ledger read as a list, not a grid of cells ---- */
.txn-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(96px, auto) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--gray-100); }
.txn-row:last-child { border-bottom: 0; }
.txn-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--status-success-bg); color: var(--status-success); }
.txn-ic.is-failed { background: var(--status-danger-bg); color: var(--status-danger); }
.txn-ic.is-retrying { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.txn-title { font-weight: 650; }
.txn-sub { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.txn-amt { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.txn-amt.is-out { color: var(--status-danger); }
.txn-amt-sub { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text-tertiary); margin-top: 3px; }
.txn-date { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The principal and interest split sits under the amount on a wide screen.
   On a narrow one it would squeeze the title, so it moves under the title
   instead and the amount column carries the figure alone. */
.txn-split { display: none; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 3px; }
@media (max-width: 860px) {
  /* The receipt button is wider than the amount, so leaving it in the last
     column would set that column's width and squeeze the title. It gets its
     own row instead, and the last column is sized by the figure alone. */
  .txn-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: var(--sp-2); }
  .txn-date { grid-column: 2; grid-row: 2; }
  .txn-row .txn-receipt { grid-column: 2; grid-row: 3; justify-self: start; margin-left: -8px; }
  .txn-amt .txn-amt-sub { display: none; }
  .txn-split { display: block; }
}

/* ---- Divided sections ---- */
.dash-section { border-top: 1px solid var(--gray-200); margin-top: var(--sp-8); padding-top: var(--sp-6); }
/* The heading never breaks mid-phrase; on a narrow screen the caption or link
   beside it drops underneath instead. */
.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.dash-section-head h2 { flex: none; }
.dash-section-head h2 { font-size: var(--fs-h3); margin: 0; }

/* ---- Payment rows (the ledger table stays on the history screen) ---- */
.pay-row { display: grid; grid-template-columns: minmax(92px, auto) minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--sp-4); padding: 12px var(--sp-2); border-bottom: 1px solid var(--gray-100); }
.pay-row:last-child { border-bottom: 0; }
.pr-date { font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-method { display: inline-flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: var(--fs-sm); }
.pr-amount { font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .pay-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .pr-method { grid-column: 1; grid-row: 2; }
  .pr-amount { grid-column: 2; grid-row: 1; justify-self: end; }
  .pr-status { grid-column: 2; grid-row: 2; justify-self: end; }
  .pr-receipt { display: none; }
}

/* ---- The action rail ---- */
.pp-amount { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pp-sub { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 7px; line-height: 1.5; }
/* The custom amount is the big number itself, not a field below it. */
.pp-input {
  flex: 1; min-width: 0; width: 100%;
  font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.5rem); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
  color: var(--text-primary); background: transparent;
  border: 0; border-bottom: 2px solid var(--gray-300); border-radius: 0;
  padding: 0 0 4px; outline: none;
  transition: border-color var(--dur-fast) ease;
}
.pp-input:focus { border-bottom-color: var(--blue-600); }
.pp-with { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--gray-200); border-radius: var(--r-md); background: var(--white); color: inherit; text-decoration: none; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.pp-with:hover { border-color: var(--blue-600); background: var(--blue-050); text-decoration: none; }
.pp-with .ppw-body { min-width: 0; }
.pp-with .ppw-k { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); }
.pp-with .ppw-v { display: block; font-weight: 600; font-size: var(--fs-sm); margin-top: 1px; }
/* Three choices have to sit on one line inside a 366px rail. */
.segmented.segmented-sm button { padding: 7px 10px; font-size: var(--fs-xs); }
.pp-with .brk-chev { margin-left: auto; }

.qa-list { display: flex; flex-direction: column; gap: 2px; }
.qa-item { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 550; color: inherit; text-decoration: none; transition: background-color var(--dur-fast) ease; }
.qa-item:hover { background: var(--gray-100); text-decoration: none; }
.qa-item:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.qa-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--blue-600); color: var(--text-on-action); display: grid; place-items: center; flex: none; }
.qa-item .brk-chev { margin-left: auto; }

/* ============================================================
   PROTOTYPE-ONLY CHROME — deleted at Next.js conversion
   ============================================================ */

/* ---- Spec mode: the field dictionary rendered inline ---- */
.spec-panel { border:1.5px solid var(--navy-600); border-radius:var(--r-lg); background:var(--white); margin:var(--sp-6) 0; overflow:hidden; }
.spec-head { display:flex; align-items:center; gap:10px; padding:11px var(--sp-4); background:var(--navy-900); color:var(--text-inverse); font-size:var(--fs-sm); font-weight:600; }
.spec-head .sow-ref { margin-left:auto; font-size:var(--fs-xs); color:var(--text-inverse-dim); font-weight:500; }
.spec-body { padding:var(--sp-4); overflow-x:auto; }
.spec-table { width:100%; border-collapse:collapse; font-size:var(--fs-xs); min-width:720px; }
.spec-table th, .spec-table td { padding:7px 9px; border-bottom:1px solid var(--gray-200); text-align:left; vertical-align:top; line-height:1.45; }
.spec-table thead th { background:var(--navy-050); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); white-space:nowrap; }
.spec-table code { font-size:.92em; background:var(--gray-100); padding:1px 4px; border-radius:3px; }
.spec-sub { margin-top:var(--sp-4); font-size:var(--fs-xs); line-height:1.6; color:var(--text-secondary); }
.spec-sub h5 { font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); margin:var(--sp-4) 0 4px; }
.spec-sub ul { margin:0; padding-left:17px; }
body:not(.spec-on) .spec-panel { display:none; }

/* ---- Presenter control: force any state on demand ---- */
.presenter { position:fixed; right:16px; bottom:16px; z-index:900; background:var(--navy-900); color:var(--text-inverse); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); font-size:var(--fs-xs); overflow:hidden; width:250px; }
.presenter-head { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; font-weight:600; }
.presenter-head .dot { width:7px; height:7px; border-radius:50%; background:var(--amber-500); }
.presenter-body { padding:0 12px 12px; display:none; }
.presenter.is-open .presenter-body { display:block; }
.presenter label { display:block; color:var(--text-inverse-dim); margin:9px 0 4px; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; }
.presenter select, .presenter button { width:100%; background:var(--navy-700); color:var(--text-inverse); border:1px solid var(--navy-600); border-radius:var(--r-sm); padding:6px 8px; font-size:var(--fs-xs); cursor:pointer; }
.presenter button:hover { background:var(--navy-600); }
@media print { .presenter { display:none; } }

/* ---- Component gallery ---- */
.gal-section { border-top:1px solid var(--gray-200); padding-top:var(--sp-6); margin-top:var(--sp-8); }
.gal-item { border:1px solid var(--gray-200); border-radius:var(--r-md); background:var(--white); margin-bottom:var(--sp-5); overflow:hidden; }
.gal-item-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:9px var(--sp-4); background:var(--gray-100); border-bottom:1px solid var(--gray-200); }
.gal-item-head h4 { margin:0; font-size:var(--fs-sm); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.gal-note { font-size:var(--fs-xs); color:var(--text-tertiary); }
.gal-demo { padding:var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:flex-start; }
.gal-stack { display:block; }
.gal-stack > * { margin-bottom:var(--sp-4); }

/* ============================================================
   ADDITIONS — kept here rather than in page <style> blocks.
   The POC put hero, lead and range styles inline in index.html;
   that is the duplication this library exists to remove.
   ============================================================ */

/* ---- Lead paragraph ---- */
.lead { font-size: 1.14rem; line-height: 1.62; color: var(--text-secondary); max-width: 56ch; margin-top: var(--sp-5); }

/* ---- Range slider ---- */
.range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:var(--r-pill); background:var(--navy-050); outline:none; margin:var(--sp-3) 0 var(--sp-2); }
.range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--blue-600); border:3px solid var(--white); box-shadow:var(--shadow-action); cursor:pointer; }
.range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--blue-600); border:3px solid var(--white); cursor:pointer; }
.range:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px color-mix(in srgb, var(--blue-600) 22%, transparent); }

/* ---- Disclosure card (FAQ, help copy) ---- */
details.card > summary { list-style:none; display:flex; align-items:center; gap:10px; }
details.card > summary::-webkit-details-marker { display:none; }
details.card > summary::after { content:"+"; margin-left:auto; font-size:1.2rem; color:var(--text-tertiary); line-height:1; }
details.card[open] > summary::after { content:"\2013"; }

/* ---- Screen-reader only ---- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Dense table variant ---- */
.table-dense th, .table-dense td { padding:8px 10px; font-size:var(--fs-xs); }

/* ---- KPI accent ---- */
.kpi-accent { border-color:var(--blue-600); background:var(--blue-050); }

/* ---- Section label inside dark surfaces ---- */
.card-dark .sec-label, .site-footer .sec-label { color:var(--text-inverse-dim); }

/* ---- Sticky page aside ---- */
@media (min-width:961px){ .sticky-aside { position:sticky; top:calc(var(--header-h) + var(--sp-6)); } }

/* ---- ProgressRing center label (POC left this unstyled) ---- */
.ring-wrap { position:relative; display:grid; place-items:center; }
.ring-center strong { display:block; font-family:var(--font-display); font-size:1.55rem; font-weight:600; line-height:1; color:var(--text-primary); }
.ring-center span { display:block; font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:3px; }

.tabstrip a { text-decoration:none; white-space:nowrap; }
.tabstrip a:hover { text-decoration:none; }

/* ---- Prototype chrome must not collide at phone width ---- */
@media (max-width: 560px) {
  .presenter { width: auto; left: auto; right: 12px; bottom: 12px; max-width: 60vw; }
  .presenter-head span:nth-child(2) { display: none; }
  .presenter.is-open { width: 240px; }
  .presenter.is-open .presenter-head span:nth-child(2) { display: inline; }
}

/* ============================================================
   OFFICER CONSOLE (v1.14)
   The loan officer's half of the product. Same materials as the
   borrower portal — filled stat cards, scannable rows, a working
   rail — because it is one institution, not two products.
   ============================================================ */

/* ---- Exception card ----
   Was a colored left border computed inline per row. A stripe is decoration;
   severity here is information, so it is a labelled chip and a tinted mark. */
.exc-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
}
.exc-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.exc-heading { min-width: 0; flex: 1; }
.exc-heading h3 { margin: 0; font-size: var(--fs-base); font-weight: 650; line-height: 1.35; }
.exc-mark {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--status-warning-bg); color: var(--status-warning-fg);
}
.exc-card.is-danger .exc-mark { background: var(--status-danger-bg); color: var(--status-danger); }
.exc-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin-top: 4px; font-size: var(--fs-xs); color: var(--text-tertiary);
}
.exc-meta code { font-size: var(--fs-xs); }
.exc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-300); flex: none; }
/* Everything under the heading lines up with the heading, not with the mark. */
.exc-rest { padding-left: calc(34px + var(--sp-3)); }
@media (max-width: 620px) { .exc-rest { padding-left: 0; } }
.exc-body { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; }

/* Reassurance first: on a failed posting the borrower's money is not at risk,
   and an officer needs to know that before they read the remedy. */
.exc-money {
  display: flex; align-items: flex-start; gap: 9px;
  margin: var(--sp-4) 0 0; padding: 11px var(--sp-4);
  background: var(--status-success-bg); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--status-success-ink, var(--navy-900)); line-height: 1.55;
}
.exc-money svg { flex: none; margin-top: 2px; color: var(--status-success); }

/* The remedy. Was a nested warn Callout inside a card; a card inside a card is
   two frames around one sentence, so this is a plain block on the card. */
.exc-guide { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--gray-200); }
.exc-guide .sec-label { margin-bottom: 5px; }
.exc-guide p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; }

.exc-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ---- Actions inside a table cell ---- */
.row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }

/* ---- Queue row extras (C.QueueRow shares .sched-row) ---- */
.sched-amt-sub { display: block; font-size: var(--fs-2xs); font-weight: 500; color: var(--text-tertiary); margin-top: 1px; }
.sched-row.is-danger .sched-amt { color: var(--status-danger); }

/* ---- Officer rail panel ----
   A card in the rail that groups one job: a figure, a line of context, a
   button. Distinct from .dash-rail, which is the rail itself. */
.rail-block + .rail-block { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--gray-200); }

/* ---- Filter bar refinements ----
   The officer queues live in this control. It sits on grey so the table
   below reads as the content and this reads as the instrument. */
.filterbar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
}
.filterbar .spacer { flex: 1; }
.filterbar .input, .filterbar select { height: 38px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-sm); }
/* .input is width:100% by default so it fills a form column. In the filter bar
   the controls sit side by side, so each one is sized to its own content. */
.filterbar .input { width: auto; min-width: 210px; }
.filterbar select.input { min-width: 165px; padding-right: 34px; }
@media (max-width: 620px) { .filterbar .input, .filterbar select.input { width: 100%; min-width: 0; } }

/* ---- Segmented triage control ----
   Officer queues are filtered by state far more often than by search, so the
   states are one click away rather than inside a dropdown. */
.triage { display: flex; gap: 2px; padding: 3px; background: var(--gray-100); border-radius: var(--r-pill); flex-wrap: wrap; }
.triage a, .triage button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border: 0; background: none; border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-sm); font-weight: 550; color: var(--text-secondary);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.triage a:hover, .triage button:hover { color: var(--navy-900); text-decoration: none; }
.triage a.active, .triage button.active { background: var(--white); color: var(--navy-900); font-weight: 650; box-shadow: var(--shadow-sm); }
.triage .t-count {
  min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--gray-200); color: var(--text-secondary);
  font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
}
.triage .active .t-count { background: var(--blue-050); color: var(--blue-700); }
.triage .t-count.is-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }

/* ---- Officer table shell ----
   A table that belongs to a screen rather than floating on it. */
.table-panel { border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.table-panel .table-wrap { border: 0; border-radius: 0; }
.table-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--gray-200); flex-wrap: wrap;
}
.table-panel-head h2 { margin: 0; font-size: var(--fs-base); font-weight: 650; }
.table-panel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--gray-200);
  background: var(--gray-50); flex-wrap: wrap;
}

/* ---- Record header ----
   Detail screens open with the borrower, the figure, and the standing on one
   line, so an officer knows what they are looking at before they scroll. */
.record-head {
  display: flex; align-items: flex-start; gap: var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-6);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
}
.record-figure { min-width: 0; }
.record-figure .rf-k { display: block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
.record-figure .rf-v {
  display: block; margin-top: 4px;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.record-figure .rf-s { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-tertiary); }
.record-figure .rf-v.is-danger { color: var(--status-danger); }
.record-sep { width: 1px; align-self: stretch; background: var(--gray-200); }
@media (max-width: 720px) { .record-sep { display: none; } .record-head { gap: var(--sp-5); } }

/* ---- Administration section card ----
   The settings screens are long. Each block says what it governs and who it
   affects before it shows a field. */
.set-card { border: 1px solid var(--gray-200); border-radius: var(--r-lg); background: var(--white); overflow: hidden; }
.set-card + .set-card { margin-top: var(--sp-5); }
.set-head { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--gray-200); }
.set-head h2 { margin: 0; font-size: var(--fs-base); font-weight: 650; }
.set-head p { margin: 5px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); max-width: 70ch; line-height: 1.55; }
.set-body { padding: var(--sp-6); }
.set-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--gray-200); background: var(--gray-50); flex-wrap: wrap;
}
/* The hint takes the slack but yields it back before the buttons wrap. */
.set-foot .field-hint { flex: 1 1 13rem; min-width: 0; margin-right: auto; margin-bottom: 0; }

/* ---- Save bar ----
   Settings changes affect live lending, so the commit control is pinned and
   says what it will do rather than sitting at the bottom of a long form. */
.save-bar {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-5);
  background: color-mix(in srgb, var(--white) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  flex-wrap: wrap;
}
.save-bar p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }

/* Secondary lines inside a table cell that carry a caution. Five officer files
   were writing style="color:var(--status-warning)" inline; --status-warning is
   the fill color and fails contrast as text, so it is the -fg pair here. */
.cell-warn { color: var(--status-warning-fg); font-weight: 600; }
.cell-danger { color: var(--status-danger); font-weight: 650; }

/* A loan or application reference is one token. Wrapping it mid-string turns
   an identifier into two half-identifiers, which is worse than a wider column. */
.table code, .sched-date code, .exc-meta code { white-space: nowrap; }
/* A supporting line under a table cell's main value: which shop, which date.
   One line, clipped, so a long partner name does not double the row height. */
.cell-quiet {
  font-size: var(--fs-xs); color: var(--text-tertiary);
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Row tints for the loan book. The import screen's matched/unmatched/duplicate
   tints are full-strength status backgrounds, which is right for a preview a
   person reads once and wrong for a book they scan every morning: at full
   strength five arrears rows shout over the figures they are meant to frame.
   These are the same hues at roughly half, so the row reads as flagged and the
   balance in it still reads as a balance. */
.row-attention { background: color-mix(in srgb, var(--status-warning-bg) 48%, var(--white)); }
.row-critical  { background: color-mix(in srgb, var(--status-danger-bg) 52%, var(--white)); }
@media (hover: hover) {
  .table tbody tr.row-attention:hover { background: var(--status-warning-bg); }
  .table tbody tr.row-critical:hover  { background: var(--status-danger-bg); }
}

/* A note in a cell that can run long. It stays on two lines and keeps its full
   text in the title, rather than tripling the height of every row around it. */
.cell-note {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; max-width: 26ch; line-height: 1.4;
}

/* ---- Failure-mode list (exceptions rail) ---- */
.fm-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; }
.fm-row + .fm-row { border-top: 1px solid var(--gray-100); }
.fm-row .qa-ic { margin-top: 1px; }
.fm-text { min-width: 0; }
.fm-text strong { display: block; font-size: var(--fs-sm); font-weight: 650; }
.fm-body { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }

/* The Presenter is prototype chrome and sits bottom-right. A sticky save bar
   spans the full width and would sit under it, so on those screens the widget
   steps up. Product CSS stays untouched; only the scaffolding moves. */
body:has(.save-bar) .presenter { bottom: 86px; }

/* ---- Application message card ---- */
.msg-card { border: 1px solid var(--gray-200); border-radius: var(--r-lg); background: var(--white); padding: var(--sp-5); display: flex; flex-direction: column; }
.msg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.msg-event { font-size: var(--fs-sm); font-weight: 650; }
.msg-foot { margin-top: auto; padding-top: var(--sp-4); }

/* ---- Lists inside cards and callouts ----
   Three officer files were writing <ul style="padding-left:18px;line-height:1.9">
   inline. Two named list styles instead: a plain one for a callout, and a
   ticked one for "these already exist elsewhere". */
.callout-list { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }
.callout-list li + li { margin-top: 3px; }
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative; padding-left: 24px; margin-bottom: 9px;
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5;
}
.tick-list li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue-500);
}
.tick-list li:last-child { margin-bottom: 0; }
/* The notice with nothing chosen yet. Saying so in the document itself is
   clearer than an empty bullet list where reasons should be. */
.doc-empty { color: var(--status-danger); font-style: italic; }

/* A document facsimile is prose, so its paragraphs need the spacing prose has.
   The base reset zeroes p margins for component layout, which is right there
   and wrong here. */
.doc-page p { margin: 0 0 var(--sp-4); }
.doc-page p:last-child { margin-bottom: 0; }
.doc-page ul { margin: 0 0 var(--sp-4); padding-left: 20px; }
.doc-page li + li { margin-top: 4px; }

/* A stack of checkboxes is a list of choices, not a paragraph of them. */
.checkbox-row + .checkbox-row { margin-top: 10px; }
.nowrap { white-space: nowrap; }

/* ---- Narrow-screen behavior for the two "row of choices" controls ----
   A four-step stepper and a six-way triage control are both wider than a
   phone. Wrapping is wrong for each: a stepper that wraps loses the left-to-
   right reading of progress, and a pill-shaped triage that wraps becomes a
   stadium with rows inside it. Both scroll sideways instead, which is what
   the stat-card row already does on the same screens. */
@media (max-width: 720px) {
  .stepper {
    overflow-x: auto; padding-bottom: var(--sp-2);
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .stepper-step { flex: none; }
  .stepper-bar { min-width: 28px; }

  .triage {
    flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .triage::-webkit-scrollbar { display: none; }
  .triage a, .triage button { flex: none; }
}
/* A two-option segmented control is ~250px of text. On a phone that wraps each
   label onto two lines inside a stadium, which reads as a shape rather than a
   choice. Tighter type keeps each option on one line instead. */
@media (max-width: 560px) {
  .segmented button { padding: 8px 12px; font-size: var(--fs-xs); }
}

/* ============================================================
   OFFICER OVERVIEW (v1.15) — the Home pattern
   What moved overnight, three jobs in order, and an action rail.
   ============================================================ */

/* ---- Topbar search ----
   Officers look loans up by reference and surname all day. The box lives in
   the shell so it is in the same place on every officer screen. */
.topbar-search {
  display: flex; align-items: center; gap: 9px;
  flex: 0 1 360px; min-width: 0; margin-left: auto;
  height: 40px; padding: 0 14px;
  background: var(--gray-100); border-radius: var(--r-pill);
  color: var(--text-tertiary);
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease;
}
.topbar-search:focus-within { background: var(--white); box-shadow: 0 0 0 2px var(--blue-600); color: var(--navy-900); }
.topbar-search svg { flex: none; }
.topbar-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--fs-sm); color: var(--navy-900);
}
.topbar-search input::placeholder { color: var(--text-tertiary); }
.topbar-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.app-topbar > strong { flex: none; }
@media (max-width: 760px) { .topbar-search { display: none; } }

/* ---- Movers strip ----
   The reference's "Top movers": a row of compact figures that scrolls, with
   arrows in the section head. Each figure carries what it did overnight. */
.movers-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.movers-head h2 { margin: 0; font-size: var(--fs-h3); }
.movers-head .mh-right { display: flex; align-items: center; gap: var(--sp-4); }
.movers-nav { display: flex; gap: 6px; }
.movers-nav button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gray-200);
  background: var(--white); color: var(--navy-900); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.movers-nav button:hover { background: var(--gray-100); }
.movers-nav button:disabled { opacity: .3; cursor: default; background: var(--white); }
.movers-nav button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.movers {
  display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  padding-bottom: 2px;
}
.movers::-webkit-scrollbar { display: none; }
.movers > * { flex: 0 0 200px; scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .movers { scroll-behavior: auto; } }

/* What a figure did since the last run: arrow, amount, and a tone the caller
   chooses, because on a lending book "up" is not one thing. */
.sc-delta {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 6px;
  font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums;
}
.sc-delta svg { flex: none; }
.sc-delta.tone-good    { color: var(--status-success); }
.sc-delta.tone-bad     { color: var(--status-danger); }
.sc-delta.tone-neutral { color: var(--text-secondary); }
.sc-delta.tone-flat    { color: var(--text-tertiary); }
.sc-delta + .sc-d { margin-top: 4px; }

/* ---- Start-here job cards ----
   The reference's "Suggested for you" slot: a picture beside a heading. On an
   operations screen the picture is the data the job is about, drawn from the
   same records as the queue beneath it, never an illustration. */
.job-list { display: flex; flex-direction: column; }
.job-card {
  display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: var(--sp-6);
  align-items: center; padding: var(--sp-5) 0;
}
.job-card + .job-card { border-top: 1px solid var(--gray-100); }
.job-visual {
  background: var(--gray-100); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5); min-height: 156px;
  display: flex; flex-direction: column; justify-content: center;
}
.job-visual .jv-cap { font-size: var(--fs-2xs); color: var(--text-tertiary); margin-top: 10px; line-height: 1.45; }
.job-body { min-width: 0; }
.job-eyebrow { font-size: var(--fs-xs); font-weight: 650; color: var(--blue-700); }
.job-body h3 { margin: 4px 0 6px; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; text-wrap: balance; }
.job-body p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; max-width: 54ch; }
.job-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-sm); font-weight: 600; }
.job-link svg { transition: transform var(--dur-fast) var(--ease-out); }
.job-link:hover svg { transform: translateX(2px); }
@media (max-width: 680px) { .job-card { grid-template-columns: 1fr; gap: var(--sp-4); } .job-visual { min-height: 0; } }

/* The queue as a chart: one bar per application, oldest first. Amber is the
   week line, which is the point at which a wait becomes a problem. */
.queue-bars { display: block; width: 100%; height: auto; }
.queue-bars rect { fill: var(--blue-500); opacity: .5; }
.queue-bars rect.is-old { fill: var(--status-warning); opacity: 1; }
.queue-bars .qb-line { stroke: var(--status-warning); stroke-width: 1; stroke-dasharray: 3 3; }
.queue-bars .qb-base { stroke: var(--gray-300); stroke-width: 1; }
.queue-bars .qb-label { font-size: 9px; font-weight: 700; fill: var(--status-warning-fg); font-family: var(--font-body); }

/* The last four overnight refreshes, as four posts. */
.night-strip { display: flex; gap: 8px; align-items: flex-end; }
.night { flex: 1; text-align: center; min-width: 0; }
.night-bar { display: block; height: 58px; border-radius: 6px; background: var(--status-success); opacity: .8; }
.night.is-partial .night-bar { background: var(--status-warning); opacity: 1; }
.night-day { display: block; margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Ageing bar segments ----
   Colors for the bar C.AgingBar now draws; the legend swatches share them. */
.aging-bar .seg-0, .aging-legend .seg-0 { background: var(--status-success); }
.aging-bar .seg-1, .aging-legend .seg-1 { background: var(--status-warning); }
.aging-bar .seg-2, .aging-legend .seg-2 { background: var(--status-danger); }
.aging-bar .seg.is-empty { display: none; }
.aging-legend .al { padding: 0; }
.aging-legend .al .al-val { margin-left: 2px; }

/* ---- Rail rows for the officer's action panel ----
   Same row as the borrower's "Paying from", with a job icon in place of a
   payment-network mark. */
.pp-with .qa-ic { flex: none; }
.pp-with + .pp-with { margin-top: var(--sp-2); }

/* ============================================================
   OFFICER QUEUE (v1.16) — the Apps pattern
   A progress nudge, a card strip of what just arrived, a search-and-menu
   section head, text tabs, and a ranked table with a stack of checks.
   ============================================================ */

/* ---- Progress banner ---- */
.prog-banner {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--gray-200); border-radius: var(--r-lg); background: var(--white);
}
.pb-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-600); color: var(--text-on-action); display: grid; place-items: center; flex: none; }
.pb-ic svg { width: 13px; height: 13px; }
.prog-banner.is-good .pb-ic { background: var(--status-success); }
.pb-title { font-size: var(--fs-base); font-weight: 650; }
.pb-bar { width: 128px; height: 10px; border-radius: var(--r-pill); background: var(--gray-200); overflow: hidden; flex: none; }
.pb-bar span { display: block; height: 100%; border-radius: inherit; background: var(--blue-600); transition: width var(--dur-slow) var(--ease-out); }
.prog-banner.is-good .pb-bar span { background: var(--status-success); }
.pb-count { font-size: var(--fs-sm); font-weight: 650; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-link { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: 650; color: var(--blue-700); text-decoration: none; white-space: nowrap; }
.pb-link:hover { text-decoration: underline; }
.pb-link svg { width: 15px; height: 15px; }
@media (max-width: 720px) { .pb-link { margin-left: 0; } }

/* ---- Page sections, hairline-separated like the reference ---- */
.page-section { border-top: 1px solid var(--gray-200); margin-top: var(--sp-8); padding-top: var(--sp-6); }

/* ---- Tier tints, shared by tiles and avatars ---- */
.tint-green  { background: var(--status-success-bg); color: var(--status-success-ink); }
.tint-yellow { background: var(--status-warning-bg); color: var(--status-warning-ink); }
.tint-red    { background: var(--status-danger-bg);  color: var(--status-danger-ink); }

/* ---- Queue card ---- */
.app-card {
  display: block; padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--gray-200); border-radius: var(--r-lg); background: var(--white);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.app-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); text-decoration: none; }
.app-card:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.ac-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.ac-logo { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-base); letter-spacing: .02em; flex: none; }
.ac-chip { padding: 5px 11px; border-radius: var(--r-pill); background: var(--gray-100); font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.ac-chip.is-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.ac-chip.is-info { background: var(--blue-050); color: var(--blue-700); }
.ac-name { font-size: var(--fs-base); font-weight: 650; }
.ac-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: var(--fs-sm); color: var(--text-secondary); }
.movers.is-cards > * { flex-basis: 236px; }

/* ---- Section head with a search box and a menu ---- */
.qhead { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.qhead h2 { margin: 0; font-size: var(--fs-h3); }
.qhead .qspacer { flex: 1; }
.search-pill {
  display: flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 16px; min-width: 300px;
  background: var(--gray-100); border-radius: var(--r-pill); color: var(--text-tertiary);
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease;
}
.search-pill:focus-within { background: var(--white); box-shadow: 0 0 0 2px var(--blue-600); color: var(--navy-900); }
.search-pill svg { flex: none; }
.search-pill input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: var(--fs-sm); color: var(--navy-900); }
.search-pill input::placeholder { color: var(--text-tertiary); }
.search-pill input::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (max-width: 720px) { .search-pill { min-width: 0; width: 100%; } .qhead .qspacer { display: none; } }

/* ---- Queue tabs: text, blue when active, a hairline under the row ---- */
.qtabs {
  display: flex; gap: 28px; margin-top: var(--sp-5);
  border-bottom: 1px solid var(--gray-200);
  overflow-x: auto; scrollbar-width: none;
}
.qtabs::-webkit-scrollbar { display: none; }
.qtabs button {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 2px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary);
  transition: color var(--dur-fast) ease;
}
.qtabs button:hover { color: var(--navy-900); }
.qtabs button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; border-radius: var(--r-sm); }
.qtabs button.active { color: var(--blue-700); font-weight: 700; }
.qtabs .t-count { font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.qtabs button.active .t-count { color: var(--blue-700); }
.qtabs .t-count.is-warning { color: var(--status-warning-fg); }

/* ---- Dropdown menu ---- */
.menu { position: relative; display: inline-block; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 16px 0 18px; border: 0; border-radius: var(--r-pill);
  background: var(--gray-100); color: var(--navy-900); cursor: pointer; white-space: nowrap;
  font: inherit; font-size: var(--fs-sm); font-weight: 650;
  transition: background-color var(--dur-fast) ease;
}
.menu-btn:hover { background: var(--gray-200); }
.menu-btn:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.menu-btn svg { transition: transform var(--dur-fast) ease; }
.menu.is-open .menu-btn svg { transform: rotate(180deg); }
.menu-pop {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 300px; margin: 0; padding: 6px; list-style: none;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.menu.is-open .menu-pop { display: block; animation: menuIn var(--dur-fast) var(--ease-out) both; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu.is-open .menu-pop { animation: none; } }
.menu-pop li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.menu-pop li:hover { background: var(--gray-100); }
.menu-pop li.is-selected { font-weight: 650; }
.menu-pop li.has-divider { border-bottom: 1px solid var(--gray-100); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 4px; }
.menu-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-050); color: var(--blue-700); flex: none; }
.menu-ic svg { width: 14px; height: 14px; }
.menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-meta { margin-left: auto; font-size: var(--fs-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.menu-check { color: var(--blue-700); display: grid; flex: none; }
.menu-meta + .menu-check { margin-left: 10px; }
.menu-pop li:not(.is-selected) .menu-meta { margin-right: 22px; }

/* ---- Check stack ---- */
.chk-stack { display: inline-flex; }
.chk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--white); margin-left: -6px; flex: none; }
.chk:first-child { margin-left: 0; }
.chk svg { width: 12px; height: 12px; }
.chk.is-ok   { background: var(--status-success-bg); color: var(--status-success); }
.chk.is-warn { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.chk.is-bad  { background: var(--status-danger-bg);  color: var(--status-danger); }

/* ---- Sortable table header ---- */
.th-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.th-sort svg { width: 12px; height: 12px; opacity: .45; transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.th-sort:hover svg { opacity: .8; }
.th-sort.is-active { color: var(--navy-900); }
.th-sort.is-active svg { opacity: 1; }
.th-sort.asc svg { transform: rotate(180deg); }
th[style*="right"] .th-sort { justify-content: flex-end; }

/* ---- Name cell with an avatar and a rank ---- */
.name-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.avatar-sq { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; flex: none; }
.nc-body { min-width: 0; }
.nc-name { display: block; font-weight: 650; color: inherit; }
.nc-name:hover { color: var(--blue-700); }
.nc-desc { display: block; margin-top: 1px; font-size: var(--fs-xs); color: var(--text-secondary); max-width: 52ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-desc code { font-size: var(--fs-2xs); }
.rank-num { font-weight: 650; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ============================================================
   OFFICER LOAN BOOK (v1.17) — the Transactions pattern
   Manage tiles that are filters, pill filters with a popover that applies
   on confirm, loan rows in the transaction-row grammar, and a rail.
   ============================================================ */

/* ---- Manage tiles as filters ---- */
.manage-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .manage-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .manage-grid.cols-4 { grid-template-columns: 1fr; } }
button.manage-tile { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.manage-tile.is-selected { border-color: var(--blue-600); background: var(--blue-050); }
.manage-tile.is-selected .mt-ic { background: var(--blue-600); color: var(--text-on-action); }
.manage-tile.is-selected:hover .mt-ic { background: var(--blue-700); }
.mt-count {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--gray-200);
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy-900);
}
.mt-count.is-warning { background: var(--status-warning-bg); border-color: transparent; color: var(--status-warning-fg); }
.mt-count.is-danger  { background: var(--status-danger-bg);  border-color: transparent; color: var(--status-danger); }

/* ---- Filter pills ---- */
.fpills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fpill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--gray-100); color: var(--navy-900); cursor: pointer; white-space: nowrap;
  font: inherit; font-size: var(--fs-sm); font-weight: 650;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.fpill:hover { background: var(--gray-200); }
.fpill:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.fpill svg { flex: none; transition: transform var(--dur-fast) ease; }
.fpill.is-active { background: var(--navy-900); color: var(--text-on-action); }
.fpill.is-active:hover { background: var(--navy-800); }
.fpill.is-count { padding: 0 14px; cursor: default; }
.fpill.is-count:hover { background: var(--gray-100); }
.fpill.is-chip { padding-right: 10px; }
.fpill.is-chip svg { width: 12px; height: 12px; opacity: .8; }
.menu.is-open > .fpill > svg:last-child { transform: rotate(180deg); }
.fpill-reset { border: 0; background: none; padding: 0 6px; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 650; color: var(--blue-700); }
.fpill-reset:hover { text-decoration: underline; }

/* ---- The popover ---- */
.fp-panel { left: 0; right: auto; min-width: 320px; padding: 8px; }
.fp-list { max-height: 340px; overflow-y: auto; }
.fp-row { align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; color: var(--navy-900); }
.fp-row:hover { background: var(--gray-100); }
.fp-row .box { margin-top: 0; margin-left: auto; }
.fp-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-050); color: var(--blue-700); flex: none; }
.fp-mark svg { width: 14px; height: 14px; }
.fp-mark.is-ok   { background: var(--status-success-bg); color: var(--status-success); }
.fp-mark.is-warn { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.fp-mark.is-bad  { background: var(--status-danger-bg);  color: var(--status-danger); }
.fp-mark.is-plain { background: var(--gray-100); }
.fp-label { min-width: 0; }
.fp-meta { margin-left: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.fp-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 10px 8px 4px; margin-top: 6px; border-top: 1px solid var(--gray-100); }
@media (max-width: 560px) { .fp-panel { min-width: 0; width: calc(100vw - 40px); } }

/* ---- Book rows ----
   The reference row is icon, what happened, the amount with a line under it,
   and the date. A loan is who, the loan, the balance with what it started
   as, and its standing with what is due next. */
.book-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(150px, auto) 32px 16px; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2) var(--sp-2);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary);
  border-bottom: 1px solid var(--gray-200);
}
.book-head .bh-amt { text-align: right; }
.book-row {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(150px, auto) auto auto;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--gray-100); border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) ease;
}
.book-row:hover, .book-row:focus-within { background: var(--gray-100); }
.book-body { min-width: 0; }
.book-link { font-weight: 650; color: inherit; text-decoration: none; }
/* The name's link covers the whole row, so the row is one target without
   nesting an anchor inside an anchor. The Bryt link sits above it. */
.book-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.book-link:hover { color: var(--blue-700); text-decoration: none; }
.book-link:focus-visible { outline: none; }
.book-row:has(.book-link:focus-visible) { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.book-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-tertiary); }
.book-sub code { font-size: var(--fs-2xs); }
.book-when { text-align: left; }
.book-when strong { display: block; font-weight: 650; color: var(--navy-900); }
.book-when.is-ok strong   { color: var(--status-success); }
.book-when.is-warn strong { color: var(--status-warning-fg); }
.book-when.is-bad strong  { color: var(--status-danger); }
.row-ext {
  position: relative; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: var(--text-tertiary); border: 1px solid var(--gray-200); background: var(--white); text-decoration: none;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.row-ext:hover { color: var(--blue-700); border-color: var(--blue-600); }
.row-ext:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.chip-xs { padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; background: var(--status-warning-bg); color: var(--status-warning-fg); white-space: nowrap; }
.book-more { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-2); flex-wrap: wrap; }
@media (max-width: 860px) {
  .book-head { display: none; }
  .book-row { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: var(--sp-2); }
  .book-when { grid-column: 2 / 4; }
  .book-row .row-ext { display: none; }
  .book-row > .brk-chev { grid-column: 4; grid-row: 1; }
}

/* On a phone the balance column squeezes the meta line into five rows. The
   term and the town are the parts a phone can do without; the reference,
   the tier and any issue stay. */
@media (max-width: 600px) { .book-sub .bs-opt { display: none; } }

/* ============================================================
   OFFICER IMPORTS (v1.18) — the setup-steps pattern
   Step cards that open one at a time, option rows inside them, a progress
   line, a support rail, and a frequent-questions card.
   ============================================================ */

/* ---- Progress line ---- */
.prog-line { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-6); }
.prog-line .pb-bar { flex: 1; width: auto; max-width: 560px; }
.prog-line .pb-count { color: var(--text-secondary); }

/* ---- Step cards ---- */
.acc-step { border: 1px solid var(--gray-200); border-radius: var(--r-lg); background: var(--white); }
.acc-step + .acc-step { margin-top: var(--sp-4); }
.acc-head { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); }
.acc-num {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--gray-300); display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-sm); color: var(--navy-900); font-variant-numeric: tabular-nums;
}
.acc-num svg { width: 15px; height: 15px; }
.acc-step.is-done .acc-num { background: var(--blue-600); border-color: var(--blue-600); color: var(--text-on-action); }
.acc-step.is-current .acc-num { border-color: var(--navy-900); }
.acc-step.is-todo .acc-num { color: var(--text-tertiary); }
.acc-titles { flex: 1; min-width: 0; padding-top: 6px; }
.acc-titles h2 { margin: 0; font-size: var(--fs-base); font-weight: 650; line-height: 1.3; }
.acc-titles p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.acc-step.is-todo .acc-titles h2 { color: var(--text-secondary); }
.acc-step.is-todo .acc-titles p { color: var(--text-tertiary); }
.acc-chev { color: var(--text-tertiary); display: grid; flex: none; margin-top: 10px; transition: transform var(--dur-fast) ease; }
.acc-step.is-current .acc-chev { transform: rotate(180deg); color: var(--navy-900); }
.acc-head .btn { flex: none; margin-top: 2px; }
.acc-body { padding: 0 var(--sp-6) var(--sp-6) calc(var(--sp-6) + 36px + var(--sp-4)); }
.acc-body.is-wide { padding-left: var(--sp-6); }
@media (max-width: 680px) {
  .acc-head { padding: var(--sp-4) var(--sp-5); }
  .acc-body, .acc-body.is-wide { padding: 0 var(--sp-5) var(--sp-5); }
}

/* ---- Option rows ---- */
.opt-row { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4) 0; }
.opt-row + .opt-row { border-top: 1px solid var(--gray-100); }
.opt-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--blue-050); color: var(--blue-700); transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.opt-row.is-selected .opt-ic { background: var(--blue-600); color: var(--text-on-action); }
.opt-body { flex: 1; min-width: 0; }
.opt-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 650; }
.opt-body p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; max-width: 60ch; }
.opt-action { flex: none; }
.opt-drop { margin-top: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--gray-200); }
@media (max-width: 620px) {
  .opt-row { flex-wrap: wrap; }
  .opt-action { width: 100%; }
  .opt-action .btn { width: 100%; }
}

/* ---- Support cards ---- */
.support-card { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); background: var(--gray-100); color: var(--navy-900); }
.support-card + .support-card { margin-top: var(--sp-4); }
.support-card > * { position: relative; z-index: 1; }
.support-card h3 { margin: 0; font-size: var(--fs-base); font-weight: 650; }
.support-card p { margin: 6px 0 var(--sp-4); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); max-width: 24ch; }
.sup-art {
  position: absolute; z-index: 0; right: -16px; top: 50%; transform: translateY(-50%);
  width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; background: var(--white); color: var(--blue-700);
}
.sup-art svg { width: 44px; height: 44px; margin-right: 10px; }
.support-card.is-blue { background: var(--blue-050); }
.support-card.is-navy { background: var(--navy-900); color: var(--text-inverse); }
.support-card.is-navy p { color: var(--text-inverse-dim); }
.support-card.is-navy .sup-art { background: var(--navy-800); color: var(--blue-500); }
.support-card.is-navy .btn-secondary { background: var(--white); color: var(--navy-900); border-color: transparent; }
.support-card.is-navy .btn-secondary:hover { background: var(--gray-100); }

/* ---- Frequent questions ---- */
.faq-item { border-top: 1px solid var(--gray-100); }
.faq-item:first-of-type { border-top: 0; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 12px 0; cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 650; line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: var(--r-sm); }
.faq-item summary svg { flex: none; color: var(--blue-700); transition: transform var(--dur-fast) ease; }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item p { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; }

/* ============================================================
   ADMINISTRATION (v1.19) — the account-security pattern
   One title, the tab strip, a hairline-divided main column and rail,
   an attention banner, and settings as rows.
   ============================================================ */

.admin-tabs { margin-bottom: 0; }
.admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; }
.admin-main { min-width: 0; padding: var(--sp-6) var(--sp-8) var(--sp-8) 0; }
.admin-rail { border-left: 1px solid var(--gray-200); padding: var(--sp-6) 0 var(--sp-8) var(--sp-8); }
.admin-rail-inner { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
@media (max-width: 1100px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-main { padding-right: 0; }
  .admin-rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--gray-200); }
  .admin-rail-inner { position: static; }
}

/* ---- Attention banner ---- */
.attn { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-md); margin-bottom: var(--sp-6); }
.attn.is-danger { background: var(--status-danger-bg); }
.attn.is-warn   { background: var(--status-warning-bg); }
.attn.is-info   { background: var(--blue-050); }
.attn-ic { flex: none; margin-top: 2px; display: grid; }
.attn.is-danger .attn-ic { color: var(--status-danger); }
.attn.is-warn .attn-ic   { color: var(--status-warning-fg); }
.attn.is-info .attn-ic   { color: var(--blue-700); }
.attn-main { min-width: 0; }
.attn-title { font-weight: 650; }
.attn-body { margin: 4px 0 0; font-size: var(--fs-sm); line-height: 1.55; max-width: 72ch; color: var(--text-secondary); }
.attn.is-danger .attn-body { color: var(--status-danger-ink); }
.attn.is-warn .attn-body   { color: var(--status-warning-ink); }
.attn-actions { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-3); }
.attn-actions a, .attn-actions button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 650; color: var(--navy-900); text-decoration: none;
}
.attn-actions a:hover, .attn-actions button:hover { text-decoration: underline; }
.attn-actions a:focus-visible, .attn-actions button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: 3px; }

/* ---- Section heads ---- */
.sect { margin-top: var(--sp-2); }
.srow + .sect, .attn + .sect + .sect, .sect + .sect { margin-top: var(--sp-8); }
.srow + .sect { margin-top: var(--sp-8); }
.sect-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.sect h2 { margin: 0; font-size: var(--fs-base); font-weight: 650; }
.sect p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; max-width: 70ch; }
.sect-actions { display: flex; gap: var(--sp-2); flex: none; flex-wrap: wrap; }
.sect-sub { margin: var(--sp-6) 0 var(--sp-1); font-size: var(--fs-sm); font-weight: 650; }
.sect + .srow, .sect + .empty-state { margin-top: var(--sp-3); }

/* ---- Setting rows ---- */
.srow { border-bottom: 1px solid var(--gray-100); }
.srow-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; }
.srow-ic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--gray-100); color: var(--navy-800); }
.srow-main { flex: 1; min-width: 0; }
.srow-title { font-weight: 650; }
.srow-sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.srow-sub code { font-size: var(--fs-xs); }
.srow-cap { margin-top: 4px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.srow-cap.is-danger  { color: var(--status-danger); }
.srow-cap.is-warning { color: var(--status-warning-fg); }
.srow-cap.is-success { color: var(--status-success); }
.srow-ctl { flex: none; display: flex; align-items: center; gap: var(--sp-3); }
.srow-chev {
  width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: none;
  color: var(--navy-900); display: grid; place-items: center; cursor: pointer;
  transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.srow-chev:hover { background: var(--gray-100); }
.srow-chev:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.srow.is-open .srow-chev { transform: rotate(180deg); }
.srow-body { display: none; padding: 0 0 var(--sp-5) calc(40px + var(--sp-4)); }
.srow.is-open .srow-body { display: block; animation: paneIn var(--dur-slow) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .srow.is-open .srow-body { animation: none; } }
.srow-body > p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; max-width: 66ch; }
.srow-body > p:last-child { margin-bottom: 0; }
.srow-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
.srow-actions .field-hint { margin: 0 auto 0 0; }
/* On a phone the text keeps the row and the control drops beneath it. Without
   a floor on the text column, flex gives it nothing and a title becomes one
   word per line beside a button. */
@media (max-width: 620px) {
  .srow-head { flex-wrap: wrap; row-gap: var(--sp-2); }
  .srow-main { flex: 1 1 58%; min-width: 58%; }
  .srow-ctl { margin-left: calc(40px + var(--sp-4)); }
  .srow-chev { margin-left: auto; }
  .srow-body { padding-left: 0; }
}

/* Five tabs do not fit a phone; they scroll sideways rather than stacking
   into three rows, the way every other strip on these screens behaves. */
@media (max-width: 760px) {
  .admin-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs a { flex: none; white-space: nowrap; }
}

/* The glyph on a support card is decoration; the text keeps clear of it
   whatever the card's width. */
.support-card p, .support-card .chk-list { max-width: calc(100% - 92px); }

/* ---- Rail checklist and link ---- */
.chk-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; max-width: 24ch; }
.chk-list li { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.35; }
.chk-list li.is-done { color: var(--navy-900); }
.chk-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid var(--gray-300); background: var(--white); }
.chk-list li.is-done .chk-dot { background: var(--status-success); border-color: var(--status-success); color: var(--white); }
.chk-dot svg { width: 10px; height: 10px; }
.sup-link { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: 650; color: var(--blue-700); text-decoration: none; }
.sup-link:hover { text-decoration: underline; }
.sup-link svg { width: 15px; height: 15px; }

/* ============================================================
   LANDING (v1.20) — the reference's page, the product's content
   ============================================================ */

/* ---- Strips above and below the header ---- */
.notice-strip { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-size: var(--fs-2xs); color: var(--text-secondary); }
.notice-strip .inner { max-width: var(--container); margin: 0 auto; padding: 7px var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.notice-strip .ns-mark { display: inline-flex; align-items: center; gap: 7px; }
.notice-strip .ns-mark svg { width: 13px; height: 13px; color: var(--blue-700); }
.notice-strip .ns-right { white-space: nowrap; }
@media (max-width: 620px) { .notice-strip .ns-right { display: none; } }

/* ---- Hero ---- */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-12); align-items: center; }
.hero-copy h1 { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.032em; line-height: 1.02; margin: 0; text-wrap: balance; max-width: 12ch; }
.hero-copy .hero-lede { margin: var(--sp-6) 0 0; font-size: var(--fs-lg, 1.125rem); color: var(--text-secondary); line-height: 1.55; max-width: 46ch; }
.hero-copy .hero-note { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); max-width: 46ch; }
.hero-cta { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-7, 28px); flex-wrap: wrap; }
.hero-cta .btn-primary { padding: 14px 26px; font-size: var(--fs-base); }
.hero-proof { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-8); font-size: var(--fs-xs); color: var(--text-tertiary); }
.hero-proof span { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof svg { width: 13px; height: 13px; color: var(--status-success); }
.hero-visual { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-caption { margin-top: var(--sp-4); font-size: var(--fs-2xs); color: var(--text-tertiary); text-align: center; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .hero-copy h1 { max-width: none; }
}

/* ---- Phone mockup, carrying the real portal ---- */
.phone {
  width: 312px; max-width: 100%; padding: 10px; border-radius: 42px;
  background: var(--navy-950);
  box-shadow: 0 30px 70px rgba(13, 21, 38, .22), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.phone-screen { background: var(--white); border-radius: 34px; overflow: hidden; padding: 14px 18px 22px; min-height: 540px; }
.phone-bar { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 650; padding: 4px 6px 12px; }
.phone-bar .pb-signal { display: inline-flex; gap: 3px; align-items: flex-end; height: 10px; }
.phone-bar .pb-signal i { display: block; width: 3px; background: var(--navy-900); border-radius: 1px; }
.phone-notch { width: 90px; height: 26px; border-radius: 14px; background: var(--navy-950); margin: -14px auto 6px; }
.phone-k { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
.phone-v { font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 4px; }
.phone-s { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; }
.phone-chart { margin: 14px 0 6px; }
.phone-chart svg { display: block; width: 100%; height: 64px; }
.phone-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--gray-100); font-size: 12px; }
.phone-row .pr-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-050); color: var(--blue-700); display: grid; place-items: center; flex: none; }
.phone-row .pr-ic svg { width: 14px; height: 14px; }
.phone-row .pr-body { flex: 1; min-width: 0; }
.phone-row .pr-k { display: block; font-weight: 650; }
.phone-row .pr-s { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.phone-row .pr-v { font-weight: 650; font-variant-numeric: tabular-nums; }
.phone-row .pr-v.is-ok { color: var(--status-success); }
.phone-cta { margin-top: 12px; padding: 12px; border-radius: var(--r-pill); background: var(--blue-600); color: var(--text-on-action); text-align: center; font-size: 12.5px; font-weight: 650; }
/* The balance line draws itself once, then rests. */
.draw-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawLine 1.6s var(--ease-out) .3s forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .draw-line { animation: none; stroke-dashoffset: 0; } }

/* ---- Dark band with a strip of cards ---- */
.band { background: var(--navy-950); color: var(--text-inverse); padding: var(--sp-16) 0; overflow: hidden; }
.band-track { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding: 0 var(--sp-6); }
.band-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .band-track { scroll-behavior: auto; } }
.band-card {
  flex: 0 0 min(100% - var(--sp-12), 1060px); scroll-snap-align: center;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--sp-10); align-items: center;
  background: var(--navy-900); border-radius: var(--r-xl); padding: var(--sp-10);
  border: 1px solid rgba(255, 255, 255, .06);
}
.band-art { border-radius: var(--r-lg); background: var(--navy-800); padding: var(--sp-6); min-height: 280px; display: flex; flex-direction: column; justify-content: center; }
.band-art svg { display: block; width: 100%; height: auto; }
.band-art .ba-cap { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--text-inverse-dim); }
/* Its own color: base.css gives every h2 the navy ink, which vanished on this band. */
.band-copy h2 { margin: 0; font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; color: var(--text-inverse); }
.band-copy p { margin: var(--sp-4) 0 0; font-size: var(--fs-base); color: var(--text-inverse-dim); line-height: 1.55; max-width: 44ch; }
.band-copy .btn { margin-top: var(--sp-6); }
.band-copy .btn-secondary { background: var(--white); color: var(--navy-900); border-color: transparent; }
.band-copy .btn-secondary:hover { background: var(--gray-100); }
.band-foot { max-width: var(--container); margin: var(--sp-6) auto 0; padding: 0 var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.band-dots { display: flex; gap: 8px; }
.band-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .28); cursor: pointer; padding: 0; transition: width var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.band-dots button.active { width: 24px; border-radius: 4px; background: var(--white); }
.band-dots button:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.band .movers-nav button { background: transparent; border-color: rgba(255, 255, 255, .22); color: var(--white); }
.band .movers-nav button:hover { background: rgba(255, 255, 255, .08); }
.band .movers-nav button:disabled { background: transparent; }
.band-fine { max-width: var(--container); margin: var(--sp-4) auto 0; padding: 0 var(--sp-6); font-size: var(--fs-2xs); color: var(--text-inverse-dim); }
@media (max-width: 860px) {
  .band { padding: var(--sp-10) 0; }
  .band-card { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6); flex-basis: calc(100% - var(--sp-8)); }
  .band-art { min-height: 200px; }
}

/* ---- Rate card section ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); align-items: center; }
.split h2 { margin: 0; font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; max-width: 18ch; }
.split > div > p { margin: var(--sp-4) 0 0; font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.55; max-width: 46ch; }
.split .btn { margin-top: var(--sp-6); }
.split.is-flipped > :first-child { order: 2; }
/* minmax(0, 1fr), not 1fr: a bare 1fr keeps an automatic minimum, and the offer
   matrix's intrinsic width would push the track past a phone's edge. */
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } .split.is-flipped > :first-child { order: 0; } }
.panel-inner { min-width: 0; }
.rate-card { background: var(--navy-900); color: var(--text-inverse); border-radius: var(--r-xl); padding: var(--sp-5) var(--sp-6) var(--sp-6); box-shadow: var(--shadow-lg); }
.rate-tabs { display: flex; gap: 4px; padding: 4px; background: var(--navy-800); border-radius: var(--r-pill); width: max-content; max-width: 100%; }
.rate-tabs button { border: 0; background: none; color: var(--text-inverse-dim); font: inherit; font-size: var(--fs-xs); font-weight: 650; padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.rate-tabs button.active { background: var(--white); color: var(--navy-900); }
.rate-tabs button:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.rate-rows { margin-top: var(--sp-4); }
.rate-row { display: flex; align-items: center; gap: var(--sp-3); padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.rate-row:first-child { border-top: 0; }
.rate-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--blue-600); color: var(--white); flex: none; }
.rate-amt { flex: 1; font-weight: 650; font-size: var(--fs-base); }
.rate-amt small { display: block; font-size: var(--fs-2xs); font-weight: 500; color: var(--text-inverse-dim); margin-top: 1px; }
.rate-pay { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.rate-pay small { display: block; font-size: var(--fs-2xs); font-weight: 500; color: var(--text-inverse-dim); margin-top: 1px; }
/* The servicing system's own issue wording, on screen rather than in a tooltip. */
.book-issue { grid-column: 2 / -1; margin-top: 2px; font-size: var(--fs-2xs); color: var(--amber-800, var(--text-secondary)); line-height: 1.4; }

.sc-src { display: block; margin-top: 4px; font-size: var(--fs-3xs, 11px); color: var(--text-tertiary); letter-spacing: .01em; }

.srow-cap.is-muted { color: var(--text-tertiary); font-weight: 400; }

.rate-foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid rgba(255, 255, 255, .08); font-size: var(--fs-2xs); color: var(--text-inverse-dim); line-height: 1.5; }

/* The applicant's own amount and term, on the dark rate card. */
.rate-own { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .08); }
.rate-own .field-label { color: var(--text-inverse); }
.rate-own .text-tertiary { color: var(--text-inverse-dim); }
.rate-own .num-strong { color: var(--text-inverse); }
.rate-own .segmented { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.rate-own .segmented button { color: var(--text-inverse-dim); }
.rate-own .segmented button.active { background: var(--blue-600); color: var(--text-inverse); }
.rate-own-out { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-4); }
.rate-own-pay { font-size: var(--fs-3xl); font-weight: 650; line-height: 1.05; color: var(--text-inverse); font-variant-numeric: tabular-nums; }
.rate-own-sub { font-size: var(--fs-2xs); color: var(--text-inverse-dim); line-height: 1.5; }
/* Three tabs and a card must fit a phone; the matrix scrolls inside its panel. */
@media (max-width: 480px) {
  .rate-tabs { width: 100%; }
  .rate-tabs button { flex: 1; padding: 8px 6px; }
  .rate-card { padding: var(--sp-4); }
}
.offer-mini { overflow-x: auto; }

/* ---- Light feature panels (autopay, offer) ---- */
.panel-art { background: var(--gray-100); border-radius: var(--r-xl); padding: var(--sp-8); display: flex; align-items: center; justify-content: center; min-height: 360px; }
.panel-art.is-dark { background: var(--navy-950); }
.panel-inner { width: 100%; max-width: 480px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-5); }
.panel-inner .txn-row { padding: 12px 0; }
.eyebrow-one { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); }
.eyebrow-one svg { width: 14px; height: 14px; }
.eyebrow-one + h2 { margin-top: var(--sp-3); }
.bullets { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.bullets li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 10px 0; }
.bullets .bl-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--navy-900); color: var(--white); display: grid; place-items: center; flex: none; margin-top: 1px; }
.bullets .bl-ic svg { width: 12px; height: 12px; }
.bullets strong { display: block; font-size: var(--fs-base); }
.bullets span { display: block; font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 1px; }
.offer-mini .offer-matrix { font-size: var(--fs-xs); }

/* ---- Two feature cards ---- */
.feature-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.feature-card { display: block; border-radius: var(--r-xl); background: var(--gray-100); padding: var(--sp-6); color: inherit; text-decoration: none; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) ease; }
.feature-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.feature-card:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }
.feature-card.is-green { background: #DCEFE3; }
.fc-art { height: 220px; border-radius: var(--r-lg); display: grid; place-items: center; margin-bottom: var(--sp-6); background: var(--white); }
.feature-card.is-green .fc-art { background: rgba(255, 255, 255, .55); }
.fc-art svg { width: 100%; height: 100%; }
.feature-card h3 { margin: 0; font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.01em; }
.feature-card p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; max-width: 40ch; }
.feature-card .fc-link { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-4); font-size: var(--fs-sm); font-weight: 650; color: var(--blue-700); }
@media (max-width: 760px) { .feature-cards { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .feature-card { transition: none; } .feature-card:hover { transform: none; } }

/* ---- Trust section ---- */
.trust-head { text-align: center; max-width: 780px; margin: 0 auto; }
.trust-head h2 { margin: 0; font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.trust-head p { margin: var(--sp-4) 0 0; font-size: var(--fs-base); color: var(--text-secondary); }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin-top: var(--sp-12); }
.trust-card { display: flex; flex-direction: column; padding: var(--sp-8); border-radius: var(--r-xl); background: var(--gray-100); }
.trust-card .tc-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-900); color: var(--white); }
.trust-card .tc-ic.is-blue { background: var(--blue-600); }
.trust-card .tc-ic.is-outline { background: var(--white); color: var(--navy-900); border: 1.5px solid var(--navy-900); }
.trust-card h3 { margin: var(--sp-6) 0 0; font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }
.trust-card p { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; flex: 1; }
.trust-card .btn { align-self: flex-start; margin-top: var(--sp-6); }
@media (max-width: 900px) { .trust-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Landing FAQ ---- */
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-12); }
.faq-cols .faq-item summary { font-size: var(--fs-base); padding: 16px 0; }
.faq-cols .faq-item p { max-width: 52ch; }
@media (max-width: 760px) { .faq-cols { grid-template-columns: 1fr; } }

/* ---- Section rhythm ---- */
.land-section { padding: var(--sp-20) 0; }
.land-section.is-tight { padding: var(--sp-12) 0; }
.land-section + .land-section { border-top: 1px solid var(--gray-100); }
.land-h2 { margin: 0; font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
@media (max-width: 760px) { .land-section { padding: var(--sp-12) 0; } }

/* Reveal on scroll lives in base.css, guarded by .js-reveal, and the shell
   runs it for every page. */

/* ---- Footer, the reference's shape ----
   Selectors carry .site-footer so they outrank the shell's generic footer
   link rule, which loads later and would otherwise turn every link into a
   block and strip the inner padding. */
.site-footer > .container { padding-top: var(--sp-16); padding-bottom: var(--sp-8); }
.footer-cols { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: var(--sp-8); }
.footer-cols h5 { margin: 0 0 var(--sp-4); }
.site-footer .footer-cols a { display: block; padding: 5px 0; }
.site-footer .footer-cols .logo { display: inline-flex; padding: 0; }
.footer-cols .fc-brand p { margin-top: var(--sp-4); max-width: 30ch; font-size: var(--fs-sm); color: var(--text-inverse-dim); line-height: 1.55; }
.footer-legal p { margin: 0 0 8px; }
.footer-legal p:last-child { margin-bottom: 0; }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--navy-800);
  font-size: var(--fs-xs); color: var(--text-inverse-dim);
}
.footer-bar .fb-legal { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 var(--sp-3); }
.site-footer .footer-bar a { display: inline; padding: 0; margin: 0; color: var(--text-inverse-dim); }
.site-footer .footer-bar a::before { content: '·'; margin-right: var(--sp-3); color: var(--text-inverse-faint); }
.site-footer .footer-bar a:hover { color: var(--text-inverse); }
.footer-bar .fb-region { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.footer-bar .fb-region svg { width: 14px; height: 14px; }
/* The last landing section carries its own rhythm; the footer's margin
   would double it. */
.land-section:last-of-type { padding-bottom: var(--sp-10); }
@media (max-width: 960px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-cols .fc-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }

/* ============================================================
   ONBOARDING (v1.21) — the account-setup pattern
   A quiet bar, a centered card, six code boxes that behave like one field,
   and a vertical stepper that shows an applicant where they stand.
   ============================================================ */

/* ---- Chrome ---- */
.auth-bar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--white) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-200); }
.auth-bar-inner { max-width: var(--container); margin: 0 auto; height: var(--header-h); padding: 0 var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.auth-bar-right { display: flex; align-items: center; gap: var(--sp-3); }
.auth-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--navy-900); text-decoration: none; transition: background-color var(--dur-fast) ease; }
.auth-close:hover { background: var(--gray-100); text-decoration: none; }
.auth-close:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.auth-close svg { width: 18px; height: 18px; }
.auth-wrap { max-width: 600px; margin: 0 auto; padding: var(--sp-12) var(--sp-5) var(--sp-16); }
.card.auth-card { border: 1px solid var(--gray-200); border-radius: var(--r-xl); background: var(--white); padding: var(--sp-10); box-shadow: none; }
.auth-h1 { margin: 0 0 var(--sp-3); font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.auth-sub { margin: 0 0 28px; font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.55; }
.auth-foot { text-align: center; margin: var(--sp-5) auto 0; font-size: var(--fs-sm); color: var(--text-secondary); max-width: 44ch; line-height: 1.55; }
.funnel-progress { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
/* auto, not 1: a zero basis would flatten the track when the phone layout stacks it. */
.funnel-progress .fp-track { flex: auto; height: 6px; }
.funnel-progress .fp-label { margin: 0; white-space: nowrap; text-align: right; }
@media (max-width: 560px) {
  .auth-wrap { padding: var(--sp-6) var(--sp-4) var(--sp-10); }
  .card.auth-card { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg); }
  .auth-h1 { font-size: var(--fs-h2); }
  .funnel-progress { flex-direction: column; align-items: stretch; gap: 6px; }
  .funnel-progress .fp-label { text-align: center; }
  .auth-bar .secure-flag span { display: none; }
  .auth-bar .secure-flag { padding: 7px 9px; }
}

/* ---- Code boxes ---- */
.otp { display: flex; gap: 10px; }
.otp input {
  width: 64px; height: 68px; min-width: 0; text-align: center;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--navy-900);
  border: 1.5px solid var(--gray-300); border-radius: var(--r-md); background: var(--white); caret-color: var(--blue-600);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.otp input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-600) 14%, transparent); }
.otp.is-complete input { border-color: var(--blue-600); }
.otp.is-invalid input { border-color: var(--status-danger); }
.otp.is-invalid input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 14%, transparent); }
@media (max-width: 480px) { .otp { gap: 6px; } .otp input { width: 100%; height: 60px; font-size: 1.3rem; } }
.otp-label { display: block; font-weight: 650; font-size: var(--fs-sm); margin-bottom: 10px; }
.otp-hint { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--text-tertiary); }

/* ---- Resend pill and the quiet link ---- */
.resend {
  display: block; width: 100%; margin-top: var(--sp-6); padding: 15px; border: 0; border-radius: var(--r-pill);
  background: var(--gray-100); color: var(--text-tertiary); cursor: default;
  font: inherit; font-size: var(--fs-base); font-weight: 650; text-align: center; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.resend.is-ready { background: var(--navy-900); color: var(--white); cursor: pointer; }
.resend.is-ready:hover { background: var(--navy-800); }
.resend:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.auth-link { display: block; text-align: center; margin-top: var(--sp-5); font-weight: 650; color: var(--blue-700); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

/* ---- The hub: a vertical stepper ---- */
.hub { max-width: 600px; margin: 0 auto; padding: var(--sp-16) var(--sp-5); }
.hub-art { margin-bottom: var(--sp-8); }
.hub-art svg { display: block; width: 72px; height: 64px; }
.hub-chip { display: inline-flex; align-items: center; gap: 9px; margin-bottom: var(--sp-5); font-size: var(--fs-sm); font-weight: 650; }
.hub-chip .hc-mark { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--blue-600); color: var(--white); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.hub-chip .hc-sub { font-weight: 500; color: var(--text-secondary); }
.hub h1 { margin: 0 0 var(--sp-3); font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
.hub-lede { margin: 0 0 var(--sp-8); font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.55; }
.vstep { list-style: none; margin: 0; padding: 0; }
.vstep li { position: relative; display: flex; gap: var(--sp-4); padding-bottom: var(--sp-6); }
.vstep li:last-child { padding-bottom: 0; }
.vstep li::before { content: ''; position: absolute; left: 15px; top: 36px; bottom: 6px; width: 2px; background: var(--blue-600); }
.vstep li:last-child::before, .vstep li.is-current::before, .vstep li.is-todo::before { background: var(--gray-200); }
.vstep li:last-child::before { display: none; }
.vs-num {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700;
  border: 1.5px solid var(--gray-300); background: var(--white); color: var(--text-tertiary);
}
.vs-num svg { width: 15px; height: 15px; }
.vstep li.is-done .vs-num { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }
.vstep li.is-current .vs-num { border: 2px solid var(--blue-600); color: var(--blue-700); }
.vs-body { min-width: 0; padding-top: 5px; }
.vs-title { font-weight: 650; font-size: var(--fs-base); line-height: 1.3; }
.vstep li.is-todo .vs-title { color: var(--text-secondary); }
.vs-sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.vs-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font-size: var(--fs-sm); font-weight: 650; }
.vs-status svg { width: 14px; height: 14px; }
.vs-status.is-done { color: var(--blue-700); }
.vs-status.is-time { color: var(--status-success); }
.vs-status.is-wait { color: var(--status-warning-fg); }
.hub-cta { margin-top: var(--sp-8); }
.hub-cta .btn-primary { width: 100%; padding: 18px; font-size: var(--fs-base); }
.hub-cta .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
@media (max-width: 560px) { .hub { padding: var(--sp-8) var(--sp-4) var(--sp-12); } .hub h1 { font-size: var(--fs-h2); } }