/* ════════════════════════════════════════════════════════════════════
   SHELL — chrome that belongs to the MERGE itself, not to either tool.

   Kept separate from status.css and scenario.css on purpose: provenance. Anything
   here was written for the merged app and has no ancestor in either source tool,
   which matters when scope containment asks "which file does this rule belong to".
   ════════════════════════════════════════════════════════════════════ */

/* ── Scenario & Planning sub-tabs ──
   Client/Print is the same data as Scenario View with the editing controls stripped,
   so it is a sub-tab rather than a destination. This bar reads the Loan Scenario
   tool's router (body.view-*) — that is the shell reacting to the LO router, which is
   allowed under option D: body.view-* is authoritative for which LO view is showing,
   and shell chrome may read it. It must never WRITE it. */
#lo-scenario-subtabs { display:none; gap:6px; padding:10px 0 0; }
body.view-agent  #lo-scenario-subtabs,
body.view-client #lo-scenario-subtabs { display:flex; }
body.view-agent  #lo-subtab-agent.subtab-btn,
body.view-client #lo-subtab-client.subtab-btn {
  background:var(--primary); border-color:var(--primary); color:var(--on-primary);
}

/* ── Unified Home list (Home-merge, sub-unit 1, 2026-07-21) ──
   renderHome (js/scenario.js) paints BOTH the support Home (#home-client-list) and the LO Home
   (#homeFilesList, inside #lo-scenario-host) with these classes. They live HERE, not in status.css,
   because the unified Home is merge-owned — and because status.css may not style anything inside the
   LO host (tests/containment.test.js). Moved VERBATIM from status.css (zero visual change); renderHome
   sets a role-aware grid-template-columns inline, so the 4-col template below is only a default. */
.home-client-list-header {
  max-width:900px; margin:0 auto; display:grid; grid-template-columns:2fr 2fr 3fr 1.3fr; gap:12px;
  padding:0 18px 6px; font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted);
}
.home-client-list { max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.home-client-row {
  background:var(--paper); border-radius:10px; box-shadow:0 2px 10px rgba(20,30,60,.06);
  padding:14px 18px; display:grid; grid-template-columns:2fr 2fr 3fr 1.3fr; gap:12px; align-items:center;
  cursor:pointer; border:1.5px solid transparent; transition:border-color .15s;
}
.home-client-row:hover { border-color:var(--accent); }
.home-client-col-label { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.home-client-col-value { font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-empty-state { max-width:900px; margin:50px auto; text-align:center; color:var(--muted); font-size:13px; }

/* Pipeline (#home-section) — the Transaction Details worksheet treatment: one min-width, the BROWSER's
   horizontal scrollbar at the window edge (no inner one), so the list header and every row share aligned
   columns. Scoped to #home-section so the LO-host fallback (#homeFilesList) is untouched. min-width = the six
   LO column floors (960px) + five 12px gaps (60) + card padding (36, border-box) = 1056, rounded to 1060. The
   columns are minmax(floor, fr) set inline by renderHome, so each independent per-row grid resolves identical
   track widths and nothing drifts. */
/* Pipeline content left-aligns under the title. The list elements inherited margin:0 auto (centering the
   1060px block) while .home-header has none, so on a wide screen the title hugged left and the list floated
   centred beneath it. margin-left/right:0 makes them agree — all hug left. Scoped to #home-section; the
   calculators (#lo-section) and checklist (#team-section) are intentionally untouched. (2026-07-30) */
#home-section .home-header,
#home-section .home-client-list-header,
#home-section .home-client-list,
#home-section .home-empty-state,
#home-section .home-pager { max-width:none; min-width:1060px; margin-left:0; margin-right:0; }
/* The pipeline search is a narrow box, not a page-spanning bar (~200px; tune to taste — a literal 10% ≈ 110px
   truncates the placeholder). Pulled out of the min-width:1060 group above and left-aligned. (2026-07-30) */
#home-section .home-search-wrap { max-width:200px; min-width:0; margin:0 0 14px 0; }
#home-section .home-client-list-header > *,
#home-section .home-client-row > * { min-width:0; }   /* let the value ellipsis clip; never let content push a track */

.home-count { font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }

/* Pager — centred under the list, only rendered when there is more than one page. */
.home-pager { margin:14px auto 0; display:flex; align-items:center; justify-content:center; gap:14px; }
.home-pager-btn {
  background:var(--paper); border:1.5px solid var(--line); border-radius:8px; padding:6px 14px;
  font-family:var(--ui); font-size:12px; font-weight:600; color:var(--slate); cursor:pointer; transition:border-color .15s;
}
.home-pager-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--ink); }
.home-pager-btn:disabled { opacity:.4; cursor:default; }
.home-pager-status { font-size:12px; font-weight:600; color:var(--muted); }

/* ── Home role toggle (Home-merge, sub-unit 2 slice, 2026-07-21) ──
   The primary Home switches between the Clients (support) and Scenario Files (LO) lists. Two distinct
   role-renders into one container, NOT a merged list. Merge-owned chrome — it has no ancestor in either
   source tool — so it lives here, not in status.css/scenario.css. */
.home-role-toggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.home-role-btn {
  padding:5px 12px; font-size:12px; font-weight:600; color:var(--muted);
  background:var(--paper); border:none; cursor:pointer;
}
.home-role-btn + .home-role-btn { border-left:1px solid var(--line); }
.home-role-btn.active { background:var(--primary); color:var(--on-primary); }

/* ── Two-state sidebar (sub-unit 2, slice 1b) — the nav sets SWAP on body.file-open ──
   Slice 1a (js/status.js updateNavState) sets body.file-open when a File is open. This is the CSS that
   consumes it. It's merge-owned chrome with no ancestor in either source tool, so it lives HERE, not in
   status.css (tests/containment.test.js scans status.css/scenario.css, never shell.css).

   Default (NO .file-open) = ROOT: Home + the "Tools" label + the 8 calculator buttons. Hidden: the Team
   group, the "Loan Officer" label, and the 3 scenario-view buttons (all .nav-infile-only), plus — in the
   #lo-section tabbar — the 2 scenario tabs, so a root Tools user reaches only calculators.
   WITH .file-open = IN-FILE: Home + Team group + Loan Officer group (3 scenario views + the 8 tools).
   Hidden: the root-only "Tools" label. The 8 calc buttons are ONE set, always shown; "Tools" and "Loan
   Officer" are just two labels over them, one visible at a time. Show/hide only — no display set on the
   shown state, so each element keeps its normal display. */
body:not(.file-open) .nav-infile-only { display:none; }
body.file-open .nav-root-only { display:none; }

/* ── Copy-from-scenario UI (Slice 3a) ──
   The .copy-* rules were RELOCATED here VERBATIM from styles/scenario.css so the tool "Copy from scenario"
   control (on the Amortization tool, which lives OUTSIDE #lo-scenario-host) can reuse the exact same
   dropdown without a containment leak — scenario.css may not style anything outside the host, but
   shell.css (merge-owned) is not scanned. The scenario cards still get these styles (shell.css is global),
   so zero visual change there. */
.copy-wrap{ position:relative; display:inline-block; }
.copy-btn{ background:none; border:1px solid rgba(255,255,255,.25); border-radius:6px; color:rgba(255,255,255,.75); font-family:var(--ui); font-size:13px; font-weight:600; width:26px; height:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s,color .12s; }
.copy-btn:hover{ background:rgba(255,255,255,.12); color:var(--paper); }
.copy-dropdown{ display:none; position:fixed; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.18); min-width:160px; z-index:9999; overflow:hidden; }
.copy-dropdown.open{ display:block; }
.copy-option{ display:block; width:100%; text-align:left; padding:9px 14px; font-family:var(--ui); font-size:13px; font-weight:500; color:var(--ink); background:none; border:none; cursor:pointer; }
.copy-option:hover{ background:var(--accent-soft); color:var(--primary); }
body.view-client .copy-wrap{ display:none !important; }
/* The scenario copy-btn is themed for a DARK card header; on a light tool card give it a light-surface
   variant. And Copy is IN-FILE ONLY — hide the tool copy control at root (two-state model). */
.tool-copy-btn{ border-color:var(--line); color:var(--muted); }
.tool-copy-btn:hover{ background:var(--accent-soft); color:var(--primary); }
/* Slice 3a + 3b: the tool Copy controls are IN-FILE only — hidden at root (two-state model). */
body:not(.file-open) #am-copy-wrap,
body:not(.file-open) #bd-copy-wrap,
body:not(.file-open) #rb-copy-wrap,
body:not(.file-open) #iw-copy-wrap{ display:none; }

/* ── Pipeline delete mode (redesign A-lite) ──
   Merge-owned Home chrome — kept in shell.css (not scenario.css/status.css) for containment: the Home
   renders outside #lo-scenario-host. The trash toggle enters delete mode; a per-row checkbox appears at
   the left of each row for multi-select bulk soft-delete. Reuses existing tokens; no new colors. */
.pipeline-trash-btn{ background:none; border:1px solid var(--line); border-radius:8px; color:var(--muted); width:34px; height:34px; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .12s,color .12s,border-color .12s; }
.pipeline-trash-btn:hover{ background:var(--accent-soft); color:var(--ink); }
.pipeline-trash-btn.active{ background:var(--danger); border-color:var(--danger); color:var(--on-primary); }
.pipeline-danger-btn{ background:var(--danger); border-color:var(--danger); color:var(--on-primary); }
.pipeline-check-cell{ display:flex; align-items:center; justify-content:center; }
.pipeline-row-check{ width:18px; height:18px; border:2px solid var(--line); border-radius:4px; display:inline-block; box-sizing:border-box; transition:background .12s,border-color .12s; }
.pipeline-row-check.checked{ background:var(--primary); border-color:var(--primary); position:relative; }
.pipeline-row-check.checked::after{ content:''; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid var(--on-primary); border-width:0 2px 2px 0; transform:rotate(45deg); }
.home-client-row.row-selected{ border-color:var(--primary); background:var(--accent-soft); }

/* ── Phase 7 · B1 — auth gate ──
   Merge-owned chrome (index.html only; outside #lo-scenario-host) so it lives here.
   The app is HIDDEN until authenticated; the gate covers the viewport when signed
   out. Until Supabase is configured the gate is DISABLED (body.auth-disabled) and
   the app runs open. jsdom ignores CSS display, so the headless suite is unaffected. */
body:not(.authed):not(.auth-disabled) .app-shell { display:none; }
#auth-gate {
  display:none; position:fixed; inset:0; z-index:5000; background:var(--page-bg);
  align-items:center; justify-content:center; padding:24px; font-family:var(--ui);
}
body.unauthed #auth-gate { display:flex; }
.auth-card {
  background:var(--paper); border-radius:12px; box-shadow:0 8px 40px rgba(0,0,0,.18);
  padding:32px 32px 28px; width:100%; max-width:360px;
}
.auth-brand { font-family:var(--display); font-size:20px; font-weight:700; color:var(--primary); text-align:center; margin-bottom:20px; }
.auth-screen { display:flex; flex-direction:column; }
.auth-title { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:14px; }
.auth-label { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin:8px 0 4px; }
.auth-input { border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-family:var(--ui); font-size:14px; color:var(--ink); background:var(--paper); }
.auth-input:focus { outline:none; border-color:var(--primary); }
.auth-btn { margin-top:16px; background:var(--primary); color:var(--on-primary); border:none; border-radius:8px; padding:10px 14px; font-family:var(--ui); font-size:14px; font-weight:600; cursor:pointer; transition:background .12s; }
.auth-btn:hover { background:var(--primary-dk); }
.auth-link { margin-top:12px; text-align:center; font-size:12px; color:var(--primary); cursor:pointer; text-decoration:none; }
.auth-link:hover { text-decoration:underline; }
.auth-error { color:var(--danger); font-size:12px; min-height:16px; margin-top:8px; }
.auth-msg { color:var(--muted); font-size:12px; min-height:16px; margin-top:8px; }
/* Sign out sits at the foot of the sidebar and only appears once authed. */
.auth-signout-btn { margin-top:auto; color:var(--sb-muted); border-top:1px solid var(--sb-border); }
body:not(.authed) #auth-signout { display:none; }