/* ==========================================================================
   THE QUANTUM CLUB API · property layer over house-kit.css
   Load AFTER house-kit.css. Prefix ax-. Kit tokens only. No inline styles,
   no inline handlers. Source of the fingerprinted /assets/api.<hash>.css:
   edit this file, then run `node scripts/build-web-assets.mjs`.
   ========================================================================== */

/* Late-font shift: Inter is preloaded but, on a slow link, lands after first
   paint (about 1.3 s on Slow 4G) and its swap moved the first screen (CLS
   0.0256 at 390 px). Until it arrives, text draws in Arial sized to Inter's
   metrics, the kit's own pattern for Instrument Serif. Values computed from the
   two font files; where Arial is missing, the kit's system-ui follows. */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");size-adjust:106.27%;ascent-override:91.16%;descent-override:22.7%;line-gap-override:0%}
:root{--qc-font-body:"Inter","Inter Fallback",system-ui,-apple-system,sans-serif}

/* Front-page headline rule (same as MCP's "Where agents ascend."): 60px from
   768px (the kit's own step), 40px with 1.05 leading below. */
@media (max-width:767.98px){.ax-hero .hk-title{font-size:2.5rem;line-height:1.05}.ax-hero .hk-lede{font-size:1.0625rem}}
.ax-hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.ax-hero .hk-title{max-width:22ch}
.ax-hero .hk-lede{margin-inline:auto;max-width:39rem;color:var(--qc-text-75)}

/* Nothing a person must read below 12px (MCP's type floor). */
.hk-page :is(.hk-kicker,.hk-micro,.hk-badge,.hk-code__lang,.hk-table thead th){font-size:.75rem}
/* Contrast: axe runs with every rule on, AAA included (7:1). The kit's kicker
   (sand at 70%, 6.08:1) and table cells (6.24:1) sit just under it here. */
.hk-page .ax-head .hk-kicker{color:var(--qc-sand)}
.hk-page .ax-table td{color:var(--qc-text-body)}
/* The paths table is the kit's card table: below 640px each row is a card and
   each cell prints its column name (data-label) above the value. The kit draws
   that label in --qc-text-meta, under 7:1 here; sand, like the kickers. */
.hk-page .ax-table td::before{color:var(--qc-sand)}

/* The base URL field. */
.ax-endpoint{margin-top:2rem;margin-inline:auto}
.ax-endpoint__val{display:flex;align-items:center;min-width:0}
.ax-endpoint__label{display:none}
@media (min-width:640px){.ax-endpoint__label{display:inline;margin-inline-end:.875rem;padding-inline-end:.875rem;border-inline-end:1px solid var(--qc-hairline-strong);font-family:var(--qc-font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--qc-sand)}}
@media (max-width:639.98px){
  .hk-endpoint.ax-endpoint{width:100%;border-radius:20px}
  .ax-endpoint__label{display:block;margin-bottom:.25rem;font-family:var(--qc-font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--qc-sand)}
  .ax-endpoint__val{display:block;text-align:start}
}

.ax-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem;margin-top:1.75rem}
.ax-section .ax-links{justify-content:flex-start}
.ax-hint{margin-top:.75rem;max-width:39rem;text-wrap:balance}
.ax-section{margin-top:3.5rem}
@media (min-width:768px){.ax-section{margin-top:4.5rem}}
.ax-head{max-width:44rem}
.ax-head .hk-body+.hk-body{margin-top:1rem}
.ax-head+.hk-stats{margin-top:2rem}
/* The kit's stats grid is three across from 640px, and an empty cell shows its
   hairline background as a grey block. A short last row spans the gap. */
@media (min-width:640px){.ax-section .hk-stat:last-child:nth-child(3n+2){grid-column:span 2}.ax-section .hk-stat:last-child:nth-child(3n+1){grid-column:1/-1}}
.ax-pair{display:grid;gap:1rem;margin-top:2rem}
@media (min-width:768px){.ax-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ax-card{padding:1.5rem;border-radius:16px;box-shadow:inset 0 0 0 1px var(--qc-hairline)}
.ax-card .hk-h3{margin:0}
.ax-card p{margin-top:.5rem}
.ax-note{margin-top:1.25rem}
.ax-section .hk-code{margin-top:1.5rem}
/* The paths table sat flush on the second code block (gap 0). */
.ax-section .hk-code+.hk-table-wrap{margin-top:1.5rem}
.ax-section pre{white-space:pre-wrap;overflow-wrap:anywhere}
/* WCAG 1.4.10: a long URN or URL in running text breaks anywhere rather than
   making the page scroll sideways at 320 px. */
.hk-page :not(pre)>code{overflow-wrap:anywhere}
.ax-table code{font-family:var(--qc-font-mono);font-size:.8125rem;overflow-wrap:anywhere}

/* Footer at AAA (7:1): the kit's heads (sand at 70%), tagline and links sit at 5.6–6:1.
   Same specificity as the kit's base rules, so its hover and focus colours still win. */
.hk-foot__head{color:var(--qc-sand)}
.hk-foot__tagline,.hk-foot__col a{color:var(--qc-text-high)}

/* Focus: the kit shows focus on text links and quiet buttons by colour and
   underline only. Here they also get an outline (outside the text, so it never
   covers it). Specificity sits above the kit's (0,2,1) rule; forced-colours
   mode still swaps the colour for Highlight. */
.hk-page .hk-body a:focus-visible,.hk-page .hk-btn--quiet:focus-visible,.hk-nav .hk-nav__quiet:focus-visible{outline:var(--qc-focus-w) solid var(--qc-focus-edge);outline-offset:3px}

/* The status dot: hollow while nothing is confirmed (status's convention). */
.hk-dot--ring{background:transparent;box-shadow:inset 0 0 0 1.5px var(--st,var(--qc-st-unknown))}
.hk-foot--cinema.ax-foot--bare{padding-top:clamp(5rem,9vw,8rem)}

/* The 404 page. */
.ax-err{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:2rem 4rem}

@media print{
  .hk-nav,.hk-foot,.hk-copy,.hk-skip,.hk-ambient{display:none!important}
  .ax-section{break-inside:avoid}
}