/* Int.ai — the docs surface.
   Self-contained: this stylesheet carries its own copy of the design tokens (lifted
   verbatim from site-v2) so a doc page is one CSS file plus the shared fonts.

   One rule to keep: --accent is defined ONCE, in the token block below. Nothing further
   down this file may hard-code the hex. A light-mode accent adjustment landing in
   site-v2 later should be a one-line edit here, not a search-and-replace. */

/* ---------- tokens: dark (default appearance, matches the app) ---------- */
:root,
:root[data-theme="dark"] {
  --bg: #1A1A1A;
  --surface: #1E1E1E;
  --surface-2: #262626;
  --border: #2C2C2C;
  --border-strong: #3A3A3A;
  --text: #EDEDED;
  --text-2: #A0A0A0;
  --text-3: #6B6B6B;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
  --grid-dot: rgba(255,255,255,.05);
  --ink: rgba(237,237,237,.34);
  --ph: rgba(255,255,255,.07);
  /* portal — hybrid: the dark icon's deep-teal body + defined inner bands */
  --p-core: #A9ECFF;
  --p-mid:  #52B9DA;
  --p-band1: #1E607B;
  --p-band2: #2E8AA9;
  --p-band3: #52B9DA;
  --p-edge: #16465A;
  --p-rim:  #0F2C36;
  --p-bleed: rgba(92,220,251,.26);
}
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #FCFCFC;
  --surface-2: #F4F4F4;
  --border: #E4E4E4;
  --border-strong: #D4D4D4;
  --text: #171717;
  --text-2: #646973;
  --text-3: #8B93A1;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.09);
  --grid-dot: rgba(0,0,0,.07);
  --ink: rgba(23,23,23,.34);
  --ph: rgba(0,0,0,.05);
  /* accent stays the true sky cyan in light too — his ruling, Jul 29 */
  /* light portal: deep defined center, outer layers pulled toward the
     signature sky cyan (matches site-v2) */
  --p-core: #189FE0;
  --p-mid:  #4FC8F5;
  --p-band1: #8BDCFA;
  --p-band2: #4AC6F4;
  --p-band3: #2FB6EE;
  --p-edge: #A6E4FB;
  --p-rim:  #C6ECFC;
  --p-bleed: rgba(74,198,244,.46);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #FFFFFF;
    --surface: #FCFCFC;
    --surface-2: #F4F4F4;
    --border: #E4E4E4;
    --border-strong: #D4D4D4;
    --text: #171717;
    --text-2: #646973;
    --text-3: #8B93A1;
    --shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.09);
    --grid-dot: rgba(0,0,0,.07);
    --ink: rgba(23,23,23,.34);
    --ph: rgba(0,0,0,.05);
    --p-core: #189FE0;
    --p-mid:  #4FC8F5;
    --p-band1: #8BDCFA;
    --p-band2: #4AC6F4;
    --p-band3: #2FB6EE;
    --p-edge: #A6E4FB;
    --p-rim:  #C6ECFC;
    --p-bleed: rgba(74,198,244,.46);
  }
}

/* ---------- accent + scales — the single home of --accent ---------- */
:root {
  --accent: #5CDCFB;      /* dark-theme value; both light blocks override it */
  --accent-ink: #053640;
  --accent-tint: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 45%, transparent);

  --success: #3ECF8E;
  --warning: #F5A623;
  --danger:  #FF6B6B;
  --info:    #5B9CF8;

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  --space-xs: 4px;  --space-sm: 8px;  --space-md: 12px; --space-base: 16px;
  --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-capsule: 999px;

  color-scheme: dark light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The dot grid never opens a sideways scrollbar; wide content scrolls inside
     its own container instead (see .table-scroll / pre). */
  overflow-x: clip;
}

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

/* Deep links land under the sticky header rather than behind it. */
:target { scroll-margin-top: 88px; }

/* ---------- layout ---------- */
.wrap { max-width: 980px; margin: 0 auto; padding: 0 var(--space-xl); }

/* ---------- header ---------- */
header.site {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-xl) 0;
  position: relative; z-index: 5;
}
.wordmark {
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text);
}
.wordmark:hover { text-decoration: none; }
.wordmark .dot { color: var(--accent); }
.nav-links { font-family: var(--font-mono); font-size: 13.5px; display: flex; gap: var(--space-lg); align-items: center; }
.nav-links a:not(.btn) { color: var(--text-2); }
.nav-links a:not(.btn):hover { color: var(--text); text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 22px;
  border-radius: var(--radius-capsule);
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease, border-color .15s ease, transform .05s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-prominent { background: var(--accent); color: var(--accent-ink); }
.btn-prominent:hover { filter: brightness(1.07); }
.btn-bordered { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); font-weight: 500; }
.btn-bordered:hover { border-color: var(--text-3); }
.btn-sm { padding: 8px 16px; font-size: 13.5px; }

/* ---------- mono eyebrow / kicker ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 var(--space-lg);
}
.kicker {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 var(--space-md);
}

/* ---------- the dot-grid backdrop ----------------------------------------
   Present at the page edges, masked away behind the reading column so no dot
   ever sits under a line of body text. Fixed, behind everything, inert.
   (No scroll-snap here — a doc is read by scrolling, not stepped through.) */
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,0) 34%,
      rgba(0,0,0,0) 66%, rgba(0,0,0,1) 84%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,0) 34%,
      rgba(0,0,0,0) 66%, rgba(0,0,0,1) 84%, rgba(0,0,0,1) 100%);
}
body > * { position: relative; z-index: 1; }

/* ---------- the doc shell: sidebar + reading column ---------- */
.doc-shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: start;
  padding-bottom: var(--space-3xl);
}

.sidebar {
  position: sticky; top: var(--space-xl);
  padding: var(--space-sm) 0 var(--space-2xl);
  max-height: calc(100vh - var(--space-2xl));
  overflow-y: auto;
}
.side-group { margin: 0 0 var(--space-xl); }
.side-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); opacity: .85;
  margin: 0 0 var(--space-md);
}
.side-links { display: flex; flex-direction: column; gap: 2px; }
.side-links a {
  font-family: var(--font-mono);
  font-size: 13.5px; line-height: 1.35;
  color: var(--text-2);
  padding: 6px 0 6px var(--space-md);
  border-left: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.side-links a:hover { color: var(--text); text-decoration: none; }
.side-links a.current {
  color: var(--text);
  border-left-color: var(--accent);
}
/* the small "raw markdown" escape hatch under the current doc */
.side-raw {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  padding: 2px 0 6px calc(var(--space-md) + 2px);
}
.side-raw a { color: var(--text-3); }
.side-raw a:hover { color: var(--text-2); text-decoration: none; }

/* ---------- the reading column ---------- */
.doc-body { max-width: 720px; min-width: 0; }
.doc-head { padding: var(--space-sm) 0 var(--space-xl); }

/* ---------- typography ---------- */
.doc-body h1, .doc-head h1 {
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
  margin: 0 0 var(--space-base);
}
.doc-body h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.22;
  letter-spacing: -.02em;
  font-weight: 620;
  color: var(--text);
  margin: var(--space-3xl) 0 var(--space-base);
}
.doc-body h3 {
  font-size: 20px; line-height: 1.3;
  letter-spacing: -.01em; font-weight: 600;
  margin: var(--space-2xl) 0 var(--space-md);
}
.doc-body h4 {
  font-size: 16.5px; line-height: 1.4; font-weight: 600;
  margin: var(--space-xl) 0 var(--space-sm);
}
.doc-body > h1:first-child, .doc-body > h2:first-child { margin-top: 0; }

.doc-body p, .doc-body li { font-size: 17px; line-height: 1.65; color: var(--text-2); }
.doc-body p { margin: 0 0 var(--space-base); }
.doc-body strong { color: var(--text); font-weight: 600; }
.doc-body ul, .doc-body ol { margin: 0 0 var(--space-base); padding-left: var(--space-xl); }
.doc-body li { margin: 0 0 var(--space-sm); }
.doc-body li > ul, .doc-body li > ol { margin-top: var(--space-sm); }
.doc-body hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-3xl) 0; }

/* The lead — the doc's opening paragraph, one step up in size and contrast. */
.doc-head .lead, .doc-body p.lead {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 var(--space-lg);
}

/* Anchored headings. The # is generated content, not markup — it appears on hover and
   is never picked up when a reader selects and copies the heading. */
.doc-body h2, .doc-body h3 { position: relative; }
.doc-body .anchor {
  position: absolute; left: -.85em; top: 0;
  color: var(--text-3); opacity: 0;
  font-weight: 400; text-decoration: none;
  transition: opacity .15s ease;
}
.doc-body .anchor::before { content: "#"; }
.doc-body h2:hover .anchor, .doc-body h3:hover .anchor,
.doc-body .anchor:focus-visible { opacity: 1; }

/* ---------- blockquotes → callouts ------------------------------------
   52 of them across the set — they're asides, not alarms. An accent rule and
   a half-step of weight is the whole treatment; body size stays body size. */
.doc-body blockquote {
  margin: var(--space-lg) 0;
  padding: 0 0 0 var(--space-lg);
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-weight: 500;
}
.doc-body blockquote p { color: var(--text); font-weight: 500; margin: 0 0 var(--space-md); }
.doc-body blockquote > :last-child { margin-bottom: 0; }
.doc-body blockquote li { color: var(--text); font-weight: 500; }

/* ---------- code ------------------------------------------------------
   `white-space: pre`, deliberately: the ASCII vault tree in 4-how-to only
   reads if its lines stay where they were drawn. Wide lines scroll. */
.doc-body .fence, .block {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
}
.doc-body pre, .block pre {
  margin: 0;
  padding: 20px 22px;
  padding-right: 84px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
}
.doc-body pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
/* The one exception, opt-in: a block whose content is prose to be copied — the paste-this-
   to-your-agent prompt — where wrapping is the correct reading, not a lost alignment. */
.block.prose pre { white-space: pre-wrap; word-break: break-word; }
.doc-body code, .block code, code {
  font-family: var(--font-mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12.5px;
  color: var(--text);
}
.copy {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 11px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.copy:hover { color: var(--text); border-color: var(--text-3); }
.copy.done { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }

/* ---------- tables ----------------------------------------------------
   No zebra, no outer box — hairlines and a mono header do the work. */
.table-scroll { overflow-x: auto; margin: var(--space-lg) 0; }
.doc-body table { border-collapse: collapse; font-size: 15px; width: 100%; }
.doc-body th {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); text-align: left; font-weight: 500;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.doc-body td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
}
.doc-body td code { font-size: 12px; }

/* ---------- images inside docs ---------- */
.doc-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* ---------- prev / next ---------- */
.doc-nav {
  display: flex; justify-content: space-between; gap: var(--space-base);
  flex-wrap: wrap;
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
}
.doc-nav a {
  display: block; max-width: 46%;
  color: var(--text-2);
  font-size: 15px;
}
.doc-nav a:hover { color: var(--text); text-decoration: none; }
.doc-nav a:hover .dn-title { color: var(--accent); }
.doc-nav .dn-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 4px;
}
.doc-nav .dn-title { font-weight: 600; color: var(--text); transition: color .15s ease; }
.doc-nav .next { text-align: right; margin-left: auto; }

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--border);
  padding: var(--space-2xl) 0 48px;
  font-size: 13.5px; color: var(--text-3);
}
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
footer.site .wordmark { font-size: 14px; }
footer.site a { color: var(--text-2); }
footer.site a:hover { color: var(--text); text-decoration: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01s !important;
  }
}

/* ---------- mobile ----------------------------------------------------
   The sidebar becomes a horizontal chip row above the doc — the same set of
   links, one thumb-swipe wide. The page itself never scrolls sideways. */
@media (max-width: 640px) {
  .hide-mobile { display: none; }

  .doc-shell { display: block; }

  .sidebar {
    position: static; max-height: none; overflow: visible;
    margin: 0 0 var(--space-xl);
    padding: 0 0 var(--space-base);
    border-bottom: 1px solid var(--border);
    /* full-bleed the scroll strip so chips run to the screen edge */
    margin-left: calc(var(--space-xl) * -1);
    margin-right: calc(var(--space-xl) * -1);
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }

  .side-nav { display: flex; gap: var(--space-lg); width: max-content; }
  .side-group { margin: 0; }
  .side-label { margin-bottom: var(--space-sm); }
  .side-links { flex-direction: row; gap: var(--space-sm); }
  .side-links a {
    font-family: var(--font-mono);
    font-size: 12.5px;
    white-space: nowrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: var(--radius-capsule);
    padding: 7px 14px;
  }
  .side-links a.current { border-color: var(--accent); color: var(--text); }
  .side-raw { display: none; }

  .doc-body { max-width: none; }
  .doc-nav a { max-width: 100%; }

  .grid-bg {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 28%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 28%);
  }
}

/* ---- ב״ה ----
   The mark, top-right of every screen. Delivered as CSS generated content, so it lives
   in the render tree only: there is no DOM node, no text a cursor can select, and nothing
   a copy or a text extraction picks up — while it is genuinely there on every frame.
   Non-interactive, above every layer, and it follows light/dark through currentColor.
   --bh-opacity dials how present it is. */
:root { --bh-opacity: 0; }   /* present in the render tree, not on screen (his ruling, Jul 29) */

body::before {
  content: "ב״ה";
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 2147483647;
  /* Explicit stack — the UI fonts here carry no Hebrew glyphs. */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: currentColor;
  opacity: var(--bh-opacity);
  direction: rtl;
  unicode-bidi: isolate;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}