/* Mindprint — global shell. Tokens live in tokens.css (verbatim from design-system). */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--mp-black);
  color: var(--mp-ink);
  font-family: var(--mp-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mp-pink); text-decoration: none; }
a:hover { color: var(--mp-pink-soft); }

/* ── The phone's text-field floor ────────────────────────────────────────
   iOS zooms the whole viewport the moment a focused text field computes under
   16px, and what the reader gets back after pinching out is never quite the page
   they started on. Disabling zoom would fix it and fail WCAG 1.4.4, so instead
   every typable field meets the platform's floor on a phone and the chrome around
   it keeps its own scale. `!important` is deliberate and is the reason this rule
   can live in one place: the component sheets size their fields by class, which
   outranks any selector that can name "every input" — this is a floor, not a
   style, and the sheets stay free to say what they like above it.

   Only the controls a phone actually types into are named. A select or a date
   opens a picker rather than a keyboard, never triggers the zoom, and would only
   have its own layouts stretched for nothing. */
@media (max-width: 700px) {
  input:is(
    [type="text"], [type="search"], [type="email"], [type="tel"],
    [type="url"], [type="password"], [type="number"], :not([type])
  ),
  textarea { font-size: 16px !important; }
}

.micro {
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mp-mute);
}

/* The centred single-column shell. It was the Phase-6 landing splash; the real
   landing now lives in landing.css, and what still wants this is the one page
   that is deliberately nothing but a sentence and a way back — /Error. */
.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}

/* With the bar above it the splash must stop short of it, or the page scrolls
   by exactly the height of the chrome. */
.landing.has-bar { min-height: calc(100vh - var(--admin-bar-h, 66px)); }

.landing .wordmark {
  margin: 0;
  line-height: 0;
}

/* The mark carries the brand gradient itself; capped at its native 500px so it never upscales. */
.landing .wordmark img {
  width: clamp(240px, 46vw, 500px);
  height: auto;
}

/* ── Dev directory ────────────────────────────────────────────────────────
   A development-only list of every surface that exists, now sitting BELOW
   the real landing (both A/B arms) rather than instead of it. It survives
   because half of what it names is operator and ops chrome that no public
   nav will ever carry, and the alternative to a list is remembering URLs.
   ─────────────────────────────────────────────────────────────────────── */

.devdir {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  text-align: center;
  border-top: 1px solid var(--mp-line);
}

.devdir-head,
.devdir-foot {
  margin: 0;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
  color: var(--mp-mute);
}

.devdir-foot {
  margin-top: 14px;
  letter-spacing: .1em;
  color: var(--mp-line-soft);
}

.landing .lede {
  margin: 0;
  max-width: 62ch;
  font-family: var(--mp-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--mp-mute);
}

.landing .lede b { color: var(--mp-dim); font-weight: 400; }

.deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 860px;
  margin: 10px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.deck a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-card);
  background: var(--mp-surface);
  color: var(--mp-ink);
  transition: border-color .15s, background .15s, transform .15s;
}

.deck a:hover {
  border-color: var(--mp-pink);
  background: var(--mp-raise);
  color: var(--mp-ink);
  transform: translateY(-1px);
}

.deck .k {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 9.5px;
  color: var(--mp-mute);
}

.deck .t {
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
}

.deck a:hover .t { color: var(--mp-pink); }

.deck .d {
  font-family: var(--mp-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--mp-mute);
}

.landing .foot {
  margin: 6px 0 0;
  font-family: var(--mp-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mp-line-soft);
}

@media (prefers-reduced-motion: reduce) {
  .deck a { transition: none; }
  .deck a:hover { transform: none; }
}

/* Text only a screen reader gets — a live region's announcement, a label a visual
   control makes redundant. Lived in auth.css until the pattern browser needed it too
   (2026-08-03); it is a site-wide utility, and this is the sheet every page loads. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}