/* QuantLab — the terms and privacy pages.
   Its own stylesheet, not app.css: these two are read once by somebody who
   has never seen the panel, often on a phone, often before they have decided
   to trust the bot at all. They are a document, not a tool, and they get a
   document's typography — one column, generous measure, nothing to operate.

   Instrument Serif is self-hosted (SIL Open Font License 1.1) so the page
   pulls nothing from anywhere. The panel's content policy is 'self' and this
   keeps it that way. */

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif.woff2') format('woff2');
}

:root {
  --bg:      #08090C;
  --ink:     #ECEFF5;
  --soft:    #AEB6C4;
  --muted:   #6E7889;
  --rule:    rgba(255, 255, 255, 0.09);
  --accent:  #9397EE;
  --amber:   #94DFFC;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  /* The serif only ever runs in italic here, and it falls back through the
     nicest italic serifs each platform actually ships — so a blocked or slow
     font swap still reads as a deliberate accent rather than as broken. */
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  /* Two soft pools of colour behind the glass. Without something to refract,
     a frosted card is just a grey rectangle — the blur needs a subject. */
  background-image:
    radial-gradient(58rem 40rem at 12% -8%, rgba(147, 151, 238, 0.16), transparent 62%),
    radial-gradient(46rem 34rem at 92% 8%, rgba(148, 223, 252, 0.12), transparent 60%),
    radial-gradient(60rem 44rem at 50% 108%, rgba(147, 151, 238, 0.08), transparent 66%);
  background-attachment: fixed;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 3rem 1.15rem 5rem; }

/* ── the glass card ───────────────────────────────────────────────────────
   Translucent, blurred, hairline-bordered, with a highlight along the top
   edge — the light-catching lip is what makes it read as a pane of something
   rather than a flat panel. */
.card {
  position: relative;
  border-radius: 26px;
  border: 1px solid var(--rule);
  background: rgba(20, 24, 33, 0.55);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  box-shadow:
    0 32px 70px -28px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 2.4rem 2rem 2.6rem;
  overflow: hidden;
}

/* The lip. A single bright hairline fading out at both ends, which is the
   whole trick behind Apple's glass — the edge is lit, the face is not. */
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* No blur available — go opaque rather than showing text through text. */
  .card { background: #141821; }
}

/* ── masthead ─────────────────────────────────────────────────────────── */
.brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.6rem;
}
.brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.brand b { color: var(--soft); font-weight: 500; }

h1 {
  font-size: clamp(2.1rem, 7vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 0.9rem;
}
/* The signature: one word of the title set in italic serif, in amber. It is
   the only thing on the page that is not sans, which is what makes it read
   as emphasis rather than as a second typeface. */
.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
  /* The serif sits optically small beside a heavy sans at the same size. */
  font-size: 1.12em;
  letter-spacing: -0.01em;
}

.lede { color: var(--soft); font-size: 1.02rem; margin: 0 0 1.4rem; max-width: 34rem; }

.meta {
  font-family: var(--mono); font-size: 0.74rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  padding-top: 1.1rem; border-top: 1px solid var(--rule);
}
.meta b { color: var(--soft); font-weight: 500; }

/* ── sections ─────────────────────────────────────────────────────────── */
section { margin-top: 2.6rem; }

/* The numbered eyebrow: index, label, then a rule running to the edge. */
.eyebrow {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--mono); font-size: 0.74rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.7rem;
}
.eyebrow .n { color: var(--amber); }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

h2 {
  font-size: clamp(1.35rem, 4.4vw, 1.7rem);
  line-height: 1.2; letter-spacing: -0.02em; font-weight: 600;
  margin: 0 0 0.7rem;
}

h3 {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink);
  margin: 1.6rem 0 0.5rem;
}

p { margin: 0 0 0.9rem; color: var(--soft); }
p.tight { margin-bottom: 0.4rem; }
strong { color: var(--ink); font-weight: 600; }

ul { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--soft); }
li { margin-bottom: 0.4rem; }
li::marker { color: var(--muted); }

a { color: var(--accent); text-decoration-color: rgba(76, 125, 255, 0.4); text-underline-offset: 3px; }
@media (hover: hover) { a:hover { text-decoration-color: var(--accent); } }

/* Inline chip, for a command or a field name — same idea as the reference. */
code {
  font-family: var(--mono); font-size: 0.86em;
  padding: 0.12em 0.42em; border-radius: 6px;
  border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); white-space: nowrap;
}

/* ── the data table ───────────────────────────────────────────────────────
   A definition list rather than a <table>: two columns collapse badly on a
   phone, and this is read on a phone. */
.rows { border-top: 1px solid var(--rule); margin: 1rem 0 0; }
.row {
  display: grid; grid-template-columns: 1fr; gap: 0.15rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 34rem) { .row { grid-template-columns: 13rem 1fr; gap: 1.2rem; } }
.row dt { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); }
.row dd { margin: 0; color: var(--soft); font-size: 0.95rem; }

/* A pulled-out statement. The left rule does the work — no background, so it
   stays quiet next to the glass rather than becoming a second card. */
.note {
  border-left: 2px solid var(--amber);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 1.2rem 0;
  color: var(--soft);
}
.note.blue { border-left-color: var(--accent); }

/* ── footer / cross-link ──────────────────────────────────────────────── */
.foot {
  margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center;
  justify-content: space-between;
  font-family: var(--mono); font-size: 0.76rem; color: var(--muted);
}
.pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) { .pill:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } }
.pill .arrow { color: var(--amber); }

@media print {
  body { background: #fff; color: #000; }
  .card { background: #fff; border: none; box-shadow: none; backdrop-filter: none; }
  h1, h2, strong, .row dt { color: #000; }
  p, li, .row dd, .lede { color: #222; }
}