/* skills-yaml.tech — one manifest, every agent.

   Every page is a docs page: a sticky header, site navigation on the left,
   the page outline on the right, and the reading column in between. Light or
   dark follows the system. Procedures are numbered steppers, notes and
   warnings are tinted hints, and code sits in titled blocks. */

:root {
  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --bg-3: #eef1f5;
  --line: #e4e7ec;
  --text: #181d26;
  --text-2: #556070;
  --text-3: #8a93a3;
  --accent: #2f6fdb;
  --accent-bg: #ecf3ff;
  --accent-line: #c5dafd;
  --info: #3957d4;
  --info-bg: #f2f6ff;
  --info-line: #d6e0fb;
  --warn: #a35a00;
  --warn-bg: #fff8ec;
  --warn-line: #f6dfb5;
  --danger: #c4262e;
  --danger-bg: #fff3f1;
  --danger-line: #f8d3cd;
  --ok: #2c7a4b;
  --code-c: #7b8494;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --header: 64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1d1d;
    --bg-2: #232427;
    --bg-3: #2a2c31;
    --line: #33363c;
    --text: #eef0f3;
    --text-2: #b3b9c4;
    --text-3: #828a97;
    --accent: #5fa3fa;
    --accent-bg: #222a36;
    --accent-line: #31455e;
    --info: #a4b8f4;
    --info-bg: #20232a;
    --info-line: #323a50;
    --warn: #f2c27a;
    --warn-bg: #2a251e;
    --warn-line: #4a3d28;
    --danger: #f8a8a1;
    --danger-bg: #2b2020;
    --danger-line: #4d3230;
    --ok: #74d6a0;
    --code-c: #8a93a3;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4, p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--mono); }
strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--bg); padding: 10px 16px; z-index: 30; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- header ---------- */

.docs-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.docs-header-inner {
  max-width: 1440px; margin-inline: auto; padding: 0 24px; min-height: var(--header);
  display: flex; align-items: center; gap: 24px;
}
.docs-logo { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--text); margin-right: auto; }
.docs-logo:hover { text-decoration: none; }
.docs-logo span { color: var(--accent); }
.docs-header nav { display: flex; gap: 22px; font-size: 14px; font-weight: 500; }
.docs-header nav a { color: var(--text-2); white-space: nowrap; }
.docs-header nav a:hover, .docs-header nav a[aria-current="page"] { color: var(--accent); text-decoration: none; }

/* ---------- three columns ---------- */

.docs-shell {
  max-width: 1440px; margin-inline: auto; padding-inline: 24px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px;
}
@media (min-width: 1024px) { .docs-shell { grid-template-columns: 15rem minmax(0, 1fr); } }
@media (min-width: 1280px) { .docs-shell { grid-template-columns: 15rem minmax(0, 1fr) 13rem; } }

/* left: site navigation, a list on a hairline with the current page marked */
.docs-sidebar { display: none; }
@media (min-width: 1024px) {
  .docs-sidebar {
    display: block; position: sticky; top: var(--header); align-self: start;
    max-height: calc(100vh - var(--header)); overflow-y: auto; padding-block: 32px; font-size: 14px;
  }
}
.docs-sidebar-group {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); margin: 22px 0 8px;
}
.docs-sidebar-group:first-child { margin-top: 0; }
.docs-sidebar ul { border-left: 1px solid var(--line); }
.docs-sidebar a {
  display: block; padding: 6px 12px; margin-left: -1px; border-left: 1px solid transparent;
  color: var(--text-2); border-radius: 0 6px 6px 0;
}
.docs-sidebar a:hover { color: var(--text); text-decoration: none; border-left-color: var(--text-3); }
.docs-sidebar a[aria-current="page"] {
  color: var(--accent); font-weight: 500; border-left-color: var(--accent); background: var(--accent-bg);
}

/* right: the page outline */
.docs-toc { display: none; }
@media (min-width: 1280px) {
  .docs-toc { display: block; position: sticky; top: var(--header); align-self: start; padding-block: 40px; font-size: 13.5px; }
}
.docs-toc-title { font-weight: 600; color: var(--text); margin-bottom: 10px; }
.docs-toc ul { border-left: 1px solid var(--line); }
.docs-toc a { display: block; padding: 5px 12px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-2); }
.docs-toc a:hover { color: var(--text); text-decoration: none; }
.docs-toc a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); }

/* ---------- the page ---------- */

.docs-main { min-width: 0; padding-block: 40px 72px; }
.docs-page { max-width: 46rem; margin-inline: auto; }
.docs-page > p, .docs-page section > p { margin-bottom: 16px; }

.docs-title { margin-bottom: 28px; }
.docs-crumb { font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 8px; }
.docs-crumb a { color: var(--accent); }
.docs-title h1 { font-size: clamp(1.9rem, 5vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.docs-lead { margin-top: 12px; font-size: 1.12rem; color: var(--text-2); line-height: 1.6; }

.docs-page section { padding-top: 24px; scroll-margin-top: calc(var(--header) + 20px); }
.docs-page h2 {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3;
  margin: 24px 0 14px; scroll-margin-top: calc(var(--header) + 20px);
}
.docs-page h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; margin: 28px 0 10px; }
.docs-page h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin-bottom: 8px; letter-spacing: -0.01em; }
.docs-page .step { scroll-margin-top: calc(var(--header) + 20px); }

.docs-page :not(pre) > code {
  font-size: 0.86em; padding: 0.12em 0.36em; border-radius: 5px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  overflow-wrap: anywhere;
}

/* stepper: numbered markers joined by a line */
.stepper { counter-reset: step; margin: 20px 0 24px; }
.step { position: relative; padding: 0 0 28px 48px; counter-increment: step; }
.step::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--accent);
  background: var(--accent-bg); border: 1px solid var(--accent-line);
}
.step::after {
  content: ""; position: absolute; left: 14px; top: 36px; bottom: 8px;
  width: 1px; background: var(--line);
}
.step:last-child { padding-bottom: 4px; }
.step:last-child::after { display: none; }
.step > p { margin-bottom: 12px; }
.step > :last-child { margin-bottom: 0; }

/* hints */
.hint {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 16px 0; padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--h-line); background: var(--h-bg); font-size: 15px;
}
.hint-icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--h-fg); }
.hint p + p, .hint p + ul { margin-top: 8px; }
.hint ul { padding-left: 18px; }
.hint li { list-style: disc; margin-top: 4px; }
.hint-info { --h-fg: var(--info); --h-bg: var(--info-bg); --h-line: var(--info-line); }
.hint-warning { --h-fg: var(--warn); --h-bg: var(--warn-bg); --h-line: var(--warn-line); }
.hint-danger { --h-fg: var(--danger); --h-bg: var(--danger-bg); --h-line: var(--danger-line); }

/* code blocks, optionally with a title bar */
.code { margin: 12px 0 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.code-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 8px 7px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; color: var(--text-2); min-height: 38px;
}
.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.code .c { color: var(--code-c); }
.code .k { color: var(--accent); }
.code .a { color: var(--ok); }

.copy {
  flex: none; border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  color: var(--text-2); font: 500 12px/1 var(--sans); padding: 6px 10px; cursor: pointer;
}
.copy:hover { color: var(--text); border-color: var(--text-3); }
.copy[data-state="done"] { color: var(--accent); border-color: var(--accent-line); }

/* field lists */
.fields { margin: 12px 0 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fields dt { padding: 12px 16px 0; font-weight: 600; font-size: 14.5px; }
.fields dd { margin: 0; padding: 4px 16px 12px; color: var(--text-2); font-size: 15px; border-bottom: 1px solid var(--line); }
.fields dd:last-child { border-bottom: 0; }

/* tables */
.table-wrap { margin: 12px 0 18px; border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dtable th, .dtable td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dtable thead th { background: var(--bg-2); font-weight: 600; font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.dtable tbody tr:last-child > * { border-bottom: 0; }
.dtable tbody th { font-weight: 400; }
.dtable td:first-child, .dtable tbody th { color: var(--text); }
.dtable td { color: var(--text-2); }
.dtable td code, .dtable th code { white-space: nowrap; }
.dtable .muted { color: var(--text-3); }
.dtable-commands tbody th { width: 1%; white-space: nowrap; }

/* link cards */
.cards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 24px 0 8px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); background: var(--bg);
}
a.card:hover { border-color: var(--accent); text-decoration: none; }
.card-title { font-weight: 600; margin-bottom: 4px; }
a.card .card-title { color: var(--accent); }
.card p { color: var(--text-2); font-size: 14.5px; }

/* previous / next */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.pager a {
  display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px;
  font-weight: 500; color: var(--text);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pager span { font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.pager-next { text-align: right; grid-column: 2; }
.docs-footnote { margin-top: 28px; font-size: 14px; color: var(--text-3); }

/* ---------- registry preview on the overview ---------- */

.preview { margin: 12px 0 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.preview li { display: flex; align-items: baseline; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.preview li:last-child { border-bottom: 0; }
.preview a { flex: 1; min-width: 0; display: grid; gap: 2px; color: inherit; }
.preview a:hover { text-decoration: none; }
.preview a:hover .pv-name { text-decoration: underline; }
.pv-name { font-family: var(--mono); font-size: 13.5px; color: var(--accent); }
.pv-desc { color: var(--text-2); font-size: 14.5px; }
.pv-version { font-family: var(--mono); font-size: 12.5px; color: var(--text-3); }
.preview .pv-source { flex: none; display: inline; font-size: 12.5px; color: var(--accent); }
.preview .pv-source:hover { text-decoration: underline; }

/* ---------- catalog ---------- */

.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 8px; }
.search {
  flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding-left: 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.search:focus-within { border-color: var(--accent); }
.search label { color: var(--text-3); font-size: 14px; }
.search input {
  flex: 1; min-width: 0; border: 0; padding: 10px 12px 10px 0;
  font: 400 15px var(--sans); background: transparent; color: var(--text);
}
.search input:focus { outline: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  border: 1px solid var(--line); background: var(--bg); color: var(--text-2);
  font: 500 13.5px var(--sans); padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.filter:hover { border-color: var(--text-3); color: var(--text); }
.filter[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); }

.group[hidden], .entry[hidden], .empty[hidden] { display: none; }
.group-head h2 { margin-bottom: 6px; }
.group-head p { color: var(--text-2); margin-bottom: 4px; }

.entry {
  margin: 14px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px;
  display: grid; gap: 12px; scroll-margin-top: calc(var(--header) + 20px);
}
.entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.entry-name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.entry-name a { color: var(--text); }
.entry-name a:hover { color: var(--accent); }
.entry-path { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.entry-path span { color: var(--text-3); }
.entry-desc { color: var(--text-2); font-size: 15px; }
.entry-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 18px; font-size: 14px; }
.entry-meta dt { color: var(--text-3); }
.entry-meta dd { margin: 0; color: var(--text); min-width: 0; }
.entry-meta code { font-size: 13px; }
.inline { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.inline .tag { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.inline a { font-family: var(--mono); font-size: 12.5px; }
.none { color: var(--text-3); }
.entry-more { font-size: 14.5px; }
.entry-add {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2);
}
.docs-page .entry-add code { padding: 0; border: 0; background: none; overflow-wrap: normal; }
.entry-add code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 13px; color: var(--text); }
.empty { padding-block: 40px; color: var(--text-2); }

/* ---------- phones ---------- */

@media (max-width: 640px) {
  .docs-header-inner { flex-wrap: wrap; gap: 4px 20px; padding: 12px 16px; }
  .docs-header nav { width: 100%; overflow-x: auto; gap: 18px; padding-bottom: 2px; scrollbar-width: none; }
  .docs-shell { padding-inline: 16px; }
  .docs-main { padding-top: 28px; }
  .step { padding-left: 40px; }
  .pager { grid-template-columns: 1fr; }
  .pager-next { grid-column: auto; }
  .entry { padding: 16px; }
}
.members .member-version { white-space: nowrap; }