/* Tetsu Corp docs (docs.html). */

.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding-top: 36px; align-items: start; }
.toc { position: sticky; top: calc(var(--head-h) + 20px); display: grid; gap: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 700 11px/1 var(--font-num); color: var(--coral-deep); }
html[data-theme='night'] .toc a::before { color: var(--coral); }
.toc a:hover { background: var(--paper-2); color: var(--ink); }
.doc { min-width: 0; max-width: 78ch; }
.doc-head { display: grid; gap: 16px; justify-items: start; margin-bottom: 18px; }
.doc section { padding-top: 34px; scroll-margin-top: calc(var(--head-h) + 16px); }
.doc h2 { font: 400 clamp(24px, 3.2vw, 32px)/1.1 var(--font-display); text-transform: uppercase; padding-bottom: 10px; border-bottom: 2px solid var(--line); margin-bottom: 14px; }
.doc h3 { font: 700 18px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; margin: 20px 0 8px; }
.doc p, .doc li { color: var(--ink-2); }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.doc li::marker { color: var(--coral); font-weight: 700; }
.doc code { font: 700 0.86em/1 var(--font-num); background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 5px; padding: 2px 6px; }
.table-wrap { overflow-x: auto; border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--cel-s); background: var(--card); margin-top: 12px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.ptable th { text-align: left; font: 700 11px/1.2 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 12px; border-bottom: 2px solid var(--line); background: var(--paper-2); white-space: nowrap; }
.ptable td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable td:first-child { display: flex; align-items: center; gap: 10px; }
.ptable td:first-child b { font: 400 14px/1 var(--font-display); }
.ptable td:first-child small { color: var(--muted); }
.ptable .num { font-weight: 700; }
@media (max-width: 640px) {
  .table-wrap { overflow: visible; }
  .ptable, .ptable tbody { display: block; }
  .ptable { min-width: 0; font-size: 13px; }
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ptable tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
  .ptable tbody tr:last-child { border-bottom: 0; }
  .ptable td { padding: 0; border: 0; white-space: normal; }
  .ptable td:first-child { grid-column: 1 / 3; min-width: 0; }
  .ptable td:first-child small { display: block; margin-top: 3px; }
  .ptable td:nth-child(2) { grid-column: 3; align-self: center; text-align: right; font-size: 15px; }
  .ptable td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 3px; font: 700 10px/1.2 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
}
.clist { display: grid; gap: 8px; margin-top: 12px; }
.clist a { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; min-height: 48px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); text-decoration: none; box-shadow: var(--cel-s); }
.clist a:hover { color: var(--ink); background: var(--paper-2); }
.clist b { font-weight: 700; }
.clist small { display: block; color: var(--muted); font-weight: 500; }
.clist span.go { font: 700 12px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral-deep); }
html[data-theme='night'] .clist span.go { color: var(--coral); }
@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: 10px; padding-top: 0; }
  /* a phone keeps the contents as a sticky row of chips under the header */
  .toc { position: sticky; top: var(--head-h); z-index: 30; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter); background: var(--paper); border-bottom: 2px solid var(--line); }
  .toc > :not(ol) { display: none; }
  .toc ol { display: flex; grid-template-columns: none; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .toc a { min-height: 40px; white-space: nowrap; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); padding: 0 14px; scroll-snap-align: start; }
  .doc section { scroll-margin-top: calc(var(--head-h) + 76px); }
  .doc-head .ep { display: none; }
  .doc-head { padding-top: 18px; }
}

/* the archive: the library banner under the manual's title */
.doc-art { margin: 24px 0 0; border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--cel); background: #07080b; }
.doc-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
@media (max-width: 700px) { .doc-art img { aspect-ratio: 2 / 1; object-position: 62% 50%; } }