/* ─── Design Tokens ─────────────────────────────────────────────── */
:root {
  --blue:         #20407d;
  --blue-dark:    #163264;
  --blue-bg:      #eef2f8;
  --blue-border:  #c5d4e8;

  --bg:           #f1f5f9;
  --surface:      #ffffff;
  --border:       #e2e8f0;
  --border-light: #f1f5f9;

  --text-1:       #0f172a;
  --text-2:       #475569;
  --text-3:       #94a3b8;

  --green:        #10b981;
  --green-bg:     #d1fae5;
  --green-text:   #065f46;

  --red:          #ef4444;
  --red-bg:       #fef2f2;
  --red-border:   #fecaca;

  --amber-bg:     #fef3c7;
  --amber-text:   #92400e;

  --yellow-bg:    #fffde7;
  --yellow-border:#fde68a;

  --crimson:      #c00000;

  --radius:       8px;
  --radius-sm:    5px;

  --shadow-sm:    0 1px 2px rgba(0,0,0,0.06);
  --shadow:       0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);

  --header-h:     58px;
  --setup-w:      300px;
}

/* ─── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
  font-family: 'Catamaran', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ─── Login ──────────────────────────────────────────────────────── */
#login-overlay {
  position: fixed; inset: 0;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 0;
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}

/* Blue header strip — matches Customer Service login */
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blue);
  padding: 24px 40px;
}

.brand-icon {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.login-form {
  padding: 32px 40px 40px;
}

.login-form h2 {
  font-family: 'Oxygen', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}

.login-sub {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 24px;
}

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }

.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}

.field input,
.field select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(32,64,125,0.12);
}

.field-hint {
  font-size: 12px;
  color: var(--text-2);
}

/* Saved Renewals modal — load/delete server-side snapshots of a group's inputs
   (saving is the "Save Group" header button, shown after Generate) */
.renewals-save-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-2);
}

.renewals-list {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 52vh; overflow-y: auto;
}

.renewal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.renewal-row-info { flex: 1; min-width: 0; }
.renewal-row-name {
  font-size: 13px; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.renewal-row-meta { font-size: 12px; color: var(--text-2); }

.btn-renewal-load { flex-shrink: 0; }

.btn-renewal-delete {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 6px 9px;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-renewal-delete:hover { background: #fdf2f2; border-color: #c0392b; color: #c0392b; }
.btn-renewal-delete:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.renewals-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.login-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
button { font-family: inherit; cursor: pointer; }

.login-password-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 10px;
}
.login-password-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(32,64,125,0.12);
}

.btn-login {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-login:hover:not(:disabled) { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-login:disabled { opacity: 0.55; cursor: not-allowed; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  border: 1px solid;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-primary {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.btn-add {
  padding: 3px 10px;
  background: var(--surface); color: var(--blue);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.btn-add:hover { background: var(--blue-bg); border-color: var(--blue); }

/* Import Census — file-based bulk action, set apart from the single-row "+ Add"
   by an upload icon and an outlined (rather than filled) treatment. */
.btn-import {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: var(--surface); color: var(--blue);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-import:hover {
  background: var(--blue-bg); border-color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.btn-import:active { background: var(--blue-border); box-shadow: none; }
.btn-import:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.btn-import-icon { flex-shrink: 0; transition: transform 0.15s; }
.btn-import:hover .btn-import-icon { transform: translateY(-1px); }

.btn-remove {
  padding: 0 6px;
  background: transparent; color: var(--text-3);
  border: none;
  font-size: 16px; line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.btn-remove:hover { color: var(--red); background: var(--red-bg); }

/* ─── App Shell ──────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; }

.app-header {
  height: var(--header-h);
  background: var(--blue);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 100;
}

.header-brand { display: flex; align-items: center; gap: 10px; }

.header-logo { height: 36px; }

/* ─── View Tabs ──────────────────────────────────────────────────── */
/* Top-level section switcher on the blue bar. Segmented pill: same
   translucent-ghost vocabulary as the header buttons; the active tab
   uses the filled-white primary treatment (.btn-export-primary). */
.view-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-sm);
}

.view-tab {
  padding: 5px 14px;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-family: 'Oxygen', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.view-tab:hover { background: rgba(255,255,255,0.16); color: #fff; }

.view-tab--active,
.view-tab--active:hover {
  background: #fff;
  color: var(--blue);
}

.view-tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Comparison-tool actions disappear on the One-Pagers view. Driven by
   data-view (not .hidden) so app logic keeps sole ownership of the
   export/save buttons' .hidden state. */
#app[data-view="onepagers"] .header-action--comparison { display: none; }
#app[data-view="comparison"] .header-action--onepagers { display: none; }

.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ─── Setup Panel ────────────────────────────────────────────────── */
.setup-panel {
  width: var(--setup-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.setup-panel::-webkit-scrollbar { width: 4px; }
.setup-panel::-webkit-scrollbar-track { background: transparent; }
.setup-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.setup-section {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border-light);
}

.setup-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 10px;
}

.setup-label--current { color: var(--blue); }
.setup-label--renewal { color: #6b21a8; }
.setup-label--new     { color: #0d9488; }
.setup-label--dental  { color: #0d6b42; }
.setup-label--vision  { color: #5b21b6; }
.setup-label--census  { color: var(--blue); }
.setup-label--client  { color: var(--blue); }

/* ─── Mode Toggle ────────────────────────────────────────────────── */
.mode-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mode-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
/* Sub-option of the Alternatives switch: indented under it, shown only in alt mode. */
.mode-toggle-row--sub {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}
.mode-toggle-row--sub .mode-toggle-label {
  font-weight: 500;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 21px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 21px;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: var(--shadow-sm);
}
.toggle-switch input:checked + .toggle-slider { background: var(--blue); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(17px); }

.setup-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.setup-label-row .setup-label { margin-bottom: 0; }
.census-actions { display: flex; align-items: center; gap: 6px; }

.btn-reset {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px;
  font-size: 11px; font-weight: 700;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-reset svg { transition: transform 0.4s ease; }
.btn-reset:hover {
  color: #fff;
  border-color: #b91c1c;
  background: #dc2626;
}
.btn-reset:hover svg { transform: rotate(-180deg); }
.btn-reset:active { transform: translateY(1px); }

.census-merge {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 4px;
  font-size: 13px; color: var(--text-muted, #555);
}
.census-merge-label { font-weight: 600; }
.census-merge-opt { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

.plan-slots { display: flex; flex-direction: column; gap: 8px; }

.plan-slot { display: flex; flex-direction: column; gap: 4px; }
.plan-slot label {
  font-size: 11px; font-weight: 600; color: var(--text-2);
}
.plan-slot-row {
  display: flex; align-items: center; justify-content: space-between;
}
.plan-slot-label {
  font-size: 11px; font-weight: 600; color: var(--text-2);
}
.renewal-mark {
  display: flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700;
  color: var(--crimson);
  cursor: pointer;
  user-select: none;
}
.renewal-mark input[type="checkbox"] {
  width: 11px; height: 11px;
  cursor: pointer;
  accent-color: var(--crimson);
}
.renewal-tag {
  display: block;
  color: var(--crimson);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.plan-slot select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--text-1); background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.plan-slot select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(32,64,125,0.12);
}

/* ─── Census Cards ───────────────────────────────────────────────── */
.census-list { display: flex; flex-direction: column; gap: 6px; }

.census-row-empty {
  font-size: 12px; color: var(--text-3);
  font-style: italic; padding: 4px 0;
}

.census-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.census-row-main {
  display: grid;
  grid-template-columns: 64px 1fr 22px;
  grid-template-areas:
    "name name rm"
    "sex  dob  dob"
    "loc  loc  loc";
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  background: var(--surface);
}
.census-row-main .census-name   { grid-area: name; }
.census-row-main .census-gender { grid-area: sex; }
.census-row-main .census-dob    { grid-area: dob; }
.census-row-main .census-remove-emp { grid-area: rm; }
.census-row-main .census-loc    { grid-area: loc; }

.census-loc {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 6px;
  align-items: center;
}

.census-deps { background: var(--surface); }

.census-dep-row {
  display: grid;
  grid-template-columns: 64px 1fr 22px;
  grid-template-areas:
    "lbl  name rm"
    "sex  dob  dob";
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-top: 1px solid var(--border-light);
}
.census-dep-row .census-dep-label                          { grid-area: lbl; }
.census-dep-row .census-spouse-name,
.census-dep-row .census-child-name                         { grid-area: name; }
.census-dep-row .census-spouse-gender,
.census-dep-row .census-child-gender                       { grid-area: sex; }
.census-dep-row .census-spouse-dob,
.census-dep-row .census-child-dob                          { grid-area: dob; }
.census-dep-row .census-remove-spouse,
.census-dep-row .census-remove-child                       { grid-area: rm; }

.census-dep-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

.census-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 6px;
  background: var(--bg);
  border-top: 1px solid var(--border-light);
}

.census-tier-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: #dce6f5;
  color: var(--blue);
  margin-right: auto;
}

.btn-dep {
  padding: 2px 8px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.btn-dep:hover { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-border); }

.census-card input[type="text"],
.census-card input[type="date"],
.census-card select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--text-1); background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  min-width: 0;
}

.census-card input[type="date"] {
  padding-right: 4px;
}
.census-card select {
  padding: 6px 4px;
}
.census-card input:focus,
.census-card select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(32,64,125,0.12);
}

/* ─── Census Plan Assignment Pills ──────────────────────────────── */
.census-card-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 8px 6px;
  background: var(--bg);
  border-top: 1px solid var(--border-light);
}

.plan-assign-pill {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  line-height: 1.4;
  transition: opacity 0.12s, filter 0.12s;
}

.plan-assign-pill.active.pill-current {
  background: var(--blue-bg);
  color: var(--blue);
  border-color: var(--blue-border);
}

.plan-assign-pill.active.pill-renewal {
  background: #f3e8ff;
  color: #6b21a8;
  border-color: #d8b4fe;
}

.plan-assign-pill.active.pill-alt {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

.plan-assign-pill.active.pill-dental-current {
  background: #d6f5ec;
  color: #0d6b42;
  border-color: #94dcc2;
}

.plan-assign-pill.active.pill-dental-renewal {
  background: #fdeed3;
  color: #8a4b00;
  border-color: #f0d09a;
}

.plan-assign-pill.active.pill-vision-current {
  background: #e7e0fb;
  color: #4c2f9e;
  border-color: #c8b8f0;
}

.plan-assign-pill.active.pill-vision-renewal {
  background: #fde2ee;
  color: #9d174d;
  border-color: #f6b3d2;
}

.plan-assign-pill:not(.active) {
  background: var(--surface);
  color: var(--text-3);
  border-color: var(--border);
  text-decoration: line-through;
  opacity: 0.6;
}

.plan-assign-pill:hover { opacity: 1; filter: brightness(0.93); }

/* ─── Setup Actions ──────────────────────────────────────────────── */
.setup-actions {
  padding: 14px 16px;
  margin-top: auto;
}
.setup-actions .btn-primary {
  width: 100%; justify-content: center;
  padding: 9px 14px;
  font-weight: 600;
  border-radius: var(--radius);
}

/* ─── Comparison Area ────────────────────────────────────────────── */
.comparison-area {
  flex: 1;
  overflow: auto;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.comparison-area::-webkit-scrollbar { width: 6px; height: 6px; }
.comparison-area::-webkit-scrollbar-track { background: transparent; }
.comparison-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.comparison-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 16px;
  color: var(--text-3);
  text-align: center;
}
.comparison-empty p { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.comparison-empty strong { color: var(--blue); }

/* ─── One-Pagers Area ────────────────────────────────────────────── */
/* Shell for the Employee One-Pagers view — mirrors .comparison-area. */
.onepager-area {
  flex: 1;
  overflow: auto;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#onepager-output {
  display: flex; flex-direction: column; gap: 4px;
}

/* Contribution amount + $/% type selector on one line. */
.onepager-contrib-row { display: flex; gap: 8px; }
.onepager-contrib-row input { flex: 1; }
.onepager-contrib-row select { flex: 0 0 64px; width: 64px; }

/* Employee Pays — the number the one-pager exists to show. Blue emphasis band;
   the separator column stays yellow (same override the % change rows use). */
.comparison-table tr.row-onepager-key td {
  background: var(--blue-bg);
  font-weight: 700;
  font-size: 12px;
  color: var(--blue-dark);
}
.comparison-table tr.row-onepager-key td.td-value {
  background: var(--blue-bg);
  text-align: right;
  padding-right: 10px;
}
.comparison-table tr.row-onepager-key td.td-sep { background: var(--yellow-bg); }

/* ─── Comparison Output ──────────────────────────────────────────── */
#comparison-output {
  display: flex; flex-direction: column; gap: 4px;
}

.comparison-header {
  text-align: center;
  margin-bottom: 16px;
}
.comparison-header h1 {
  font-family: 'Oxygen', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--blue);
}
.comparison-header h2 {
  font-size: 13px; font-weight: 700;
  color: var(--blue);
}
.comparison-header .effective-label {
  font-style: italic;
  font-size: 13px;
  color: var(--text-2);
  margin-top: 4px;
}

/* ─── Comparison Table ───────────────────────────────────────────── */
.comparison-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Print-only closing line under the benefit grid (see @media print) */
.comparison-table tr.row-grid-end { display: none; }

.comparison-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  table-layout: fixed;
}

/* Column widths */
.comparison-table .col-label { width: 200px; }
.comparison-table .col-plan  { width: 160px; }
.comparison-table .col-sep   { width: 12px; }

/* ─── Table Header ───────────────────────────────────────────────── */
.comparison-table thead tr.group-header th {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid #3a5fa0;
}

.comparison-table thead tr.group-header th.th-sep {
  background: var(--yellow-bg);
  border-color: #3a5fa0;
  /* Cap the top of the separator bar so it isn't left open at the table's top
     edge — match the header's top border so the top line stays continuous. */
  border-top: 1px solid #3a5fa0 !important;
}

/* Collapsed borders: the separator column owns both of its shared edges. Keep
   the header blue border color (#3a5fa0) on both edges so the cream divider
   sits flush within the blue header instead of poking a gray line up through it. */
.comparison-table thead th:has(+ th.th-sep) {
  border-right-color: #3a5fa0;
}
.comparison-table thead th.th-sep + th {
  border-left-color: #3a5fa0;
}

.comparison-table thead tr.plan-header th {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 7px 8px;
  text-align: center;
  line-height: 1.35;
  border: 1px solid #3a5fa0;
}

.comparison-table thead tr.plan-header th.th-sep {
  background: var(--yellow-bg);
  border-color: #3a5fa0;
}

/* The line under the plan titles is painted as a bottom background band rather
   than a real border: collapsed vertical column dividers poke down through a
   bottom border and leave a tiny notch at each crossing (the same artifact the
   section dividers avoid). A full-width band fills the line with no break. */
.comparison-table thead tr.plan-header th:not(.th-label):not(.th-sep) {
  border-bottom: 0;
  background: linear-gradient(#3a5fa0, #3a5fa0) bottom / 100% 1px no-repeat, var(--blue);
}

.comparison-table thead tr.plan-header th.th-label {
  background: var(--surface);
  color: var(--text-2);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding-left: 10px;
  border: 1px solid var(--border);
}

/* ─── Table Body ─────────────────────────────────────────────────── */
.comparison-table tbody tr td {
  padding: 5px 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  vertical-align: middle;
  color: var(--text-1);
}

.comparison-table tbody tr td.td-label {
  font-weight: 500;
  color: var(--text-1);
  background: var(--surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comparison-table tbody tr td.td-label.indent {
  padding-left: 20px;
  color: var(--text-2);
}

.comparison-table tbody tr td.td-sep {
  background: var(--yellow-bg);
  padding: 0;
}

/* The center divider is one solid, continuous yellow bar running the full height
   of the table. Drop the horizontal cell borders that would otherwise chop it
   into per-row segments — only the blue section/subsection divider bands cross
   over it (they're painted as background bands, so they sit on top of the bar). */
.comparison-table tbody tr td.td-sep,
.comparison-table thead tr th.th-sep {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.comparison-table tbody tr td.td-value {
  text-align: center;
  background: var(--surface);
}

/* ─── Row Types ──────────────────────────────────────────────────── */
.comparison-table tr.row-section td {
  background: var(--blue-bg);
  color: var(--blue);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
}

/* The colored category divider is painted as a 3px background band at the top of
   the cell (not a border): a border-collapse corner artifact let the row-above
   vertical column borders poke through and break a colored border, but they
   cannot reach into this cell's own background area below the boundary */
.comparison-table tr.row-section-oon td {
  background: linear-gradient(to bottom, var(--blue) 0, var(--blue) 3px, var(--blue-bg) 3px);
  color: var(--blue);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-top: 0;
}

.comparison-table tr.row-section-rx td {
  background: linear-gradient(to bottom, var(--blue) 0, var(--blue) 3px, var(--blue-bg) 3px);
  color: var(--blue);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-top: 0;
}

.comparison-table tbody tr.row-referral td,
.comparison-table tbody tr.row-referral td.td-label,
.comparison-table tbody tr.row-referral td.td-value {
  background: var(--surface);
  color: var(--text-1);
  font-weight: 700;
  padding: 5px 10px;
  border-color: var(--border);
}
.comparison-table tbody tr.row-referral td.referral-yes {
  color: var(--crimson);
}

.comparison-table tr.row-subsection td.td-label {
  font-weight: 700;
  color: var(--text-1);
  background: #f8fafc;
}
.comparison-table tr.row-subsection td.td-value {
  background: #f8fafc;
}

/* On the medical grid, each subsection label (Copay, Preventive Services, Out of
   Pocket, …) opens its box with a thin divider line matching the rest of the
   table — not the heavy blue band reserved for the major OUT-OF-NETWORK /
   Prescription section rows. Bottom border stays off so the label merges into
   its data rows. */
.comparison-table[data-plan-cols] tr.row-subsection td {
  background: #f8fafc;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}
/* The center divider stays a solid, uninterrupted yellow bar: no blue band
   crosses it on subsection rows — the bar shows pure yellow straight through. */
.comparison-table[data-plan-cols] tr.row-subsection td.td-sep {
  background: var(--yellow-bg);
  border-top: 0;
}

/* Group each subsection into a single borderless "box": drop the horizontal cell
   borders between the subsection label and its data rows (and between those data
   rows). The colored section/subsection bands provide all the group separation,
   so the rows under a label (e.g. Copay → Primary → Specialist) read as one block.
   Vertical column borders are kept; only top/bottom are removed. */
.comparison-table[data-plan-cols] tr.row-data td,
.comparison-table[data-plan-cols] tr.row-referral td,
.comparison-table[data-plan-cols] tr.row-section td,
.comparison-table[data-plan-cols] tr.row-section-oon td,
.comparison-table[data-plan-cols] tr.row-section-rx td {
  border-top: 0;
  border-bottom: 0;
}

/* Close off the IN-NETWORK band with a thin table-style line between the band
   and the content beneath it (the yellow divider stays solid — the sep cell
   keeps no border). */
.comparison-table[data-plan-cols] tr.row-section td {
  border-bottom: 1px solid var(--border);
}

/* The OUT-OF-NETWORK band's underline comes from the top border of the
   subsection ("Deductible") that follows it. PRESCRIPTION is followed by a plain
   data row ("Deductible/Person"), which carries no top border, so give that first
   row a matching line to close the band the same way (skipping the yellow sep). */
.comparison-table[data-plan-cols] tr.row-section-rx + tr td {
  border-top: 1px solid var(--border);
}
.comparison-table[data-plan-cols] tr.row-section-rx + tr td.td-sep {
  border-top: 0;
}

.comparison-table tr.row-alt td.td-value { background: #fafbfc; }
.comparison-table tr.row-alt td.td-label { background: #fafbfc; }

/* ─── Renewal Changed Highlighting ──────────────────────────────── */
.cell-changed {
  color: var(--red) !important;
  font-weight: 700 !important;
}

/* ─── Census Section ─────────────────────────────────────────────── */
.comparison-table tr.row-census-header td {
  background: var(--blue-bg);
  color: var(--blue);
  font-weight: 700;
  font-size: 11px;
  padding: 5px 10px;
  border-top: 0;
}

.comparison-table tr.row-census td {
  background: var(--surface);
  font-size: 12px;
}

.comparison-table tr.row-census td.td-value {
  text-align: right;
  padding-right: 10px;
}

.comparison-table tr.row-census td.td-value.td-value-center {
  text-align: center;
  padding-right: 0;
}

.comparison-table tr.row-census td.td-label {
  padding-left: 10px;
}

.census-tier-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  background: #dce6f5;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

/* Enrolled-employee count on dental/vision rate rows — heavier than the default
   <strong> weight and in the brand blue so the headcount stands out clearly. */
.enroll-count {
  font-weight: 900;
  color: var(--blue);
}

.comparison-table tr.row-total td {
  background: var(--yellow-bg);
  font-weight: 700;
  font-size: 12px;
}
.comparison-table tr.row-total td.td-value {
  /* Match the separator bars (--yellow-bg). Needs this specificity to beat the
     base `td.td-value` white background, which otherwise wins over `.row-total td`. */
  background: var(--yellow-bg);
  text-align: right;
  padding-right: 10px;
  color: var(--blue);
}
.comparison-table tr.row-total td.td-value.td-value-center {
  text-align: center;
  padding-right: 0;
}
.comparison-table tr.row-total td.td-label.td-total-label {
  background: var(--yellow-bg);
  color: var(--text-1);
  vertical-align: middle;
}


.change-positive { color: var(--red); }
.change-negative { color: var(--green-text); }
.change-zero     { color: var(--text-2); }

/* ─── Combined All-Plans Rows ────────────────────────────────────── */
.comparison-table tr.row-combined td {
  background: var(--yellow-bg);
  /* Match the regular grid lines exactly (width + color) so the vertical column
     dividers above collapse into this line cleanly — a heavier 2px line leaves a
     notch at each T-junction with the 1px verticals. */
  border-top: 1px solid var(--border);
  padding: 6px 10px;
}
/* Used by the disabled "Total Annual Premium" row (see buildTotalRows) — kept for re-enable. */
.comparison-table tr.row-combined td.td-label.td-summary-label {
  background: var(--blue-bg);
  color: var(--blue);
  font-weight: 700;
}
.comparison-table tr.row-combined td.td-combined-total {
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--blue);
}

/* ─── % Change Info Rows (part of the blue summary section) ─────── */
.comparison-table tr.row-change-info td {
  background: var(--blue-bg);
  font-size: 11px;
  font-weight: 600;
  border-top: 1px dashed var(--blue-border);
}
.comparison-table tr.row-change-info:first-of-type td {
  border-top: 2px solid var(--blue-border);
}
.comparison-table tr.row-change-info td.td-label.td-change-label {
  background: var(--blue-bg);
  color: var(--text-3);
  font-weight: 600;
  font-style: italic;
}
.comparison-table tr.row-change-info td.td-value {
  background: var(--blue-bg);
  text-align: center;
}
.comparison-table tr.row-change-info td.td-change-empty {
  background: var(--blue-bg);
}
.comparison-table tr.row-change-info td.td-sep {
  background: var(--yellow-bg);
}

/* ─── Toast ──────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--text-1); color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none; z-index: 999;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ─── Comparison Footer ──────────────────────────────────────────── */
.comparison-footer {
  margin-top: 12px;
  padding: 0 4px;
}
.comparison-footer p {
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.5;
  font-style: italic;
}

/* ─── Header Actions ─────────────────────────────────────────────── */
.header-actions { display: flex; align-items: center; gap: 8px; }

/* Secondary actions (View Plans, Import PDF): translucent ghost on the blue bar */
.btn-import-pdf,
.btn-export,
.btn-header-action {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-import-pdf:hover,
.btn-export:hover,
.btn-header-action:hover,
.btn-header-action[aria-expanded="true"] { background: rgba(255,255,255,0.22); color: #fff; }

/* Primary actions (Export PDF / Export Excel): the payoff — filled white, reads above the rest */
.btn-export-primary {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
}
.btn-export-primary:hover { background: var(--blue-bg); color: var(--blue-dark); }

/* Tertiary (Menu): borderless overflow trigger, set apart from the action cluster */
#header-menu-btn {
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,0.85);
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.25);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
#header-menu-btn:hover,
#header-menu-btn[aria-expanded="true"] { background: rgba(255,255,255,0.16); color: #fff; }

/* Keyboard focus — header buttons sit on the blue bar, so the ring is white */
.btn-import-pdf:focus-visible,
.btn-export:focus-visible,
.btn-header-action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ─── Header Dropdown Menu ──────────────────────────────────────── */
.header-menu { position: relative; }

.header-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 5px;
  z-index: 200;
}

.header-dropdown-item {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--text-1);
  transition: background 0.15s, color 0.15s;
}
.header-dropdown-item:hover { background: var(--bg); }
.header-dropdown-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.header-dropdown-item--danger { color: var(--red); }
.header-dropdown-item--danger:hover { background: var(--red-bg); }
.header-dropdown-item--danger:focus-visible { outline-color: var(--red); }

/* Separate the destructive action from the items above it (only when one is shown) */
.header-dropdown-item:not(.hidden) ~ .header-dropdown-item--danger {
  margin-top: 5px;
  padding-top: 9px;
  border-top: 1px solid var(--border-light);
}

.import-modal-desc {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 16px;
}

/* ─── Buttons (additional variants) ─────────────────────────────── */
.btn-secondary {
  background: var(--blue-bg); color: var(--blue); border-color: var(--blue-border);
  cursor: pointer;
}
.btn-secondary:hover { background: var(--blue-border); }

.btn-ghost {
  background: transparent; color: var(--text-2); border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg); }

/* ─── Upload Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  padding: 16px;
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  width: 100%; max-width: 460px;
  overflow: hidden;
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--blue);
  padding: 16px 20px;
}

.modal-title {
  font-size: 14px; font-weight: 700;
  color: #fff;
  font-family: 'Oxygen', sans-serif;
}

.modal-close {
  background: transparent; border: none;
  color: rgba(255,255,255,0.7);
  font-size: 20px; line-height: 1;
  padding: 0 4px;
  transition: color 0.15s;
}
.modal-close:hover { color: #fff; }

.modal-body { padding: 24px 20px; }

/* ─── View Plans Modal ───────────────────────────────────────────── */
.modal-card--wide { max-width: 720px; }

.plans-modal-body {
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.plans-modal-body::-webkit-scrollbar { width: 6px; }
.plans-modal-body::-webkit-scrollbar-track { background: transparent; }
.plans-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.plans-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin: 18px 0 10px;
}

.plans-family {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 12px 0 6px;
}

.plans-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

.plans-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

.plans-item-code {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 3px;
  background: #dce6f5;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.plans-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  padding: 8px 0;
}

/* ─── Drop Zone ──────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--blue-border);
  border-radius: var(--radius);
  background: var(--blue-bg);
  padding: 32px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  color: var(--text-3);
  transition: border-color 0.15s, background 0.15s;
}

.drop-zone.drag-over {
  border-color: var(--blue);
  background: #dbe8f7;
}

.drop-text {
  font-size: 14px; font-weight: 600;
  color: var(--text-1);
}

.drop-or {
  font-size: 12px; color: var(--text-3);
}

.drop-hint {
  font-size: 11px; color: var(--text-3);
  margin-top: -4px;
}

/* ─── Upload Status ──────────────────────────────────────────────── */
.upload-status {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.upload-status--loading {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid var(--blue-border);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

.upload-status--error {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}

/* ─── Upload Preview ─────────────────────────────────────────────── */
.upload-preview {
  display: flex; align-items: center; gap: 16px;
  padding: 16px;
  background: var(--green-bg);
  border: 1px solid #a7f3d0;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.preview-check {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.preview-info { display: flex; flex-direction: column; gap: 4px; }

.preview-stat {
  font-size: 13px; font-weight: 600;
  color: var(--green-text);
}

.preview-warning {
  font-size: 12px; color: var(--text-2);
  margin-bottom: 20px;
}

.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ─── Census page (hidden in app, shown in PDF) ─────────────────── */
.census-page { display: none; }

/* ─── Print ──────────────────────────────────────────────────────── */
@media print {
  /* Wide comparison/census tables (label column + one column per plan) need
     horizontal room. Landscape + tight margins reclaims ~40% more usable width
     than the portrait default, which is what lets the fonts below stay legible. */
  @page {
    size: landscape;
    margin: 0.3in;
  }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body { background: #fff; }

  .setup-panel,
  .app-header,
  .btn-export,
  #toast,
  .comparison-empty { display: none !important; }

  #app { display: block; height: auto; }
  .app-body { display: block; overflow: visible; }

  .comparison-area,
  .onepager-area {
    padding: 20px 28px;
    overflow: visible;
    height: auto;
  }

  /* Drop the flex column layout for print: a flex container fragments its
     children unreliably across pages in Chrome's print engine (repeated header
     + a single household shoved to the page bottom, followed by blank pages,
     once the document grows past a couple pages — break-inside is ignored).
     Normal block flow paginates correctly, so the per-household break-inside
     rules below actually hold. Screen layout is unaffected (print-only). */
  #comparison-output,
  #onepager-output { display: block; overflow: visible; gap: 0; }

  /* No border on the wrapper: it doesn't fragment with the table across
     pages, leaving stray side lines — the cells' own borders frame the table */
  .comparison-table-wrap {
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .comparison-table {
    font-size: 12px;
    page-break-inside: auto;
  }

  /* The one-pager is a single sheet by contract: benefit grid + cost block on ONE
     printed page (user direction 2026-07-08). Compact the type and row padding so
     the combined table fits a landscape page instead of spilling the cost rows. */
  .onepager-sheet .comparison-table { font-size: 11px; }
  .onepager-sheet .comparison-table tbody tr td { padding: 3px 8px; }
  .onepager-sheet .comparison-table tr.row-section td,
  .onepager-sheet .comparison-table tr.row-census-header td { padding: 3px 10px; }
  .onepager-sheet .comparison-header { margin-bottom: 10px; }

  /* Proportional columns in print. The on-screen fixed-px columns (200 + 160·N
     + 12) sum WIDER than a landscape page once there are ~5-6 plans, so the
     browser shrinks the whole page to fit the width — which is what leaves the
     tall empty band beneath the table on export. Percentage widths keep the
     table exactly page-width at full scale, so it fills the page. col-plan is
     `auto`, so the N plan columns share the remaining width equally for any N. */
  .comparison-table .col-label { width: 16%; }
  .comparison-table .col-sep   { width: 1.2%; }
  .comparison-table .col-plan  { width: auto; }

  /* Plan-count-responsive sizing so the full 38-row benefit grid stays on ONE
     page for any number of plans. The grid's height is driven almost entirely by
     how many data cells WRAP to a second line ("Deductible then $500 copay" at a
     narrow column width), not by the row count — so at 5-6 columns (the widest a
     comparison can be: 3 Current + 3 Renewal, or up to 6 Renewal alternatives)
     the font steps down just far enough that the common values fit on one line,
     while WRAPPING STAYS ON: the rare genuinely-long string ("…$500/day copay (5
     day max)") then wraps to two lines instead of colliding into the next column.
     Padding also tightens (the prior "step padding UP to fill the page" approach
     is what pushed Out-of-Network + Prescription onto a near-empty second page).
     A little whitespace below the grid is intentional headroom — it keeps denser
     real-world data (more wrapping cells than a typical case) from spilling.
     Few-plan comparisons (≤4 columns) keep the roomier 11px set defined below.
     (data-plan-cols = total Current + Renewal columns, set by buildComparisonHTML.) */
  /* Tighten the FONT and (horizontal only) padding. Vertical padding is left to
     the base + section rules below so the OON/Rx bands keep the top clearance
     their 3px colored dividers need — narrowing the side padding is what lets a
     value like "Deductible then $500 copay" sit on one line at these widths. */
  .comparison-table[data-plan-cols="5"],
  .comparison-table[data-plan-cols="5"] tbody tr td { font-size: 10px; }
  .comparison-table[data-plan-cols="5"] tbody tr td { padding-left: 6px; padding-right: 6px; line-height: 1.12; }
  .comparison-table[data-plan-cols="5"] thead tr.plan-header th { font-size: 9.5px; padding: 3px 6px; }

  .comparison-table[data-plan-cols="6"],
  .comparison-table[data-plan-cols="6"] tbody tr td { font-size: 9.5px; }
  .comparison-table[data-plan-cols="6"] tbody tr td { padding-left: 5px; padding-right: 5px; line-height: 1.12; }
  .comparison-table[data-plan-cols="6"] thead tr.plan-header th { font-size: 9px; padding: 2.5px 5px; }

  /* Print sizing: fit the full medical benefit grid on one page while keeping
     it comfortably legible (the on-screen view is unaffected). 11px body type
     keeps standard values like "Deductible then $500 copay" on a single line
     (12px wraps them, doubling the row), and the row padding/line-height below
     give each row real breathing room rather than a squeezed single page. */
  .comparison-table { font-size: 11px; }

  .comparison-table tbody tr td {
    padding: 1.25px 9px;
    line-height: 1.15;
    font-size: 11px;
  }

  /* Section / referral / subsection label bands. */
  .comparison-table tr.row-section td,
  .comparison-table tbody tr.row-referral td,
  .comparison-table tr.row-subsection td {
    padding-top: 1.25px;
    padding-bottom: 1.25px;
  }

  /* OON / Rx section rows carry a 3px colored divider painted at the cell top,
     so keep enough top padding to clear it. */
  .comparison-table tr.row-section-oon td,
  .comparison-table tr.row-section-rx td {
    padding-top: 3.25px;
    padding-bottom: 1.25px;
  }

  /* Header rows: plan names + group banner. */
  .comparison-table thead tr.group-header th { padding: 2px 10px; }
  .comparison-table thead tr.plan-header th {
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.15;
  }

  .comparison-table thead { display: table-header-group; }

  .comparison-table tr { page-break-inside: avoid; }

  /* The Census / Rates breakdown (per-employee premiums + Total Monthly /
     Combined / % change rows) gets its own page, separate from the benefit
     grid — the grid is the plan-comparison page; this is the pricing page.
     The break happens before the .rates-page section so its title block leads
     the page; the thead (plan columns) repeats below via table-header-group. */
  .rates-page {
    page-break-before: always;
    break-before: page;
  }
  /* The census/rates rows flow freely across pages so the section begins
     directly under its own title + plan-column header. Pinning the whole block
     with break-inside:avoid orphaned the title + header on a page of their own
     whenever the census was too tall to also fit the block beneath them; the
     repeating thead re-prints the plan columns atop each continuation page. */
  .comparison-table tbody.rates-block { break-inside: auto; page-break-inside: auto; }

  /* …but keep the Total / Combined / %-change cluster intact as one unit so it
     never splits across a page break (and pulls the last census row with it if
     it won't fit at the foot of a page). */
  .comparison-table tbody.rates-totals-block {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Roomier rows on the standalone pricing page: it isn't space-constrained like
     the benefit grid, so give each census/total row more vertical breathing room
     (padding only — font sizes are left untouched). */
  .comparison-table tbody.rates-block tr.row-census-header td,
  .comparison-table tbody.rates-block tr.row-census td,
  .comparison-table tbody.rates-totals-block tr.row-total td,
  .comparison-table tbody.rates-totals-block tr.row-combined td,
  .comparison-table tbody.rates-totals-block tr.row-change-info td {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Keep section/subsection labels with the first data row that follows */
  .comparison-table tr.row-section,
  .comparison-table tr.row-section-oon,
  .comparison-table tr.row-section-rx,
  .comparison-table tr.row-subsection,
  .comparison-table tr.row-census-header { break-after: avoid; page-break-after: avoid; }

  .comparison-table tr.row-census-header,
  .comparison-table tr.row-total { page-break-before: avoid; }

  /* Each starts on a fresh page AND is kept whole on it, so the section never
     splits with its rate rows orphaned onto a second page (the dental table is
     the long one — see the tighter padding below that lets break-inside hold). */
  .dental-comparison-wrap,
  .vision-comparison-wrap {
    page-break-before: always;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Vision is short, so it isn't space-constrained like the medical benefit
     grid. Give its rows roomy vertical padding so the export matches the screen. */
  .vision-comparison-wrap .comparison-table tbody tr td {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Dental carries far more rows (in- AND out-of-network classes, deductibles,
     annual maximum, then the rate tiers), so it needs tighter rows than vision
     to keep the whole section on a single page — break-inside:avoid above only
     holds when the content actually fits one page. */
  .dental-comparison-wrap .comparison-table tbody tr td {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  /* Compact title block so the full benefit grid clears one page beneath it. */
  .comparison-header { margin-bottom: 4px; }
  .comparison-header h1 { font-size: 15px; color: #0f172a; margin: 0; line-height: 1.1; }
  .comparison-header h2 { font-size: 11px; color: #20407d; margin: 1px 0 0; line-height: 1.1; }
  .comparison-header .effective-label { font-size: 11px; margin-top: 1px; }

  .comparison-footer { margin-top: 4px; }
  .comparison-footer p { font-size: 9px; margin: 0; line-height: 1.3; }

  /* Thicker, darker cell borders for legibility when printed/exported */
  .comparison-table thead tr.group-header th,
  .comparison-table thead tr.plan-header th {
    border: 2px solid #1e3a6e !important;
  }

  .comparison-table thead tr.plan-header th.th-label {
    border: 2px solid #7a8fa8 !important;
    /* Thin the line under "Benefits" (above IN-NETWORK) to match the rest of
       the header/body lines instead of the heavier 2px label border. */
    border-bottom-width: 1.5px !important;
  }

  /* Match the outer left/right table edges to the body's 1.5px lines so the
     header's heavier 2px border doesn't protrude past them down the sides. */
  .comparison-table thead tr.group-header th:first-child,
  .comparison-table thead tr.plan-header th:first-child {
    border-left-width: 1.5px !important;
  }
  .comparison-table thead tr.group-header th:last-child,
  .comparison-table thead tr.plan-header th:last-child {
    border-right-width: 1.5px !important;
  }

  /* Under-title line as a 2px bottom band in the export too — no border notch. */
  .comparison-table thead tr.plan-header th:not(.th-label):not(.th-sep) {
    border-bottom: 0 !important;
    background: linear-gradient(#1e3a6e, #1e3a6e) bottom / 100% 2px no-repeat, var(--blue) !important;
  }

  /* The separator's vertical edges run the full height of the table; keep them
     the same 1.5px width as the body's gray lines so the blue header edge lies
     flush with them instead of protruding past the narrower body borders. */
  .comparison-table thead tr.group-header th.th-sep,
  .comparison-table thead tr.plan-header th.th-sep {
    border-color: #1e3a6e !important;
    border-left-width: 1.5px !important;
    border-right-width: 1.5px !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  /* Cap the top of the separator bar so it isn't open at the table's top edge —
     match the header's 2px top border so the top line stays continuous. */
  .comparison-table thead tr.group-header th.th-sep {
    border-top: 2px solid #1e3a6e !important;
  }

  .comparison-table thead th:has(+ th.th-sep) {
    border-right: 1.5px solid #1e3a6e !important;
  }

  .comparison-table thead th.th-sep + th {
    border-left: 1.5px solid #1e3a6e !important;
  }

  .comparison-table tbody tr td {
    border: 1.5px solid #8da3b8 !important;
  }

  /* Borderless subsection "boxes" in the export too: drop the horizontal cell
     borders within the medical grid so each label + its data rows read as one
     block, separated only by the colored bands. Vertical borders stay. */
  .comparison-table[data-plan-cols] tr.row-data td,
  .comparison-table[data-plan-cols] tr.row-referral td,
  .comparison-table[data-plan-cols] tr.row-section td,
  .comparison-table[data-plan-cols] tr.row-section-oon td,
  .comparison-table[data-plan-cols] tr.row-section-rx td {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  /* Close off IN-NETWORK with a thin line in the export too. */
  .comparison-table[data-plan-cols] tr.row-section td {
    border-bottom: 1.5px solid #8da3b8 !important;
  }
  /* …but never across the yellow divider — keep its sep cell borderless. */
  .comparison-table[data-plan-cols] tr.row-section td.td-sep {
    border-bottom: 0 !important;
  }

  /* Close the PRESCRIPTION band in the export the same way OUT-OF-NETWORK is
     closed — via the top border of the row beneath it (a data row here, which
     otherwise has no top border). Skip the yellow divider, like OON does. */
  .comparison-table[data-plan-cols] tr.row-section-rx + tr td {
    border-top: 1.5px solid #8da3b8 !important;
  }
  .comparison-table[data-plan-cols] tr.row-section-rx + tr td.td-sep {
    border-top: 0 !important;
  }

  /* Keep the center divider a solid, continuous yellow bar in the export too —
     no horizontal segment borders; only the blue section/subsection bands cross. */
  .comparison-table tbody tr td.td-sep {
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: var(--yellow-bg) !important;
  }
  .comparison-table[data-plan-cols] tr.row-subsection td.td-sep {
    background: var(--yellow-bg) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  /* Export the medical grid with solid-white data cells. On screen the body
     alternates white / row-alt (#fafbfc) for readability, but that faint cool
     tint prints as a blue-then-white band. Flatten every data row to white for
     the export. Scoped to the medical table (data-plan-cols) so dental/vision
     are untouched; the colored section/category header bands are unaffected. */
  .comparison-table[data-plan-cols] tr.row-alt td.td-label,
  .comparison-table[data-plan-cols] tr.row-alt td.td-value {
    background: #fff !important;
  }

  /* Close off the benefit grid with a thin bottom line. A collapsed cell border
     gets dropped at the page break before the rates block, so paint a filled bar
     row instead (backgrounds print reliably) — kept subtle to match the cell
     borders rather than a heavy colored band. */
  .comparison-table tr.row-grid-end { display: table-row; break-before: avoid; page-break-before: avoid; }
  .comparison-table tr.row-grid-end td {
    padding: 0 !important;
    height: 1.5px;
    background: #8da3b8 !important;
    border: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .comparison-table tr.row-section-oon td {
    background: linear-gradient(to bottom, var(--blue) 0, var(--blue) 3px, var(--blue-bg) 3px) !important;
    border-top: 0 !important;
  }

  .comparison-table tr.row-section-rx td {
    background: linear-gradient(to bottom, var(--blue) 0, var(--blue) 3px, var(--blue-bg) 3px) !important;
    border-top: 0 !important;
  }

  /* Medical subsection labels open with a thin table-style divider in the export,
     not the heavy blue band — bottom border off so they merge into their rows. */
  .comparison-table[data-plan-cols] tr.row-subsection td {
    background: #f8fafc !important;
    border-top: 1.5px solid #8da3b8 !important;
    border-bottom: 0 !important;
  }

  .comparison-table tr.row-census-header td {
    background: var(--blue-bg) !important;
    border-top: 0 !important;
  }

  /* On the census page the header repeats at the top, but the line under it
     (above "Census / Rates") drops at the page break. Paint a thin line on the
     banner so it matches the under-Benefits line on the medical plan page —
     except across the yellow divider, which stays solid. */
  .comparison-table[data-plan-cols] tr.row-census-header td {
    border-top: 1.5px solid #8da3b8 !important;
  }
  .comparison-table[data-plan-cols] tr.row-census-header td.td-sep {
    border-top: 0 !important;
  }

  .comparison-table tr.row-change-info td {
    border-top: 1px dashed #6b8fc2 !important;
  }

  .comparison-table tr.row-combined td {
    border-top: 1.5px solid #8da3b8 !important;
  }

  /* ── Census page (first printed page) ── */
  .census-page {
    display: block;
    page-break-after: always;
    break-after: page;
  }

  .census-page-table-wrap {
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-top: 12px;
  }

  .census-page-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
  }

  .census-page-table thead tr.cpt-plan-row .cpt-th {
    background: #20407d;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    padding: 6px 9px;
    text-align: center;
    border: none;
    vertical-align: middle;
    white-space: nowrap;
  }

  .census-page-table thead tr.cpt-plan-row .cpt-name-h,
  .census-page-table thead tr.cpt-plan-row .cpt-num {
    text-align: left;
  }

  .census-page-table tbody td.cpt-td {
    font-size: 11px;
    padding: 5px 9px;
    border: none;
    vertical-align: middle;
  }

  .census-page-table tbody tr.cpt-dep-row td.cpt-td {
    color: #4a6080;
  }

  /* Thin white rule above each employee block, separating one household from the next */
  .census-page-table tbody tr.cpt-emp-row td.cpt-td {
    border-top: 2px solid #fff;
  }

  .cpt-dep-label { padding-left: 18px !important; font-style: italic; }
  .cpt-num-td    { color: #20407d; font-size: 11px; font-weight: 700; text-align: center; }
  .cpt-dob-td    { text-align: center; white-space: nowrap; }
  .cpt-gender-td { text-align: center; }
  .cpt-age-td    { text-align: center; }
  .cpt-state-td  { text-align: center; }
  .cpt-zip-td    { text-align: center; white-space: nowrap; }
  .cpt-name-td   { font-weight: 600; }
  .cpt-dep-name      { font-style: italic; font-weight: 500; }
  .cpt-dep-name-last { padding-left: 18px !important; }

  .cpt-enrolled {
    text-align: center;
    font-weight: 700;
    font-size: 10px;
  }

  .cpt-waiver {
    text-align: center;
    color: #b81c1c;
    font-weight: 700;
    font-size: 10px;
    background: #fde8e8;
  }

  /* Keep each household (employee + spouse + children) intact on one page so
     dependents never orphan onto the next page or clip at the bottom margin.
     The per-row avoid is a fallback for the rare family taller than a page. */
  .census-page-table tbody.cpt-household {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .census-page-table tbody tr { page-break-inside: avoid; }

  .cpt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 8px 0 10px;
  }

  .cpt-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .cpt-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1.5px solid;
    flex-shrink: 0;
  }

  .cpt-legend-label {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
  }
}