/* EB theme. Loaded last on every page.
   Modelled on professional finance sites: white and slate surfaces, dark slate text,
   EB orange (from the logo) only for the logo, primary buttons and small highlights.
   IBM Plex Sans for all text, IBM Plex Mono for figures.
   Removes template tells: glows, rings, italic accent words, pill chips, gradient fills. */

:root {
  --accent-text: #c23b00;           /* orange that passes contrast on white */
  --link: #1d4ed8;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.08);
  --radius: 8px;
  --radius-sm: 6px;
}

::selection { background: rgba(252, 76, 0, 0.18); }

/* Type: one sans family, tight confident headings */
body { font-size: 14.5px; letter-spacing: 0; color: var(--ink); }
h1, h2, h3, .display, .title, .auth-title { font-family: var(--sans); font-weight: 600; letter-spacing: -0.025em; color: inherit; }
.display em, .title em, .auth-title em, .hero h1 em, .crown-card h3 em, .footer-word em {
  font-style: normal; font-weight: inherit; color: inherit; -webkit-text-stroke: 0;
}

/* Labels: quiet sentence case, slate not orange */
.eyebrow, .kicker, .side-label, .brand-sub, .site-logo small, .footer-grid h4 {
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12.5px; color: var(--muted);
}
.section-dark .eyebrow, .section-dark .kicker, .sidebar .side-label, .sidebar .brand-sub { color: #94a3b8; }

/* Figures */
.stat-value, .num, td.num, .money { font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Brand: keep the logo exactly as it is (ink + orange dot) */
.brand-mark span, .site-logo span { color: var(--orange); }

/* Orange stays for primary actions; text accents become slate or dark orange */
.link, a.link { color: var(--link); }
.accent { color: var(--accent-text); }

/* Decoration removed */
.ring, .glow, .hero::before, .dark-card::after, .demo::after, .cta::before { display: none !important; }
.progress > div { background: var(--ink); }

/* Shapes: calm, consistent radii */
.card, .stat, .problem, .crown-card, .demo, .cta, .feature, .step, .list-item, .modal, .panel { border-radius: var(--radius); }
.demo-q, .demo-brief, .demo-seats > * { border-radius: 6px; }
.chip, .pill, .hero-pill, .hero-pill b, .step .tag2, .feature .soon, .auth-roles span { border-radius: 6px; }
.btn, .input, .side-select, select, textarea { border-radius: 6px; }
.btn { font-weight: 600; letter-spacing: 0; }
.progress { border-radius: 2px; }

/* Dark surfaces: deep slate instead of warm black */
.section-dark { background: var(--dark); }
.demo { background: var(--dark-2); }

/* Focus */
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Higher-specificity overrides for accent words and numerals */
html body .auth-title em, html body .auth-aside .display em, html body .section-dark .display em,
html body .dark-card .title em, html body .cta .display em, html body .crown-card h3 em { font-style: normal; font-weight: inherit; color: inherit; }
html body .problem .num { font-family: var(--mono); font-style: normal; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
html body .exec blockquote { font-family: var(--sans); font-style: normal; }
html body .demo-q { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }

/* Orange is reserved for: logo, primary buttons, live/active indicators. Everything else goes neutral. */
html body .section-dark .kicker, html body .exec .focus, html body .crown-card li svg,
html body .exec blockquote::before, html body .exec blockquote::after { color: #94a3b8; }
html body .exec, html body .crown-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); }
html body .exec .role, html body .seat2 b, html body .demo-brief header span {
  background: rgba(255, 255, 255, 0.06); color: #e2e8f0; border-color: rgba(255, 255, 255, 0.1);
}
html body .seat2.on { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); }
html body .crown-orb { animation: none; box-shadow: none; background: rgba(255, 255, 255, 0.05); color: #e2e8f0; }
@media (hover: hover) and (pointer: fine) { html body .exec:hover { border-color: rgba(255, 255, 255, 0.2); } }
html body .trust .ico { color: var(--ink-2); background: var(--surface-3); }
html body .exec-detail .chev { color: var(--muted); }
html body .footer-word em { -webkit-text-stroke: 0; }

/* The Crown question box: voice + documents */
.ask-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ask-tools .btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ask-tools select { width: auto; padding: 6px 10px; font-size: 13px; }
#voice-btn.recording { border-color: var(--red); color: var(--red); background: var(--red-soft); }
#voice-btn.recording svg { animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { #voice-btn.recording svg { animation: none; } }
.doc-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.doc-list:empty { display: none; }
.doc-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 6px 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font-size: 12.5px; }
.doc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.doc-remove { width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.doc-remove:hover { background: var(--surface-3); color: var(--ink); }
.doc-list li { display: contents; }
.doc-chip { cursor: pointer; user-select: none; transition: border-color 150ms ease, background-color 150ms ease; }
.doc-chip input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); }
.doc-chip.on { border-color: var(--ink-2); background: var(--surface); }
.doc-hint { align-self: center; padding-left: 4px; }

/* Admin portal */
.grid-4 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.select-sm { width: auto; min-width: 110px; padding: 6px 10px; font-size: 13px; }

/* Overview: Your competitors */
.comp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.comp-card { position: relative; display: block; width: 100%; padding: 16px; text-align: left; font: inherit; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { button.comp-card:hover { border-color: var(--ink-2); } }
.comp-card:active { transform: scale(0.99); }
.comp-card.on { border-color: var(--ink); background: var(--surface-2); }
.comp-card.locked { cursor: default; background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--surface-3) 10px 20px); color: var(--muted); }
.comp-rank { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.comp-lock { position: absolute; top: 14px; right: 14px; color: var(--muted); }
.comp-name { margin-top: 6px; font-weight: 600; }
.comp-cta { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--link); }
.comp-detail { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.comp-why { margin: 10px 0 0; padding-left: 18px; }
.comp-why li { margin: 6px 0; }
.comp-sub { font-size: 14px; font-weight: 600; }
.comp-ahead li::marker { color: #16a34a; }
.comp-table { min-width: 0; }
.comp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* Company setup (onboarding Gate A) */
.setup-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid rgba(252, 76, 0, 0.4); border-radius: var(--radius); background: var(--orange-soft); }
.setup-banner > div { flex: 1; }
.setup-banner.hidden, .setup-lock.hidden { display: none; }
.setup-lock { border-color: var(--line); background: var(--surface-2); }
.setup-progress { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.setup-progress > div { height: 100%; width: 0; background: var(--ink); transition: width 300ms var(--ease-out); }
.setup-num { display: inline-block; min-width: 38px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
#setup-form fieldset { margin: 0; border: 1px solid var(--line); }
#setup-form legend { padding: 0; font-weight: 600; float: left; width: 100%; margin-bottom: 10px; }
.chips-select { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; font-size: 13.5px; user-select: none; }
.chip-opt input { margin: 0; accent-color: var(--ink); }
.chip-opt:has(input:checked) { border-color: var(--ink); background: var(--surface-2); font-weight: 600; }

/* "Other" text box and the profile popup */
.other-box.hidden { display: none; }
.profile-nudge { width: min(460px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.profile-nudge::backdrop { background: rgba(15, 23, 42, 0.45); }
.profile-nudge[open] { animation: nudge-in 200ms var(--ease-out); }
@keyframes nudge-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .profile-nudge[open] { animation: none; } }


/* Landing top bar: dark slate so the logo stands out */
.site-header, .site-header.scrolled { background: #0b1220; border-bottom: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(11, 18, 32, 0.25); }
.site-header .site-logo small { color: #cbd5e1; }
.site-header nav a, .site-header .site-links a { color: #e2e8f0; }
@media (hover: hover) and (pointer: fine) { .site-header nav a:hover, .site-header .site-links a:hover { color: #fff; } }
.site-header .btn-signin { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.25); }
.site-header .btn-dark { background: var(--orange); border-color: var(--orange); color: #fff; }
@media (hover: hover) and (pointer: fine) { .site-header .btn-dark:hover { background: var(--orange-hover); } }
.site-header .menu-toggle, .site-header [aria-controls] { color: #fff; }


/* EB logo: transparent, tightly cropped artwork; sized by height so it never overflows */
.logo-img { display: block; width: auto; height: 56px; }
.site-nav { height: 84px; }
.site-logo .logo-img { height: 60px; }
.reg-brand .logo-img { height: 60px; }
.sidebar .brand .logo-img { height: 72px; }
.auth-aside .brand .logo-img, .auth-brand .logo-img { height: 84px; }
.site-logo, .reg-brand { display: inline-flex; align-items: center; gap: 12px; }
@media (max-width: 760px) {
  .site-nav { height: 68px; }
  .site-logo .logo-img { height: 46px; }
}

/* Upgrade window for locked features */
.comp-card.locked { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .comp-card.locked:hover { border-color: var(--orange); } }
.upgrade-dialog { width: min(760px, calc(100vw - 32px)); max-height: 92dvh; overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.upgrade-dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
.upgrade-dialog[open] { animation: nudge-in 200ms var(--ease-out); }
.upgrade-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.upgrade-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }
.upgrade-close:hover { background: var(--surface-3); color: var(--ink); }
.upgrade-grid { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.up-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.up-card.popular { border-color: var(--orange); }
.up-badge { position: absolute; top: -11px; left: 22px; padding: 2px 10px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; }
.up-name { font-size: 20px; font-weight: 600; }
.up-price { display: flex; align-items: baseline; gap: 4px; }
.up-price .mono { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; }
.up-features { margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-2); list-style: none; display: grid; gap: 8px; font-size: 13.5px; }
.up-features li::before { content: "✓"; margin-right: 8px; font-weight: 700; }
.up-features li.up-more { color: var(--faint); }
.up-features li.up-more::before { content: "+"; }

/* The Crown: suggested questions */
.prompt-suggest { margin-bottom: 14px; }
.prompt-suggest.hidden { display: none; }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.prompt-chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .prompt-chip:hover { border-color: var(--orange); background: var(--orange-soft); color: var(--ink); } }
.prompt-chip:active { transform: scale(0.98); }

/* Inventory */
.inv-help { padding-left: 18px; line-height: 1.8; }
.inv-badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.inv-badge.out { background: var(--red-soft); color: var(--red); }
.inv-badge.low { background: var(--amber-soft); color: var(--amber); }
.inv-badge.surplus { background: #eef2ff; color: #3730a3; }
.cat-bar { height: 8px; margin: 6px 0 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.cat-bar i { display: block; height: 100%; background: var(--ink-2); border-radius: 4px; }
.match-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.match-cat { font-weight: 600; }
.match-locked { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius); background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--surface-3) 10px 20px); color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .match-locked:hover { border-color: var(--orange); } }

/* Inventory dashboard */
.inv-kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.inv-kpis .stat.warn { border-top: 3px solid #d97706; }
.inv-kpis .stat.tied { border-top: 3px solid #4f46e5; }
.inv-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.inv-grid-2 .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.health-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.health-ring { width: 170px; height: 170px; flex: none; }
.ring-big { font: 600 22px var(--sans); fill: var(--ink); }
.ring-small { font: 500 10px var(--sans); fill: var(--muted); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; min-width: 160px; }
.legend li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto; align-items: center; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 12px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ink-2), var(--ink)); }
.bar-val { font-size: 12.5px; color: var(--ink-2); }
.stale { color: var(--red); font-weight: 600; }
.inv-empty-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 820px) { .inv-empty-grid { grid-template-columns: 1fr; } .inv-preview { display: none; } }
.inv-preview { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); display: grid; gap: 12px; }
.ip-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ip-k i { height: 44px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.ip-row { display: flex; gap: 14px; align-items: center; }
.ip-ring { width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(#16a34a 0 58%, #d97706 0 74%, #dc2626 0 84%, #4f46e5 0); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); flex: none; }
.ip-bars { flex: 1; display: grid; gap: 8px; } .ip-bars i { height: 10px; border-radius: 5px; background: var(--ink-2); opacity: .75; }
.ip-lines { display: grid; gap: 6px; } .ip-lines i { height: 8px; border-radius: 4px; background: var(--line); } .ip-lines i:nth-child(2) { width: 80%; } .ip-lines i:nth-child(3) { width: 60%; }
.nav-lock { margin-left: auto; padding: 1px 6px; border-radius: 4px; background: rgba(252, 76, 0, 0.18); color: #fe9d73; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; }
.nav-lock.hidden { display: none; }
.match-locked.big { padding: 24px; font-size: 15px; line-height: 1.6; }

/* Inventory tables: compact, scroll inside the card */
.inv-grid-2 .table-wrap { max-height: 460px; overflow: auto; }
.inv-grid-2 .table { font-size: 13px; }
.inv-grid-2 .table th, .inv-grid-2 .table td { padding: 9px 12px; }
.inv-grid-2 .table td .faint.small { font-size: 11.5px; }
.inv-grid-2 .table thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }