/* Onboarding grid — the three-screen onboarding (prototype/onboarding-grid.jsx).
   Kept in its own file so the four base stylesheets (and their design-system mirror) are untouched.
   Tokens come from styles.css :root. */

.og-page { max-width: 1320px; }
.og-page .proto-title { margin-bottom: 16px; }
.og-card { margin: 0; }
.og-card input[type="file"][hidden], .og-card input[type="file"][style*="display: none"] { display: none !important; }
.og-card .card-title-row { align-items: flex-start; }
.og-card .card-title-row p { max-width: 760px; }
.og-title-side { display: flex; align-items: center; gap: 10px; flex: none; }
.og-body { display: grid; gap: 18px; padding: 18px 20px 22px; }
.og-section { display: grid; gap: 12px; }
.og-section-head { display: grid; gap: 3px; }
.og-section-head h3 { margin: 0; padding: 0; font: 500 17px/1.25 var(--font-serif); color: var(--heading-900); }
.og-section-head small { color: var(--ink-500); font-size: 12px; line-height: 1.45; }
.og-error { margin: 0; }
.og-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.og-actions-note { color: var(--ink-500); font-size: 12px; line-height: 1.45; margin-right: auto; }
.og-foot { margin: 18px 0 0; font-size: 12px; }
.og-inline-hint { color: var(--ink-500); font-size: 12px; }
.og-link { padding: 0; border: 0; background: none; color: var(--accent); font: 600 12px var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.og-link:hover { text-decoration: underline; }
.og-link:disabled { color: var(--ink-300); cursor: default; text-decoration: none; }
.og-link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: 600 12px var(--font-sans); cursor: pointer; }
.og-link-btn:hover { text-decoration: underline; }

/* screen rail */
.og-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.og-rail button { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 68px; padding: 12px 14px; text-align: left; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.og-rail button:hover { border-color: var(--border-strong); }
.og-rail button.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm); }
.og-rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.og-rail-num { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--ink-500); font: 800 12px var(--font-sans); }
.og-rail-num svg { width: 15px; height: 15px; }
.og-rail button.complete .og-rail-num { border-color: var(--ready-fg); background: var(--ready-fg); color: #fff; }
.og-rail button.waiting_staff .og-rail-num { border-color: var(--excluded-dot); background: var(--excluded-bg); color: var(--excluded-fg); }
.og-rail button.in_progress .og-rail-num { border-color: var(--review-dot); color: var(--review-fg); }
.og-rail b { font-size: 14px; line-height: 18px; }
.og-rail small { color: var(--ink-500); font-size: 12px; }
.og-rail button.complete small { color: var(--ready-fg); }
.og-rail button.waiting_staff small { color: var(--excluded-fg); }

/* checklist: every item carries its control */
.og-checklist { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.og-checklist li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 8px 14px; border-bottom: 1px solid var(--divider); background: var(--surface); }
.og-checklist li:last-child { border-bottom: 0; }
.og-checklist.compact li { min-height: 42px; padding: 6px 14px; }
.og-checklist li.open { background: var(--surface-alt); }
.og-checklist li.theirs { background: #F7F8FB; }
.og-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--border-strong); border-radius: 50%; color: #fff; }
.og-check svg { width: 12px; height: 12px; }
.og-checklist li.complete .og-check { border-color: var(--ready-fg); background: var(--ready-fg); }
.og-check-copy { display: grid; gap: 2px; min-width: 0; }
.og-check-copy b { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-900); }
.og-checklist li.complete .og-check-copy b { color: var(--ink-700); font-weight: 500; }
.og-check-copy small { color: var(--ink-500); font-size: 11px; line-height: 1.4; }
.og-checklist li.optional.open { background: var(--surface); }
.og-checklist li.optional.open .og-check { border-style: dashed; }
.og-optional { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
.og-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--hold-bg); color: var(--hold-fg); font: 700 11px var(--font-mono); }
.og-check-control { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.og-check-control .onboarding-template.onboarding-logo-upload { margin-top: 0; min-width: 420px; }

/* screen 1 */
.og-firm .activation-form-grid { margin-top: 0; }
.og-firm .onboarding-readonly { margin: 0; }
.og-firm .signed-policy { margin: 0; }
.og-firm .onboarding-template.onboarding-logo-upload { margin-top: 0; }

/* screen 2: band, period, kpis */
.og-band { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(260px, 1.4fr) minmax(0, 2fr); gap: 12px; }
.og-file, .og-period { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); min-width: 0; }
.og-file b, .og-period b { font-size: 15px; color: var(--heading-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-file small, .og-period small { color: var(--ink-500); font-size: 12px; line-height: 1.45; }
.og-file-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.og-period.ask { border-color: var(--review-dot); background: var(--review-bg); }
.og-period.ask b, .og-period.ask small { color: var(--review-fg); }
.og-period-choices { display: grid; gap: 6px; margin-top: 8px; }
.og-period-choices label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); cursor: pointer; }
.og-period-choices label.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.og-period-choices label.unavailable { opacity: .6; cursor: default; }
.og-period-choices input { margin: 2px 0 0; accent-color: var(--accent); }
.og-period-choices span { display: grid; gap: 2px; }
.og-period-choices span b { font-size: 13px; color: var(--ink-900); white-space: normal; }
.og-period-choices span small { color: var(--ink-500); font-size: 11px; }
/* Review and go's figures (C3). Seven tiles, the fee tile spanning two, on a
   4-column grid: exactly two full rows, so no tile is ever orphaned; the figures
   wrap instead of truncating. */
.og-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--divider); overflow: hidden; }
.og-kpis > div { display: grid; gap: 2px; align-content: center; padding: 12px 14px; background: var(--surface); min-width: 0; }
.og-kpis b { font: 600 18px var(--font-mono); color: var(--heading-900); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.og-kpis span { color: var(--ink-500); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; line-height: 1.35; }
.og-kpis .og-kpi-fees { grid-column: span 2; background: var(--accent-soft); }
.og-kpis .og-kpi-fees b { color: var(--accent-ink); font-size: 21px; }
.og-kpis.review > div:first-child b { font-family: var(--font-sans); font-size: 16px; }
.og-run-notes { display: flex; justify-content: space-between; gap: 16px; align-items: center; color: var(--ink-500); font-size: 12px; }

/* C3: one quiet summary line on screen 2 */
.og-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-alt); }
.og-pair { color: var(--ink-500); font-size: 12.5px; white-space: nowrap; }
.og-pair b { color: var(--heading-900); font: 600 12.5px var(--font-mono); font-variant-numeric: tabular-nums; }
.og-summary-more { margin-left: auto; color: var(--ink-400); font-size: 12.5px; }
button.og-summary-more { font-size: 12.5px; color: var(--accent); }

/* C4: one drop zone for all three files */
.og-intake-box { display: grid; gap: 10px; padding: 14px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-alt); }
.og-intake-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; }
.og-intake-head b { font-size: 14.5px; color: var(--heading-900); }
.og-intake-head small { color: var(--ink-500); font-size: 12.5px; }
.og-intake-box .drop-zone { margin: 0; }
.og-files { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.og-file-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.og-file-row.bad { border-color: var(--hold-dot); background: var(--hold-bg); }
.og-file-row.note { border-color: var(--review-dot); background: var(--review-bg); }
.og-file-row.wait { border-style: dashed; background: transparent; }
.og-file-tick { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--ready-dot); color: #fff; font: 700 11px var(--font-sans); }
.og-file-tick svg { width: 10px; height: 10px; }
.og-file-tick.bad { background: var(--hold-dot); }
.og-file-tick.note { background: var(--review-dot); }
.og-file-tick.wait { background: transparent; border: 1.5px dashed var(--border-strong); }
.og-file-name { min-width: 0; font: 13px var(--font-mono); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-file-row.wait .og-file-name { color: var(--ink-400); font-family: var(--font-sans); }
.og-file-as { color: var(--ink-500); font-size: 12px; white-space: nowrap; }
.og-file-as b { color: var(--ink-700); font-weight: 600; }
.og-file-why { grid-column: 2 / -1; margin: 0; color: var(--ink-700); font-size: 12px; line-height: 1.45; }
.og-file-row.bad .og-file-why { color: var(--hold-fg); }
.og-file-lines { grid-column: 2 / -1; margin: 0; padding-left: 16px; color: var(--ink-700); font-size: 12px; line-height: 1.5; max-height: 160px; overflow: auto; }
.og-intake-box.dragging { border-color: var(--accent); background: var(--accent-soft); }
.og-intake-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.og-intake-note { color: var(--ink-500); font-size: 12.5px; }
.og-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* C2: one step open at a time */
.og-steps { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.og-steps > li { border-bottom: 1px solid var(--divider); scroll-margin-top: 16px; }
.og-steps > li:last-child { border-bottom: 0; }
.og-step-title { margin: 0; font: inherit; }
.og-step-notice { padding: 0 14px 12px 14px; }
.og-step-head { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 50px; padding: 11px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.og-step-head:hover { background: var(--surface-alt); }
.og-step-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.og-steps > li.expanded .og-step-head { background: var(--surface-alt); }
.og-step-bullet { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--ink-400); font: 600 11px var(--font-sans); }
.og-step-bullet svg { width: 12px; height: 12px; }
.og-steps > li.complete .og-step-bullet { border-color: var(--ready-dot); background: var(--ready-dot); color: #fff; }
.og-steps > li.todo.expanded .og-step-bullet { border-color: var(--hold-dot); color: var(--hold-fg); }
.og-step-lbl { flex: 1 1 200px; display: grid; gap: 2px; min-width: 0; }
.og-step-lbl b { font-size: 14px; font-weight: 600; color: var(--heading-900); }
.og-steps > li.complete:not(.expanded) .og-step-lbl b { color: var(--ink-700); font-weight: 500; }
.og-step-lbl small { color: var(--ink-500); font-size: 12.5px; line-height: 1.45; }
.og-step-res { color: var(--ink-500); font-size: 12.5px; text-align: right; white-space: nowrap; }
.og-step-res .mono { font-family: var(--font-mono); color: var(--ink-700); }
.og-step-res .og-count { display: inline-block; height: auto; padding: 1px 9px; background: var(--review-bg); color: var(--review-fg); font: 600 12px var(--font-sans); }
.og-step-chev { flex: none; color: var(--ink-300); font-size: 12px; }
.og-step-body { padding: 4px 16px 16px; background: var(--surface-alt); }
.og-step-stack { display: grid; gap: 12px; }
.og-step-note { margin: 0; color: var(--ink-500); font-size: 12.5px; line-height: 1.5; }
.og-step-body .og-band { grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.2fr); }
.og-step-body .og-count { font-family: var(--font-sans); }

/* C1: the one bar, pinned to the bottom; the document is padded by its measured height */
body.og-bar-open { padding-bottom: var(--og-bar-h, 76px); }
.og-bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 11px 16px; border-top: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 -6px 18px -12px rgba(11, 18, 32, .35); }
.og-bottombar-inner { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.og-bar-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--hold-dot); }
.og-bar-dot.ok { background: var(--ready-dot); }
.og-bottombar-copy { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.og-bottombar-copy b { font-size: 13.5px; color: var(--heading-900); }
.og-bottombar-copy small { color: var(--ink-500); font-size: 12.5px; line-height: 1.4; }

/* notices */
.og-notice { display: grid; gap: 6px; }
.og-notice ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-700); font-size: 12px; line-height: 1.5; max-height: 200px; overflow: auto; }
.og-notice-actions { display: flex; gap: 14px; align-items: center; }

/* intake */
.og-intake-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.og-intake-notes > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.og-intake-notes b { font-size: 13px; color: var(--ink-900); }
.og-intake-notes span { color: var(--ink-500); font-size: 12px; line-height: 1.5; }

/* toolbar */
.og-toolbar { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.og-default { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.og-default label { display: grid; grid-template-columns: minmax(0, 1fr) 118px; align-items: center; gap: 10px; padding: 0; color: var(--accent-ink); font: 600 13px var(--font-sans); }
.og-default small { color: var(--accent-ink); opacity: .85; font-size: 11px; line-height: 1.45; }
.og-tools { display: grid; gap: 10px; }
.og-search { display: flex; align-items: center; gap: 8px; height: var(--control-height-compact); padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-400); max-width: 420px; }
.og-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: 14px var(--font-sans); color: var(--ink-900); outline: none; }
.og-filters { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-alt); }
.og-filters button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-700); font: 600 12px var(--font-sans); cursor: pointer; }
.og-filters button.on { background: var(--surface); color: var(--heading-900); box-shadow: var(--shadow-sm); }
.og-filters .n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--hold-bg); color: var(--hold-fg); font: 700 10px var(--font-mono); }
.og-spreadsheets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--ink-500); font-size: 12px; }

/* the fork: how the firm sets fees and households (2026-09-14 D2/D3/D6) */
.og-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.og-forkcard { display: grid; gap: 6px; align-content: start; padding: 15px 16px; text-align: left; border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-900); cursor: pointer; }
.og-forkcard:hover { border-color: var(--accent); }
.og-forkcard[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.og-forkcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.og-forkcard:disabled { opacity: .6; cursor: default; }
.og-forkcard b { font-size: 15px; color: var(--heading-900); }
.og-forkcard span { color: var(--ink-500); font-size: 13px; line-height: 1.45; }
.og-fork-tag { font: 600 11px var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.og-guarantees { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.og-guarantees li { color: var(--ink-500); font-size: 12px; line-height: 1.45; }
.og-guarantees li::before { content: "— "; color: var(--ink-300); }
.og-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; border: 1px solid var(--accent); border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; }
.og-chosen b { font-weight: 600; }
.og-chosen span { color: var(--accent-ink); opacity: .85; }
.og-chosen .og-link { margin-left: auto; color: var(--accent-ink); }

/* item 3: the households the software proposed */
.og-hh { display: grid; gap: 10px; }
.og-hh-live { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--ink-500); font-size: 13px; }
.og-hh-flagged { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--review-dot); border-radius: var(--radius); background: var(--review-bg); }
.og-hh-flagged > b { color: var(--review-fg); font-size: 13px; }
.og-hh-hint { margin: 0; color: var(--ink-700); font-size: 12.5px; }
.og-hh-tablewrap { overflow-x: auto; max-height: 520px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.og-hh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.og-hh-table th { position: sticky; top: 0; z-index: 1; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--ink-400); font: 600 11px var(--font-sans); letter-spacing: .07em; text-transform: uppercase; text-align: left; }
.og-hh-table th.num, .og-hh-table td.num { text-align: right; }
.og-hh-table td { padding: 9px 10px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.og-hh-table tr:last-child td { border-bottom: 0; }
.og-hh-acct { display: grid; gap: 2px; max-width: 300px; }
.og-hh-acct b { font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-hh-acct .mono { font-family: var(--font-mono); color: var(--ink-500); font-size: 12px; }
.og-hh-fix { min-width: 280px; }
.og-hh-fixrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.og-hh-fixrow .og-select { width: auto; min-width: 200px; max-width: 100%; flex: 1 1 200px; }
.og-hh-why { display: block; margin-top: 4px; color: var(--review-fg); font-size: 11.5px; line-height: 1.4; }
.og-hh-kept { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--ready-fg); font: 600 12.5px var(--font-sans); }
.og-hh-kept svg { width: 13px; height: 13px; }
.og-hh-value { white-space: nowrap; font-family: var(--font-mono); color: var(--ink-900); }
.og-hh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.og-hh-note { color: var(--ink-500); font-size: 12px; }
.og-hh-done { display: inline-flex; align-items: center; gap: 7px; color: var(--ready-fg); font: 600 13px var(--font-sans); }
.og-hh-done svg { width: 14px; height: 14px; }
.og-hh-list ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; margin: 0; padding: 10px 14px; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); max-height: 280px; overflow: auto; }
.og-hh-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-700); }
.og-hh-list li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-hh-list li span { color: var(--ink-500); white-space: nowrap; }
/* H3 (2026-09-14): a flagged row a file raised says so, and an open one is marked. */
.og-hh-tag { display: inline-block; justify-self: start; margin-top: 2px; padding: 1px 7px; border: 1px solid var(--review-dot); border-radius: 999px; color: var(--review-fg); font: 600 10.5px var(--font-sans); letter-spacing: .02em; }
.og-hh-row.decide td:first-child { box-shadow: inset 3px 0 0 var(--review-dot); }
/* H4: households that may be one family, each with "Merge into…". */
.og-dupes { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.og-dupes > b { color: var(--ink-900); font-size: 13px; }
.og-dupes ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.og-dupe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; font-size: 13px; color: var(--ink-700); }
.og-dupe-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.og-dupe-into { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-500); font-size: 12px; }
.og-dupe-into .og-select { width: auto; min-width: 180px; max-width: 100%; }
/* H2: address rows parked until a household matches them. */
.og-pending { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--review-dot); border-radius: var(--radius); background: var(--review-bg); }
.og-pending > b { color: var(--review-fg); font-size: 13px; }
.og-pending ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); max-height: 520px; overflow: auto; }
.og-pending-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--divider); }
.og-pending-row:last-child { border-bottom: 0; }
.og-pending-what { display: grid; gap: 2px; min-width: 0; }
.og-pending-what b { color: var(--ink-900); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-pending-what span { color: var(--ink-700); font-size: 12px; overflow-wrap: anywhere; }
.og-pending-what small { color: var(--ink-400); font-size: 11px; }
.og-pending-why { color: var(--review-fg); font-size: 12px; line-height: 1.4; }
.og-pending-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.og-pending-act .og-select { width: auto; min-width: 180px; max-width: 100%; }
.og-attached { display: flex; align-items: center; gap: 6px; color: var(--ready-fg); }
.og-attached svg { width: 13px; height: 13px; }
@media (max-width: 760px) {
  .og-pending-row { grid-template-columns: minmax(0, 1fr); }
  .og-pending-act { justify-content: flex-start; }
}

/* item 4, spreadsheet side: the two-step template flow */
.og-twostep { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.og-stepbox { display: grid; gap: 8px; justify-items: start; align-content: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.og-stepbox b { font-size: 14px; color: var(--heading-900); }
.og-stepbox p { margin: 0; color: var(--ink-500); font-size: 12px; line-height: 1.5; }
.og-note { margin: 0; padding: 10px 13px; border: 1px solid var(--review-dot); border-radius: var(--radius-control); background: var(--review-bg); color: var(--review-fg); font-size: 12px; line-height: 1.5; }
.og-landed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 13px; border: 1px solid var(--ready-fg); border-radius: var(--radius-control); background: var(--ready-bg); color: var(--ready-fg); font-size: 12.5px; }

/* item 5: the address controls, always visible, in Jorge's order (D7) */
.og-always { font: 600 10px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }
.og-addr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.og-addr-list { display: grid; gap: 10px; max-height: 520px; overflow: auto; padding: 2px; }
.og-addr-row { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.og-addr-row.missing { border-color: var(--review-dot); background: #FBFDFF; }
.og-addr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.og-addr-head b { font-size: 13px; color: var(--heading-900); }
.og-addr-flag { font: 600 11px var(--font-sans); color: var(--review-fg); background: var(--review-bg); border-radius: 999px; padding: 1px 9px; }
.og-addr-ok { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--font-sans); color: var(--ready-fg); }
.og-addr-ok svg { width: 12px; height: 12px; }
.og-save-state { font-size: 12px; color: var(--ink-500); }
.og-save-state.saving, .og-save-state.pending { color: var(--review-fg); }
.og-save-state.error { color: var(--hold-fg); font-weight: 700; }
.og-save-state.saved { color: var(--ready-fg); }

/* the grid */
.og-grid { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.og-grid[aria-busy="true"] { opacity: .92; }
.og-grid-head, .og-group-head, .og-row { display: grid; grid-template-columns: minmax(230px, 1.5fr) minmax(210px, 1.3fr) minmax(130px, .8fr) 96px minmax(230px, 1.4fr) minmax(110px, .7fr); gap: 12px; align-items: center; padding: 0 14px; }
.og-grid-head { min-height: 38px; background: #F6F8FC; border-bottom: 1px solid var(--border); color: var(--ink-500); font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.og-grid-head .num, .og-cell.num { text-align: right; }
.og-group { border-bottom: 1px solid var(--border); }
.og-group:last-child { border-bottom: 0; }
.og-group-head { min-height: 52px; background: var(--surface-alt); border-bottom: 1px solid var(--divider); }
.og-group.no-address .og-group-head { box-shadow: inset 3px 0 var(--review-dot); }
.og-group.unassigned .og-group-head { background: var(--hold-bg); box-shadow: inset 3px 0 var(--hold-fg); }
.og-group-name { font-size: 14px; color: var(--heading-900); }
.og-group-name-input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font: 600 14px var(--font-sans); color: var(--heading-900); }
.og-group-name-input:hover { border-color: var(--border-strong); background: var(--surface); }
.og-group-name-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; background: var(--surface); }
.og-group-meta { color: var(--ink-500); font-size: 11px; }
.og-cell { min-width: 0; display: grid; gap: 2px; padding: 8px 0; }
.og-cell.mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.og-cell small { color: var(--ink-500); font-size: 11px; font-family: var(--font-sans); }
.og-row { min-height: 50px; border-bottom: 1px solid var(--divider); }
.og-group .og-row:last-child { border-bottom: 0; }
.og-row.hold { background: #FBFBFC; }
.og-row:hover { background: #F9FAFD; }
.og-row.hold .og-cell-acct, .og-row.hold .og-cell-value { color: var(--ink-500); }
.og-row.problem { box-shadow: inset 3px 0 var(--hold-fg); }
.og-row.busy { opacity: .55; pointer-events: none; }
.og-cell-acct b { font-size: 13px; }
.og-acct-name { font-size: 13px; color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-proposal { display: block; font-size: 11px; line-height: 1.4; }
.og-proposal.review { color: var(--review-fg); }
.og-proposal.bad { color: var(--hold-fg); }
.og-proposal .og-link { font-size: 11px; }
.og-select { width: 100%; box-sizing: border-box; height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-900); font: 13px var(--font-sans); }
.og-select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.og-select:disabled { color: var(--ink-400); background: var(--surface-alt); }
.og-picker { max-width: 100%; }
.og-address-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink-700); font: 600 12px var(--font-sans); cursor: pointer; white-space: nowrap; max-width: 100%; }
.og-address-btn svg { width: 12px; height: 12px; color: var(--ready-fg); }
.og-address-btn.missing { border-color: var(--review-dot); background: var(--review-bg); color: var(--review-fg); }
.og-address-btn.open { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.og-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--review-dot); }
.og-group-address { display: grid; gap: 8px; padding: 12px 14px 14px; border-bottom: 1px solid var(--divider); background: #FBFDFF; }
.og-address { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.og-address label { display: grid; gap: 4px; padding: 0; color: var(--ink-500); font: 600 11px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.og-address input { height: 34px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font: 13px var(--font-sans); color: var(--ink-900); }
.og-address input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.og-address-recipient_name { grid-column: span 4; }
.og-address-address_line_1 { grid-column: span 4; }
.og-address-address_line_2 { grid-column: span 4; }
.og-address-city { grid-column: span 6; }
.og-address-state { grid-column: span 2; }
.og-address-zip { grid-column: span 4; }

/* HOLD switch */
.og-hold { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 4px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink-500); font: 700 11px var(--font-sans); letter-spacing: .04em; cursor: pointer; }
.og-hold-knob { width: 18px; height: 18px; border-radius: 50%; background: var(--ready-dot); transition: background .12s; }
.og-hold.on { border-color: var(--hold-dot); background: var(--hold-bg); color: var(--hold-fg); }
.og-hold.on .og-hold-knob { background: var(--hold-dot); }
.og-hold:disabled { opacity: .55; cursor: default; }
.og-hold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* fee cells */
.og-fee-resolved { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 13px var(--font-mono); color: var(--ink-900); }
.og-fee-resolved small { font-family: var(--font-sans); font-weight: 400; }
.og-fee-missing { color: var(--hold-fg); font-family: var(--font-sans); }
.og-fee-hold { color: var(--ink-500); font: 500 12px var(--font-sans); }
.og-fee-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.og-fee-edit .og-select { width: auto; max-width: 190px; flex: 1 1 120px; }
.og-rate { display: inline-flex; align-items: center; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.og-rate input { width: 72px; height: 100%; padding: 0 8px; border: 0; background: transparent; font: 600 13px var(--font-mono); color: var(--ink-900); text-align: right; outline: none; }
.og-rate input::placeholder { color: var(--ink-300); font-weight: 400; }
.og-rate > span { padding: 0 8px 0 2px; color: var(--ink-400); font: 12px var(--font-sans); }
.og-rate:focus-within { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.og-rate.invalid { border-color: var(--hold-dot); background: var(--hold-bg); }
.og-rate.compact input { width: 62px; }
.og-rate input:disabled { color: var(--ink-400); }
.og-default .og-rate { height: 34px; }
.og-default .og-rate input { width: 80px; }
.og-zero { color: var(--ink-400); }
.og-empty { padding: 28px; text-align: center; color: var(--ink-500); font-size: 14px; }

/* pager */
.og-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink-500); font-size: 12px; }
.og-pager-buttons { display: flex; align-items: center; gap: 10px; }

/* screen 3 */
.og-preview-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.og-preview-pick { display: grid; gap: 4px; min-width: 280px; padding: 0; color: var(--ink-500); font: 800 10px var(--font-sans); text-transform: uppercase; }
.og-preview-pick select { height: var(--control-height-compact); padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-900); font: 14px var(--font-sans); text-transform: none; }
.og-preview-meta { color: var(--ink-500); font-size: 12px; }
.og-preview-meta b { color: var(--ink-900); font-family: var(--font-mono); }
.og-preview-frame { min-height: 560px; }
/* the logo control sits beside the statement it brands (2026-09-10 review, note 1) */
.og-preview-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; align-items: start; }
.og-logo-aside { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
/* The shared dropzone is a two-column card; in this narrow column it stacks. */
.og-logo-aside .onboarding-template.onboarding-logo-upload { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
.og-logo-aside .onboarding-logo-preview { max-width: 260px; }
.og-confirm { display: grid; gap: 12px; justify-items: start; }
.og-confirm .policy-confirm-check { width: 100%; box-sizing: border-box; }
.og-waiting { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.og-waiting li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); color: var(--ink-700); font-size: 13px; }
.og-waiting svg { width: 16px; height: 16px; color: var(--excluded-fg); flex: none; }

/* laptop and narrower */
@media (max-width: 1180px) {
  .og-band { grid-template-columns: 1fr 1fr; }
  .og-grid-head, .og-group-head, .og-row { grid-template-columns: minmax(200px, 1.4fr) minmax(180px, 1.2fr) minmax(110px, .8fr) 92px minmax(200px, 1.3fr) minmax(100px, .7fr); gap: 10px; }
}
@media (max-width: 1000px) {
  .og-toolbar { grid-template-columns: 1fr; }
  .og-preview-split { grid-template-columns: 1fr; }
  .og-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .og-grid { overflow-x: auto; }
  .og-grid-head, .og-group-head, .og-row { min-width: 940px; }
  .og-check-control .onboarding-template.onboarding-logo-upload { min-width: 0; }
}
@media (max-width: 760px) {
  .og-rail { grid-template-columns: 1fr; }
  .og-band { grid-template-columns: 1fr; }
  .og-intake-notes { grid-template-columns: 1fr; }
  .og-fork, .og-twostep { grid-template-columns: 1fr; }
  .og-step-body .og-band { grid-template-columns: 1fr; }
  .og-step-res { display: none; }
  .og-file-row { grid-template-columns: 18px minmax(0, 1fr); }
  .og-file-as { grid-column: 2; white-space: normal; }
  .og-summary-more { margin-left: 0; }
  .og-hh-fix { min-width: 220px; }
  .og-checklist li { grid-template-columns: 26px minmax(0, 1fr); }
  .og-check-control { grid-column: 2; justify-content: flex-start; }
  .og-address-recipient_name, .og-address-address_line_1, .og-address-address_line_2, .og-address-city, .og-address-zip { grid-column: span 12; }
  .og-address-state { grid-column: span 4; }
}
body.dark .og-row:hover { background: #112653; }
body.dark .og-group-address { background: #152242; }
body.dark .og-addr-row.missing { background: #1A1E25; }