/* ══════════════════════════════════════════════════════════════════════════════════════════════
   The whole visual system for docs.investviews.ai. One file, no build, no framework.
   ══════════════════════════════════════════════════════════════════════════════════════════════

   ⚠️ DARK IS THE DEFAULT, AND LIGHT IS THE OPT-IN. `:root` carries the dark palette so the docs
   match the product, which is dark-only. Light is `:root[data-theme="light"]`, set by the toggle
   in the nav and remembered in localStorage.

   ⚠️ THE OS PREFERENCE IS DELIBERATELY NOT CONSULTED. An earlier version keyed off
   `prefers-color-scheme`, which meant a reader on a light machine got light docs beside a dark
   product. The choice is the reader's to make here, and it is remembered — but the starting point
   is ours.

   ⚠️ EVERY COLOUR IS DEFINED ONCE ON `:root`. The light block redefines only the colour variables.
   A colour written directly into a rule — or defined ONLY in the light block — breaks in one of
   the two themes, and nobody notices until a reader with the other setting opens the page.

   ⚠️ `color-scheme` IS NOT DECORATION. It tells the browser to render scrollbars, form controls and
   the canvas behind the page in the matching theme. Without it a dark page keeps a white scrollbar
   and flashes white on load. reference.html sets the same pair.
============================================================================================== */

:root {
  color-scheme: dark;

  --bg: #0e1116;
  --bg-elevated: #161a22;
  --bg-sunken: #1c212b;
  --fg: #f2f4f8;
  --fg-muted: #a8b1c1;
  --accent: #64a6f5;
  --accent-hover: #9cc6fa;
  --accent-soft: #16273c;
  --border: #262c38;
  --code-bg: #161a22;
  --code-fg: #e6e9ef;
  --note-border: #64a6f5;
  --note-bg: #14202f;
  --warn-border: #d69e2e;
  --warn-bg: #2a2313;
  --shadow: 0 8px 24px rgb(0 0 0 / 0.45);

  --radius: 8px;
  --measure: 46rem;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-elevated: #f7f8fa;
  --bg-sunken: #eef0f4;
  --fg: #10131a;
  --fg-muted: #5a6373;
  --accent: #1c6fd0;
  --accent-hover: #14539e;
  --accent-soft: #e8f1fc;
  --border: #e3e6ec;
  --code-bg: #0e1116;
  --code-fg: #e6e9ef;
  --note-border: #1c6fd0;
  --note-bg: #eff5fd;
  --warn-border: #b7791f;
  --warn-bg: #fdf6e8;
  --shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* ── the bar ─────────────────────────────────────────────────────────────────────────────── */

header.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
}

.site-nav .brand {
  font-weight: 650;
  font-size: 1rem;
  color: var(--fg);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-nav .brand span {
  color: var(--fg-muted);
  font-weight: 500;
}
.site-nav .brand:hover {
  text-decoration: none;
}

.site-nav nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
  font-size: 0.9rem;
}

.site-nav nav > a,
.nav-dropdown > summary {
  color: var(--fg-muted);
  cursor: pointer;
  /* ⚠️ Without this, "API Reference" breaks across two lines the moment the bar gets tight and
     the whole header doubles in height. Measured at 485px, just above the breakpoint below. */
  white-space: nowrap;
}
.site-nav nav > a:hover,
.nav-dropdown > summary:hover {
  color: var(--fg);
  text-decoration: none;
}

/* ── the theme toggle ────────────────────────────────────────────────────────────────────────
   Shows the theme you would switch TO, which is the convention readers expect: a sun in dark
   mode means "click for light". Both icons ship; CSS picks one, so there is no flicker while
   JavaScript works out which to draw. */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.theme-toggle:hover {
  border-color: var(--border);
  color: var(--fg);
}
.theme-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

/* dark is the default, so the sun ("switch to light") is what shows */
.theme-toggle .icon-light { display: block; }
.theme-toggle .icon-dark  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .icon-dark  { display: block; }

/* ── the Guides dropdown ─────────────────────────────────────────────────────────────────────
   A <details>, so it opens with no JavaScript at all. page-actions.js only closes it on an
   outside click — a page whose script failed still has a working nav. */

.nav-dropdown {
  position: relative;
}
.nav-dropdown > summary {
  list-style: none;
  user-select: none;
}
.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}
.nav-dropdown > summary::after {
  content: "";
  display: inline-block;
  margin-left: 0.35em;
  border: 0.28em solid transparent;
  border-top-color: currentColor;
  transform: translateY(0.15em);
}
.nav-dropdown[open] > summary {
  color: var(--fg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -0.75rem;
  min-width: 12rem;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.site-nav .nav-dropdown-menu a {
  padding: 0.4rem 0.6rem;
  border-radius: 5px;
  color: var(--fg);
}
.site-nav .nav-dropdown-menu a:hover {
  background: var(--bg-sunken);
  text-decoration: none;
}

/* ── the Copy page menu ──────────────────────────────────────────────────────────────────── */

.page-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-bottom: 1.25rem;
}

.page-actions-trigger {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.page-actions-trigger:hover,
.page-actions-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--fg);
}
.page-actions-trigger .chevron {
  margin-left: 0.2em;
  font-size: 0.7em;
}

.page-actions-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 10;
  min-width: 15rem;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* The `hidden` attribute is how the script toggles this. A `display` declaration on the rule
   above would beat it and pin the menu open. */
.page-actions-menu[hidden] {
  display: none;
}
.page-actions-menu > * {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.page-actions-menu > *:hover {
  background: var(--bg-sunken);
  text-decoration: none;
}
.page-actions-menu .action-sub {
  color: var(--fg-muted);
  font-size: 0.76rem;
}

.page-actions-toast {
  color: var(--fg-muted);
  font-size: 0.8rem;
}
.page-actions-toast[hidden] {
  display: none;
}

/* ── the column ──────────────────────────────────────────────────────────────────────────── */

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding-block: 3rem 5rem;
  padding-inline: 1.5rem;
}

h1,
h2,
h3 {
  line-height: 1.25;
  letter-spacing: -0.015em;
  scroll-margin-top: 5rem;
}
h1 {
  font-size: 2.1rem;
  margin: 0 0 1rem;
}
h2 {
  font-size: 1.4rem;
  margin: 3rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
h3 {
  font-size: 1.1rem;
  margin: 2rem 0 0.75rem;
}

p,
ul,
ol {
  margin: 0 0 1.1rem;
}
li {
  margin-bottom: 0.35rem;
}

strong {
  font-weight: 650;
}

hr {
  height: 1px;
  margin: 2.5rem 0;
  border: 0;
  background: var(--border);
}

blockquote {
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--border);
  color: var(--fg-muted);
}

/* ── code ───────────────────────────────────────────────────────────────────────────────── */

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

:not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: var(--bg-sunken);
  color: var(--fg);
}

pre {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  background: var(--code-bg);
  border-radius: var(--radius);
}
pre code {
  color: var(--code-fg);
  background: none;
  padding: 0;
  font-size: 0.83rem;
  line-height: 1.6;
}

/* ── tables ──────────────────────────────────────────────────────────────────────────────
   build.py wraps every table in .table-wrap. A wide table scrolls inside its own box rather
   than making the whole page scroll sideways on a phone. */

.table-wrap {
  margin: 0 0 1.5rem;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
th,
td {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--bg-elevated);
  font-weight: 600;
  white-space: nowrap;
}

/* ── callouts (the `admonition` markdown extension) ──────────────────────────────────────── */

.admonition {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--note-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--note-bg);
}
.admonition > :last-child {
  margin-bottom: 0;
}
.admonition-title {
  margin: 0 0 0.4rem;
  font-weight: 650;
}
.admonition.warning,
.admonition.caution {
  border-left-color: var(--warn-border);
  background: var(--warn-bg);
}

/* ── landing page ────────────────────────────────────────────────────────────────────────── */

.hero {
  margin-bottom: 3rem;
}
.hero .eyebrow {
  margin-bottom: 0.6rem;
  color: var(--fg-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero p.lead {
  max-width: 36rem;
  margin-bottom: 1.75rem;
  color: var(--fg-muted);
  font-size: 1.1rem;
}

.button {
  display: inline-block;
  margin: 0 0.6rem 0.6rem 0;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 550;
}
.button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  text-decoration: none;
}
.button.secondary {
  background: none;
  color: var(--accent);
}
.button.secondary:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.card {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg);
}
.card:hover {
  border-color: var(--accent);
  text-decoration: none;
}
.card h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}
.card p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.9rem;
}
.card-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05em 0.45em;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
}

/* ── footer ─────────────────────────────────────────────────────────────────────────────── */

.site-footer {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 0.85rem;
}

/* ── phones ──────────────────────────────────────────────────────────────────────────────
   The side gutter is set once, on the two containers. Nothing inside may be wider than the
   screen: only pre and .table-wrap scroll, each inside its own box. */

/* ⚠️ 44rem, NOT 30rem. The first version switched at 30rem (480px), which left a dead band
   between roughly 480px and 700px: the full-size nav no longer fit, but the compact rules had
   not started. Measured at 485px, "Guides" and "API Reference" each wrapped to two lines and
   the header doubled in height. The breakpoint has to be where the layout actually breaks, not
   at a round number for phones. */
@media (max-width: 44rem) {
  .site-nav-inner {
    gap: 0.75rem;
    padding: 0.6rem 1rem;
  }
  .site-nav nav {
    gap: 0.85rem;
    font-size: 0.85rem;
  }
  .site-nav .brand {
    font-size: 0.92rem;
  }
  main {
    padding-block: 2rem 3.5rem;
    padding-inline: 1rem;
  }
  .site-footer {
    padding-inline: 1rem;
  }
  h1 {
    font-size: 1.7rem;
  }
  h2 {
    font-size: 1.25rem;
  }
  .nav-dropdown-menu {
    right: -0.75rem;
    left: auto;
  }
}