/* PadSeat pages (/padseat/ and /padseat/docs/). Loaded after site.css; uses its tokens, section modes and header/footer.
   Light-only like the other studio pages (color-scheme: only light), so forced dark cannot recolour it. */
.ps-cover { display: grid; gap: 36px; }
.ps-cover .phed { max-width: none; }
.ps-shot { margin: 0; }
.ps-shot img { width: 100%; border: 1px solid var(--rule-d); border-radius: 4px; background: #121416; }
.ps-shot figcaption { margin-top: 10px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--mute-d); }
@media (min-width: 1024px) { .ps-cover { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; gap: 56px; } }

.fab-soon { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1.5px dashed var(--mute-d); border-radius: 4px;
  font-family: var(--mono); font-size: 14px; font-weight: 500; color: #D9D8D3; }
.opener .acts .btns { align-items: center; }

/* what it fixes */
.ps-two { display: grid; gap: 28px 56px; margin-top: 34px; }
@media (min-width: 900px) { .ps-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ps-two p + p { margin-top: 12px; }
.ps-two p { max-width: 62ch; }
.ps-cmp { display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.ps-cmp div { padding: 12px 0 13px; border-bottom: 1px solid var(--rule); }
.ps-cmp dt { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--signal-ink); }
.ps-cmp dd { margin-top: 3px; font-size: 15.5px; line-height: 1.45; }

.ps-feat { display: grid; gap: 0 48px; margin-top: 34px; border-top: 1.5px solid var(--ink); }
.ps-feat div { padding: 12px 0 13px; border-bottom: 1px solid var(--rule); }
.ps-feat dt { font-family: var(--display); font-stretch: 90%; font-weight: 680; font-size: 17px; line-height: 1.25; }
.ps-feat dd { margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--mute); }
@media (min-width: 800px) { .ps-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* gallery */
.ps-gal { display: grid; gap: 28px; margin-top: 34px; }
.ps-gal figure { margin: 0; }
.ps-gal figure img { width: 100%; border: 1px solid var(--rule-d); border-radius: 4px; background: #121416; }
.ps-gal figcaption { margin-top: 10px; }
.ps-gal figcaption .co { color: var(--on-dark); }
.ps-gal .wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .ps-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; } }
.ps-note { margin-top: 26px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; max-width: 80ch; }

/* requirements and steps */
.ps-reqsteps { display: grid; gap: 44px 64px; margin-top: 34px; }
@media (min-width: 1000px) { .ps-reqsteps { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.ps-steps { counter-reset: s; border-top: 1.5px solid var(--ink); }
.ps-steps li { counter-increment: s; position: relative; padding: 14px 0 15px 54px; border-bottom: 1px solid var(--rule); max-width: 70ch; }
.ps-steps li::before { content: counter(s); position: absolute; left: 0; top: 8px; font-family: var(--display); font-stretch: 70%; font-weight: 800; font-size: 40px; line-height: 1; color: var(--signal-ink); }
.ps-steps code, .ps-doc code, .ps-limits code, .ps-table code, .ps-list code { font-family: var(--mono); font-size: .86em; background: rgba(19, 21, 20, .07); padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere; }

/* tables (scroll inside their own box, never the page) */
.ps-table { margin-top: 28px; overflow-x: auto; border-top: 1.5px solid var(--ink); -webkit-overflow-scrolling: touch; }
.ps-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; min-width: 560px; }
.ps-table th { text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--mute); padding: 9px 14px 9px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; vertical-align: bottom; }
.ps-table td { padding: 10px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ps-table td:first-child { font-weight: 650; }
.ps-table td:last-child, .ps-table th:last-child { padding-right: 0; }
.ps-list { margin-top: 24px; display: grid; gap: 10px; max-width: 74ch; }
.ps-list li { position: relative; padding-left: 20px; }
.ps-list li::before { content: ""; position: absolute; left: 0; top: .66em; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); }

/* limits */
.ps-limits { margin-top: 30px; display: grid; gap: 0 56px; border-top: 1.5px solid var(--ink); }
.ps-limits li { padding: 13px 0 14px; border-bottom: 1px solid var(--rule); max-width: 70ch; }
.ps-limits strong { font-weight: 700; }
@media (min-width: 1000px) { .ps-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-limits li { max-width: none; } }
.ps-tested { margin-top: 30px; padding: 18px 20px 20px; border: 1.5px solid var(--ink); border-radius: 4px; max-width: 92ch; background: var(--white); }
.ps-tested .ps-table { margin-top: 16px; }
.ps-tested .ps-table table { min-width: 520px; }
.ps-tested .soft { margin-top: 12px; font-size: 14px; color: var(--mute); }
.ps-tested .h3 { margin-bottom: 6px; }

/* docs call-out and contact */
.ps-tiles { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 700px) { .ps-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ps-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ps-tiles a { display: block; padding: 16px 18px 18px; border: 1.5px solid var(--ink); border-radius: 4px; text-decoration: none; background: var(--white); }
.ps-tiles a:hover { background: var(--ink); color: var(--on-dark); }
.ps-tiles b { display: block; font-family: var(--display); font-stretch: 90%; font-weight: 700; font-size: 19px; line-height: 1.2; }
.ps-tiles span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.4; color: var(--mute); }
.ps-tiles a:hover span { color: var(--mute-d); }
.ps-end { display: grid; gap: 28px 56px; margin-top: 30px; }
@media (min-width: 900px) { .ps-end { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ps-end p { max-width: 60ch; }
.ps-end p + p { margin-top: 10px; }
.ps-end a { text-decoration-color: var(--signal); }

/* docs page */
.ps-docbody { display: grid; gap: 28px 64px; margin-top: 8px; }
.ps-toc { font-size: 14.5px; }
.ps-toc a { display: block; padding: 6px 0; text-decoration: none; border-bottom: 1px solid var(--rule); }
.ps-toc a:hover { color: var(--signal-ink); }
.ps-toc .lab { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--mute); margin-bottom: 6px; }
.ps-toc--m { border: 1.5px solid var(--ink); border-radius: 4px; padding: 0 16px; }
.ps-toc--m summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; }
.ps-toc--m[open] summary { margin-bottom: 4px; }
.ps-toc--d { display: none; }
@media (min-width: 1100px) {
  .ps-docbody { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .ps-toc--m { display: none; }
  .ps-toc--d { display: block; position: sticky; top: 20px; }
}
.ps-doc { min-width: 0; }
.ps-doc h2 { font-family: var(--display); font-stretch: 90%; font-weight: 720; font-size: clamp(28px, 1.6vw + 20px, 44px); line-height: 1.05; letter-spacing: -.012em; margin: clamp(40px, 5vw, 64px) 0 14px; padding-top: 12px; border-top: 1.5px solid var(--ink); text-wrap: balance; scroll-margin-top: 16px; }
.ps-doc h2:first-child { margin-top: 0; }
.ps-doc h3 { font-family: var(--display); font-stretch: 90%; font-weight: 680; font-size: 21px; line-height: 1.2; margin: 30px 0 8px; scroll-margin-top: 16px; }
.ps-doc p { margin-top: 12px; max-width: 74ch; }
.ps-doc ul, .ps-doc ol { margin-top: 12px; display: grid; gap: 8px; max-width: 76ch; }
.ps-doc ul > li { position: relative; padding-left: 20px; }
.ps-doc ul > li::before { content: ""; position: absolute; left: 0; top: .66em; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.ps-doc ol { counter-reset: n; }
.ps-doc ol > li { counter-increment: n; position: relative; padding-left: 32px; }
.ps-doc ol > li::before { content: counter(n); position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 500; color: var(--signal-ink); }
.ps-doc li > ul, .ps-doc li > ol { margin-top: 8px; }
.ps-doc .ps-table { margin-top: 16px; }
.ps-doc .ps-table table { min-width: 520px; }
.ps-doc .ps-table td, .ps-doc .ps-table th { padding-right: 16px; }
.ps-doc pre { margin: 16px 0 0; padding: 14px 16px; background: var(--graphite); color: var(--on-dark); border-radius: 4px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
.ps-doc pre code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
.ps-doc .note { margin-top: 14px; padding: 12px 16px; border-left: 4px solid var(--signal); background: var(--paper); max-width: 76ch; }
.ps-doc .note p { margin-top: 0; }
.ps-doc a { text-decoration-color: var(--signal); }

/* doc figures (screens from the sample maps) */
.ps-figs { display: grid; gap: 16px; margin-top: 16px; max-width: 76ch; }
@media (min-width: 700px) { .ps-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-figs:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } }
.ps-fig { margin: 0; min-width: 0; }
.ps-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-d); border-radius: 4px; background: #121416; }
.ps-fig figcaption { margin-top: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--mute); }

/* phones: each table row becomes a labelled block instead of a sideways scroll */
@media (max-width: 699px) {
  .ps-table { overflow: visible; }
  .ps-table table, .ps-doc .ps-table table, .ps-tested .ps-table table { min-width: 0; display: block; }
  .ps-table thead { display: none; }
  .ps-table tbody, .ps-table tr, .ps-table td { display: block; }
  .ps-table tr { padding: 10px 0 12px; border-bottom: 1px solid var(--rule); }
  .ps-table td, .ps-doc .ps-table td { padding: 4px 0 0; border-bottom: 0; }
  .ps-table td:first-child { padding-top: 0; }
  .ps-table td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--mute); margin-bottom: 1px; }
}