/* ==========================================================================
   forms.css — the states the drawings do not have

   Loaded site-wide by the served pages, after mtg.css. Same arrangement as
   dashboard.css: additive only. If a rule here fights one in mtg.css, the rule
   in mtg.css is the one to change.

   Why this file exists at all: every form in maximus/ is a prototype that
   stores nothing, so no form there has ever rejected a value. The served site's
   forms do — a wrong password, a taken email address, an expired CSRF token, a
   rate limit. Those states need somewhere to render, and inventing them inside
   mtg.css would mean editing the design system to describe a server behaviour.

   Colours come from the existing custom properties rather than new literals, so
   both themes are handled by the tokens that already switch.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip link

   Visible only when focused. A keyboard user reaching a page with a masthead,
   a hero and seven tiles should not have to tab through all of it to reach the
   thing they came for.
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--gold);
  color: var(--night);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Field-level errors

   The message sits under the input it belongs to and is wired to it with
   aria-describedby in the markup, so a screen reader reaches the reason rather
   than only the fact that something is wrong.

   Crimson is used here because it is this design system's semantic colour for
   risk and refusal, which is exactly what a rejected field is.
   -------------------------------------------------------------------------- */
.field .err {
  font-size: .8rem;
  color: var(--imperial);
  margin: 0;
}

.field-bad input,
.field-bad select,
.field-bad textarea {
  border-color: var(--imperial);
}

.field-bad input:focus,
.field-bad select:focus,
.field-bad textarea:focus {
  border-color: var(--imperial);
  outline: 2px solid color-mix(in srgb, var(--imperial) 35%, transparent);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Form-level messages

   For things that belong to the submission rather than to one field: an
   expired form, a rate limit, a saved confirmation.
   -------------------------------------------------------------------------- */
.alert {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin: 0 0 1.25rem;
  font-size: .9rem;
  background: var(--surface);
}

.alert-bad {
  border-left-color: var(--imperial);
  color: var(--ink);
}

.alert-ok {
  border-left-color: var(--gold);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Legal and long-form prose

   terms.html and privacy.html carry these rules in a page-local <style> block,
   which the server lifts into the head. They are repeated here so that a page
   rendered from TypeScript — the contact page's note column, for instance —
   gets the same numbered headings without needing its own copy.
   -------------------------------------------------------------------------- */
.legal h2 {
  margin-top: 2.5rem;
  font-size: 1.35rem;
}

.legal h2 .n {
  color: var(--gold);
  font-family: var(--mono);
  font-size: .85em;
  margin-right: .5rem;
}

.legal ul {
  color: var(--ink-soft);
  padding-left: 1.2rem;
}

.legal li {
  margin-bottom: .4rem;
}