/* ═══════════════════════════════════════════════════════════
   fellos Documentation — Shared Stylesheet
   ═══════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (no third-party requests, no cookies) ─── */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/intertight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/intertight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/intertight-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/intertight-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── CSS Variables ───────────────────────────────────────── */
:root {
  --terracotta: #c4725a;
  --terracotta-light: #d4896f;
  --terracotta-dark: #b5654d;
  --sage: #8a9a7b;
  --sage-light: #a3b394;
  --warm-sand: #d4a574;
  --clay: #b8806a;
  --charcoal: #3d3630;
  --warm-gray: #6b635b;
  --light-gray: #9a928a;
  --cream: #f5f0e8;
  --cream-dark: #ede6db;
  --deep-brown: #4a3f35;
  --warm-white: #fffcf8;
  --border-color: #ede6db;
  --radius: 0.75rem;
  --sidebar-width: 260px;
  --header-height: 60px;
  --font-sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.7;
  min-height: 100vh;
}

a { color: var(--terracotta); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--terracotta-dark); text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4 {
  color: var(--charcoal);
  line-height: 1.3;
  font-weight: 600;
}
h1, h2 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 50, "opsz" 144;
  letter-spacing: -0.01em;
}
h3, h4 {
  font-family: var(--font-sans);
}

h1 { font-size: 2.25rem; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 1rem; }
h3 { font-size: 1.15rem; margin-top: 2rem; margin-bottom: 0.75rem; }
h4 { font-size: 1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }

/* Content H2s get a section-accent color bar (replaces heavy bottom border).
   Scoped to .docs-content so landing cards and other H2s elsewhere are untouched. */
.docs-content h2 {
  position: relative;
  padding-left: 1rem;
}
.docs-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.25em;
  width: 3px;
  border-radius: 2px;
  background: var(--terracotta);
}
.docs-sidebar--site-admin ~ .docs-main .docs-content h2::before { background: var(--warm-sand); }
.docs-sidebar--org-admins ~ .docs-main .docs-content h2::before { background: var(--sage); }
.docs-sidebar--comptrollers ~ .docs-main .docs-content h2::before { background: var(--clay); }

p { margin-bottom: 1rem; }

ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; }
li { margin-bottom: 0.35rem; }
li > ul, li > ol { margin-top: 0.35rem; margin-bottom: 0; }

strong { font-weight: 600; }

code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  background: var(--cream-dark);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

blockquote {
  border-left: 4px solid var(--terracotta);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: var(--warm-white);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--warm-gray);
  font-style: italic;
}

hr {
  border: none;
  border-top: 2px solid var(--border-color);
  margin: 2rem 0;
}

/* ── Page Layout ─────────────────────────────────────────── */
.docs-layout {
  display: flex;
  min-height: 100vh;
  padding-top: var(--header-height);
}

/* ── Header ──────────────────────────────────────────────── */
.docs-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--deep-brown);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  z-index: 100;
  gap: 1rem;
}

.docs-header__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cream);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.docs-header__logo:hover { color: var(--cream); text-decoration: none; }

.docs-header__logo svg { height: 32px; width: auto; }
.docs-header__logo span { opacity: 0.7; font-weight: 400; margin-left: 0.25rem; }

.docs-header__search {
  flex: 1;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}

.docs-header__search input {
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2.25rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.1);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  outline: none;
  transition: all 0.2s;
}
.docs-header__search input::placeholder { color: rgba(245,240,232,0.5); }
.docs-header__search input:focus {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.3);
}
.docs-header__search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(245,240,232,0.5);
  pointer-events: none;
}

/* Soft "back to fellos.app" CTA in the docs header. Sits at the right
   edge as a pill that gently lifts on hover — feels like a return path,
   not a prominent action. */
.docs-header__home {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 1px solid rgba(245,240,232,0.14);
  border-radius: 999px;
  background: rgba(245,240,232,0.04);
  color: rgba(245,240,232,0.78);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.docs-header__home:hover {
  color: var(--cream);
  background: rgba(196,114,90,0.16);
  border-color: rgba(196,114,90,0.4);
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(196,114,90,0.18);
}
.docs-header__home svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
.docs-header__home:hover svg {
  transform: translateX(-2px);
}
.docs-header__home-label {
  opacity: 0.7;
  font-weight: 400;
}
.docs-header__home:hover .docs-header__home-label {
  opacity: 0.9;
}

/* Search Results Dropdown */
.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--warm-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  max-height: 400px;
  overflow-y: auto;
  display: none;
  z-index: 200;
}
.search-results.active { display: block; }
.search-results__empty {
  padding: 1rem;
  color: var(--light-gray);
  text-align: center;
  font-size: 0.875rem;
}
.search-results__item {
  display: block;
  padding: 0.65rem 1rem;
  color: var(--charcoal);
  border-bottom: 1px solid var(--border-color);
  transition: background 0.1s;
  text-decoration: none;
}
.search-results__item:last-child { border-bottom: none; }
.search-results__item:hover, .search-results__item.focused {
  background: var(--cream);
  text-decoration: none;
}
.search-results__item-title {
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.search-results__item-section {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.search-results__item-section--members { background: #e8ddd4; color: var(--terracotta-dark); }
.search-results__item-section--org-admins { background: #dde5d8; color: #5c6e50; }
.search-results__item-section--site-admin { background: #e8ddd0; color: #9a7a55; }
.search-results__item-section--comptrollers { background: #ecd7ca; color: var(--clay); }
.search-results__item-match {
  font-size: 0.8rem;
  color: var(--light-gray);
  margin-top: 0.15rem;
}

/* Section Switcher */
.docs-header__section-switcher {
  position: relative;
  flex-shrink: 0;
}
.docs-header__section-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--cream);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s;
}
.docs-header__section-btn:hover { background: rgba(255,255,255,0.18); }

.section-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--warm-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 200px;
  display: none;
  z-index: 200;
}
.section-dropdown.active { display: block; }
.section-dropdown a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--charcoal);
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.1s;
}
.section-dropdown a:last-child { border-bottom: none; }
.section-dropdown a:hover { background: var(--cream); text-decoration: none; }
.section-dropdown a.active-section { font-weight: 600; color: var(--terracotta); }

/* Mobile menu toggle */
.docs-header__mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.docs-sidebar {
  width: var(--sidebar-width);
  background: var(--warm-white);
  border-right: 1px solid var(--border-color);
  position: fixed;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  overflow-y: auto;
  padding: 1.25rem 0;
  z-index: 50;
  transition: transform 0.25s ease;
}

.docs-sidebar__section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--warm-gray);
  padding: 1.1rem 1.25rem 0.45rem;
  margin-top: 0.5rem;
  border-top: 1px dashed var(--border-color);
}
.docs-sidebar__section-label:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0.25rem;
}

.docs-sidebar a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.25rem;
  color: var(--warm-gray);
  font-size: 0.875rem;
  font-weight: 400;
  border-left: 3px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
}
.docs-sidebar a:hover {
  color: var(--charcoal);
  background: var(--cream);
  text-decoration: none;
}
.docs-sidebar a.active {
  color: var(--terracotta);
  font-weight: 500;
  border-left-color: var(--terracotta);
  background: rgba(196,114,90,0.06);
}

/* Section color accents for active sidebar */
.docs-sidebar--org-admins a.active {
  color: #5c6e50;
  border-left-color: var(--sage);
  background: rgba(138,154,123,0.08);
}
.docs-sidebar--site-admin a.active {
  color: #9a7a55;
  border-left-color: var(--warm-sand);
  background: rgba(212,165,116,0.08);
}
.docs-sidebar--comptrollers a.active {
  color: var(--clay);
  border-left-color: var(--clay);
  background: rgba(184,128,106,0.08);
}

/* ── Main Content ────────────────────────────────────────── */
/* Left-align content against the sidebar rather than centering in the viewport.
   At very wide viewports this keeps the sidebar→content gap constant and parks
   any excess whitespace on the far right. The outer max-width caps the main
   region so content doesn't drift miles away from the sidebar. */
.docs-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-width: 0;
  position: relative;
  max-width: 1120px;
}
@media (min-width: 1280px) {
  /* At TOC-eligible widths, widen the cap to fit content + TOC side by side. */
  .docs-main { max-width: 1160px; }
}

.docs-content {
  max-width: 820px;
  padding: 2rem 2.5rem 4rem;
  margin: 0;
}

/* ── Right-rail TOC (on-page H2 index) ──────────────────── */
.docs-toc {
  display: none;
}
@media (min-width: 1280px) {
  /* TOC floats right so content flows around it. `position: sticky` keeps it
     pinned while scrolling. Sticky inside float works because position:sticky
     is relative to the flow container. The TOC is injected BEFORE .docs-content
     in the DOM (see docs.js) so the float renders alongside the content. */
  .docs-toc {
    display: block;
    float: right;
    width: 200px;
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
    margin-top: 2rem;
    margin-left: 1.5rem;
    padding-left: 1.25rem;
    border-left: 1px dashed var(--border-color);
    max-height: calc(100vh - var(--header-height) - 3rem);
    overflow-y: auto;
  }
}
.docs-toc__title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--warm-gray);
  margin-bottom: 0.65rem;
}
.docs-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.docs-toc__list li {
  margin: 0;
}
.docs-toc__list a {
  display: block;
  font-size: 0.825rem;
  line-height: 1.45;
  color: var(--light-gray);
  padding: 0.3rem 0;
  border-left: 2px solid transparent;
  margin-left: -1.25rem;
  padding-left: 1.15rem;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}
.docs-toc__list a:hover {
  color: var(--charcoal);
  text-decoration: none;
}
.docs-toc__list a.active {
  color: var(--terracotta);
  border-left-color: var(--terracotta);
  font-weight: 500;
}
.docs-sidebar--site-admin ~ .docs-main .docs-toc__list a.active { color: #9a7a55; border-left-color: var(--warm-sand); }
.docs-sidebar--org-admins ~ .docs-main .docs-toc__list a.active { color: #5c6e50; border-left-color: var(--sage); }
.docs-sidebar--comptrollers ~ .docs-main .docs-toc__list a.active { color: var(--clay); border-left-color: var(--clay); }

/* ── Breadcrumbs ─────────────────────────────────────────── */
.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--light-gray);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.docs-breadcrumb a { color: var(--light-gray); }
.docs-breadcrumb a:hover { color: var(--terracotta); }
.docs-breadcrumb__sep { color: var(--border-color); }
.docs-breadcrumb__current { color: var(--charcoal); font-weight: 500; }

/* ── Page Subtitle ───────────────────────────────────────── */
.docs-subtitle {
  color: var(--warm-gray);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  font-weight: 400;
}

/* ── Prev / Next Navigation ──────────────────────────────── */
.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--border-color);
}
.docs-pager a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--warm-white);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
  max-width: 48%;
  text-decoration: none;
}
.docs-pager a:hover {
  border-color: var(--terracotta);
  background: rgba(196,114,90,0.04);
  box-shadow: 0 6px 18px rgba(61,54,48,0.06);
  text-decoration: none;
  transform: translateY(-1px);
}
.docs-pager__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--light-gray);
}
.docs-pager__title {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 50, "opsz" 32;
  font-weight: 500;
  color: var(--terracotta);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.2s ease;
}
.docs-pager a:hover .docs-pager__title { transform: translateX(-3px); }
.docs-pager a.next { margin-left: auto; text-align: right; }
.docs-pager a.next:hover .docs-pager__title { transform: translateX(3px); }

/* ── Footer ──────────────────────────────────────────────── */
/* Footer lives inside .docs-main (which is capped) but visually spans the full
   area to the right of the sidebar. Negative right margin stretches the box
   beyond the capped parent so the dark band fills remaining viewport. */
.docs-footer {
  background: var(--deep-brown);
  color: rgba(245,240,232,0.6);
  text-align: center;
  padding: 1.5rem;
  font-size: 0.8rem;
  margin-right: calc(-1 * (100vw - var(--sidebar-width) - 100%));
}
.docs-footer a { color: var(--cream); }

/* ── Landing Page ────────────────────────────────────────── */
.landing { padding-top: var(--header-height); }

.landing__hero {
  text-align: center;
  padding: 4rem 2rem 2rem;
  max-width: 700px;
  margin: 0 auto;
}
.landing__hero h1 { font-size: 2.75rem; margin-bottom: 0.75rem; }
.landing__hero p { font-size: 1.1rem; color: var(--warm-gray); }

/* Signature tri-color gradient, matched to the marketing site's dark-CTA motif. */
.brand-gradient {
  background: linear-gradient(to right, var(--terracotta), var(--warm-sand), var(--sage));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Asymmetric grid — Member Guide is the featured card at full width (most visited),
   with Org Admin / Site Admin / Comptroller as a 3-up row beneath it. */
.landing__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "member member member"
    "org site comp";
  gap: 1.25rem;
  max-width: 1200px;
  margin: 2rem auto 4rem;
  padding: 0 2rem;
}
.landing__card--featured { grid-area: member; flex-direction: row; text-align: left; gap: 1.5rem; align-items: center; padding: 1.75rem 2.25rem; }
.landing__card--featured .landing__card-icon { flex-shrink: 0; }
.landing__card--featured h2 { margin: 0; }
.landing__card--featured p { flex: 1; margin: 0; }
.landing__card--featured .landing__card-cta { margin-top: 0; padding-top: 0; white-space: nowrap; }
.landing__card--org-admins { grid-area: org; }
.landing__card--site-admin { grid-area: site; }
.landing__card--comptrollers { grid-area: comp; }

@media (max-width: 1100px) {
  .landing__cards {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "member member"
      "org site"
      "comp comp";
    max-width: 720px;
  }
  .landing__card--featured { flex-direction: column; text-align: center; align-items: center; padding: 2rem 1.5rem; gap: 0.75rem; }
  .landing__card--featured p { flex: 0; }
  .landing__card--featured .landing__card-cta { margin-top: auto; padding-top: 0.75rem; }
  .landing__card--comptrollers { grid-column: span 2; }
}

.landing__card {
  position: relative;
  background: var(--warm-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  color: var(--charcoal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
}
/* 3px color bar along top edge, one per card section. */
.landing__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--terracotta);
  opacity: 0.85;
}
.landing__card--org-admins::before { background: var(--sage); }
.landing__card--site-admin::before { background: var(--warm-sand); }
.landing__card--comptrollers::before { background: var(--clay); }

.landing__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(61,54,48,0.10);
  border-color: var(--terracotta-light);
  text-decoration: none;
}

.landing__card-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing__card-icon--members { background: rgba(196,114,90,0.20); color: var(--terracotta); }
.landing__card-icon--org-admins { background: rgba(138,154,123,0.20); color: var(--sage); }
.landing__card-icon--site-admin { background: rgba(212,165,116,0.22); color: #9a7a55; }
.landing__card-icon--comptrollers { background: rgba(184,128,106,0.22); color: var(--clay); }

.landing__card h2 { font-size: 1.25rem; margin: 0; border: none; padding: 0; }
.landing__card p { color: var(--warm-gray); font-size: 0.9rem; margin: 0; }
.landing__card-cta {
  margin-top: auto;
  padding-top: 0.75rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.landing__footer {
  text-align: center;
  padding: 2rem;
  color: var(--light-gray);
  font-size: 0.8rem;
  border-top: 1px solid var(--border-color);
}

/* ── Content Helpers ─────────────────────────────────────── */
.callout {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
.callout--tip {
  background: rgba(138,154,123,0.1);
  border-left: 4px solid var(--sage);
}
.callout--note {
  background: rgba(212,165,116,0.1);
  border-left: 4px solid var(--warm-sand);
}
.callout--important {
  background: rgba(196,114,90,0.08);
  border-left: 4px solid var(--terracotta);
}
.callout__title {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.35rem;
}
.callout--tip .callout__title { color: #5c6e50; }
.callout--note .callout__title { color: #9a7a55; }
.callout--important .callout__title { color: var(--terracotta-dark); }

.steps { counter-reset: step-counter; list-style: none; padding-left: 0; }
.steps li {
  counter-increment: step-counter;
  padding-left: 2.5rem;
  position: relative;
  margin-bottom: 1rem;
}
.steps li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--terracotta);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Steps with section-specific colors */
.steps--sage li::before { background: var(--sage); }
.steps--sand li::before { background: var(--warm-sand); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
.feature-card {
  background: var(--warm-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.feature-card h4 { margin-top: 0; font-size: 0.95rem; }
.feature-card p { font-size: 0.875rem; color: var(--warm-gray); margin: 0; }

/* Definition list style */
.def-list dt {
  font-weight: 600;
  margin-top: 1rem;
  color: var(--charcoal);
}
.def-list dd {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--border-color);
  color: var(--warm-gray);
  margin-bottom: 0.5rem;
}

/* Table styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
thead th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--warm-gray);
}
tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
}
tbody tr:hover { background: rgba(245,240,232,0.5); }

/* ── SVG Illustrations ───────────────────────────────────── */
.svg-illustration {
  margin: 1.5rem 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-dark);
}
.svg-illustration svg {
  display: block;
  width: 100%;
  height: auto;
}
.svg-illustration__caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--light-gray);
  padding: 0.5rem;
  background: var(--warm-white);
  border-top: 1px solid var(--border-color);
}

/* ── Real-product screenshots ────────────────────────────── */
.docs-screenshot {
  margin: 1.5rem 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--warm-white);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
/* Faux browser chrome with three brand-color dots, mirroring the marketing site. */
.docs-screenshot::before {
  content: "";
  display: block;
  height: 26px;
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 14px 50%, var(--terracotta) 3px, transparent 3.5px),
    radial-gradient(circle at 30px 50%, var(--warm-sand) 3px, transparent 3.5px),
    radial-gradient(circle at 46px 50%, var(--sage) 3px, transparent 3.5px);
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border-color);
  opacity: 0.85;
}
.docs-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}
.docs-screenshot--inset img {
  /* For tighter inline imagery. */
  max-width: 560px;
  margin: 0 auto;
}
.docs-screenshot figcaption,
.docs-screenshot__caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--light-gray);
  padding: 0.5rem 1rem;
  background: var(--cream);
  border-top: 1px solid var(--border-color);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .docs-content { padding: 1.5rem 1.5rem 3rem; }
  .feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Tighter horizontal padding so the logo + hamburger have room. */
  .docs-header { padding: 0 0.875rem; gap: 0.5rem; }

  /* Hide desktop-only header controls; they're surfaced inside the sidebar
     drawer (see .docs-sidebar__mobile-extras) so they're still reachable. */
  .docs-header__search,
  .docs-header__section-switcher,
  .docs-header__home { display: none; }

  /* Push the hamburger to the right edge regardless of which other items
     happen to be present. */
  .docs-header__logo { margin-right: auto; }

  .docs-header__mobile-toggle { display: block; }

  .docs-sidebar {
    transform: translateX(-100%);
    width: 280px;
    box-shadow: 4px 0 16px rgba(0,0,0,0.1);
  }
  .docs-sidebar.open { transform: translateX(0); }

  .docs-main { margin-left: 0; max-width: none; }
  .docs-footer { margin-left: 0; margin-right: 0; }

  .docs-content { padding: 1.25rem 1rem 3rem; }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }

  .landing__cards {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "member member"
      "org site"
      "comp comp";
    max-width: 520px;
    gap: 0.75rem;
    padding: 0 1rem;
  }
  .landing__card { padding: 1.25rem 0.9rem; gap: 0.5rem; }
  .landing__card-icon { width: 48px; height: 48px; }
  .landing__card-icon svg { width: 22px; height: 22px; }
  .landing__card h2 { font-size: 1rem; }
  .landing__card p { font-size: 0.8rem; line-height: 1.4; }
  .landing__card:not(.landing__card--featured) p { display: none; }
  .landing__card-cta { padding-top: 0.25rem; font-size: 0.825rem; }
  .landing__hero h1 { font-size: 1.9rem; }
  .landing__hero { padding: 2.5rem 1.5rem 1.5rem; }

  .docs-pager { flex-direction: column; }
  .docs-pager a { max-width: 100%; }
  .docs-pager a.next { text-align: left; }

  /* Mobile search - show in sidebar when open */
  .docs-sidebar .mobile-search {
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.5rem;
  }
  .docs-sidebar .mobile-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    background: var(--cream);
  }

  /* Footer cluster injected into the sidebar (see initMobileSidebarExtras
     in docs.js): guide picker + "Back to fellos.app" link. Surfaces the
     desktop-only header controls inside the mobile drawer. */
  .docs-sidebar__mobile-extras {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px dashed var(--border-color);
  }
  .docs-sidebar__mobile-extras-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--warm-gray);
    margin-bottom: 0.4rem;
  }
  /* Override the default sidebar `a` styling — these links are pills/buttons,
     not nav items. */
  .docs-sidebar__mobile-extras .docs-sidebar__guide-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.35rem;
    border: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--cream);
    color: var(--warm-gray);
    font-size: 0.875rem;
  }
  .docs-sidebar__mobile-extras .docs-sidebar__guide-link.active-section {
    color: var(--terracotta);
    border-color: var(--terracotta);
    background: rgba(196,114,90,0.06);
    font-weight: 500;
  }
  .docs-sidebar--site-admin .docs-sidebar__guide-link.active-section {
    color: #9a7a55;
    border-color: var(--warm-sand);
    background: rgba(212,165,116,0.08);
  }
  .docs-sidebar--org-admins .docs-sidebar__guide-link.active-section {
    color: #5c6e50;
    border-color: var(--sage);
    background: rgba(138,154,123,0.08);
  }
  .docs-sidebar--comptrollers .docs-sidebar__guide-link.active-section {
    color: var(--clay);
    border-color: var(--clay);
    background: rgba(184,128,106,0.08);
  }
  .docs-sidebar__mobile-extras .docs-sidebar__guide-link:hover {
    color: var(--charcoal);
    border-color: var(--terracotta-light);
    background: var(--warm-white);
    text-decoration: none;
  }
  .docs-sidebar .docs-sidebar__home-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--warm-white);
    color: var(--warm-gray);
    font-size: 0.875rem;
  }
  .docs-sidebar .docs-sidebar__home-link:hover {
    color: var(--terracotta);
    border-color: var(--terracotta-light);
    background: rgba(196,114,90,0.04);
    text-decoration: none;
  }
  .docs-sidebar__home-link svg {
    width: 14px;
    height: 14px;
  }
}

@media (min-width: 769px) {
  .docs-sidebar .mobile-search,
  .docs-sidebar__mobile-extras { display: none; }
}

/* ── Overlay for mobile sidebar ──────────────────────────── */
.docs-overlay {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 40;
}
.docs-overlay.active { display: block; }

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .docs-header, .docs-sidebar, .docs-pager, .docs-footer { display: none; }
  .docs-main { margin-left: 0; }
  .docs-content { max-width: 100%; padding: 0; }
  .docs-layout { padding-top: 0; }
}