/* ============================================================
   Deals N Yields — shared design system ("Underwriter")
   Dark, dense, premium financial-tool shell with a warm amber
   accent, plus a calmer, muted "input zone" treatment for
   sustained data entry (calculator fields, working areas) —
   darker than the old ivory version, still clearly lighter
   than the near-black shell.

   Every logged-in page links this file and builds page content
   from these tokens + components. Page-specific <style> blocks
   should only add layout for that page (grids, one-off spacing)
   — never redefine colours, fonts, or radius directly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Archivo:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap');

:root{
  /* --- dark shell (dominant look) --- */
  --bg:#0B0D0C;
  --surface:#151815;
  --surface-2:#1D211D;
  --surface-3:#242923;
  --ink:#ECEAE3;
  --muted:#8B8B7E;
  --hairline:rgba(255,255,255,.09);
  --hairline-strong:rgba(255,255,255,.18);
  --accent:#E0A458;
  --accent-2:#F5C878;
  --accent-ink:#191205;

  /* --- input / working zone: warm dark taupe/stone, calmer than the
     shell but no longer light — for long sustained-entry sessions --- */
  --input-bg:#423528;
  --input-surface:#4E4030;
  --input-ink:#F0E8DA;
  --input-muted:#B8A88F;
  --input-hairline:#5C4C38;
  --input-accent:var(--accent);

  --font-head:'Big Shoulders Display',sans-serif;
  --font-body:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;

  --radius:6px;
  --radius-sm:4px;
}

/* ============================================================
   Light + indigo theme — additive layer for redesigned pages
   ("theme-light"). Redefines the same token names as :root
   above with light-theme values, scoped to body.theme-light so
   no existing page (none of which carry that class yet) is
   affected. Adopted page-by-page.
   ============================================================ */
body.theme-light{
  /* --- light shell (dominant look) --- */
  --bg:#F2EFE7;
  --surface:#ffffff;
  --surface-2:#f5f5f4;
  --surface-3:#eeecea;
  --ink:#1c1c1a;
  --muted:#6b6b66;
  --hairline:rgba(0,0,0,.08);
  --hairline-strong:rgba(0,0,0,.16);
  --accent:#4b45b2;
  --accent-2:#5a54c8;
  --accent-ink:#ffffff;

  /* --- typography: Sora for light-theme pages only. :root's
     --font-head/--font-body (Big Shoulders Display/Archivo) are
     untouched, so dark pages (no theme-light class) are unaffected --- */
  --font-head:'Sora',sans-serif;
  --font-body:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;

  /* --- input / working zone: light, calm — the light-theme
     equivalent of the dark taupe zone --- */
  --input-bg:#f5f5f4;
  --input-surface:#ffffff;
  --input-ink:#1c1c1a;
  --input-muted:#6b6b66;
  --input-hairline:rgba(0,0,0,.12);
  --input-accent:var(--accent);

  /* --- semantic status tokens (new — foreground/background/ink
     for danger, warn, success; not yet used anywhere) --- */
  --danger:#a32d2d;
  --danger-bg:#fcebeb;
  --danger-ink:#a32d2d;
  --warn:#854f0b;
  --warn-bg:#faeeda;
  --warn-ink:#854f0b;
  --success:#0f6e56;
  --success-bg:#e1f5ee;
  --success-ink:#0f6e56;

  /* --- spacing scale (new — app currently has none) --- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
}
h1,h2,h3{font-family:var(--font-head);font-weight:700;margin:0;letter-spacing:.01em}
a{color:inherit}
p{margin:0}

/* ---------- page shell ---------- */
.shell{max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem 4rem}
@media(max-width:600px){.shell{padding:1.5rem 1rem 3rem}}

/* ---------- top nav ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  padding-bottom:1.5rem;margin-bottom:2.5rem;border-bottom:1px solid var(--hairline);
}
.wordmark{
  font-family:var(--font-head);font-weight:800;font-size:19px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;
}
.wordmark-logo{height:40px;width:auto;display:block}
.nav-links{display:flex;gap:1.75rem;flex-wrap:wrap}
.nav-links a{
  font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--accent);border-color:var(--accent)}
.auth-bar{display:flex;align-items:center;gap:1.25rem}
.auth-bar a{
  font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);text-decoration:none;cursor:pointer;
}
.auth-bar a:hover{color:var(--accent)}
/* Public pages' headers (landing, pricing, support, privacy, the free
   calculators, deal sourcing): on phones every link is at least 44px tall
   and wide so it's easy to tap. The logged-in nav is not affected. */
@media(max-width:760px){
  .public-topbar .nav-links{row-gap:0}
  .public-topbar .nav-links a,
  .public-topbar .auth-bar > a,
  .public-topbar a.wordmark,
  .ds-header.public-topbar > a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;box-sizing:border-box}
  .public-topbar .nav-links a{padding-top:4px}
}

/* ---------- user menu (nav.js) ----------
   Replaces the old bare "Log out" link — a small dropdown holding the
   user's email, a Settings link, and Log out (#auth-link, unchanged id).
   Plain token vars, no theme-scoping needed: whichever theme the hosting
   page carries (dark :root or light theme-light) already supplies the
   right values for --accent/--surface/etc, same as .topbar/.auth-bar above. */
.user-menu{position:relative}
.user-menu-trigger{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:13.5px;font-weight:600;
  color:var(--ink);background:transparent;border:1px solid transparent;border-radius:999px;
  cursor:pointer;padding:3px 10px 3px 3px;transition:background .15s ease,border-color .15s ease;
}
.user-menu-trigger:hover,.user-menu.open .user-menu-trigger{background:var(--surface);border-color:var(--hairline)}
.user-menu-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.user-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.02em;line-height:1;
}
.user-avatar.is-empty::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.85)}
.user-avatar-lg{width:40px;height:40px;font-size:14.5px}
.user-menu-name{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu-chevron{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);transition:transform .15s ease}
.user-menu.open .user-menu-chevron{transform:rotate(180deg)}
.user-menu-caret{font-size:10px;transition:transform .15s ease}

.user-menu-list{
  display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:450;
  min-width:240px;max-width:min(300px,calc(100vw - 2rem));padding:6px;
  background:var(--surface);border:1px solid var(--hairline-strong);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 28px rgba(0,0,0,.12);
}
.user-menu.open .user-menu-list{display:block}
.user-menu-head{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--hairline)}
.user-menu-who{min-width:0}
.user-menu-fullname{font-size:14px;font-weight:700;color:var(--ink);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu-item-email{font-size:12px;color:var(--muted);margin:1px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu-item{
  display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:13.5px;font-weight:600;
  color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;
}
.auth-bar a.user-menu-item{font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--ink)}
.user-menu-item:hover,.auth-bar a.user-menu-item:hover{background:var(--surface-2);color:var(--accent)}
.user-menu-item.active,.auth-bar a.user-menu-item.active{color:var(--accent)}
.user-menu-icon{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.user-menu-item:hover .user-menu-icon,.user-menu-item.active .user-menu-icon{color:var(--accent)}
.user-menu-divider{height:1px;background:var(--hairline);margin:5px 4px}
/* Log out's icon is drawn in CSS: pages rewrite #auth-link's text
   ("Log in"/"Log out"), which would wipe an inline <svg>. */
.user-menu-logout::before{
  content:"";width:17px;height:17px;flex-shrink:0;background:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M10 17l-5-5 5-5'/%3E%3Cpath d='M5 12h11'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M10 17l-5-5 5-5'/%3E%3Cpath d='M5 12h11'/%3E%3C/svg%3E") center/contain no-repeat;
}
.user-menu-logout:hover::before{background:var(--accent)}

/* ---------- Tools dropdown (nav.js) ---------- */
.nav-tools{position:relative}
.nav-tools-trigger{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:none;cursor:pointer;padding:4px 0;
}
.nav-tools-trigger:hover,.nav-tools-trigger.active{color:var(--accent)}
.nav-tools.open .nav-tools-list{display:block}
.nav-tools.open .user-menu-caret{transform:rotate(180deg)}
.nav-tools-list{left:auto;right:0}
/* Grouped Tools panel: Calculators | Planning on the left and right,
   Outreach under Calculators. Each item has a one-line description. */
.nav-tools .nav-tools-list{width:560px;max-width:calc(100vw - 2rem);padding:10px}
.nav-tools-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
.nav-tools-group:nth-child(3){grid-column:1}
.nav-tools-group:nth-child(2){grid-row:span 2}
.nav-tools-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:6px 10px 4px}
.nav-tool{display:block;padding:8px 10px;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink)}
.auth-bar a.nav-tool{text-transform:none;letter-spacing:0;font-size:inherit;font-weight:inherit;color:var(--ink)}
.nav-tool-name{display:block;font-family:var(--font-body);font-size:13.5px;font-weight:600;line-height:1.35}
.nav-tool-desc{display:block;font-size:12px;font-weight:400;color:var(--muted);line-height:1.4;margin-top:1px}
a.nav-tool:hover,.auth-bar a.nav-tool:hover{background:var(--surface-2);color:var(--accent)}
a.nav-tool.active,.auth-bar a.nav-tool.active{color:var(--accent)}
.nav-tool.is-soon{cursor:default;opacity:.55}
.soon-pill{display:inline-block;vertical-align:1px;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border:1px solid var(--hairline);border-radius:999px;padding:1px 6px;margin-left:4px;white-space:nowrap}
.user-menu-item.is-disabled{cursor:default;opacity:.55;white-space:nowrap}
.user-menu-item.is-disabled:hover{background:transparent;color:var(--ink)}
.user-menu-item.is-disabled:hover .user-menu-icon{color:var(--muted)}
.nav-tools-sheet-head,.nav-tools-backdrop{display:none}
/* Phones: the Tools menu opens as a full-width sheet from the bottom. */
@media(max-width:760px){
  .nav-tools .nav-tools-list{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;z-index:470;
    max-height:85vh;overflow-y:auto;border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:6px 12px calc(16px + env(safe-area-inset-bottom,0px));
  }
  .nav-tools-groups{display:block}
  .nav-tools-sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-6px;background:var(--surface);padding:12px 10px 8px;margin:0 -2px 2px;border-bottom:1px solid var(--hairline);z-index:1}
  .nav-tools-sheet-head span{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--ink)}
  .nav-tools-close{font-size:26px;line-height:1;background:none;border:0;color:var(--muted);cursor:pointer;width:44px;height:44px;margin:-10px -10px -10px 0}
  .nav-tools-label{margin-top:12px}
  .nav-tool{padding:11px 10px}
  .nav-tools.open .nav-tools-backdrop{display:block;position:fixed;inset:0;z-index:465;background:rgba(20,20,40,.35)}
  body.nav-tools-sheet-open{overflow:hidden}
}

/* ---------- Deals page List / Board switch ----------
   saved-deals.html (List) and pipeline.html (Board) are the two views of
   the one Deals page; this header sits at the top of both. */
.deals-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4,1rem);flex-wrap:wrap;margin:0 0 var(--space-6,1.5rem)}
.deals-head .page-title{margin:0}
.view-switch{display:inline-flex;background:var(--surface-2);border:1px solid var(--hairline);border-radius:999px;padding:3px}
.view-switch a{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;padding:7px 18px;border-radius:999px}
.view-switch a:hover{color:var(--ink)}
.view-switch a.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.deals-intro{font-size:13.5px;color:var(--muted);margin:4px 0 0}
.view-switch-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
/* + Add a deal (2 Nov 2026): starts a new analysis in the calculator. */
.deals-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.deals-head .add-deal-btn{text-decoration:none;white-space:nowrap;border-radius:999px;padding:9px 18px;font-size:13.5px}
.view-switch-help{font-size:11.5px;color:var(--muted);margin:0;text-align:right}
@media(max-width:520px){.view-switch-wrap{align-items:flex-start}.view-switch-help{text-align:left}}

/* ---------- bottom tab bar (nav.js) ----------
   Same four items as the top nav. Shown on phone widths and always in the
   iOS app; the top link row hides at the same point so they never both
   show. Sits above the iPhone home indicator via safe-area insets. */
.tabbar{display:none}
@media(max-width:760px){
  .tabbar{display:flex}
  #nav-root .nav-links{display:none}
  body.has-tabbar{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
  #nav-root .wordmark-logo{height:28px}
  #nav-root .topbar{margin-bottom:1.5rem;padding-bottom:1rem;flex-wrap:nowrap}
  #nav-root .auth-bar{gap:1rem;min-width:0}
  #nav-root #subscribe-link{display:none!important}
  #nav-root .user-menu-name,#nav-root .user-menu-chevron{display:none}
  #nav-root .user-menu-trigger{padding:2px}
}
html.native-app .tabbar{display:flex}
html.native-app body.has-tabbar{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:350;
  background:var(--surface,#fff);border-top:1px solid var(--hairline,#e5e5e5);
  padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  box-shadow:0 -4px 16px rgba(20,20,40,.05);
}
.tabbar-tab{
  flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 2px;color:var(--muted,#767a92);text-decoration:none;
  font-family:var(--font-body,inherit);font-size:10.5px;line-height:1.2;font-weight:600;letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent;
}
.tabbar-tab svg{display:block;width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar-tab.active{color:var(--accent,#4b45b2)}
body.tabbar-kb .tabbar{display:none}

/* ---------- buttons ---------- */
.btn-primary{
  font-family:var(--font-body);font-weight:700;font-size:13.5px;letter-spacing:.01em;
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius);
  padding:11px 20px;cursor:pointer;
}
.btn-primary:hover{background:var(--accent-2)}
.btn-primary:disabled{opacity:.5;cursor:default}
.btn-secondary{
  font-family:var(--font-body);font-weight:600;font-size:13.5px;
  background:transparent;color:var(--accent);border:1.5px solid var(--accent);border-radius:var(--radius);
  padding:9.5px 18px;cursor:pointer;
}
.btn-secondary:hover{background:rgba(224,164,88,.08)}
/* Links styled as buttons: never underlined, and the primary button keeps
   its white-on-indigo text even inside .auth-bar, whose link rule would
   otherwise turn it grey (the "Sign up free" contrast bug). */
a.btn-primary,a.btn-secondary,a.mini-btn{text-decoration:none}
a.btn-primary,a.btn-primary:hover,.auth-bar a.btn-primary,.auth-bar a.btn-primary:hover{color:var(--accent-ink)}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:1.75rem;transition:border-color .15s ease;
}
.card:hover{border-color:var(--hairline-strong)}

/* ---------- input / working zone ---------- */
/* Use for the calculator's input panels and any sustained data-entry area.
   Lighter and calmer than the dark shell around it — not a hard split,
   just a warmer panel that breathes within the dark page. */
.input-zone{
  background:var(--input-bg);border:1px solid var(--input-hairline);border-radius:var(--radius);
  padding:1.75rem;color:var(--input-ink);
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:1rem}
.field label{font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--input-muted)}
.field input,.field select{
  font-family:var(--font-body);font-size:14px;color:var(--input-ink);
  background-color:var(--input-surface);border:1.5px solid var(--input-hairline);border-radius:var(--radius-sm);
  padding:10px 12px;width:100%;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--input-accent)}

/* ---------- native control resets ----------
   Browser-default number spinners, select chrome, and checkboxes clash with
   the theme — reset them here, once, so every page/modal matches without
   having to duplicate this per file. */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Deliberately no padding here — more specific select rules (.field select
   etc.) already set their own padding shorthand, which would just overwrite
   a padding-right set at this level. Each of those adds its own right
   padding sized for this chevron instead. Same chevron asset as
   .stage-dd-trigger::after in pipeline.html, for visual consistency. */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23E0A458' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px;
  cursor:pointer;
}

input[type="checkbox"]{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:16px;height:16px;border:1.5px solid var(--hairline-strong);border-radius:4px;
  background:var(--surface-2);cursor:pointer;position:relative;flex-shrink:0;
  transition:background-color .15s ease,border-color .15s ease;
}
input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg);
}
input[type="checkbox"]:focus-visible{outline:none;border-color:var(--accent)}

/* ---------- custom dropdown (replaces native <select> everywhere) ----------
   Same visual treatment and interaction mechanics as pipeline.html's original
   stage-dd component (which stays as-is, untouched) — generalized here under
   generic names so it can back any value+options picker, not just the stage
   selector it was first built for. Markup: <div class="dd" id="X"
   data-value="v"><button class="dd-trigger"><span>Label</span></button>
   <ul class="dd-list"><li class="dd-opt" data-value="v">Label</li>...</ul></div>
   z-index is higher than .stage-dd-list's original 200 — several instances of
   this generic version live inside a .modal-overlay (z-index 400), which the
   stage dropdown never does, so its popup must render above that. */
.dd{position:relative}
.dd-trigger{
  width:100%;text-align:left;font-family:var(--font-body);font-size:14px;font-weight:600;
  border:1.5px solid var(--input-hairline);border-radius:var(--radius-sm);
  padding:10px 30px 10px 12px;background-color:var(--input-surface);color:var(--input-ink);
  cursor:pointer;position:relative;transition:border-color .15s ease;
}
.dd-trigger::after{
  content:'';position:absolute;right:10px;top:50%;width:10px;height:6px;transform:translateY(-50%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23E0A458' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:10px 6px;
}
.dd-trigger:hover{border-color:var(--hairline-strong)}
.dd-trigger:focus{outline:none;border-color:var(--accent)}
.dd.open .dd-trigger{border-color:var(--accent)}

.dd-list{
  display:none;list-style:none;margin:0;padding:4px;
  position:fixed;z-index:450;
  background-color:var(--surface-3);opacity:1;
  border:1.5px solid var(--accent);border-radius:var(--radius-sm);
  box-shadow:0 1px 2px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.55);
}
.dd.open .dd-list{display:block}
.dd-opt{
  font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--ink);
  padding:7px 10px;border-radius:var(--radius-sm);cursor:pointer;
}
.dd-opt:hover,.dd-opt.highlight{background:rgba(224,164,88,.12)}
.dd-opt.selected{color:var(--accent-2)}

/* ---------- data / results block ---------- */
.data-block{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:1.75rem}
.subhead{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .85rem;padding-bottom:.5rem;border-bottom:1px solid var(--hairline);
}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.metric{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.85rem 1rem}
.metric .ml{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.metric .mv{font-family:var(--font-body);font-weight:700;font-size:19px;color:var(--ink);margin:0;font-variant-numeric:tabular-nums}
.metric .mv.hot,.metric .mv.good{color:var(--accent-2)}
.metric .mv.warn{color:#E8C468}
.metric .mv.bad{color:#E8746B}

/* max-bid / offer box */
.offer-box{
  border:1.5px solid var(--accent);border-radius:var(--radius);
  padding:1.1rem 1.25rem;margin-bottom:10px;background:rgba(224,164,88,.07);
}
.offer-box .ot{font-size:11.5px;color:var(--muted);margin:0 0 6px}
.offer-box .ov{font-family:var(--font-body);font-weight:700;font-size:26px;color:var(--accent-2);margin:0 0 3px;font-variant-numeric:tabular-nums}
.offer-box .on{font-size:11px;color:var(--muted);margin:0}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab-btn{
  font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:.02em;
  padding:9px 18px;border:1.5px solid var(--hairline);border-radius:var(--radius);
  background:var(--surface);color:var(--muted);cursor:pointer;
}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------- misc ---------- */
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 .6rem}
.pill{
  font-family:var(--font-body);font-size:11.5px;font-weight:600;color:var(--accent);
  border:1.5px solid var(--accent);border-radius:999px;padding:5px 12px;background:transparent;cursor:pointer;
}
.pill.badge{color:var(--muted);border-color:var(--hairline);background:var(--surface-2);cursor:default}

/* ---------- Contact us modal (support.js) ----------
   Own .support-* names rather than .modal-overlay etc, because those are
   page-local in each HTML file and not every logged-in page defines them.
   Values mirror saved-deals.html's modal so it looks the same everywhere. */
.support-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;align-items:center;justify-content:center;padding:1rem}
.support-overlay.open{display:flex}
.support-card{max-width:520px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.support-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem}
.support-header h2{font-size:18px;margin:0}
.support-close{background:transparent;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.support-close:hover{color:var(--ink)}
.support-hint{font-size:13px;color:var(--muted);margin:0 0 1rem}
.support-hint.support-direct{margin-top:-.6rem}
.support-hint a{color:var(--accent);font-weight:600}
.support-card .field textarea{
  font-family:var(--font-body);font-size:14px;color:var(--input-ink);
  background-color:var(--input-surface);border:1.5px solid var(--input-hairline);border-radius:var(--radius-sm);
  padding:10px 12px;width:100%;resize:vertical;box-sizing:border-box;
}
.support-card .field textarea:focus{outline:none;border-color:var(--input-accent)}
.support-card .field select{padding-right:32px}
.support-card .field input[type="file"]{padding:8px}
.support-small{font-size:12px;color:var(--muted)}
.support-meta{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);margin-bottom:.5rem;word-break:break-all}
.support-meta-label{font-weight:600;color:var(--ink);margin-right:6px}
.support-msg{font-size:12.5px;min-height:1em;margin:.5rem 0 0;color:var(--muted)}
.support-msg.error{color:var(--danger,#c0392b)}
.support-success{font-size:15px;color:var(--ink);margin:.5rem 0 0}
.support-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:1rem}

/* ---------- results disclaimer (results-disclaimer.js) ----------
   Small muted line under every calculation result panel. */
.results-disclaimer{font-size:11.5px;line-height:1.5;color:var(--muted);margin:1rem 0 0}

/* ---------- installed app / phone support (PWA) ----------
   Pages use viewport-fit=cover, so on notched iPhones the page can sit
   under the notch (landscape) and the home-indicator bar. These insets are
   0 everywhere else, so nothing moves on desktop or in a normal browser. */
body{
  padding-top:env(safe-area-inset-top, 0px);
  padding-right:env(safe-area-inset-right, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  padding-left:env(safe-area-inset-left, 0px);
}
body .modal-overlay,body .support-overlay{
  padding:max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px))
          max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
}

/* Phones: 16px text in form fields stops iPhones zooming in on tap, and
   44px is the minimum comfortable tap height (Apple's guideline). */
@media (max-width:600px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),
  select,textarea{font-size:16px !important}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),
  select{min-height:44px}
  button.btn-primary,button.btn-secondary,button.btn-danger,button.submit-btn,
  button.run-btn,button.save-btn,button.tab,button.tab-btn,button.fin-tab,
  button.chip,button.dd-trigger{min-height:44px}
  button.modal-close{min-width:44px;min-height:44px}
}

/* ---- Your own comparables (my-comps.js), calculator Comps tab and deal page ---- */
.mc-yours{background:var(--surface-2,#f4f2fb);border:1.5px solid var(--accent);border-radius:12px;padding:12px 14px;margin:0 0 12px}
.mc-yours-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mc-yours-n{font-size:12px;color:var(--muted)}
.mc-yours-v{margin:6px 0 2px;font-size:24px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mc-yours-s{margin:0;font-size:12.5px;color:var(--muted)}
.mc-use{margin-top:10px;font:inherit;font-size:13px;font-weight:600;color:var(--accent);background:transparent;border:1.5px solid var(--accent);border-radius:10px;padding:8px 12px;min-height:40px;cursor:pointer}
.mc-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:6px;padding:2px 6px;vertical-align:1px}
.mc-list{border:1px solid var(--hairline);border-radius:12px;background:var(--surface);margin:0 0 10px}
.mc-list>summary{cursor:pointer;padding:12px 14px;font-weight:600;font-size:14px;color:var(--ink);min-height:44px;box-sizing:border-box;list-style:none;display:flex;align-items:center;justify-content:space-between}
.mc-list>summary::-webkit-details-marker{display:none}
.mc-list>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:10px;transition:transform .15s}
.mc-list[open]>summary::after{transform:rotate(-135deg)}
.mc-list ul{list-style:none;margin:0;padding:0 14px}
.mc-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--hairline)}
.mc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mc-addr{font-size:13.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.mc-meta,.mc-note{font-size:12px;color:var(--muted)}
.mc-note{font-style:italic}
.mc-price{font-weight:700;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-x{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--hairline);background:var(--surface);color:var(--muted);font-size:17px;line-height:1;cursor:pointer}
.mc-x:hover{color:var(--danger-ink,#b3261e);border-color:var(--danger,#b3261e)}
.mc-undo{width:auto;border-radius:8px;padding:0 10px;font:inherit;font-size:12px;font-weight:600;color:var(--accent);border-color:var(--accent)}
.mc-gone .mc-main,.mc-gone .mc-price{opacity:.45;text-decoration:line-through}
.mc-link{font-weight:500;font-size:12px;color:var(--accent);margin-left:4px}
.mc-hint{margin:0;padding:8px 14px 12px;font-size:12px;color:var(--muted)}
.mc-add{font:inherit;font-size:14px;font-weight:600;color:var(--accent);background:none;border:none;padding:8px 0;min-height:44px;cursor:pointer}
.mc-form{border:1px solid var(--hairline);border-radius:12px;background:var(--surface);padding:12px 14px;margin-top:4px}
.mc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.mc-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.mc-wide{grid-column:1/-1}
.mc-f input,.mc-f select{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--hairline-strong,var(--hairline));border-radius:8px;padding:9px;background:var(--input-bg,var(--surface));width:100%;box-sizing:border-box;min-height:40px}
.mc-err{color:var(--danger-ink,#b3261e);font-size:12.5px;margin:8px 0 0}
.mc-actions{display:flex;gap:10px;align-items:center;margin-top:12px}
.mc-save{font:inherit;font-size:14px;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:10px;padding:10px 14px;min-height:44px;cursor:pointer}
.mc-cancel{font:inherit;font-size:14px;color:var(--muted);background:none;border:none;cursor:pointer;min-height:44px}