/* The registry's public surfaces (issue #2.20).

   A file rather than a `<style>` block, and that is a CSP requirement rather than a
   preference: the read path's policy is `default-src 'self'` with no `style-src`
   exception, so an inline block is refused and the page renders unstyled. The hall's
   templates carry zero inline style blocks for the same reason, and #217's finder page
   already links `/tokens.css` — these pages were the outlier.

   Loaded alongside `/tokens.css`, which carries the design system; this file is only
   the layout these two pages need. Nothing third-party, nothing inline
   (public-hall-page §2's read-path rules). */

/* --- homepage.html --- */
:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; margin: 0; line-height: 1.55; }
main { max-width: 54rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
header.hero { padding: 3rem 1.25rem 2rem; text-align: center; }
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 .5rem; }
.lede { font-size: 1.15rem; opacity: .85; margin: 0 auto; max-width: 38rem; }
.paths { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
         margin: 2.5rem 0; }
.path { border: 1px solid #8886; padding: 1.1rem 1.2rem; }
.path h2 { margin-top: 0; font-size: 1.1rem; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
         list-style: none; padding: 0; }
.card { border: 1px solid #8886; padding: 1rem 1.1rem; }
.card h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.meta { opacity: .8; font-size: .92rem; margin: .1rem 0; }
.counts { font-variant-numeric: tabular-nums; margin-top: .6rem; }
.empty { border: 1px dashed #8886; padding: 1.2rem; }
.seam { border: 1px dashed #8886; padding: 1rem 1.1rem; opacity: .85; font-size: .95rem; }
.slot { font-style: italic; opacity: .7; }
footer { border-top: 1px solid #8886; margin-top: 3rem; padding: 1.5rem 1.25rem; font-size: .9rem; }
/* --- demo.html --- */
:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; margin: 0; line-height: 1.55; }
main { max-width: 48rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.fictional { border: 1px solid #8886; padding: 1rem 1.1rem; font-weight: 600; }
.seam { border: 1px dashed #8886; padding: 1rem 1.1rem; opacity: .85; }
.slot { font-style: italic; opacity: .7; }
section { margin-top: 2rem; }

/* --- the ZIP finder's one control (homepage.html) --- */

/* `form`, `button` and `.error` rules lived here for `/demo`'s sandbox-request form,
   which the owner ruled out of this issue (#133, 2026-08-21). Removed with it: there is
   no form and no button on any public page now — §7.3 forbids a form on the finder,
   because a form is a thing that transmits and the typed ZIP never leaves the browser.
   The label and input remain because the finder has exactly one of each. */
label { display: block; margin-top: .9rem; font-weight: 600; }
input { width: 100%; padding: .5rem; margin-top: .25rem; font-size: 1rem;
        font-family: inherit; }

/* --- §7.5's 44px mobile targets (all three public pages) --- */

/* §7.5 names "44px mobile targets" beside visible focus and AA contrast. Applied to the
   things a visitor actually aims at — navigation, standalone calls to action, and form
   controls — and deliberately **not** to a link inside a sentence, where a 44px line box
   would tear the prose apart. `p > a:only-child` is the precise expression of "this link
   is the whole paragraph", which is what every CTA on these pages is.

   `inline-flex` grows the hit area around the text instead of shifting the baseline, so
   the target gets bigger without the type moving. Measured in the e2e suite at a 390px
   viewport rather than asserted against this file: the number that matters is the
   rendered rectangle, and a rule that lands on the wrong element still reads correctly
   here. That test is what caught these at 20px. */
nav a,
p > a:only-child,
button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

input,
select,
textarea {
  min-height: 44px;
  box-sizing: border-box;
}

/* The masthead is a row of targets; without spacing, 44px boxes sit edge to edge and a
   near-miss lands on the neighbour rather than on nothing. */
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  justify-content: center;
}