/* ============================================================
   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:#fafaf9;
  --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;
}
.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)}

/* ---------- 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:6px;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--muted);background:transparent;border:none;cursor:pointer;padding:4px 0;
}
.user-menu-trigger:hover{color:var(--accent)}
.user-menu-caret{font-size:10px;transition:transform .15s ease}
.user-menu.open .user-menu-caret{transform:rotate(180deg)}

.user-menu-list{
  display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:450;
  min-width:200px;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-item-email{
  font-size:12px;color:var(--muted);padding:8px 10px;margin-bottom:2px;
  border-bottom:1px solid var(--hairline);word-break:break-all;
}
.user-menu-item{
  display:block;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;
}
.user-menu-item:hover{background:var(--surface-2);color:var(--accent)}

/* ---------- 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)}

/* ---------- 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}