/* ==========================================================================
   FRESH DENTAL SOLUTIONS — AGENT PAGE (ai.html)
   ==========================================================================
   Page-scoped chrome for the one agent-facing page, exactly as css/kb.css
   is scoped to the knowledge base. Nothing here is used anywhere else, and
   nothing here restyles a shared component — ai.html is a *reference* page
   for developers and agents, so it is built to be SCANNED (a persistent
   rail, numbered sections, a card catalog) rather than read top to bottom.

   Depends on: tokens.css, base.css, components.css. Load after
   components.css and before brand.css.
   ========================================================================== */

/* ==========================================================================
   HERO
   ==========================================================================
   <section class="ai-hero">
     <div class="container ai-hero-inner">
       <p class="eyebrow">For AI agents &amp; assistants</p>
       <h1>…</h1>
       <p class="lede">…</p>
       <ul class="ai-sources" role="list">…</ul>
     </div>
   </section>

   Left-aligned, deliberately: the old version centred a six-line lede,
   which gives every line a different start point and is the hardest
   possible arrangement to read. It also lives INSIDE <main> now, so it
   inherits the nav clearance (base.css) instead of hiding its eyebrow
   under the fixed bar. */

.ai-hero {
  padding-block: var(--s-14) var(--s-12);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 7%, transparent), transparent);
  border-bottom: 1px solid var(--border);
}
.ai-hero-inner { max-width: 54rem; }
.ai-hero h1 { font-size: var(--fs-4xl); margin-block: var(--s-3) var(--s-5); }
.ai-hero .lede { max-width: 60ch; }

/* The three canonical machine surfaces, offered as real targets rather than
   buried mid-sentence in the lede. */
.ai-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}
.ai-sources a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--bg-raised);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.ai-sources a:hover { border-color: var(--brand); color: var(--brand); }
.ai-sources a span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.ai-sources a:hover span { color: inherit; }

/* ==========================================================================
   LAYOUT — a narrow persistent rail + a wide content column
   ==========================================================================
   <div class="ai-layout">
     <nav class="toc" aria-label="On this page">…</nav>
     <div class="ai-body">…</div>
   </div>

   NOT .grid-asym: that primitive's 2fr/3fr split left the content column at
   ~660px, which squeezed the dataset catalog into an unreadable ribbon and
   clipped its endpoint column, while the rail's own column sat empty for
   thousands of pixels of scroll. A fixed 14rem rail leaves ~900px for
   content — enough for .grid-3 to actually render three across. */

.ai-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
  padding-block: var(--s-12) var(--s-16);
}
@media (min-width: 64rem) {
  .ai-layout {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--s-14);
    /* Deliberately NOT `align-items: start`: that shrink-wraps the rail's
       grid item to its own content height, which leaves `position: sticky`
       with no containing block to travel down and the rail scrolls away
       after one screen. Stretching the item to the row height is what gives
       the sticky rail its range. */
    align-items: stretch;
  }
}

/* ==========================================================================
   TOC RAIL
   ==========================================================================
   <nav class="toc" aria-label="On this page">
     <p class="toc-title">On this page</p>
     <ol class="toc-list" role="list">
       <li><a class="toc-link is-current" href="#read-markdown">Read us as markdown</a></li>
     </ol>
   </nav>

   This replaces a reuse of .footer-list, whose links are --ink-200 because
   they are drawn on the dark footer — on this page's light card they came
   out at roughly 1.3:1 and were effectively invisible.

   Sticky, not floating: it stays inside its own grid column and never
   overlays content, so the site's no-floating-chrome rule (AGENTS.md) is
   intact — the nav is still the only fixed element. */

.toc { position: static; }
@media (min-width: 64rem) {
  .toc {
    position: sticky;
    top: calc(var(--nav-h) + var(--s-6));
    max-height: calc(100vh - var(--nav-h) - var(--s-12));
    overflow-y: auto;
  }
}

.toc-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: var(--s-4);
}

.toc-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  counter-reset: toc;
}

.toc-link {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--t) var(--ease-out), border-color var(--t) var(--ease-out), background-color var(--t) var(--ease-out);
}
.toc-link::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.toc-link:hover {
  color: var(--text);
  border-left-color: var(--border-strong);
  background: var(--bg-subtle);
}
.toc-link.is-current {
  color: var(--brand);
  font-weight: 600;
  border-left-color: var(--brand);
}
.toc-link.is-current::before { color: var(--brand); }

/* ==========================================================================
   CONTENT SECTIONS
   ==========================================================================
   <section class="ai-section" id="read-markdown">
     <header class="ai-section-head">
       <p class="ai-section-num">01</p>
       <h2>Read us as markdown</h2>
     </header>
     <div class="prose">…</div>
   </section>

   Six <h2>s with nothing between them read as one undifferentiated wall;
   the rule + number gives the eye somewhere to land when scanning. */

.ai-body { counter-reset: aisec; }

.ai-section + .ai-section {
  margin-top: var(--s-14);
  padding-top: var(--s-12);
  border-top: 1px solid var(--border);
}

.ai-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.ai-section-head h2 { font-size: var(--fs-2xl); }
.ai-section-num {
  counter-increment: aisec;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
}
.ai-section-num::before { content: counter(aisec, decimal-leading-zero); }

/* Long-form inside a section keeps a comfortable measure even though the
   column itself is wide enough for the card grid and code blocks. */
.ai-section .prose > p,
.ai-section .prose > ul,
.ai-section .prose > ol { max-width: var(--measure); }

/* ==========================================================================
   DATASET CATALOG — js/data-api.js renders into #api-datasets
   ==========================================================================
   <article class="card card-dataset">
     <p class="card-dataset-id"><code>tooth-notation</code></p>
     <h3>Tooth notation systems</h3>
     <p class="card-dataset-desc">…</p>
     <dl class="card-dataset-meta"><dt>Records</dt><dd>52</dd>…</dl>
     <p class="card-dataset-src">…</p>
     <a class="card-link" href="api/datasets/tooth-notation.json">GET api/…</a>
   </article>

   Cards, not a table: the markup always asked for `.grid grid-3` and the
   renderer overwrote it with a four-column table that could not fit. A
   dataset row is one long description plus three short facts — which is a
   card, not a table row. */

.card-dataset { display: flex; flex-direction: column; }
.card-dataset-id { margin: 0; }
.card-dataset-id code { font-size: var(--fs-xs); }
.card-dataset h3 { font-size: var(--fs-lg); }

/* Descriptions run from one line to a full paragraph of provenance; clamp
   them so the grid keeps even rows, with the full text one click away in
   the dataset itself. */
.card-dataset-desc {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.card-dataset-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: var(--fs-xs);
}
.card-dataset-meta div { display: flex; flex-direction: column; gap: 2px; }
.card-dataset-meta dt {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
}
.card-dataset-meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.card-dataset-src { font-size: var(--fs-xs); color: var(--text-faint); }

.card-dataset .card-link { word-break: break-all; }

/* ==========================================================================
   GROUND RULES — the part agents most need to actually read
   ========================================================================== */

.ai-rules { display: grid; gap: var(--s-4); margin-top: var(--s-2); }
@media (min-width: 48rem) {
  .ai-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ai-rule h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.ai-rule p { font-size: var(--fs-sm); color: var(--text-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 48rem) {
  .ai-hero { padding-block: var(--s-10) var(--s-8); }
  .ai-hero h1 { font-size: var(--fs-3xl); }
  .ai-layout { padding-block: var(--s-8) var(--s-12); }
  .ai-section + .ai-section { margin-top: var(--s-10); padding-top: var(--s-8); }
}