/* ==========================================================================
   mcprush — skill-page.css  (skill.html)

   An MCP server is a machine you connect to, so server.html is a datasheet:
   two columns, a card rail, latency, schemas. A skill is writing — the source
   IS the product and you can read all of it before installing — so this page
   is a document: a contents rail, one measure of prose, marginalia for the
   facts that would interrupt it, and the instructions themselves set as a
   sheet of paper with line numbers.

   Every class here is prefixed .sk- so nothing collides with views.css.
   Nothing here is shared with another page.
   ========================================================================== */

/* This wrapper used to re-point --accent at the skills hue, so that every
   shared component inside it — .spec's tick, .badge-accent, sparkline(),
   .check — arrived in ink-blue while the header and footer outside kept the
   server line's emerald. That seam is exactly what made the page look like a
   different site: one accent above the masthead, another below it.

   --skill is an alias of --accent now (core.css, :root), so the re-point is
   gone rather than rewritten. Every var(--skill) below still resolves — to
   whichever accent the scheme is wearing, top to bottom, one colour. */
.sk-page { padding-bottom: 72px; }

/* ---------- masthead ------------------------------------------------------ */
/* Full bleed to the content width: no card rail beside it, because the first
   thing a reader of a document meets is the title, not a purchase panel. */
.sk-mast { padding: 6px 0 30px; }
.sk-eyebrow {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3); margin-bottom: 18px;
}
.sk-eyebrow .k { color: var(--skill); }
.sk-eyebrow a:hover { color: var(--ink); }
.sk-eyebrow i { font-style: normal; color: var(--line-2); }

.sk-title {
  font-size: clamp(33px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -.038em;
  font-weight: 600; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sk-title .verified svg { width: 20px; height: 20px; }
.sk-tagline { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 42rem; margin-top: 16px; }

/* the loudest element on the page: what you actually type to invoke it */
.sk-trigger { margin-top: 30px; padding-left: 20px; border-left: 2px solid var(--skill); max-width: 48rem; }
.sk-trigger .lab {
  display: block; font: 500 11px/1 var(--mono); text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-3); margin-bottom: 12px;
}
.sk-say {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(19px, 2.3vw, 29px); line-height: 1.34; letter-spacing: -.022em;
  color: var(--ink);
}
.sk-alt { font-size: 13.5px; color: var(--ink-3); margin-top: 12px; }
.sk-alt b { font-family: var(--mono); font-weight: 400; color: var(--ink-2); }

.sk-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.sk-acts .sep { width: 1px; height: 22px; background: var(--line); }
.sk-by { font-size: 13.5px; color: var(--ink-3); }
.sk-by a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.sk-by a:hover { color: var(--skill); border-color: var(--skill-line); }

/* ---------- fact bar ------------------------------------------------------ */
/* One hairline-ruled row, not four boxed tiles: a document states its facts in
   a line under the title. The first cell keeps a zero left padding so the bar
   starts on the same x as the breadcrumb and the masthead. */
.sk-facts {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--line); margin-bottom: 6px;
}
.sk-facts > div { padding: 14px 20px; border-left: 1px solid var(--line); min-width: 0; }
.sk-facts > div:first-child { border-left: 0; padding-left: 0; }
.sk-facts dt {
  font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink-3); margin-bottom: 9px;
}
.sk-facts dd { font-size: 14.5px; letter-spacing: -.012em; }
.sk-facts dd .num { font-size: 14.5px; }
.sk-facts .sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* ---------- reading layout ------------------------------------------------ */
/* rail | body — and every section inside the body is itself [prose|marginalia],
   which is what keeps a note beside the paragraph it belongs to. */
.sk-read { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 64px; align-items: start; }
.sk-read > * { min-width: 0; }

.sk-toc { position: sticky; top: calc(var(--nav-h) + 16px); padding-top: 34px; }
.sk-toc .spec { margin-bottom: 14px; }
.sk-toc ol { border-left: 1px solid var(--line); }
.sk-toc a {
  display: block; padding: 6px 0 6px 13px; margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 13px; line-height: 1.35; color: var(--ink-3); transition: color .12s, border-color .12s;
}
.sk-toc a:hover { color: var(--ink); }
.sk-toc a.on { color: var(--ink); font-weight: 550; border-left-color: var(--skill); }
.sk-toc .n { font: 400 10.5px/1 var(--mono); color: var(--ink-3); margin-right: 7px; }
.sk-toc a.on .n { color: var(--skill); }
/* The rail's own Install button: only exists once the rail is a strip.
   Qualified with `a` throughout because .sk-toc a above is (0,1,1) and would
   otherwise win on display, padding and colour — which is how a solid blue
   button ends up with --ink-3 grey lettering. */
.sk-toc a.sk-toc-cta { display: none; }

.sk-sec {
  display: grid; grid-template-columns: minmax(0, 780px) 240px;
  justify-content: space-between; gap: 48px;
  padding: 34px 0; border-top: 1px solid var(--line);
}
.sk-sec:first-child { border-top: 0; }
.sk-sec > * { min-width: 0; }

.sk-h { position: relative; font-size: 21px; letter-spacing: -.024em; margin-bottom: 16px; }
/* the section number hangs in the gutter between the rail and the measure —
   the same move as the line numbers on the sheet below.

   IT IS DRAWN BY A COUNTER AND IS NOT IN THE DOCUMENT, which is the point. It
   used to be a <span class="n">01</span> that skill.js wrote INSIDE the
   heading, so the heading's text was "01What it does" — no space, because the
   number is positioned into the gutter and never sat beside the words. That is
   the string a search result prints and a screen reader reads out, for an
   ornament that means nothing outside this column. A counter puts it on the
   page and leaves the heading saying what the section is called.

   The numbering is per section and in document order, which is exactly what
   the rail computes for its own list — measured: twelve sections on the page,
   twelve carrying data-toc, so the two counts cannot come apart. */
.sk-sec { counter-increment: sk-sec; }
.sk-h::before {
  content: counter(sk-sec, decimal-leading-zero);
  position: absolute; left: -48px; top: 4px; width: 34px; text-align: right;
  font: 400 12px/1 var(--mono); color: var(--ink-3); letter-spacing: 0;
}

/* ---------- prose --------------------------------------------------------- */
/* Larger and looser than the rest of the site: this column is read, not
   scanned, so it gets 16/1.62 against the 15/1.55 of every other page.

   --measure is the reading width, and it is set in rem rather than ch on
   purpose: `ch` is the width of a zero, and Instrument Sans has a wide one, so
   the 72ch the brief asks for measures 767px here — about 107 characters on a
   line, half again as long as anyone reads comfortably. 35rem is 560px, which
   is the ~76 characters that number was reaching for. Figures — the sheet, the
   cost bar, before/after — deliberately break the measure and run the full
   width of the column. */
.sk-prose { font-size: 16px; line-height: 1.62; --measure: 35rem; }
.sk-prose > p { max-width: var(--measure); color: var(--ink-2); }
.sk-prose > p + p { margin-top: 14px; }
.sk-prose b, .sk-prose strong { color: var(--ink); font-weight: 600; }
.sk-prose .lede { color: var(--ink); }
.sk-prose .after { margin-top: 20px; }

.sk-list { max-width: var(--measure); margin-top: 20px; display: grid; gap: 11px; }
.sk-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.sk-list li::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--skill); margin-top: 9px; }
.sk-list.minus li::before { width: 9px; height: 1px; border-radius: 0; background: var(--ink-3); margin-top: 12px; }

/* ---------- marginalia ---------------------------------------------------- */
/* No boxes: a rule, a mono label and small text. It reads as a note in the
   margin rather than as a second column of cards. */
.sk-note { border-top: 1px solid var(--line); padding-top: 13px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.sk-note + .sk-note { margin-top: 20px; }
.sk-note .spec { margin-bottom: 10px; }
.sk-note p + p { margin-top: 9px; }
.sk-note b { color: var(--ink-2); font-weight: 550; }
.sk-note .kvl { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); }
.sk-note .kvl:first-of-type { border-top: 0; }
/* a reference like sentinel-security/threat-model-sketch is 266px of mono with
   no natural break in it, and the margin is 240px wide on a desktop and 312 on
   a 360px phone. Give it somewhere to break rather than let it push the row
   past the gutter. */
.sk-note .kvl b { font-family: var(--mono); font-size: 12px; font-weight: 500; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.sk-note .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

/* ---------- the sheet: SKILL.md ------------------------------------------- */
/* Deliberately not .code. The install command is a terminal thing and stays on
   the dark panel; the skill is paper, because that is what it is — text a
   person can read before they install it. */
.sk-sheet { border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--surface); box-shadow: var(--sh1); overflow: hidden; }
.sk-sheet-h { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.sk-sheet-h .nm { font: 500 12.5px/1 var(--mono); letter-spacing: -.01em; }
.sk-sheet-h .sz { font: 400 11.5px/1 var(--mono); color: var(--ink-3); }
.sk-sheet-copy {
  width: 27px; height: 27px; display: grid; place-items: center; border-radius: 5px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); transition: .12s;
}
.sk-sheet-copy:hover { color: var(--ink); border-color: var(--line-2); }
.sk-sheet-copy svg { width: 14px; height: 14px; }

.sk-fm {
  padding: 13px 16px; background: var(--skill-soft); border-bottom: 1px solid var(--skill-line);
  font: 400 12.5px/1.72 var(--mono); color: var(--skill-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.sk-fm .d { color: var(--skill); opacity: .6; }
.sk-fm b { font-weight: 600; }

.sk-code { padding: 14px 16px 14px 0; font: 400 13px/1.75 var(--mono); color: var(--ink-2); }
.sk-l { display: grid; grid-template-columns: 54px minmax(0, 1fr); }
.sk-l .n {
  text-align: right; padding-right: 12px; border-right: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-3); user-select: none; -webkit-user-select: none;
}
.sk-l .t { padding-left: 15px; min-height: 1.75em; white-space: pre-wrap; overflow-wrap: anywhere; }
.sk-l .t .h { color: var(--ink); font-weight: 600; }
.sk-l .t .m { color: var(--ink-3); }
.sk-l .t .c { color: var(--skill-2); background: var(--skill-soft); border-radius: 3px; padding: 0 3px; }
.sk-l.over { display: none; }
.sk-sheet.open .sk-l.over { display: grid; }

.sk-more {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: 13px; font-weight: 500; color: var(--ink-2); transition: color .12s;
}
.sk-more:hover { color: var(--skill); }
.sk-more svg { width: 14px; height: 14px; transition: transform .18s; }
.sk-sheet.open .sk-more svg { transform: rotate(180deg); }

/* ---------- context cost -------------------------------------------------- */
.sk-cost { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); overflow: hidden; }
.sk-cost-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-cost-rows > div { padding: 15px 16px; border-left: 1px solid var(--line); }
.sk-cost-rows > div:first-child { border-left: 0; }
.sk-cost-rows .v { font: 600 20px/1 var(--mono); letter-spacing: -.03em; }
.sk-cost-rows .k { font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-top: 8px; }
.sk-cost-rows .s { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.45; }
.sk-cost-win { padding: 18px 16px 14px; border-top: 1px solid var(--line); }
.sk-win {
  position: relative; height: 26px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface-2); overflow: hidden;
}
.sk-win .fill { position: absolute; inset: 0 auto 0 0; background: var(--skill); min-width: 3px; }
.sk-win .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
/* labels are positioned, not spaced: 50k has to sit on the 25% tick, and
   space-between would put it a few pixels off */
.sk-scale { position: relative; height: 13px; margin-top: 8px; font: 400 11px/1 var(--mono); color: var(--ink-3); }
.sk-scale span { position: absolute; top: 0; white-space: nowrap; }
/* five absolutely-positioned labels need about 300px to stay apart; below that
   the interior ticks collide into unreadable strings, so drop them and keep
   the two that carry the meaning */
@media (max-width: 560px) {

  /* the contents strip is sticky under the header here, so an anchor from it
     has to clear both — measured at 51px */
  :root:has(.sk-toc) { --scroll-pad: calc(var(--nav-h) + 61px); }
  .sk-scale span:not(:first-child):not(:last-child) { display: none; }
  .sk-scale span:last-child { font-size: 10.5px; }
}
.sk-cost-note { font-size: 13px; color: var(--ink-2); margin-top: 13px; line-height: 1.55; max-width: 36rem; }

/* ---------- before / after ------------------------------------------------ */
.sk-ask {
  border-left: 2px solid var(--line-2); padding-left: 16px; margin-bottom: 18px;
  font: 400 15.5px/1.5 var(--mono); color: var(--ink); max-width: 40rem;
}
.sk-ask .lab {
  display: block; font: 500 10.5px/1 var(--mono); text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-3); margin-bottom: 10px;
}
.sk-ba {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden;
}
.sk-ba > div { background: var(--surface); padding: 17px 18px; }
.sk-ba .aft { box-shadow: inset 2px 0 0 var(--skill); }
.sk-ba .lab { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sk-ba .lab .t { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.sk-ba .aft .lab .t { color: var(--skill); }
.sk-ba p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.sk-ba .aft p { color: var(--ink); }

/* ---------- procedure ----------------------------------------------------- */
.sk-steps { border-top: 1px solid var(--line); max-width: 39rem; }
.sk-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 15px 0; border-bottom: 1px solid var(--line); }
.sk-steps .n { font: 500 12px/1.5 var(--mono); color: var(--skill); }
.sk-steps .t { font-size: 15.5px; font-weight: 600; letter-spacing: -.014em; }
.sk-steps .d { font-size: 14.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.55; }

/* ---------- servers it uses ----------------------------------------------- */
.sk-srv { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--line); }
.sk-srv:first-child { border-top: 0; }
.sk-srv .grow { display: block; min-width: 0; }
.sk-srv .nm { font-size: 15.5px; font-weight: 600; letter-spacing: -.014em; display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }
.sk-srv:hover .nm { color: var(--skill); }
.sk-srv .ds { display: block; font-size: 14px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.sk-srv .go { color: var(--ink-3); flex: none; margin-top: 10px; }
.sk-srv:hover .go { color: var(--skill); }
.sk-standalone { border: 1px dashed var(--line-2); border-radius: var(--r2); padding: 18px; max-width: 35rem; }
.sk-standalone p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.sk-standalone p + p { margin-top: 10px; }

/* ---------- bundle -------------------------------------------------------- */
/* The bundle is drawn as a card, so its rows need the card's own gutter: a
   file name flush against a 1px border and a size flush against the other one
   reads as an overflow rather than as a list. 14px matches .card-pad's optical
   inset at this type size, and the row separators run the full width inside it
   so the list still reads as one block. */
.sk-tree {
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface); max-width: 34rem;
  padding: 4px 14px;
}
.sk-tree li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font: 400 13px/1.4 var(--mono);
}
.sk-tree li:last-child { border-bottom: 0; }
.sk-tree .p { color: var(--ink); }
.sk-tree .p em { font-style: normal; color: var(--ink-3); }
/* leader dots, the same recipe as .rule-dot in core.css */
.sk-tree .dots {
  flex: 1 1 auto; height: 1px; align-self: center; min-width: 20px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 6px);
}
.sk-tree .b { color: var(--ink-3); flex: none; }

/* ---------- install ------------------------------------------------------- */
.sk-clients { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sk-cl {
  height: 29px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--ink-2); transition: .12s;
}
.sk-cl:hover { border-color: var(--line-2); color: var(--ink); }
.sk-cl.on { border-color: var(--skill); background: var(--skill-soft); color: var(--skill); }
.sk-compat {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden;
}
.sk-compat > div { display: flex; align-items: center; gap: 8px; padding: 11px 13px; background: var(--surface); font-size: 13px; }
.sk-compat svg { width: 14px; height: 14px; color: var(--skill); flex: none; }
.sk-compat .no { color: var(--ink-3); }
.sk-compat .no .dash { width: 9px; height: 1px; background: var(--line-2); flex: none; }

/* ---------- versions ------------------------------------------------------ */
.sk-ver { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding: 17px 0; border-top: 1px solid var(--line); max-width: 44rem; }
.sk-ver:first-child { border-top: 0; }
.sk-ver .vt { font: 500 13px/1 var(--mono); }
.sk-ver .vd { font: 400 11.5px/1 var(--mono); color: var(--ink-3); margin-top: 7px; }
.sk-ver ul { display: grid; gap: 7px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.sk-ver li { display: grid; grid-template-columns: 16px minmax(0, 1fr); }
.sk-ver li::before { content: '—'; color: var(--ink-3); }

/* ---------- reviews ------------------------------------------------------- */
.sk-score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.sk-score .v { font: 600 40px/1 var(--mono); letter-spacing: -.05em; }
.sk-rev { padding: 18px 0; border-top: 1px solid var(--line); max-width: 44rem; }
.sk-rev-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.sk-rev-h .a { font-size: 14.5px; font-weight: 600; letter-spacing: -.014em; }
.sk-rev-h .r { font-size: 12.5px; color: var(--ink-3); }
.sk-rev p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- author -------------------------------------------------------- */
.sk-auth { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); padding: 18px; max-width: 44rem; }
.sk-auth .grow { min-width: 0; }
.sk-auth .nm { font-size: 15.5px; font-weight: 600; letter-spacing: -.016em; display: inline-flex; align-items: center; gap: 7px; }
.sk-auth p { font-size: 14px; color: var(--ink-2); margin: 8px 0 12px; line-height: 1.55; }
/* minmax(0,1fr), not the default auto track: the ellipsised tagline inside each
   row is nowrap, and an auto track takes its min-content — which is the whole
   untruncated line — and pushes the page sideways at narrow widths */
.sk-more-skills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 18px; max-width: 44rem; }
.sk-more-skills a { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--ink-2); padding: 7px 0; border-top: 1px solid var(--line); }
.sk-more-skills a:hover { color: var(--skill); }
.sk-more-skills .mk { font: 500 11px/1 var(--mono); color: var(--ink-3); flex: none; width: 20px; }
.sk-more-skills .sn { flex: none; white-space: nowrap; }
.sk-more-skills .tg { flex: 1 1 auto; min-width: 0; color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- responsive ---------------------------------------------------- */
@media (max-width: 1240px) {
  .sk-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-facts > div:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .sk-facts > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 1120px) {
  /* the marginalia folds under the prose it annotates rather than squeezing
     the measure below reading width */
  .sk-read { grid-template-columns: 168px minmax(0, 1fr); gap: 40px; }
  .sk-sec { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sk-note { max-width: 35rem; }
  .sk-h::before { position: static; display: inline-block; width: auto; margin-right: 10px; text-align: left; }

  /* Folded under the prose the notes are no longer in a margin, and at 12.5px
     grey behind a hairline they read as more body copy — the last one in a
     section runs straight on into the next section's rule. A left rule sets the
     group off as an aside, which is the device the trigger and the ask already
     use on this page, so nothing new is introduced to say "not the argument". */
  .sk-marg:not(:empty) { border-left: 2px solid var(--line); padding-left: 16px; }
  .sk-marg .sk-note:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 900px) {
  /* the sticky nav is 60px and the contents strip sits under it: an anchor jump
     otherwise lands the heading behind the strip */
  html { scroll-padding-top: 118px; }
  /* the rail becomes a strip across the top: still a table of contents, but it
     no longer costs a fifth of the width */
  .sk-read { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sk-toc {
    position: sticky; top: var(--nav-h); z-index: 20; padding: 5px 0;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--line); margin-bottom: 6px;
  }
  .sk-toc .spec { display: none; }
  .sk-toc { display: flex; align-items: center; gap: 10px; }
  /* 40px, not 36: this is the only button in the strip and the strip is what a
     reader scrolling the document reaches for. .sk-toc a above wins on
     specificity, so the height has to be declared here rather than left to
     .btn-sm's own phone floor. */
  .sk-toc a.sk-toc-cta {
    display: inline-flex; flex: none; height: 40px; padding: 0 13px;
    color: #fff; border-bottom: 0; font-size: 13px; line-height: 1;
  }
  [data-theme="dark"] .sk-toc a.sk-toc-cta { color: #0B1020; }   /* matches .btn-skill */
  .sk-toc ol { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; overflow-x: auto; border-left: 0; scrollbar-width: none; }
  .sk-toc ol::-webkit-scrollbar { display: none; }
  /* 38px of link inside a 48px strip: the whole strip is shorter than the 51px
     it was, and each entry is finally big enough to hit while scrolling */
  .sk-toc a { border-left: 0; border-bottom: 2px solid transparent; padding: 10px 11px; white-space: nowrap; margin-left: 0; }
  .sk-toc a.on { border-bottom-color: var(--skill); }
  .sk-cost-rows { grid-template-columns: 1fr; }
  .sk-cost-rows > div { border-left: 0; border-top: 1px solid var(--line); }
  .sk-cost-rows > div:first-child { border-top: 0; }
  .sk-compat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sk-ba { grid-template-columns: minmax(0, 1fr); }
  .sk-ver { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 620px) {
  /* ---- the masthead, on the measure it is actually set in ----------------
     The title, the tagline and the trigger were all sized against a 780px
     measure. None of them is a shared class, so core.css's phone type scale
     never reached them and the page opened with a 33px headline over a 19px
     paragraph: two desktop sizes stacked on a 358px column. They step onto the
     shared scale — the title takes .display's clamp, the tagline takes .lead —
     and the quote keeps a size of its own, because "what you say to it" is the
     one line on this page that is meant to be louder than the prose.
     The vertical rhythm follows: 30px between masthead parts is a desk's air. */
  .sk-title { font-size: clamp(26px, 7.2vw, 32px); gap: 8px; }
  .sk-title .verified svg { width: 17px; height: 17px; }
  .sk-tagline { font-size: 14.5px; line-height: 1.5; margin-top: 12px; }
  .sk-say { font-size: 17px; line-height: 1.4; }
  .sk-alt { margin-top: 9px; }
  .sk-mast { padding-bottom: 20px; }
  .sk-trigger { margin-top: 20px; }
  .sk-acts { margin-top: 20px; gap: 10px; }
  .sk-eyebrow { margin-bottom: 13px; }
  /* nothing is fixed over the foot of this page, so the 72px it reserved is
     72px of paper between the last review and the footer */
  .sk-page { padding-bottom: 28px; }

  /* once the price and byline wrap to their own line the divider is left
     ending the button row, ruling a button off from nothing */
  .sk-acts .sep { display: none; }
  .sk-acts .btn-lg { flex: 1 1 150px; }

  /* ЦЕНА РЯДОМ СО ВТОРОЙ КНОПКОЙ — ТОЛЬКО КОГДА ЕЁ БОЛЬШЕ НИГДЕ НЕТ.
     На телефоне «$399» вставало справа от «Read it before you buy» и вылезало
     за край экрана, хотя ровно та же цифра уже написана на кнопке покупки
     строкой выше. Владелец прислал снимок 20 авг 2026.

     Условие, а не безусловное скрытие: цену в кнопку пишет только режим
     продажи — paintMast() в public/prod/skill.js ставит там «Buy the licence ·
     $399» и одновременно вешает на кнопку атрибут data-buy. Если скилл
     бесплатный, уже куплен или свой, кнопка говорит «Install this skill» и
     цены не несёт — тогда этот бейдж единственный, кто её называет, и убирать
     его нельзя. Поэтому спрашиваем именно про data-buy. */
  .sk-acts:has(#mastGo[data-buy]) #mastPrice { display: none; }

  /* Four levels of trail wrap to three lines and cost 71px before the title is
     reached. One line that scrolls sideways says the same thing in 47 — and it
     is the move the contents strip below already makes. */
  .sk-page .crumbs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: 14px 0; white-space: nowrap;
  }
  .sk-page .crumbs::-webkit-scrollbar { display: none; }
  .sk-page .crumbs > * { flex: none; }

  .sk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-facts > div { padding: 12px 14px; }
  .sk-facts > div:nth-child(3n+1) { border-left: 1px solid var(--line); padding-left: 14px; }
  .sk-facts > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sk-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  /* an odd number of facts leaves the last one beside a hole; it takes the row */
  .sk-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sk-trigger { padding-left: 14px; }
  .sk-l { grid-template-columns: 38px minmax(0, 1fr); }
  .sk-l .n { padding-right: 8px; }
  .sk-l .t { padding-left: 11px; }
  .sk-code { font-size: 12.5px; }
  .sk-auth { flex-direction: column; }
  .sk-sec { padding: 26px 0; }
  /* Folded under the prose the marginalia is the next paragraph, not a column
     beside one, so the 24px that separated two columns is now separating two
     paragraphs — and it is doing that twelve times down the page. The prose's
     own paragraph rhythm is 14px, and the left rule is what says "aside". */
  .sk-sec { gap: 16px; }
  .sk-h { margin-bottom: 12px; }
  .sk-list { margin-top: 15px; gap: 9px; }
  .sk-prose .after { margin-top: 15px; }
  .sk-note + .sk-note { margin-top: 14px; }

  /* ---- thumb-sized controls ----
     Every one of these was drawn against a mouse pointer: 27–29px squares and
     chips. Nothing about them changes but the box they answer to. */
  /* Twelve clients wrapped to five rows — 160px at 390px and 202px at 320px —
     sitting between the Install heading and the command the reader came for.
     One line that scrolls sideways is the phone form of a tab strip and the
     form server.html's install card and the section index on stack.html both
     take: the chosen client is first, the cut-off next tab says there are
     more, and the strip costs 42px at every width. */
  .sk-cl { flex: none; height: 34px; padding: 0 11px; font-size: 13px; scroll-snap-align: start; }
  .sk-clients {
    flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .sk-clients::-webkit-scrollbar { display: none; }
  .sk-sheet-copy { width: 36px; height: 36px; margin-right: -6px; }
  .sk-page .code-copy { width: 36px; height: 36px; top: 4px; right: 4px; }
  .sk-page .code { padding-right: 52px; }
  /* the expander under the sheet is the only control in the block, and 14px of
     padding around a 13px line made it 50px — taller than the page's own
     Install button. It takes the 40px a page action takes here, which is what
     it is: the way to read the rest of the product. */
  .sk-more { min-height: 40px; padding: 9px 11px; }
  .sk-more-skills a { padding: 12px 0; }

  /* 40px of mono for one rating. It is the section's opening figure, not the
     page's headline — and the page's headline is 28px four screens above it. */
  .sk-score .v { font-size: 24px; letter-spacing: -.04em; }
  .sk-score { gap: 10px; }
}

/* ---------- buying a paid skill -------------------------------------------
   Takes the install slot until the licence exists. A listing with a price that
   hands out its install command to anyone is not selling anything. */
.sk-buy {
  margin-top: 18px; padding: 18px;
  border: 1px solid var(--skill-line); border-radius: var(--r3);
  background: var(--skill-soft);
}
.sk-buy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sk-buy-price { font-size: 30px; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.sk-buy-price small { font-size: 13px; letter-spacing: 0; color: var(--ink-3); margin-left: 4px; }
.sk-buy-rows { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--skill-line); }
.sk-buy-rows .kv { border-top-color: var(--skill-line); }
.sk-buy-note { margin-top: 14px; max-width: 74ch; }
.sk-buy-acts { gap: 10px; margin-top: 16px; align-items: center; }

.sk-owned {
  margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--accent-line); border-radius: var(--r3);
  background: var(--accent-soft);
}
@media (max-width: 620px) {
  .sk-buy { padding: 14px; }
  .sk-buy-acts .btn { flex: 1 1 auto; min-height: 40px; }
  /* "$39" is the fact the panel exists to state, not the headline of the page
     — and at 30px it was larger than the title of the skill it prices. 24px
     keeps it the biggest thing inside the panel, which is the whole job. */
  .sk-buy-price { font-size: 24px; letter-spacing: -.035em; }
  .sk-buy-head { gap: 10px; }
  .sk-buy-rows { margin-top: 12px; }
  .sk-buy-note { margin-top: 11px; }
  .sk-buy-acts { margin-top: 13px; }
}

/* ---------- the purchase confirmation ------------------------------------- */
.sk-confirm-box { max-width: 520px; }
.sk-confirm-rows { margin-top: 16px; padding-top: 2px; border-top: 1px solid var(--line); }
.sk-confirm-rows .kv .v { font-family: var(--sans); font-size: 13px; }
@media (max-width: 620px) {
  /* a sheet at phone width, with the confirming button reachable without
     scrolling past the summary */
  /* a sheet rises from the bottom edge, so the centring margins come off */
  .sk-confirm.cmp-back { padding: 0; align-items: flex-end; }
  .sk-confirm.cmp-back > .cmp { margin: 0; }
  .sk-confirm-box { max-width: none; width: 100%; border-radius: var(--r3) var(--r3) 0 0; }
  .sk-confirm-box .btn { min-height: 40px; }
}

/* ---------- the 12px floor -------------------------------------------------
   core.css raises the shared micro-labels — .spec, .badge, .grade, .tbl th —
   to 12px at phone width. This page defines its own: an eyebrow, a fact-bar
   term, the label over the trigger, the scale under the context bar. They are
   set in a `font:` shorthand higher up, so a later font-size is the only thing
   that reaches them — hence the block at the end of the file rather than
   inside the 620px section above. Ten labels, none of them decoration: each
   one names the number or the paragraph beside it.

   The line numbers on the sheet are in the list for the same reason a page
   number is: they are what a reader quotes back. Nothing else changes — same
   mono, same caps, same tracking, same desktop sizes. */
@media (max-width: 620px) {
  .sk-eyebrow,
  .sk-trigger .lab,
  .sk-facts dt,
  .sk-toc .n,
  .sk-sheet-h .sz,
  .sk-l .n,
  .sk-cost-rows .k,
  .sk-scale,
  .sk-scale span,
  .sk-ask .lab,
  .sk-ba .lab .t,
  .sk-ver .vd,
  .sk-more-skills .mk { font-size: 12px; }
  /* the scale row was 13px tall to hold an 11px label */
  .sk-scale { height: 15px; }
  /* the mark column has to hold two digits at the new size */
  .sk-more-skills .mk { width: 24px; }
}
@media (max-width: 560px) {
  /* the interior ticks are already dropped at this width; the last one keeps
     the floor rather than shrinking to make room it no longer needs */
  .sk-scale span:last-child { font-size: 12px; }
}