/*
  The signing page. The visual language is variant A of the prototype (#21),
  which is the one the venue chose; the prototype chrome — the scenario bar, the
  variant switcher, the state drawer — is gone.

  Two rules here are legal rather than aesthetic, and both come from Va. Code
  § 59.1-486(c), which makes a record unenforceable against a guest whose
  ability to print or store it was inhibited — unconditionally, with no
  predicate law required:

    * Nothing sets `user-select: none`, blocks the context menu, or hides text
      behind a canvas. The document is selectable, copyable, printable text.
    * The document flows down the page instead of sitting in a scroll box, so
      Print from the browser menu produces the whole agreement rather than the
      one screenful that happened to be visible.

  Touch targets are sized for a guest holding a phone in a lobby queue and for
  a shared tablet at the door: nothing interactive is under 44px tall.
*/

:root {
  --ink: #f3ebe1;
  --ink-dim: #d9cbb8;
  --ink-faint: #a2947f;
  --ground: #1a1714;
  --ground-raised: #221c18;
  --ground-quiet: #241e19;
  --rule: #3a3128;
  --accent: #c45c26;
  --accent-ink: #ffffff;
  --ok: #2f4a2a;
  --ok-ink: #d7f0cc;
  --warn: #5a1f12;
  --warn-ink: #ffd7c8;
  --paper: #f7f0e6;

  --sans: Outfit, "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

.shell {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.5rem 1.1rem 3rem;
}

.shell-wide {
  max-width: 36rem;
}

.card {
  display: flow-root;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 7vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0.2rem 0 0.75rem;
}

h2 {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.2;
  margin: 1.4rem 0 0.4rem;
}

p {
  margin: 0 0 0.85rem;
}

.lede {
  color: var(--ink-dim);
  margin-bottom: 1.2rem;
}

.kicker,
.step-count,
.field-label,
.minor-index {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.3rem;
}

.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  margin-bottom: 0.5rem;
}

.step-header .step-count {
  margin: 0;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.5rem 0 1.2rem;
}

/* Fields */

.field {
  margin: 0 0 1rem;
}

.field input,
.select {
  display: block;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 0.7rem;
  background: var(--ground-raised);
  border: 1px solid #6a5c4d;
  border-radius: 2px;
  color: var(--ink);
}

.field input:focus-visible,
.select:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.field input[disabled] {
  opacity: 0.45;
}

.field-hint {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0.4rem 0 0;
}

/* Shared tablet attract screen: centered, with every text size scaled by 1.3. */
.tablet-start {
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 36.4rem;
  padding: 1.5rem 1.43rem;
  text-align: center;
  font-size: 1.3rem;
}

.tablet-start h1 {
  font-size: clamp(2.275rem, 9.1vw, 2.73rem);
}

.tablet-start .kicker {
  font-size: 0.975rem;
}

.tablet-start .field-hint {
  font-size: 1.105rem;
}

.field-error {
  font-size: 0.9rem;
  color: var(--warn-ink);
  background: var(--warn);
  padding: 0.6rem 0.7rem;
  margin: 0.6rem 0 0;
}

.initial-input {
  max-width: 9rem;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Buttons */

.button {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 1rem;
  margin: 0.75rem 0 0;
  border: 1px solid transparent;
  border-radius: 2px;
  font-weight: 650;
  text-align: center;
}

.button-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.button-ghost {
  background: transparent;
  color: var(--ink);
  border-color: #6a5c4d;
}

.button[disabled] {
  opacity: 0.4;
  cursor: default;
}

.link-button {
  background: none;
  border: 0;
  padding: 0.5rem 0;
  color: var(--ink-dim);
  text-decoration: underline;
  font-size: 0.9rem;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 1rem;
}

.choice {
  flex: 1 1 8rem;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  background: var(--ground-raised);
  border: 1px solid #6a5c4d;
  border-radius: 2px;
  font-weight: 650;
}

.choice.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Banners */

.banner {
  padding: 0.7rem 0.8rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
}

.banner-note {
  background: var(--ground-quiet);
  border-left: 3px solid var(--rule);
  color: var(--ink-dim);
}

.banner-event {
  background: var(--ground-quiet);
  border-left: 3px solid var(--accent);
}

.banner-ok {
  background: var(--ok);
  color: var(--ok-ink);
}

.banner-error {
  background: var(--warn);
  color: var(--warn-ink);
}

/* Minors */

.minors {
  margin: 0 0 0.5rem;
}

.minor {
  padding: 0.9rem 0 0.2rem;
  border-top: 1px solid var(--rule);
}

.attending {
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
}

/* Electronic consent — its own step, and it looks like it. The outline is the
   only decoration in the page that carries an argument: this step has to read
   as separate, because that separation IS the § 59.1-483(b) safe harbour. */

.card-consent {
  padding: 1rem;
  outline: 3px solid var(--accent);
  outline-offset: 6px;
  margin-top: 0.5rem;
}

.card-consent h2 {
  font-size: 1.35rem;
  margin-top: 0;
}

/* The document */

/* No `max-height` and no inner scrolling, deliberately: a box that scrolls
   inside the page can never fit its viewport, so `fit_without_scrolling` would
   be unreachable and the gate would quietly become one-valued again. */
.document {
  padding: 0.2rem 0.9rem 1rem;
  margin: 1rem 0;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
}

.document-section h2:first-child {
  margin-top: 1rem;
}

.document p,
.document li {
  color: var(--ink-dim);
}

.document ul {
  padding-left: 1.2rem;
  margin: 0 0 0.9rem;
}

.document li {
  margin-bottom: 0.4rem;
}

.document strong {
  color: var(--ink);
}

/* The marketing notice is a section of the document like any other, marked so
   a guest can see it is a notice and not a term. It is never rendered beside
   the consent control. */
.document-notice {
  background: var(--ground-quiet);
  border-left: 3px solid var(--accent);
  padding: 0.2rem 0.8rem 0.1rem;
  margin: 1.2rem 0;
}

.quoted {
  padding: 0.2rem 0.9rem;
  margin: 0 0 1.2rem;
  background: var(--ground-raised);
  border-left: 3px solid var(--rule);
}

.quoted p,
.quoted li {
  color: var(--ink-dim);
}

.quoted ul {
  padding-left: 1.2rem;
}

.quoted-tight {
  font-size: 0.92rem;
}

.quoted h2 {
  margin-top: 0.9rem;
}

/* Signature */

.signature {
  margin: 0.4rem 0 1rem;
}

.signature-canvas {
  --signature-ink-bg: var(--paper);
  --signature-ink: #17120e;
  display: block;
  width: 100%;
  height: 11rem;
  background: var(--paper);
  border: 1px solid #6a5c4d;
  border-radius: 2px;
  /* Without this a drag on a touchscreen scrolls the page instead of drawing. */
  touch-action: none;
}

.signature-actions {
  text-align: right;
}

/* Receipt */

.receipt {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.receipt li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
}

.receipt-expiry {
  color: var(--ink-faint);
}

/*
  § 59.1-486(c). The guest must be able to print or store this, so Print gives
  them the whole agreement on paper the venue's colours do not eat.
*/
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .shell,
  .shell-wide {
    max-width: none;
    padding: 0;
  }

  .document {
    background: transparent;
    border: 0;
    padding: 0;
  }

  .document p,
  .document li,
  .document strong,
  .lede,
  .quoted p {
    color: #000;
  }

  .quoted,
  .card-consent,
  .banner {
    background: transparent;
    outline: 0;
    border-color: #666;
  }

  .button,
  .link-button,
  .choice,
  .step-header,
  .field-hint {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
/* Component display rules must not reveal controls hidden until an error. */
[hidden] { display: none !important; }