/* Realoscope public app styles - extracted verbatim from the
   former inline <style> block in public-app.html (frontend-refactor-v1).
   Served same-origin so the CSP can keep style-src to 'self' for
   stylesheets; inline style= attributes in the shell still require
   style-src 'unsafe-inline'. */
  /* Palette. The three text/accent tokens below were darkened in
     realoscope-investment-lifecycle-ux-v1 so they clear WCAG 2.2 AA against
     every surface they actually sit on. Measured, not estimated:
       --ink-faint  5.00:1 on white, 4.57:1 on paper   (was 3.54 / 3.23)
       --signal     5.36:1 on white, 4.67:1 on signal-soft  (was 4.31 / 3.75)
                    which also fixes white button text ON --signal
       --amber      5.06:1 on white, 4.51:1 on amber-soft   (was 5.30 / 4.33)
     The hues are unchanged, so the brand reads the same.
     --line stays light because it draws card and divider edges, which are
     decoration rather than control boundaries. Controls that need a 3:1
     boundary to be identifiable use --line-control instead. */
  :root {
    --ink: #16232e; --ink-soft: #4a5b6d; --ink-faint: #64717d;
    --navy: #14344f; --navy-deep: #0d2338; --navy-mid: #1c405e;
    --signal: #0c795f; --signal-deep: #095e4b; --signal-soft: #e2f3ee;
    --gold: #b98a2f; --paper: #f2f5f7; --card: #fff; --line: #dce3ea; --line-soft: #e8edf2;
    --line-control: #868d94;
    --red: #b3403a; --red-soft: #f9e9e8; --amber: #8c610d; --amber-soft: #fbf1dc;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(13,35,56,.05), 0 8px 22px rgba(13,35,56,.06);
    --shadow-lift: 0 2px 4px rgba(13,35,56,.06), 0 14px 34px rgba(13,35,56,.1);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
  :focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
  header.app :focus-visible { outline-color: #35c39a; }
  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--navy-deep); color: #fff; padding: 12px 22px;
    border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
  }
  .skip-link:focus { left: 0; }
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper); color: var(--ink); line-height: 1.55; font-size: 15px; }
  h1,h2,h3,.brand { font-family: Georgia, "Times New Roman", serif; }
  a { color: var(--signal); }
  button { font: inherit; cursor: pointer; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

  /* ── Header ─────────────────────────────────────────────── */
  header.app { background: linear-gradient(180deg, var(--navy-deep), #102c46); color: #eef3f7; position: sticky; top: 0; z-index: 40;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 10px rgba(13,35,56,.25); }
  .bar { display: flex; align-items: center; gap: 14px; padding: 11px 0; flex-wrap: wrap; }
  .brand { font-size: 1.12rem; font-weight: 700; color: #fff; letter-spacing: .01em; }
  .brand .dot { color: #35c39a; }
  .brand small { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #8aa2b5; margin-left: 8px; font-family: inherit; }
  .ws-pill { font-size: .73rem; background: var(--navy-mid); color: #a9c4d8; border-radius: 999px; padding: 4px 12px; max-width: 300px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ws-pill.cloud { background: #0f5a46; color: #b9e7d8; }
  nav.tabs { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
  nav.tabs button { background: transparent; border: 0; color: #a9c4d8; padding: 8px 13px; border-radius: 8px; font-size: .9rem; }
  nav.tabs button:hover { background: var(--navy-mid); color: #fff; }
  nav.tabs button.active { background: var(--signal); color: #fff; font-weight: 600; }
  #btnAccount { border: 1px solid #2c567b; background: transparent; color: #cfe0ec; border-radius: 8px; padding: 7px 14px; font-size: .84rem;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #btnAccount:hover { border-color: #35c39a; color: #fff; }
  #btnAccount.here { border-color: #35c39a; color: #fff; }

  /* ── Mode banner ─────────────────────────────────────────── */
  #modeBanner { font-size: .8rem; padding: 7px 0; text-align: center; border-bottom: 1px solid transparent; }
  #modeBanner.local { background: var(--amber-soft); color: var(--amber); border-color: #ecdcb4; }
  #modeBanner.cloud { background: var(--signal-soft); color: #135741; border-color: #bfe4d8; }
  #modeBanner a { color: inherit; font-weight: 600; }

  main { padding: 26px 0 60px; }
  .pane { display: none; } .pane.active { display: block; }
  .pane-head { margin-bottom: 18px; }
  .pane-head h2 { color: var(--navy); font-size: 1.35rem; }
  .pane-head p { color: var(--ink-soft); font-size: .9rem; max-width: 760px; }

  .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
  .cols { display: grid; gap: 18px; }
  .cols-2 { grid-template-columns: 1fr 1fr; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-sidebar { grid-template-columns: 1.6fr 1fr; }
  @media (max-width: 900px) { .cols-2, .cols-3, .cols-sidebar { grid-template-columns: 1fr; } }

  label { display: block; font-size: .78rem; font-weight: 600; color: var(--navy); margin: 10px 0 3px; }
  /* A white field on a white card is identified only by its border, so that
     border has to meet the 3:1 non-text contrast minimum. */
  input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-control); border-radius: 8px; font: inherit; font-size: .9rem; background: #fff; color: var(--ink); }
  input:focus, select:focus, textarea:focus { outline: 2px solid var(--signal); border-color: transparent; }
  textarea { resize: vertical; }
  .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 14px; }
  .hint { font-size: .74rem; color: var(--ink-soft); margin-top: 3px; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent;
    border-radius: 8px; min-height: 42px; padding: 9px 16px; font-weight: 600; font-size: .88rem; transition: background .12s ease, color .12s ease; }
  .btn-primary { background: var(--signal); color: #fff; } .btn-primary:hover { background: var(--signal-deep); }
  .btn-outline { background: #fff; border-color: var(--navy); color: var(--navy); } .btn-outline:hover { background: var(--navy); color: #fff; }
  .btn-quiet { background: #eaeef2; color: var(--ink-soft); } .btn-quiet:hover { background: #dfe5eb; }
  .btn-danger { background: #fff; border-color: var(--red); color: var(--red); }
  .btn[disabled] { opacity: .5; cursor: not-allowed; }
  .btn-sm { min-height: 34px; padding: 5px 10px; font-size: .78rem; border-radius: 6px; }
  @media (pointer: coarse) {
    .btn, nav.tabs button, #tabs button, #btnAccount { min-height: 44px; }
    .btn-sm { min-height: 40px; }
  }

  .badge { display: inline-block; font-size: .7rem; font-weight: 700; border-radius: 5px; padding: 2px 8px; letter-spacing: .03em; }
  .b-green { background: var(--signal-soft); color: var(--signal); }
  .b-red { background: var(--red-soft); color: var(--red); }
  .b-amber { background: var(--amber-soft); color: var(--amber); }
  .b-navy { background: #e3ebf2; color: var(--navy); }
  .b-gray { background: #eef1f4; color: var(--ink-soft); }
  .lock { font-size: .72rem; color: var(--ink-soft); background: #eef1f4; border-radius: 5px; padding: 2px 8px; }

  table { width: 100%; border-collapse: collapse; font-size: .86rem; }
  th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
  th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
  tr:hover td { background: #fafbfc; }
  .tbl-scroll { overflow-x: auto; }

  .score-ring { font-family: Georgia, serif; font-size: 2.2rem; color: var(--navy); line-height: 1; }
  .kv { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
  .kv b { color: var(--navy); font-weight: 600; } .kv span { color: var(--ink-soft); text-align: right; }

  .note { font-size: .78rem; border-radius: 8px; padding: 10px 14px; margin-top: 12px; }
  .note-c { background: var(--signal-soft); color: #15503f; border: 1px solid #bfe4d8; }
  .note-w { background: var(--amber-soft); color: var(--amber); border: 1px solid #ecdcb4; }
  .note-e { background: var(--red-soft); color: var(--red); border: 1px solid #ecc7c4; }
  .disclaim { font-size: .72rem; color: var(--ink-faint); margin-top: 10px; }

  .empty { text-align: center; color: var(--ink-soft); padding: 32px 12px; font-size: .9rem; }
  .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--navy-deep); color: #fff;
    border-radius: 8px; padding: 10px 20px; font-size: .85rem; box-shadow: var(--shadow-lift); opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 100; max-width: 92%; }
  .toast.show { opacity: 1; }

  dialog { border: 0; border-radius: 12px; box-shadow: 0 20px 60px rgba(13,35,56,.3); padding: 24px; max-width: 420px; width: 92%; }
  dialog::backdrop { background: rgba(13,35,56,.45); }
  dialog h3 { color: var(--navy); margin-bottom: 8px; }
  dialog p { font-size: .88rem; color: var(--ink-soft); margin-bottom: 16px; }
  .dlg-actions { display: flex; gap: 10px; justify-content: flex-end; }

  footer.app { border-top: 1px solid var(--line); padding: 22px 0 34px; font-size: .72rem; color: var(--ink-soft); background: var(--card); }

  /* ── Guided workflow (Screen pane) ───────────────────────── */
  .rail { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 0 20px; }
  .rail .seg { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-faint); padding: 6px 12px;
    border-radius: 999px; border: 1px solid var(--line-soft); background: var(--card); }
  .rail .seg .tick { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
  .rail .seg[data-state="active"] { color: var(--navy); border-color: var(--signal); font-weight: 600; }
  .rail .seg[data-state="active"] .tick { background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
  .rail .seg[data-state="done"] { color: var(--signal-deep); border-color: #bfe4d8; background: var(--signal-soft); }
  .rail .seg[data-state="done"] .tick { background: var(--signal); }
  .rail .arrow { color: var(--line); font-size: .8rem; }

  .flow { display: grid; gap: 18px; }
  .stage { position: relative; transition: opacity .18s ease; }
  .stage[data-state="waiting"] { opacity: .62; }
  .stage[data-state="waiting"] .stage-body { pointer-events: none; user-select: none; }
  .stage[data-state="waiting"] .stage-wait { display: block; }
  .stage-wait { display: none; font-size: .8rem; color: var(--ink-soft); background: #f6f8fa; border: 1px dashed var(--line);
    border-radius: 8px; padding: 9px 13px; margin-top: 10px; pointer-events: auto; }
  .stage[data-state="done"] .stage-flag { display: inline-block; }
  .stage-flag { display: none; }
  .stage h3 { color: var(--navy); font-size: 1.02rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .stage h3 .sub { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: .78rem; font-weight: 400; color: var(--ink-faint); }
  .bb-summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
  .bb-chip { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: #fafbfc; font-size: .82rem; }
  .bb-chip b { color: var(--navy); }

  .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 980px) { .result-grid { grid-template-columns: 1fr; } }
  .decision-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

  /* ── Dashboard summary strip ─────────────────────────────── */
  .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
  .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
  .stat .n { font-family: Georgia, serif; font-size: 1.5rem; color: var(--navy); line-height: 1.2; }
  .stat .l { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }

  /* ── Account / auth panel ────────────────────────────────── */
  .auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 900px) { .auth-grid { grid-template-columns: 1fr; } }
  .session-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line);
    border-radius: 10px; background: #fafbfc; margin-bottom: 14px; }
  .session-box .who { font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
  .ws-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .ws-row select { width: auto; min-width: 190px; flex: 1; }

  /* ── Realoscope Guide (drawer) ───────────────────────────── */
  #btnGuide { border: 1px solid #2c567b; background: transparent; color: #cfe0ec; border-radius: 8px; padding: 7px 14px; font-size: .84rem; }
  #btnGuide:hover, #btnGuide[aria-expanded="true"] { border-color: #35c39a; color: #fff; }
  #guidePanel { position: fixed; top: 0; right: 0; bottom: 0; width: 390px; max-width: 94vw; background: var(--card);
    border-left: 1px solid var(--line); box-shadow: -10px 0 34px rgba(13,35,56,.16); z-index: 70;
    transform: translateX(105%); transition: transform .2s ease; display: flex; flex-direction: column; visibility: hidden; }
  #guidePanel.open { transform: translateX(0); visibility: visible; }
  .guide-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg, #f4f9f7, #fff); }
  .guide-head h2 { font-size: 1.05rem; color: var(--navy); flex: 1; margin: 0; }
  .guide-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
  .guide-tip { border: 1px solid var(--line-soft); border-left: 3px solid var(--signal); border-radius: 8px;
    padding: 10px 13px; margin-bottom: 10px; background: #fafcfb; font-size: .84rem; color: var(--ink-soft); }
  .guide-tip b { color: var(--navy); display: block; margin-bottom: 2px; }
  .guide-tip.warn { border-left-color: var(--amber); background: #fdfaf2; }
  .guide-foot { border-top: 1px solid var(--line-soft); padding: 12px 18px; font-size: .72rem; color: var(--ink-faint); }
  /* Scrim behind the drawer. It exists so the drawer really is modal: while it
     is open, the page behind it cannot be clicked, which matches the keyboard
     focus trap. Clicking it closes the drawer. It sits under the drawer and
     above everything else. Purely functional, so it stays out of the
     accessibility tree. */
  .guide-scrim { position: fixed; inset: 0; background: rgba(13,35,56,.34); z-index: 65; }
  .guide-scrim[hidden] { display: none; }
  @media (max-width: 640px) { #guidePanel { width: 100%; max-width: 100%; } }
  .guide-chat { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 14px; }
  .guide-chat-title { font-size: .95rem; color: var(--navy); margin: 0 0 8px; }
  .guide-chat-state.card { padding: 14px; }

  /* ── Deal Scout ──────────────────────────────────────────── */
  .scout-preview { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; margin-top: 10px; background: #fafbfc; }
  .route-reason { font-size: .72rem; color: var(--ink-faint); margin-top: 2px; }
  .fit-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
  .fit-chips .badge { font-size: .66rem; }

  /* ── Owner AI Lab (owner-only; injected only after server-verified
       eligibility - never present in markup for signed-out/non-owner users) */
  .ownerlab-out { border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; margin-top: 12px; background: #fafbfc; font-size: .86rem; white-space: pre-wrap; }
  .ownerlab-ctx { font-size: .78rem; color: var(--ink-soft); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }

  /* ── AI Assistant (public, signed-in-gated chat) ─────────────────────── */
  .aichat-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
  .aichat-log { border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; margin: 12px 0; background: #fafbfc; max-height: 460px; overflow-y: auto; }
  .aichat-msg { border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; font-size: .87rem; white-space: pre-wrap; max-width: 88%; }
  .aichat-msg.user { background: #e3ebf2; color: var(--navy); margin-left: auto; }
  .aichat-msg.assistant { background: #fff; border: 1px solid var(--line-soft); color: var(--ink); }
  .aichat-msg.error { background: var(--red-soft); border: 1px solid #ecc7c4; color: var(--red); }
  .aichat-input-row { display: flex; gap: 8px; align-items: flex-end; }
  .aichat-input-row textarea { flex: 1 1 auto; }
  .aichat-usage { font-size: .74rem; color: var(--ink-soft); margin-top: 6px; }
  .aichat-ctx { font-size: .78rem; color: var(--ink-soft); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }

  /* ── Scout Advisor (plain English to a draft buy box) ─────────────────── */
  .scout-advisor { border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; margin: 12px 0; background: #f6f9fc; }
  .advisor-title { font-size: .95rem; color: var(--navy); margin: 0 0 4px; }
  .advisor-starters, .advisor-quickstarts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
  .advisor-quickstarts { margin-top: 4px; }
  .advisor-draft-card { margin-top: 12px; }
  .advisor-actions { margin-top: 12px; }

  /* ── Screen page helper strip ─────────────────────────────────────────── */
  .screen-helper { margin: 0 0 16px; }
  .screen-helper b { display: block; color: var(--navy); margin-bottom: 2px; }
  .screen-helper span { font-size: .86rem; color: var(--ink-soft); }

  @media (max-width: 640px) {
    body { font-size: 14.5px; }
    .bar { gap: 8px; }
    nav.tabs { width: 100%; overflow-x: auto; margin-left: 0; -webkit-overflow-scrolling: touch; }
    main { padding-top: 18px; }
    .card { padding: 16px; }
    .decision-row .btn { flex: 1 1 auto; text-align: center; }
    /* 16px inputs stop iOS Safari from auto-zooming on focus */
    input, select, textarea { font-size: 16px; }
    .ws-pill { max-width: 100%; }
    .result-grid { gap: 12px; }
  }

  /* ── Guided workspace navigation (guided-workspace-ux-v1) ────────────────
     The former long grouped left sidebar is replaced by a calm top nav: five
     workflow sections (Start · Add a Deal · Screen · Review · Intelligence),
     a persistent "Ask Realoscope" header action, and a quiet More / Workspace
     Tools menu for capital, workflow, and optional team tools. A chip sub-nav
     appears only inside a multi-page section, so a new user sees one obvious
     next step - never 25 tools at once. Mobile keeps the same top nav: the
     tab row and chips scroll horizontally, and More stays a dropdown. */
  .bar #btnGuide { margin-left: auto; }
  .btn-ask { border: 1px solid #35c39a; background: rgba(53,195,154,.14); color: #eafaf3; border-radius: 8px;
    padding: 7px 14px; font-size: .84rem; font-weight: 600; }
  .btn-ask:hover { background: #35c39a; color: #06251b; border-color: #35c39a; }

  .shell { padding: 0; }
  #main { padding: 26px 0 60px; min-width: 0; }

  /* Primary top navigation */
  .topnav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 50px; z-index: 30;
    box-shadow: 0 1px 0 rgba(13,35,56,.04); }
  .topnav-inner { display: flex; align-items: center; gap: 10px; }
  .primary-tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
  .ptab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink-soft);
    padding: 13px 15px; font-size: .92rem; font-weight: 600; white-space: nowrap; border-radius: 0; }
  .ptab:hover { color: var(--navy); }
  .ptab.active { color: var(--signal-deep); border-bottom-color: var(--signal); }
  .topnav-more { position: relative; flex: 0 0 auto; }
  .ptab-more { padding: 13px 12px; }
  .more-panel { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--shadow-lift); padding: 8px; min-width: 236px; z-index: 50;
    display: flex; flex-direction: column; gap: 1px; }
  .more-panel[hidden] { display: none; }
  .more-h { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint);
    font-weight: 700; padding: 6px 10px 4px; }
  .more-panel button { text-align: left; background: transparent; border: 0; border-radius: 8px; color: var(--ink-soft);
    padding: 8px 10px; font-size: .86rem; font-weight: 500; width: 100%; }
  .more-panel button:hover { background: #eef2f6; color: var(--navy); }
  .more-note { font-size: .72rem; color: var(--ink-faint); padding: 8px 10px 4px; border-top: 1px solid var(--line-soft); margin-top: 4px; }

  /* Secondary chip sub-nav (only inside multi-page workflow sections) */
  .subnav-bar { background: var(--paper); border-bottom: 1px solid var(--line-soft); }
  .subnav-bar[hidden] { display: none; }
  .subnav { display: flex; gap: 8px; padding: 10px 0; flex-wrap: wrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft);
    padding: 6px 14px; font-size: .84rem; font-weight: 600; white-space: nowrap; }
  .chip:hover { border-color: var(--signal); color: var(--navy); }
  .chip.active { background: var(--signal); border-color: var(--signal); color: #fff; }

  /* Start - guided workflow steps */
  .workflow-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: 12px; margin-bottom: 20px; }
  .workflow-steps li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; padding: 14px; box-shadow: var(--shadow); cursor: pointer; }
  .workflow-steps li:hover { box-shadow: var(--shadow-lift); border-color: var(--signal); }
  .workflow-steps .ws-step-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: var(--signal-soft);
    color: var(--signal-deep); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .82rem; }
  .workflow-steps b { color: var(--navy); font-size: .9rem; display: block; }
  .workflow-steps .ws-desc { color: var(--ink-soft); font-size: .78rem; display: block; margin-top: 2px; }

  /* Add a Deal - intake center cards */
  .intake-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .intake-card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px;
    box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
  .intake-card:hover { box-shadow: var(--shadow-lift); border-color: var(--signal); }
  .intake-card b { color: var(--navy); font-size: .92rem; }
  .intake-card span { color: var(--ink-soft); font-size: .8rem; }

  /* Recent deal activity (dashboard) */
  .recent-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
  .recent-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; text-align: left;
    background: transparent; border: 0; border-bottom: 1px dashed var(--line-soft); padding: 9px 4px; width: 100%; }
  .recent-row:hover { background: #f6f9fb; }
  .recent-name { color: var(--navy); font-weight: 600; font-size: .86rem; }
  .recent-meta { color: var(--ink-faint); font-size: .76rem; white-space: nowrap; }

  /* Dashboard + placeholder + memo + readiness views */
  .dash-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 4px; }
  .dash-actions .btn { width: 100%; }
  .lead { color: var(--ink-soft); font-size: .9rem; margin-bottom: 14px; max-width: 760px; }
  .placeholder { border-style: dashed; }
  .placeholder .badge { margin-bottom: 12px; }
  .ph-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
  .pipe-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
  .pipe-col { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px; background: #fafbfc; }
  .pipe-col h4 { color: var(--navy); font-size: .84rem; margin-bottom: 8px; display: flex; justify-content: space-between; }
  .pipe-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: .82rem; }
  .pipe-card b { color: var(--navy); }
  .readiness-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px dashed var(--line-soft); }
  .readiness-item input[type="checkbox"] { width: auto; margin-top: 3px; flex: 0 0 auto; }
  .readiness-item label { margin: 0; font-weight: 500; color: var(--ink); font-size: .88rem; }
  .readiness-item .rk-sub { font-size: .74rem; color: var(--ink-faint); }
  .memo-out { white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem;
    background: #fafbfc; border: 1px solid var(--line-soft); border-radius: 8px; padding: 14px; margin-top: 12px; max-height: 460px; overflow: auto; }

  @media (max-width: 900px) {
    #main { padding: 18px 0 50px; }
    .ptab { padding: 12px 13px; font-size: .88rem; }
    .more-panel { min-width: 210px; }
  }

  /* ════ market-first-intuitive-flow-v1 - calmer, guided surfaces ════ */

  /* Small kicker + secondary section label */
  .kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700;
    color: var(--signal-deep); margin-bottom: 6px; }
  .section-sub { color: var(--ink-faint); font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; margin: 26px 0 10px; }

  /* Start - command center: two or three dominant paths */
  .start-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .start-cta-2 { grid-template-columns: 1fr 1fr; }
  .start-cta-3 { grid-template-columns: 1fr 1fr 1fr; }
  .batch-review.emphasized { border-color: var(--signal); box-shadow: var(--shadow-lift); }
  .batch-status { display: flex; gap: 10px 20px; flex-wrap: wrap; }
  .batch-status .kv { display: flex; gap: 6px; align-items: center; }
  .start-card { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; min-height: 150px;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
  .start-card:hover { box-shadow: var(--shadow-lift); border-color: var(--signal); transform: translateY(-1px); }
  .start-primary { border-top: 3px solid var(--signal); }
  .start-eyebrow { color: var(--signal-deep); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
  .start-card b { color: var(--navy); font-size: 1.18rem; }
  .start-sub { color: var(--ink-soft); font-size: .86rem; }
  .start-go { margin-top: auto; color: var(--signal-deep); font-weight: 700; font-size: .86rem; }
  .start-go::after { content: " →"; }
  .start-secondary-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
  .start-secondary { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--navy);
    padding: 9px 18px; font-size: .86rem; font-weight: 600; }
  .start-secondary:hover { border-color: var(--signal); color: var(--signal-deep); }
  .start-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
  .start-status .ss { background: #fafbfc; border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; }
  .start-status .ss-n { display: block; color: var(--navy); font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
  .start-status .ss-n.ss-text { font-size: .98rem; }
  .start-status .ss-l { display: block; color: var(--ink-faint); font-size: .74rem; margin-top: 3px; }
  .start-note { margin-top: 14px; }

  /* Find Deals - market-first guided steps */
  .fd-steps { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .fd-step { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
  .fd-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .fd-step-h h3 { color: var(--navy); font-size: 1rem; margin: 0; }
  .fd-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: var(--signal-soft);
    color: var(--signal-deep); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .82rem; }
  .fd-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 4px; }
  .fd-choice { text-align: left; background: #fafbfc; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px; }
  .fd-choice:hover { box-shadow: var(--shadow-lift); border-color: var(--signal); }
  .fd-choice b { color: var(--navy); font-size: .9rem; }
  .fd-choice span { color: var(--ink-soft); font-size: .8rem; }
  .fd-scout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
    padding-top: 14px; border-top: 1px solid var(--line-soft); }
  .fd-opps { margin-top: 16px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .fd-count { border: 0; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
  .fd-count-opt { display: inline-flex; align-items: center; gap: 6px; background: #fafbfc; border: 1px solid var(--line);
    border-radius: 10px; padding: 8px 14px; font-size: .86rem; cursor: pointer; }
  .fd-sources { display: flex; flex-direction: column; gap: 6px; }
  .fd-source-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
  .fd-source-row:last-child { border-bottom: 0; }
  .fd-opp-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
  .fd-opp-card { padding: 14px 16px; }
  .fd-opp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .fd-opp-head b { color: var(--navy); font-size: .95rem; }

  /* Screen - guided step dividers + selected-property handoff */
  .screen-step { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; color: var(--navy);
    font-weight: 700; font-size: .92rem; }
  .screen-step:first-of-type { margin-top: 8px; }
  .screen-step-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; background: var(--navy);
    color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .78rem; }
  .screen-selected { border-left: 3px solid var(--signal); }
  .screen-start { border-style: dashed; }

  /* Review - per-deal actions on pipeline cards */
  .pipe-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .pipe-card-actions .btn { font-size: .72rem; padding: 4px 9px; }

  /* Intelligence - quiet context cards + comp search plan */
  .intel-overview { margin-bottom: 18px; }
  .intel-q { color: var(--navy); font-size: 1.05rem; margin: 0; }
  .intel-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
  .intel-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 6px; }
  .intel-card b { color: var(--navy); font-size: .92rem; }
  .intel-card span { color: var(--ink-soft); font-size: .8rem; }
  .intel-card .btn { align-self: flex-start; margin-top: 2px; }
  .comp-plan { margin-top: 14px; background: #fafbfc; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
  .comp-plan > summary { cursor: pointer; font-weight: 700; color: var(--navy); font-size: .92rem; }
  .comp-list { margin: 8px 0 0 18px; font-size: .84rem; color: var(--ink-soft); line-height: 1.8; }

  /* Ask Realoscope - context-aware helper line */
  .guide-context { color: var(--signal-deep); font-size: .82rem; font-weight: 600; margin: 2px 0 8px; }

  /* Realoscope Guide helper bubble - bottom right, quiet, dismissible.
     Sits below the toast (z-index 100) and below the Guide drawer (70), so it
     never covers a status message or the drawer it opens. */
  .ask-bubble { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex;
    flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(320px, calc(100vw - 32px)); }
  .ask-bubble[hidden] { display: none; }
  .ask-bubble-card { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--signal);
    border-radius: 12px; box-shadow: var(--shadow-lift); padding: 12px 14px; }
  .ask-bubble-card[hidden] { display: none; }
  .ask-bubble-copy { color: var(--navy); font-size: .86rem; font-weight: 600; margin: 0 0 8px; line-height: 1.4; }
  .ask-bubble-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .ask-bubble-mini { background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 999px;
    padding: 9px 16px; font-size: .82rem; font-weight: 600; box-shadow: var(--shadow-lift); cursor: pointer; }
  .ask-bubble-mini[hidden] { display: none; }
  .ask-bubble-mini:hover { background: var(--signal-deep); border-color: var(--signal-deep); }
  @media (max-width: 760px) {
    .ask-bubble { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
    .ask-bubble-card { padding: 10px 12px; }
    .ask-bubble-mini { padding: 8px 14px; font-size: .78rem; }
  }

  @media (max-width: 760px) {
    .start-cta { grid-template-columns: 1fr; }
  }

  /* Founder Admin console (owner-only; injected at runtime). */
  .fa-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .fa-actions { white-space: nowrap; }
  #pane-founder code { font-size: .74rem; word-break: break-all; }

  /* ════ realoscope-investment-lifecycle-ux-v1 ════
     Consolidated patterns for the lifecycle surfaces. Everything below reuses
     the existing tokens (--navy, --signal, --line, --radius, --shadow) rather
     than introducing a second visual language, and it deliberately avoids
     extra gradients, glass, and heavy shadows: dense investment data reads
     better on a calm, flat surface. */

  /* [hidden] must always win, including on flex and grid containers that Screen
     toggles when no deal is selected. */
  [hidden] { display: none !important; }

  /* Primary nav: Dashboard is grouped apart from the workflow destinations by
     a quiet divider rather than a different color or a box. */
  .ptab-divider { flex: 0 0 auto; align-self: center; width: 1px; height: 20px;
    background: var(--line); margin: 0 6px; }
  .ptab-overview { color: var(--ink-faint); }
  .ptab-overview:hover { color: var(--navy); }
  .ptab-overview.active { color: var(--signal-deep); }
  /* A focused nav item or tab must be obvious against the white bar. */
  .ptab:focus-visible, .chip:focus-visible { outline: 3px solid var(--signal-deep); outline-offset: -2px; }

  /* Section headings inside cards, so every card titles itself the same way. */
  .card-h { color: var(--navy); font-size: .98rem; margin: 0 0 6px; }

  /* Plain content lists (risks, missing info, history). Readable measure. */
  .plain-list { margin: 4px 0 0 18px; font-size: .86rem; color: var(--ink-soft); }
  .plain-list li { margin-bottom: 4px; max-width: 72ch; }

  /* Table captions carry the accessible summary for dense tables. Visible,
     because the explanation helps sighted users too. */
  .tbl-caption { caption-side: top; text-align: left; font-size: .76rem; color: var(--ink-soft);
    padding: 0 0 8px; max-width: 80ch; }
  th[scope="row"] { font-size: .86rem; text-transform: none; letter-spacing: 0; color: var(--navy);
    font-weight: 600; }

  /* Filter rows above tables. */
  .filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
  .filter-row label { margin: 0; }
  .filter-row .hint { margin: 0; flex: 1 1 220px; }

  /* Pipeline stage controls. The description below the control states what the
     move will do BEFORE the button is used. */
  .stage-cell { min-width: 230px; }
  .stage-select { width: auto; min-width: 140px; margin-right: 6px; }
  .stage-hint { max-width: 34ch; margin-top: 6px; }

  /* Decision controls. Approve, Return, and Pass differ by label, border, and
     weight, never by color alone. */
  .decision-approve { font-weight: 700; }
  .decision-return { border-style: dashed; }
  .decision-pass { border-width: 2px; }

  /* Dashboard: read-only metric tiles and honest empty values. */
  .dash-tabs { padding-top: 0; margin-bottom: 16px; }
  .dash-panel:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
  .dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
  .dash-metric { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; display: flex; flex-direction: column; gap: 2px; text-align: left; min-height: 96px; }
  .dash-metric-link { cursor: pointer; }
  .dash-metric-link:hover { border-color: var(--signal); box-shadow: var(--shadow); }
  .dash-n { font-family: Georgia, serif; font-size: 1.5rem; color: var(--navy); line-height: 1.2; }
  /* An unknown value is styled as text, never as a big number, so it can never
     be mistaken for a measured zero. */
  .dash-na { font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
  .dash-l { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
  .dash-note { font-size: .74rem; color: var(--ink-soft); margin-top: 4px; max-width: 40ch; }

  /* A button that reads as a link, used where the target is a record. */
  .linkish { background: none; border: 0; padding: 0; color: var(--signal-deep); font: inherit;
    text-decoration: underline; cursor: pointer; }
  .linkish:hover { color: var(--navy); }

  /* Touch targets. WCAG 2.2 asks for 24 by 24 CSS pixels minimum for pointer
     inputs; these controls are the ones that sit closest to that floor. */
  .chip, .btn-sm, .stage-select, .linkish { min-height: 24px; }
  @media (pointer: coarse) {
    .chip, .btn-sm { min-height: 44px; display: inline-flex; align-items: center; }
    .stage-select { min-height: 44px; }
  }

  /* Reflow. A dense investment table stays a table, because exact comparison
     is the point, but it scrolls inside its own container so the PAGE never
     scrolls sideways.

     `contain: paint` is doing real work here, not decoration. A wide table
     whose minimum width exceeds its scroller still propagates layout overflow
     up to the document in Blink, which puts a horizontal scrollbar on the whole
     page at narrow widths even though overflow-x is already auto. Containing
     paint stops that propagation, so the table scrolls and the page does not.
     Verified at 320, 375, 390, 768, 1024, and 1440 CSS pixels. */
  .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
    contain: paint; }
  /* A scrollable region must be reachable and scrollable by keyboard, so the
     scroller is a focusable, named region wherever it can actually scroll. */
  .tbl-scroll:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
  @media (max-width: 760px) {
    .dash-grid { grid-template-columns: 1fr 1fr; }
    .filter-row .hint { flex-basis: 100%; }
    /* Let the stage control stack instead of forcing a very wide column. */
    .stage-cell { min-width: 150px; }
    .stage-select { min-width: 120px; margin-right: 0; margin-bottom: 6px; }
    .stage-hint { max-width: 22ch; }
  }
  @media (max-width: 560px) {
    /* On a phone the destinations wrap onto a second line instead of hiding
       inside a horizontal scroll. Every destination stays visible and tappable,
       which matters most for Deals, Screen, and Review. */
    .primary-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
    .ptab-divider { display: none; }
    .ptab-overview { color: var(--signal-deep); }
  }
  @media (max-width: 420px) {
    .dash-grid { grid-template-columns: 1fr; }
    .ptab { padding: 12px 10px; font-size: .84rem; }
  }

  /* ════ realoscope-quick-proforma-comps-entrypoints-v1 ════ */

  /* Quick Proforma sits in the header next to Ask Realoscope. It is styled as a
     peer of the other header actions rather than a primary CTA, because it is a
     shortcut into Screen and not the main path through the product. */
  .btn-quick-proforma { border: 1px solid #2c567b; background: transparent; color: #cfe0ec;
    border-radius: 8px; padding: 7px 14px; font-size: .84rem; white-space: nowrap; }
  .btn-quick-proforma:hover { border-color: #35c39a; color: #fff; }
  .qp-note { display: block; margin: 10px 0 4px; }
  .qp-note b { display: block; margin-bottom: 2px; }
  .qp-note span { display: block; }

  /* Candidate comps workspace. */
  .comps-head { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; margin-bottom: 12px; }
  .comps-head .ph-actions { flex: 0 0 auto; }
  .comps-subject { margin-bottom: 12px; }
  .comps-subject .note b { display: block; }
  .comps-subject .note span { display: block; font-size: .8rem; margin-top: 2px; }
  .comps-empty { border: 1px dashed var(--line); border-radius: var(--radius); background: #fafbfc; }
  .advisor-subject { margin: 8px 0; }
  .advisor-subject .note b { display: block; }
  .advisor-subject .note span { display: block; font-size: .8rem; margin-top: 2px; }
  .comps-advisor[hidden] { display: none; }
  .comps-advisor .advisor-title { margin-bottom: 2px; }

  @media (max-width: 760px) {
    .comps-head { flex-direction: column; }
    .comps-head .ph-actions { width: 100%; }
  }
  @media (max-width: 560px) {
    /* Keep the header actions reachable when the bar wraps on a phone. */
    .btn-quick-proforma { padding: 7px 11px; font-size: .8rem; }
  }