/* /developers/ai (templates/developers/ai.html): the Agent Skill, llms.txt and MCP.
 *
 * ON THE DAY, as the rest of the docs: grey paper, hairlines, clay for links and
 * for current. The glyphs are drawn in ink; the part of each that carries current
 * is clay, and it runs only on hover or focus (never under reduced motion).
 * Green means live and nothing here is live, so there is none. */

/* ---- the opening ------------------------------------------------------------------------ */
.ai-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: center; margin: 0 0 var(--s-6); }
/* The scene sits under the words, the column's full width: beside them it would fall under its
   legible floor (scenes/README.md) and scroll on a desktop. */
.ai-intro-copy p:last-child { margin-bottom: 0; }
.ai-intro-scene .scene { margin: 0; }
.ai-intro-scene .scene > svg { max-width: 30rem; margin: 0 auto; }

/* ---- three doors ------------------------------------------------------------------------- */
.dev-body .ai-doors {
  list-style: none; padding: 0; margin: 0 0 var(--s-7);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3);
}
.dev-body .ai-doors li { margin: 0; }
@media (max-width: 760px) {
  .dev-body .ai-doors { grid-template-columns: minmax(0, 1fr); }
}
.dev-body a.ai-door {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: var(--s-4) var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); color: inherit; text-decoration: none;
  transition: border-color var(--t-state) var(--ease), transform var(--t-state) var(--ease);
}
.dev-body a.ai-door:hover, .dev-body a.ai-door:focus-visible { border-color: var(--accent-line); }
.dev-body a.ai-door:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-door strong { color: var(--ink); font-size: 1.02rem; line-height: 1.3; }
.ai-door-kicker {
  font: 600 .68rem/1 var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.ai-door-text { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }

.ai-glyph {
  width: 40px; height: 40px; margin-bottom: var(--s-2);
  fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ai-glyph .ai-current { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 40; stroke-dashoffset: 0; }
.ai-glyph .ai-current-dot { fill: var(--accent); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .ai-door:hover .ai-current, .ai-door:focus-visible .ai-current { animation: ai-current 900ms var(--ease) both; }
}
@keyframes ai-current {
  from { stroke-dashoffset: 40; }
  to { stroke-dashoffset: 0; }
}

/* ---- the download --------------------------------------------------------------------------- */
.ai-download {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin: var(--s-5) 0;
}
.dev-body .ai-download .btn { text-decoration: none; }
.dev-body .ai-download .btn.primary { color: #FFFFFF; }
.dev-body .ai-download-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0;
  font: 500 .78rem/1.4 var(--f-num); color: var(--muted);
}
.dev-body .ai-download-meta code { background: none; padding: 0; color: var(--ink-soft); font-size: inherit; }

.dev-body .ai-note { font-size: .92rem; color: var(--muted); }

/* ---- llms.txt ---------------------------------------------------------------------------------- */
.ai-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-5); }
@media (max-width: 640px) {
  .ai-files { grid-template-columns: minmax(0, 1fr); }
}
.dev-body a.ai-file {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  color: var(--ink-soft); text-decoration: none; font-size: .92rem; line-height: 1.5;
  transition: border-color var(--t-state) var(--ease);
}
.dev-body a.ai-file:hover { border-color: var(--accent-line); }
.dev-body a.ai-file code { align-self: flex-start; font-size: .95rem; color: var(--accent); background: var(--accent-soft); }

/* ---- MCP facts ---------------------------------------------------------------------------------- */
.ai-facts { margin: 0 0 var(--s-6); border-top: 1px solid var(--line); }
.ai-facts > div {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s-3);
  padding: .65rem 0; border-bottom: 1px solid var(--line);
}
.ai-facts dt { font: 600 .68rem/1.9 var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ai-facts dd { margin: 0; font-size: .95rem; }
@media (max-width: 520px) {
  .ai-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---- the controls ------------------------------------------------------------------------------ */
.ai-controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: var(--s-3);
               margin: 0 0 var(--s-6); }
.ai-control {
  display: flex; flex-direction: column; gap: 6px; padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  font-size: .9rem; line-height: 1.5;
}
.ai-control strong { color: var(--ink); font-size: .98rem; }
.ai-control > span { color: var(--ink-soft); }
.dev-body .ai-control-figure {
  margin: 0 0 var(--s-1); font: 600 1.05rem/1.2 var(--f-num); letter-spacing: -.01em; color: var(--accent);
}

/* Test on, live off: the switch as the dashboard draws it, in ink and grey. */
.ai-mode {
  display: inline-flex; align-self: flex-start; margin-bottom: var(--s-1); padding: 3px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--ground-2);
  font: 600 .68rem/1 var(--f-num); letter-spacing: .12em; text-transform: uppercase;
}
.ai-mode span { padding: 6px 10px; border-radius: 999px; color: var(--ink-soft); }
.ai-mode .is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(23, 28, 26, .12); }

/* ---- the tools ---------------------------------------------------------------------------------- */
.dev-body table.ai-tools td:first-child { width: 30%; }
.dev-body table.ai-tools td:last-child code { white-space: nowrap; }
.ai-money {
  display: block; width: max-content; margin-top: 4px; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-hover);   /* the clay text clears AA on its own tint */
  font: 600 .62rem/1.5 var(--f-num); letter-spacing: .1em; text-transform: uppercase;
}

/* ---- one client at a time: each is a disclosure, Claude Code open --------------------------------- */
.ai-clients { border-top: 1px solid var(--line); margin: 0 0 var(--s-6); }
.ai-client { border-bottom: 1px solid var(--line); }
.ai-client > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3);
  padding: var(--s-3) 0; cursor: pointer; list-style: none;
}
.ai-client > summary::-webkit-details-marker { display: none; }
.ai-client > summary::before {
  content: ""; align-self: center; flex: none; width: 8px; height: 8px; margin-right: 2px;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg); transition: transform var(--t-state) var(--ease);
}
.ai-client[open] > summary::before { transform: rotate(45deg); }
.ai-client > summary strong { color: var(--ink); font-size: 1.05rem; }
.ai-client > summary span { font: 500 .74rem/1.4 var(--f-num); color: var(--muted); }
.ai-client > summary:hover strong { color: var(--accent); }
.ai-client > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ai-client[open] { padding-bottom: var(--s-2); }

/* On a phone each tool is a row of its own: name and scope, then what it does. */
@media (max-width: 640px) {
  .dev-body table.ai-tools thead { display: none; }
  .dev-body table.ai-tools tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3);
    padding: .7rem 0; border-bottom: 1px solid var(--line);
  }
  .dev-body table.ai-tools td { border: 0; padding: 0; }
  .dev-body table.ai-tools td:first-child { width: auto; }
  .dev-body table.ai-tools td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
  .dev-body table.ai-tools td:last-child { grid-column: 2; grid-row: 1; }
}