/* ============================================================
   COMPONENTS — plate, button, field, badge, eyebrow, meta, plate-field.
   Radius 0 everywhere; one hard cast; one accent per view.
   Values ported from the design-system component references.
   ============================================================ */

/* ---- the plate: 1px ink edge, hairline inset, one hard cast ---- */
.plate {
  position: relative;
  background: var(--surface-page);
  border: var(--line) solid var(--rule-strong);
  box-shadow: var(--cast);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.plate::before {
  content: "";
  position: absolute;
  inset: var(--plate-inset);
  border: var(--hair) solid var(--rule);
  pointer-events: none;
}
.plate--raised { background: var(--surface-raised); }
.plate--sm { box-shadow: var(--cast-sm); }
.plate--deep { box-shadow: var(--cast-deep); }
.plate--flush { padding: 0; }
.plate img { border-radius: var(--radius); }

/* ---- button (.btn / --solid --outline --ghost) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-weight: var(--wt-med);
  font-size: var(--step--1);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-button);
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: var(--line) solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.7em 1.3em;
  box-shadow: var(--cast-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur) var(--step-ease),
              color var(--dur) var(--step-ease),
              border-color var(--dur) var(--step-ease);
}
.btn--sm { padding: 0.5em 1em; font-size: var(--step--2); }
/* --accent-pressed, not --accent: the label on this ground is --paper, and
   paper on the raw pigment measures 3.45:1 on bistre and 4.13:1 on verdigris.
   The 80% mix is the same accent pressed a shade into the ink — 4.52 / 6.54 /
   9.20 / 5.13 / 6.93:1 — which is what a pressed state should read like. */
.btn:hover { background: var(--accent-pressed); border-color: var(--accent-pressed); color: var(--paper); }
.btn:active { transform: translate(1px, 1px); }
.btn--outline { background: transparent; color: var(--text-strong); }
.btn--outline:hover { background: var(--ink-12); border-color: var(--rule-strong); color: var(--text-strong); }
.btn--ghost { background: transparent; color: var(--text-muted); border-color: transparent; box-shadow: none; }
.btn--ghost:hover { background: transparent; color: var(--text-strong); }
/* disabled tone from the ramp, never opacity (the invariant) — mirrors the
   .subscribe__form.loading treatment in screen.css */
.btn[disabled], .btn:disabled {
  background: var(--ink-30);
  color: var(--text-faint);
  border-color: var(--ink-30);
  box-shadow: none;
  cursor: not-allowed;
}
.btn__glyph { line-height: 1; }

/* ---- field (input / textarea) ---- */
.field-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.field-label > span:first-child {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}
.field {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--text-strong);
  background: var(--surface-raised);
  border: var(--line) solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.55em 0.7em;
  outline: none;
}
.field::placeholder { color: var(--text-faint); font-style: italic; }
.field:focus { box-shadow: inset 0 0 0 1px var(--ink); }
.field:disabled { background: var(--surface-well); }
.field--error { border-color: var(--accent); }
.field-hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  color: var(--text-faint);
}
.field-error {
  font-family: var(--font-serif);
  font-style: italic;
  /* an error message is the one accent word a reader MUST be able to read */
  color: var(--accent-text);
}
.field--mono {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.5;
  resize: vertical;
}

/* ---- range: a square burin on a hairline track (no radius, hard shadow) ---- */
.field-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 1rem;
  margin: 0.2rem 0;
  background: transparent;
}
.field-range::-webkit-slider-runnable-track { height: var(--line); background: var(--rule-strong); }
.field-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: calc(var(--line) / 2 - 0.425rem);
  background: var(--ink);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--cast-sm);
  cursor: pointer;
}
.field-range::-moz-range-track { height: var(--line); background: var(--rule-strong); }
.field-range::-moz-range-thumb {
  width: 0.85rem;
  height: 0.85rem;
  background: var(--ink);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--cast-sm);
  cursor: pointer;
}
.field-range:focus-visible { outline: var(--line) solid var(--ink); outline-offset: 2px; }

/* ---- checkbox row (mono register) ---- */
.field-check {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  cursor: pointer;
}
.field-check input {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: var(--ink);
}

/* ---- eyebrow: mono, tracked, with a drawn leading hairline ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-weight: var(--wt-med);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--text-muted);
}
.eyebrow__rule {
  flex: none;
  width: 1.7rem;
  height: var(--hair);
  background: var(--ink);
}

/* ---- badge (tones: outline default, solid, accent, quiet) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-weight: var(--wt-med);
  font-size: var(--step--2);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-strong);
  background: transparent;
  border: var(--line) solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.4em 0.6em;
}
.badge--solid { background: var(--ink); color: var(--paper); }
/* the WORD takes --accent-text (§ Members is --step--2 mono, and raw sanguine
   reads 3.45:1 on bistre's paper); the FRAME around it is a rule, so it keeps
   the pigment — which also holds the two apart the way a printed tag does */
.badge--accent { color: var(--accent-text); border-color: var(--accent); }
.badge--quiet { color: var(--text-faint); border-color: var(--rule); }

/* ---- post meta row (mono register) ---- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-faint);
}
.post-meta__register { color: var(--text-muted); }
/* The separator rides the row's own faint ink. It used to sit two steps below
   it at ink-30 (1.76–2.39:1), which was defensible while it was decoration
   among decoration; once the row lifted to the floor a dot that pale stopped
   reading as a lighter tone and started reading as a rendering fault — the
   fields either side of it are ink-70 and it had vanished between them. */
.post-meta__sep { color: inherit; }

/* ---- plate field (WebGL mount + CSS .tr-* fallback on the container) ---- */
.plate-field {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* background-COLOR, not the shorthand: the .tr-* treatment on this same element
     is the no-WebGL impression, and it lives in background-image. The shorthand
     loads later than tokens/treatments.css and would reset it to none, leaving a
     blank sheet wherever a GL context can't be had (headless capture, old
     hardware, blocked WebGL) — which .plate-field.is-live already assumes is the
     case, since it clears the hatch only once the engine has actually mounted. */
  background-color: var(--paper);
}
.plate-field--square { aspect-ratio: 1 / 1; }
.plate-field--wide { aspect-ratio: 16 / 9; }
.plate-field--hero { aspect-ratio: 4 / 5; }
.plate-field--framed { border: var(--line) solid var(--rule-strong); }
.plate-field__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* once the WebGL engine has mounted, the CSS hatch fallback is redundant */
.plate-field.is-live { background-image: none; }