/* Browsers keep this file for a day, so rename it (v6, v7) when it changes. */
/* The Fellowverse website's look, not the app's: deep indigo ink on warm
   paper by day, a deep indigo night (never the app's warm near-black), the
   amber for state and links, and the soft amber fill for the one primary
   button, with ink type on it. Inter where installed, else the system sans.
   All overrides stay in content/. */
:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --color-bg-primary: #fdfaf4;
  --color-bg-secondary: #f8f4ec;
  --color-bg-tertiary: #f1ecf3;
  --color-bg-hover: #f1ecf3;
  --color-bg-active: #f6e6cc;
  --color-bg-code: #f3f0f6;
  --color-text-primary: #1f1d3b;
  --color-text-secondary: #57546f;
  --color-text-tertiary: #6f6c86;
  --color-text-muted: #6f6c86;
  --color-border-primary: #e2deea;
  --color-border-secondary: #ebe7f0;
  --color-accent: #b5620f;
  --color-accent-light: #f6e6cc;
  --color-accent-dark: #8f4a08;
  --color-text-link: #b5620f;
  --color-text-link-hover: #8f4a08;
  --fv-fill: #e8c07f;
  --fv-fill-hover: #efca8c;
  --fv-band: linear-gradient(160deg, #eef7ec, #e1eff6 55%, #d3e6f4);
  --content-max-width: 850px;
  --sidebar-width: 260px;
}
[data-theme="dark"] {
  --color-bg-primary: #13112a;
  --color-bg-secondary: #17152f;
  --color-bg-tertiary: #1d1a3a;
  --color-bg-hover: #221f44;
  --color-bg-active: #2e2a52;
  --color-bg-code: #1b1836;
  --color-text-primary: #f3efe8;
  --color-text-secondary: #b9b4cc;
  --color-text-tertiary: #938eab;
  --color-text-muted: #938eab;
  --color-border-primary: #2e2a52;
  --color-border-secondary: #252148;
  --color-accent: #f2b866;
  --color-accent-light: #2e2a52;
  --color-accent-dark: #f6cc8c;
  --color-text-link: #f2b866;
  --color-text-link-hover: #f6cc8c;
  --fv-fill: #f2b866;
  --fv-fill-hover: #f6cc8c;
  --fv-band: linear-gradient(160deg, #1b1939, #241f4b 55%, #31285c);
}
html[data-theme="dark"] { background: #13112a; }
body, .layout { font-family: var(--font-sans); }
.header-logo { letter-spacing: -.035em; }
.header-logo-img { border-radius: 8px; }
.fv-eyebrow { color: var(--color-text-secondary); font-size: .72rem; font-weight: 650; letter-spacing: .15em; margin: 1.5rem 0; }
.home-page h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: -.055em; line-height: 1.05; max-width: 19ch; margin-bottom: 1.5rem; }
.home-page h1 + p { font-size: 1.15rem; line-height: 1.65; max-width: 54ch; color: var(--color-text-secondary); }
.fv-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 1.75rem 0 3rem; }
.fv-hero-links .fv-primary { background: var(--fv-fill); color: #1f1d3b; text-decoration: none; padding: .8rem 1.15rem; border-radius: 9px; font-weight: 650; }
.fv-primary span { margin-left: .75rem; }
.fv-primary:hover { background: var(--fv-fill-hover); }
pre, .api-param-table { max-width: 100%; }
.api-path { overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
@media (max-width: 640px) {
  .header-logo { font-size: .95rem; }
  .header-logo-img { max-height: 26px; }
  .fv-eyebrow { margin-top: .75rem; }
  .home-page h1 { font-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* The engine's generic link selector has high specificity. Keep button text in ink. */
a.fv-primary, a.fv-primary:hover { color: #1f1d3b !important; }
@media (min-width: 768px) {
  .layout:has(.home-page) .sidebar { display: none; }
  .layout:has(.home-page) .main-content { margin-left: 0; max-width: 100%; padding-top: 3.5rem; }
}

.layout:has(.home-page) .mobile-menu-toggle,
.layout:has(.home-page) .sidebar { display: none; }
@media (max-width: 768px) {
  .layout header.header { padding-inline: 12px; gap: 8px; }
  .layout .header .header-logo { font-size: .875rem; gap: 6px; }
  .layout .header .header-logo-img { height: 24px; width: 24px; }
  .layout .header .header-actions { gap: 6px; }
  .layout .header .theme-toggle { width: 34px; min-width: 34px; padding: 6px; }
  .layout .header .mobile-menu-toggle { width: 32px; height: 32px; padding: 4px; flex-shrink: 0; }
  .main-content, .content-wrapper, .markdown-content { min-width: 0; }
}

/* f0 caps .main-content at 100% minus the sidebar, then adds its padding
   outside that width, so doc pages scroll sideways between 769 and 1200px. */
.main-content { box-sizing: border-box; min-width: 0; }

/* Long page titles wrap in the sidebar rather than being cut off. */
.layout .sidebar a.sidebar-item { white-space: normal; text-overflow: clip; overflow: visible; line-height: 1.35; }

/* Cards: two columns where there is room, so four cards make an even grid. */
@media (min-width: 769px) {
  .markdown-content .f0-cards ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The phone menu lists a section's pages, and the home page has none, so on
   phones the home page carries its own links to the sections. */
.fv-sections { display: none; }
@media (max-width: 768px) {
  .fv-sections { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
  .fv-sections a { display: inline-block; padding: .45rem .8rem; border: 1px solid var(--color-border-primary); border-radius: 999px; font-size: .9rem; text-decoration: none; }
}

/* The home hero sits on the website's midday light (night after dark), the
   one band of colour on the site. */
.home-page .fv-eyebrow { margin-top: 0; }
.home-page .fv-hero {
  background: var(--fv-band);
  border-radius: 20px;
  padding: clamp(1.5rem, 4vw, 3rem);
  margin: 0 0 2.5rem;
}
.home-page .fv-hero h1 { margin-top: 0; }
.home-page .fv-hero .fv-hero-links { margin-bottom: 0; }

/* Header tabs stay on one line; they tighten up before the phone layout. */
.layout .header .header-nav a { white-space: nowrap; }
@media (max-width: 1200px) and (min-width: 769px) {
  .layout .header .header-nav { gap: .25rem; }
  .layout .header .header-nav a { padding-inline: .5rem; }
  .layout .header .search-button { width: auto; min-width: 0; }
  .layout .header .search-button kbd { display: none; }
}

/* Between the phone layout and 1000px the header shows the icon without the
   site name, so the tabs, search and theme buttons all fit. The icon keeps
   the name as its alt text. */
@media (max-width: 1000px) and (min-width: 769px) {
  .layout .header .header-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}