/* Shared AlphaVenture design tokens + base styles for the company-report frontend
   (companies.html + company.html). Mirrors index.html's palette exactly so the
   report pages and the chatbot feel like one product. */
/* This file is the SINGLE source for the shared palette. All three pages load it, and
   chat-base.css adds only the chatbot's own extra tokens on top -- it no longer
   redeclares these, so there is one place to change a brand colour.

   There is no dark mode. This block is the palette; a `@media (prefers-color-scheme:
   dark)` override used to sit below it and was removed along with the chatbot's
   Appearance setting, so all three pages now render light regardless of the reader's OS
   setting. If dark mode ever comes back it belongs here, in one block, rather than
   duplicated per page.

   --muted is deliberately the same value as --text: "muted" text is full black rather
   than a grey step down. See the same note in chat-base.css. */
:root {
  /* ---- color-scheme: light -- tells the BROWSER what the CSS above already implies ----
     Removing dark mode took away our dark styles but left the UA still believing this page
     was dark-capable, because a document with no `color-scheme` declaration resolves to
     `normal` and Chrome/Safari then pick UA colours from the reader's OS preference. On a
     dark-mode machine that produced dark chrome inside a light app:

       - a NEW IFRAME's initial empty document is painted with the UA's DARK canvas, so
         opening a report flashed black for a frame or two before the report's own white
         background applied. That flash is the reason this line exists;
       - native scrollbars (the report iframe, the conversation list) rendered dark;
       - UA-styled form controls -- the Settings <textarea>, the two <input type="search">
         fields -- rendered on a dark ground.

     One declaration on :root fixes all of it, for all three pages, and it is the property
     designed for exactly this statement. It is NOT a substitute for the palette: it governs
     UA-drawn surfaces (canvases, scrollbars, controls), which no author rule can reach.
     The report iframe is a SEPARATE document and needs its own copy -- see reportSrcdoc in
     js/artifacts/report-sandbox.js. */
  color-scheme: light;

  --bg: #F2F2F2;
  --panel: #ffffff;
  --border: #E0E0E0;
  --text: #0A0A0A;
  --muted: #0A0A0A;
  --accent: #F06731;
  --lp-orange: #F06731;
  --accent-2: #F3855A;
  --accent-press: #C05227;
  --lime: #B8FD15;
  --link: #C05227;
  --shadow: 0 12px 40px rgba(10, 10, 10, 0.10);
  --font-display: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Alternating surface scale and the greys that survive. companies.html and
     company.html load only this file, so they need these here to get the same
     strokeless, contrast-separated treatment as the chat app. */
  --surface-0: #F2F2F2;
  --surface-1: #FFFFFF;
  --surface-2: #F2F2F2;
  --surface-3: #FFFFFF;
  --placeholder: #858585;
  --scroll-thumb: #D1D1D1;
  --scroll-thumb-hover: #C2C2C2;
}
* { box-sizing: border-box; }
/* No outlines anywhere — strictly. */
* { outline: none !important; }
/* No drop shadows anywhere — surfaces are distinguished by alternating fills only. */
* { box-shadow: none !important; }
/* Remove scrollbar arrow buttons on all pages */
html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* See the matching rule in chat-base.css: form controls fall back to the browser's
   own border the moment a rule stops declaring one, so the ring-border sweep needs
   this reset wherever it touched a <button>/<input>/<textarea>/<select>. */
button, input, textarea, select { border: none; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }


.nav {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 28px; border-bottom: 1px solid var(--border);
  background: var(--panel); position: sticky; top: 0; z-index: 10;
}
.nav .brand { font-family: var(--font-display); font-weight: 500; font-size: 16px; }
.nav .spacer { flex: 1; }
.nav input[type="search"] {
  font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px;
  background: var(--bg); color: var(--text);
  min-width: 220px; outline: none;
}
.nav .chatbot-btn {
  display: inline-block; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px;
  border-radius: 999px; background: var(--accent); color: #fff; border: none; cursor: pointer;
  white-space: nowrap; text-decoration: none;
}
.nav .chatbot-btn:hover { background: var(--accent-press); text-decoration: none; }
.nav .back-link { font-size: 13px; color: var(--muted); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; }

.card {
  background: var(--panel); border-radius: 16px;
  padding: 20px 22px;
}

.chip {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 11px;
  border-radius: 999px; color: var(--muted);
  background: var(--bg); margin: 0 6px 6px 0;
}

.cycler { position: relative; }
.cycler-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cycler-dots { display: flex; gap: 6px; }
.cycler-dots .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border); cursor: pointer;
}
.cycler-dots .dot.active { background: var(--text); }
.cycler-arrow {
  width: 30px; height: 30px; border-radius: 50%; 
  background: var(--panel); color: var(--text); cursor: pointer; font-size: 15px;
  display: grid; place-items: center; line-height: 1;
}
.cycler-arrow:hover { color: var(--text); }
.cycler-hint { font-size: 11px; color: var(--muted); }

.empty-note { color: var(--muted); font-size: 13px; font-style: italic; }
.loading { color: var(--muted); font-size: 14px; padding: 40px 0; text-align: center; }