/* Toolkit index (Juno 2026-10-04). Colors from theme tokens only, so it works in every theme. */
.sec-toolkit { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sec-toolkit .tk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sec-toolkit .section-kicker { color: var(--purple); }
.tk-count { font: 400 .95rem/1.4 var(--font-sans); color: var(--ink-soft); margin: .2rem 0 0; }
.tk-controls { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.tk-filter { display: flex; align-items: center; border: 2px solid var(--ink); background: var(--card); }
.tk-filter-label { font: 700 .66rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase;
  padding: .62rem .6rem; background: var(--ink); color: var(--paper); }
.tk-filter input { border: 0; background: transparent; color: var(--ink); font: 400 .9rem/1 var(--font-sans); padding: .55rem .7rem; width: 15rem; outline: none; }
.tk-filter:focus-within { box-shadow: 3px 3px 0 var(--pink); }
.tk-lanes { display: inline-flex; border: 2px solid var(--ink); }
.tk-lanes button { font: 700 .7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase;
  padding: .66rem .7rem; border: 0; background: var(--card); color: var(--ink); cursor: pointer; }
.tk-lanes button + button { border-left: 2px solid var(--ink); }
.tk-lanes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tk-lanes button:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

.tk-index { columns: 4; column-gap: 1.6rem; column-rule: 1px solid var(--rule); border: 2px solid var(--ink); background: var(--card);
  padding: .8rem .9rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* One continuous index flowing across columns, so it balances itself as the shelf grows. */
.tk-col { min-width: 0; margin-bottom: 1.1rem; }
.tk-col-head, .tk-group { break-after: avoid; break-inside: avoid; }
.tk-list li { break-inside: avoid; }
.tk-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: 0 0 .5rem; padding-top: 0; padding-bottom: .4rem;
  border-color: var(--tk-accent, var(--ink)); font-family: inherit; font-size: .72rem; font-weight: 700; line-height: 1.2; width: 100%; background: none; border-width: 0 0 2px; border-style: solid; text-align: left; padding-left: 0; padding-right: 0; cursor: default; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.tk-col-head .tk-n { margin-left: auto; color: var(--ink-soft); font-weight: 400; letter-spacing: .04em; }
.tk-col--tpl-a { --tk-accent: var(--pink); }
.tk-col--tpl-b { --tk-accent: var(--orange); }
.tk-col--howto { --tk-accent: var(--teal); }
.tk-col--kit { --tk-accent: var(--purple); }
.tk-group { margin: .55rem 0 .15rem; font-family: inherit; font-size: .62rem; font-weight: 700; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--tk-accent, var(--ink-soft)); }
.tk-list { list-style: none; margin: 0; padding: 0; }
.tk-list li { border-bottom: 1px dotted var(--rule); }
.tk-list a { display: flex; gap: .45rem; align-items: baseline; padding: .24rem .1rem; text-decoration: none; color: var(--ink);
  font-family: inherit; font-size: .78rem; line-height: 1.3; white-space: nowrap; }
.tk-list a .tk-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.tk-list a .tk-i { color: var(--ink-soft); font-size: .68rem; flex: none; width: 1.6rem; }
.tk-list a .tk-lv { flex: none; font-size: .6rem; letter-spacing: .08em; color: var(--ink-soft); border: 1px solid var(--rule); padding: .05rem .25rem; }
.tk-list a:hover, .tk-list a:focus-visible { background: var(--paper-deep); outline: none; }
.tk-list a:hover .tk-t, .tk-list a:focus-visible .tk-t { text-decoration: underline; text-decoration-color: var(--tk-accent, var(--pink)); text-underline-offset: 2px; }
.tk-list li[hidden], .tk-list[hidden], .tk-group[hidden] { display: none !important; }
.tk-col-foot { margin: .6rem 0 0; font-family: inherit; font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.tk-col-foot a { color: var(--ink); text-decoration-color: var(--tk-accent, var(--pink)); }
.tk-empty { font: 400 .92rem/1.4 var(--font-sans); color: var(--ink-soft); margin: .8rem 0 0; }
.tk-fallback { padding: 1rem; margin: 0; font-family: var(--font-sans); }

/* Row reveal: a quick typewriter-ish stagger on first view. Off for reduced motion. */
.tk-index.is-pending .tk-list li { opacity: 0; transform: translateY(3px); }
.tk-index.is-in .tk-list li { opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; transition-delay: calc(var(--i, 0) * 12ms); }
@media (prefers-reduced-motion: reduce) {
  .tk-index.is-pending .tk-list li, .tk-index.is-in .tk-list li { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1100px) { .tk-index { columns: 3; } }
@media (max-width: 900px) { .tk-index { columns: 2; } }
@media (max-width: 720px) {
  .tk-head { align-items: stretch; } .tk-controls { width: 100%; } .tk-filter { flex: 1 1 100%; } .tk-filter input { width: 100%; min-width: 0; }
  .tk-lanes { flex: 1 1 100%; } .tk-lanes button { flex: 1; }
  .tk-index { columns: 1; padding: 0; } .tk-col { margin: 0; padding: .7rem .8rem; } .tk-col + .tk-col { border-top: 1px solid var(--rule); }
  .tk-col:not(.is-open) .tk-list, .tk-col:not(.is-open) .tk-group, .tk-col:not(.is-open) .tk-col-foot { display: none; }
  .tk-col-head { cursor: pointer; margin-bottom: 0; } .tk-col.is-open .tk-col-head { margin-bottom: .5rem; }
  .tk-col-head::after { content: "+"; font-weight: 700; margin-left: .5rem; } .tk-col.is-open .tk-col-head::after { content: "–"; }
  .tk-index.is-filtering .tk-col .tk-list, .tk-index.is-filtering .tk-col .tk-group { display: block; }
}