/* Gamutlock public site — the component layer.
 *
 * The mockups render design-system components through `<x-import>`, which a design-tool runtime
 * resolves at view time. A shipped static site cannot carry that runtime (69 KB of it, for eight
 * components), so this file is the same components as plain CSS against the SAME tokens.
 *
 * ⚠️ EVERY value here is a token from tokens.css. Nothing is a literal. That is the rule that keeps
 * this file and the design system from drifting: if a colour or a size is not in the token file, it
 * does not belong on the page, and a missing token should be added THERE and used here — never
 * inlined as a hex or a pixel count.
 */

/* ── page ──────────────────────────────────────────────────────────────────── */

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

/* The `hidden` attribute is a PLATFORM INVARIANT, and an author `display` silently revokes it.
 * The UA stylesheet's `[hidden] { display: none }` sits in the user-agent origin, which loses to
 * ANY author declaration of `display` regardless of specificity — so a layout class as ordinary as
 * `.sent { display: flex }` makes a hidden element render. It is not a specificity problem, so a
 * more specific selector is not the fix; the next `display`-bearing class re-breaks it. The
 * `!important` here is the point rather than a patch: nothing a layout class says may override
 * "this element is not present". Same rule ships in normalize.css and HTML5 Boilerplate.
 *
 * This is the ONLY `!important` in the site's CSS. Adding a second one is almost certainly a
 * specificity problem wearing this one's clothes. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--role-body-size);
  line-height: var(--role-body-leading);
}

a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

/* Never remove the outline — replace it. A keyboard user has no other way to know where they are. */
:where(a, button, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* ── Button ────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.btn:active { transform: var(--press-sink); }

.btn--sm { height: var(--control-height-sm); padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--lg { height: var(--control-height-lg); padding: 0 var(--space-5); font-size: var(--text-md); }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--surface-accent);
  border-color: var(--surface-accent-border);
  color: var(--on-accent);
}
.btn--primary:hover { background: var(--surface-accent-hover); color: var(--on-accent); }

.btn--secondary {
  background: var(--surface-card);
  border-color: var(--border-default);
  color: var(--text-primary);
}
.btn--secondary:hover { border-color: var(--border-strong); color: var(--text-primary); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover { background: var(--surface-inset); color: var(--text-primary); }

/* "ink" is the header's high-contrast call to action — it sits on the band, not on the page. */
.btn--ink {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--text-inverse);
}
.btn--ink:hover { background: var(--band-dark); border-color: var(--band-dark); }

/* ── Field · Input · Textarea · Select ─────────────────────────────────────── */

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--role-label-face);
  font-size: var(--role-label-size);
  font-weight: var(--role-label-weight);
  letter-spacing: var(--role-label-track);
  text-transform: var(--role-label-case);
  color: var(--text-secondary);
}

.field__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* A refusal names the field it refuses. Colour is never the only carrier — the sentence is. */
.field__error {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--untrusted-ink);
}

.input, .textarea, .select {
  display: block;
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.textarea { min-height: calc(var(--control-height-md) * 3); resize: vertical; }
.select { appearance: none; padding-right: var(--space-8); cursor: pointer; }

.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--untrusted-border); }

/* ── CodeSpecimen ──────────────────────────────────────────────────────────── */

/* A real JABCode render on its quiet zone. NEVER a decorative or drawn code: a decorative barcode
 * is a provenance lie, and a real one is a live surface that has to keep resolving. */
.specimen {
  display: block;
  background: var(--white);
  padding: var(--quiet-md);
  border: var(--reg-hair) solid var(--border-hair);
}
.specimen img { display: block; width: 100%; height: auto; image-rendering: pixelated; }

.specimen__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
.specimen__meta dt {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.specimen__meta dd { margin: 0; word-break: break-all; }

/* ── layout helpers the mockups use inline ─────────────────────────────────── */

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--gutter);
  min-height: 60px;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__brand { font-weight: var(--weight-bold); font-size: var(--text-xl); letter-spacing: var(--track-tight); }
.site-header nav { display: flex; gap: var(--space-6); flex: 1; justify-content: flex-end; min-width: 0; }
.site-header nav a { font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; }
.site-header nav a:hover { color: var(--text-primary); }

.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-10) var(--gutter);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.site-footer p { margin: 0 0 var(--space-2); }

/* ── responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .site-header { gap: var(--space-3); }
  .site-header nav { gap: var(--space-4); }
}