/* /kit/: the downloads page and the two rendered documents. Page-local; tokens and theme.css classes only.
   Phone first: base = 375 px, then 768 and 1100. */

/* ---------- page head (index and documents) ---------- */
.kit-head { padding-block: var(--space-4); border-bottom: var(--rule-w) solid var(--rule); }
.kit-head__in { display: flex; flex-direction: column; gap: var(--space-3); }
.kit-head .kick a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } /* a standalone link: 44 px tap target */
.kit-head .kick a:hover { text-decoration: underline; }
.kit-head .btn-row { margin-top: var(--space-1); }
@media (min-width: 768px) { .kit-head { padding-block: var(--space-5); } }

/* a short note set off by a rule: the honesty lines (candidate for theme.css) */
.kit-note { margin: 0; padding-left: var(--space-2); border-left: 3px solid var(--ink); color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 38em; }

/* ---------- index: the two items ---------- */
.kit-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 900px) { .kit-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
.kit-item { height: 100%; }
.kit-item .btn-row { margin-top: auto; padding-top: var(--space-1); }
.kit-files { list-style: none; margin: 0; padding: var(--space-2) 0 0; border-top: var(--rule-w) solid var(--rule-soft); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.kit-files li { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }

/* ---------- document layout: contents rail + text ---------- */
.kit-layout { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-4) var(--band-pad); }
.kit-toc { display: none; }
@media (min-width: 1100px) {
  .kit-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); align-items: start; padding-top: var(--space-5); }
  .kit-toc { display: block; position: sticky; top: 88px; }
  .kit-toc ol { list-style: none; margin: var(--space-2) 0 0; padding: 0; border-top: var(--rule-w) solid var(--rule); }
  .kit-toc li { border-bottom: var(--rule-w) solid var(--rule-soft); }
  .kit-toc a { display: flex; align-items: center; min-height: 40px; padding-block: 6px; font-size: 14px; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
  .kit-toc a:hover { color: var(--ink); text-decoration: underline; }
}

/* ---------- rendered Markdown (candidate for theme.css as a .prose component) ---------- */
.kit-doc { min-width: 0; max-width: 46em; }
.kit-doc > * { margin: 0 0 var(--space-2); }
.kit-doc p, .kit-doc li { color: var(--ink-2); }
.kit-doc h2 {
  margin: var(--space-5) 0 var(--space-2); padding-top: var(--space-2);
  border-top: var(--rule-w) solid var(--rule);
  font-family: var(--font-display); font-weight: var(--w-head); font-size: var(--fs-h2);
  letter-spacing: var(--track-head); line-height: 1.15; color: var(--ink); text-wrap: balance;
}
.kit-doc > h2:first-child { margin-top: 0; }
.kit-doc h3 { margin: var(--space-4) 0 var(--space-1); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.kit-doc ul, .kit-doc ol { padding-left: 1.3em; }
.kit-doc li + li { margin-top: 8px; }
.kit-doc a { color: var(--ink); }
.kit-doc strong { color: var(--ink); font-weight: 600; }
.kit-doc code { font-family: var(--font-mono); font-size: .84em; padding: .08em .3em; border-radius: var(--radius-mark); box-shadow: inset 0 0 0 1px var(--rule-soft); overflow-wrap: anywhere; }
.kit-doc pre {
  margin: 0 0 var(--space-3); padding: var(--space-2); overflow-x: auto;
  border: var(--rule-w) solid var(--rule-soft); border-radius: var(--radius); background: var(--surface);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--ink);
}
.kit-doc pre code { padding: 0; box-shadow: none; font-size: inherit; overflow-wrap: normal; }
.kit-doc blockquote {
  margin: 0 0 var(--space-3); padding: 12px var(--space-2);
  border-left: 3px solid var(--ink); background: var(--paper-2);
  font-size: 15px; line-height: 1.5;
}
.kit-doc blockquote p { margin: 0; color: var(--ink-2); }
.kit-doc hr { border: 0; border-top: var(--rule-w) solid var(--rule); margin: var(--space-5) 0 0; }
.kit-doc hr + h2 { margin-top: var(--space-2); border-top: 0; }
.kit-ph { color: var(--ink-3); }
.kit-table { overflow-x: auto; margin: 0 0 var(--space-3); }
.kit-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.kit-table th, .kit-table td { padding: 10px 14px 10px 0; text-align: left; vertical-align: top; border-bottom: var(--rule-w) solid var(--rule-soft); }
.kit-table th {
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-label);
  letter-spacing: var(--track-label); text-transform: var(--case-label); color: var(--ink-3);
  border-bottom-color: var(--rule); white-space: nowrap;
}
.kit-table tbody tr:first-child td { border-top: var(--rule-w) solid var(--rule); }
/* key/value tables: the first column is a row header (set by tools/build-kit.sh) */
.kit-table th[scope="row"] { border-bottom-color: var(--rule-soft); white-space: normal; padding-top: 12px; }
.kit-table tbody tr:first-child th[scope="row"] { border-top: var(--rule-w) solid var(--rule); }
.kit-table thead + tbody tr:first-child td { border-top: 0; }
.kit-table td { color: var(--ink-2); min-width: 7em; }
.kit-table td:empty::after { content: '\00a0'; }

/* ---------- Apple look ---------- */
html[data-look="apple"] .kit-head { border-bottom: 0; background: var(--paper-2); }
html[data-look="apple"] .kit-note { border-left-color: var(--rule); }
html[data-look="apple"] .kit-doc blockquote { border-left: 0; border-radius: var(--radius); }
html[data-look="apple"] .kit-doc h2 { border-top-color: var(--rule-soft); }
html[data-look="apple"] .kit-files { border-top-color: var(--rule-soft); }