/* ============================================================================
   autonomous-kickoff — reference.html specific styles
   ========================================================================== */

.ref-hero { padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--sp-6); }
.ref-hero h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); }
.ref-hero .lead { margin-top: var(--sp-4); max-width: 56ch; }

.ref-layout { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .ref-layout { grid-template-columns: 15rem 1fr; } }

/* ---- Table of contents (sticky) ---------------------------------------- */
.toc { position: relative; }
@media (min-width: 60rem) { .toc { position: sticky; top: 5.5rem; } }
.toc h2 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); font-weight: 500; margin-bottom: var(--sp-3); }
.toc nav { display: grid; gap: 0.1rem; }
.toc a { color: var(--ink-2); font-size: var(--text-sm); padding: 0.4rem 0.75rem; border-radius: var(--r-sm); border-left: 2px solid transparent; }
.toc a:hover { color: var(--ink); background: var(--bg-raised); }
.toc a[aria-current="true"] { color: var(--signal); border-left-color: var(--signal); background: var(--signal-dim); }
.toc .toc-group { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hairline-2); padding: 0 0.75rem; }

.ref-section { scroll-margin-top: 6rem; }
.ref-section + .ref-section { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.ref-section > h2 { font-size: var(--text-2xl); }
.ref-section > .lead { margin-top: var(--sp-3); margin-bottom: var(--sp-6); max-width: 60ch; }

/* ---- Prompt cards ------------------------------------------------------- */
.prompt { scroll-margin-top: 6rem; background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.prompt + .prompt { margin-top: var(--sp-5); }
.prompt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-3); flex-wrap: wrap; }
.prompt-title { display: flex; flex-direction: column; gap: 0.35rem; }
.prompt-title h3 { font-size: var(--text-lg); color: var(--ink); }
.prompt-title h3 a { color: inherit; }
.prompt-title h3 a:hover { color: var(--signal); }
.prompt-when { font-size: var(--text-sm); color: var(--muted); max-width: 60ch; }
.prompt-tag { font-family: var(--font-mono); font-size: var(--text-xs); padding: 0.25em 0.7em; border-radius: var(--r-pill); border: 1px solid var(--hairline-2); color: var(--ink-2); align-self: flex-start; white-space: nowrap; }

/* Copy button */
.copy-btn {
  --_fg: var(--ink-2);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  color: var(--_fg);
  background: var(--surface); border: 1px solid var(--hairline-2);
  padding: 0.5em 0.85em; border-radius: var(--r-pill); cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2);
  white-space: nowrap;
}
.copy-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.copy-btn svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.7; }
.copy-btn .ico-check { display: none; }
.copy-btn.is-copied { color: var(--ok); border-color: color-mix(in oklch, var(--ok) 50%, transparent); background: var(--ok-dim); }
.copy-btn.is-copied .ico-copy { display: none; }
.copy-btn.is-copied .ico-check { display: inline; }

.prompt-body { margin: 0 var(--sp-5) var(--sp-5); }
.prompt-body pre {
  background: oklch(0.12 0.01 256);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--sp-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.prompt-body code { font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.75; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.prompt-body em { color: var(--signal-hi); font-style: normal; }
.prompt-note { font-size: var(--text-sm); color: var(--muted); margin: var(--sp-4) var(--sp-5) var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--hairline-2); }
.prompt-note code { color: var(--ink-2); background: var(--surface); padding: 0.1em 0.4em; border-radius: 4px; }

/* ---- Vocabulary tables -------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-lg); -webkit-overflow-scrolling: touch; }
table.vocab { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 34rem; }
table.vocab caption { text-align: left; padding: var(--sp-4) var(--sp-4) 0; color: var(--muted); font-size: var(--text-xs); font-family: var(--font-mono); letter-spacing: 0.06em; }
table.vocab th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: var(--sp-4); border-bottom: 1px solid var(--hairline-2); }
table.vocab td { padding: var(--sp-4); border-bottom: 1px solid color-mix(in oklch, var(--hairline) 60%, transparent); color: var(--ink-2); vertical-align: top; }
table.vocab tr:last-child td { border-bottom: 0; }
table.vocab td:first-child { white-space: nowrap; }

.chip { display: inline-block; font-family: var(--font-mono); font-size: 0.8rem; padding: 0.22em 0.6em; border-radius: var(--r-sm); border: 1px solid var(--hairline-2); color: var(--ink); background: var(--surface); }
.chip--label { border-color: color-mix(in oklch, var(--signal) 35%, transparent); color: var(--signal-hi); background: var(--signal-dim); }
.chip--ok { border-color: color-mix(in oklch, var(--ok) 40%, transparent); color: var(--ok); background: var(--ok-dim); }
.chip--warn { border-color: color-mix(in oklch, var(--warn) 40%, transparent); color: var(--warn); background: var(--warn-dim); }
.chip--danger { border-color: color-mix(in oklch, var(--danger) 45%, transparent); color: var(--danger); background: var(--danger-dim); }
.chip--muted { color: var(--muted); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: var(--sp-3); }
.faq details { background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; }
.faq details[open] { border-color: var(--hairline-2); }
.faq summary { cursor: pointer; padding: var(--sp-5); font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--text-base); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--signal-hi); }
.faq .faq-body { padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-2); font-size: var(--text-sm); }
.faq .faq-body p + p { margin-top: var(--sp-3); }
.faq .faq-body a { font-weight: 500; }
.faq .faq-body code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink); background: var(--surface); padding: 0.1em 0.4em; border-radius: 4px; }