/* Shared HTML shell and documentation. Values come from the brand tokens. */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-wrap: anywhere; font-size: var(--type-body-size); line-height: var(--type-body-line); }
a, a:visited { color: var(--hold-ink); text-underline-offset: var(--space-1); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: var(--space-1); }
code, pre { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
code { font-size: var(--type-small-size); }
p { margin: var(--space-4) 0; }
h1, h2, h3, h4 { text-wrap: balance; }
h1 { margin: 0; font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); }
h2 { font-size: var(--type-title-size); line-height: var(--type-title-line); letter-spacing: var(--type-title-tracking); }
h3 { font-size: var(--type-heading-size); line-height: var(--type-heading-line); letter-spacing: var(--type-heading-tracking); }
h4 { margin: var(--space-6) 0 var(--space-2); font-size: var(--type-body-size); }
[id] { scroll-margin-top: calc(var(--space-12) * 3); }
.ho-shell { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--space-4); }
.ho-topbar { border-bottom: 1px solid var(--line); background: var(--paper); z-index: 2; }
.ho-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-4); }
.ho-logo { flex: none; }
.ho-logo img { display: block; max-width: 100%; height: auto; }
.ho-topbar nav { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--type-small-size); font-weight: var(--type-heading-weight); }
.ho-topbar nav a { color: var(--ink); text-decoration: none; }
.ho-topbar nav a:hover { text-decoration: underline; }
main.ho-shell { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.ho-footer { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.ho-footer .ho-board-note { font-size: var(--type-small-size); line-height: var(--type-small-line); }
.ho-skip { position: absolute; top: var(--space-4); left: var(--space-4); transform: translateY(-200%); z-index: 3; background: var(--surface); padding: var(--space-3); border-radius: var(--radius-sm); }
.ho-skip:focus { transform: none; }
.ho-legal-page main { max-width: 808px; }
.ho-legal-page main > .ho-board { margin-top: var(--space-8); }
.ho-legal-page h2 { margin-top: var(--space-8); font-size: var(--type-heading-size); line-height: var(--type-heading-line); }
.ho-board-scroll { min-width: 0; max-width: 100%; }
.ho-board-scroll table { width: 100%; }
.ho-board-scroll th { padding-top: var(--space-3); }
.ho-board-scroll td { padding-block: var(--space-3); }
.ho-doc-hero { padding-bottom: var(--space-12); }
.ho-eyebrow { color: var(--ink-muted); font-size: var(--type-label-size); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); text-transform: uppercase; margin: 0 0 var(--space-3); }
.ho-lead { font-size: var(--type-heading-size); line-height: var(--type-heading-line); }
.ho-facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0; padding: 0; }
.ho-facts li, .ho-price, .ho-method { border: 1px solid var(--line); background: var(--surface); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--type-small-size); line-height: var(--type-small-line); }
.ho-meaning { border-left: var(--space-1) solid var(--hold-ink); padding: var(--space-4) var(--space-6); background: var(--surface); border-radius: var(--radius-sm); max-width: 80ch; }
.ho-meaning p { margin: 0; }
.ho-doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.ho-doc-content { min-width: 0; }
.ho-doc-content > .ho-board { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--space-12); }
.ho-doc-content > .ho-board > h2 { font-size: var(--type-title-size); line-height: var(--type-title-line); letter-spacing: var(--type-title-tracking); }
.ho-sidebar { display: none; }
.ho-mobile-toc { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); background: var(--surface); }
summary { cursor: pointer; font-weight: var(--type-heading-weight); }
.ho-toc-group { margin-bottom: var(--space-4); }
.ho-toc-group p { font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--type-label-tracking); margin: 0 0 var(--space-2); }
.ho-toc-group ul { margin: 0; padding: 0; list-style: none; }
.ho-toc-group a { display: block; padding: var(--space-1) 0; font-size: var(--type-small-size); line-height: var(--type-small-line); color: var(--ink); text-decoration: none; }
.ho-toc-group a:hover { color: var(--hold-ink); text-decoration: underline; }
.ho-mobile-toc nav { margin-top: var(--space-6); }
.ho-steps { padding-left: var(--space-6); }
.ho-steps > li { padding-left: var(--space-2); margin-bottom: var(--space-6); }
.ho-steps > li::marker { font-family: var(--font-mono); color: var(--hold-ink); font-weight: var(--type-data-weight); }
.ho-steps h3 { margin: var(--space-6) 0 var(--space-2); }
.ho-steps p { margin-top: var(--space-2); }
.ho-examples { min-width: 0; margin: var(--space-6) 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.ho-examples legend { padding-inline: var(--space-2); font-weight: var(--type-heading-weight); }
.ho-example-choice { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ho-examples label { display: inline-block; padding: var(--space-2) var(--space-3); margin-right: var(--space-1); border: 1px solid var(--ink-muted); border-radius: var(--radius-sm); font-size: var(--type-small-size); cursor: pointer; }
.ho-example-choice:checked + label { background: var(--hold-ink); color: var(--on-hold); border-color: var(--hold-ink); }
.ho-example-choice:focus-visible + label { outline: 2px solid var(--ink); outline-offset: var(--space-1); }
.ho-example-panel { display: none; }
#example-curl:checked ~ #example-curl-panel, #example-python:checked ~ #example-python-panel, #example-typescript:checked ~ #example-typescript-panel { display: block; }
.ho-example-panel h3 { font-size: var(--type-body-size); line-height: var(--type-body-line); margin: var(--space-6) 0 var(--space-2); }
.ho-example-panel .ho-board-scroll { max-height: calc(var(--space-12) * 10); overflow: auto; margin-top: var(--space-2); }
pre { margin: 0; padding: var(--space-4); background: var(--surface); overflow-wrap: normal; }
pre code { font-size: var(--type-data-small-size); line-height: var(--type-data-small-line); }
.ho-endpoint { min-width: 0; margin-top: var(--space-6); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ho-endpoint-heading { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ho-endpoint-heading h3 { min-width: 0; margin: 0; flex: 1 1 50%; }
.ho-endpoint-heading h3 code { font-size: var(--type-data-size); }
.ho-method { color: var(--hold-ink); border-color: var(--ink-muted); border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: var(--type-data-weight); }
.ho-price { font-family: var(--font-mono); }
.ho-endpoint-purpose { color: var(--ink-muted); }
.ho-endpoint th, .ho-endpoint td, #status-codes th, #status-codes td { white-space: normal; vertical-align: top; }
.ho-endpoint tbody th, #status-codes tbody th { border-top: 1px solid var(--line); text-transform: none; letter-spacing: normal; color: var(--ink); }
.ho-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3) var(--space-4); font-size: var(--type-small-size); line-height: var(--type-small-line); }
.ho-fields dt { font-weight: var(--type-data-weight); }
.ho-fields dd { margin: 0; color: var(--ink-muted); }
.ho-timeline, .ho-payment-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-6) 0; }
.ho-timeline li { border-top: var(--space-1) solid var(--hold-ink); padding-top: var(--space-3); }
.ho-timeline span, .ho-payment-flow span, .ho-payment-flow code { display: block; margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--type-small-size); line-height: var(--type-small-line); }
.ho-payment-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); counter-reset: payment; }
.ho-payment-flow li { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); background: var(--surface); counter-increment: payment; }
.ho-payment-flow li::before { content: counter(payment, decimal-leading-zero); display: block; color: var(--hold-ink); font-family: var(--font-mono); margin-bottom: var(--space-2); }
#confidence td:nth-child(-n+5) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ho-reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.ho-reference-grid article { padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ho-reference-grid h3 { margin: 0; }
@media (min-width: 1000px) {
  .ho-topbar { position: sticky; top: 0; }
  .ho-doc-layout { grid-template-columns: 240px minmax(0, 760px); gap: var(--space-12); }
  .ho-sidebar { display: block; position: sticky; top: calc(var(--space-12) * 2); max-height: calc(100vh - var(--space-12) * 3); overflow-y: auto; padding: var(--space-1); }
  .ho-mobile-toc { display: none; }
}
@media (max-width: 599px) {
  h1 { font-size: var(--type-title-size); line-height: var(--type-title-line); }
  .ho-topbar-inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .ho-topbar nav { gap: var(--space-3); }
  main.ho-shell { padding-top: var(--space-8); }
  .ho-doc-hero { padding-bottom: var(--space-8); }
  .ho-doc-content > .ho-board > h2 { font-size: var(--type-heading-size); line-height: var(--type-heading-line); }
  .ho-endpoint, .ho-meaning, .ho-legal-page .ho-board { padding: var(--space-4); }
  .ho-examples { padding: var(--space-3); }
  .ho-fields { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .ho-fields dd { margin-bottom: var(--space-3); }
  .ho-timeline { gap: var(--space-2); }
  .ho-timeline strong { font-size: var(--type-small-size); line-height: var(--type-small-line); display: block; }
  .ho-payment-flow, .ho-reference-grid { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .ho-sidebar, .ho-mobile-toc, .ho-examples label, .ho-example-choice { display: none; }
  .ho-topbar { position: static; }
  .ho-doc-layout { display: block; }
  .ho-example-panel { display: block; }
  .ho-example-panel .ho-board-scroll { max-height: none; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* Claude review: the 7-column confidence table fits the content column on desktop; it still scrolls inside its box on phones. */
#confidence .ho-board-scroll table { font-size: var(--type-small-size); line-height: var(--type-small-line); }
#confidence .ho-board-scroll table { overflow-wrap: normal; }
#confidence .ho-board-scroll th, #confidence .ho-board-scroll td { white-space: nowrap; padding-inline: var(--space-2); }
#confidence .ho-board-scroll th { white-space: normal; }
#confidence .ho-board-scroll td:last-child { white-space: normal; }