/* Generated by build-site.js — do not edit here, edit the builder.

   One stylesheet, loaded from the origin, for the one thing this build adds to a
   page: the notice that a form is not switched on yet. The production CSP is
   default-src 'none' with style-src 'self', so an inline <style> block or a
   style="..." attribute would be dropped — and design/00-system/check.js exists
   partly to keep style attributes out of this tree in the first place.

   Its colours are literals rather than tokens on purpose: this one sheet loads
   over three different design systems -- the apex, the events skin and the
   lounge skin -- whose token NAMES overlap and whose VALUES do not, and the
   notice has to read the same on all three.

   Contrast, computed from the WCAG relative-luminance formula rather than
   eyeballed: text #4a3f2f on #f4ece0 is 8.77:1, and the bold lead-in and the
   phone-number link, #5c2018 on #f4ece0, are 10.70:1. Both clear AA and AAA for
   body text. The 4px rule #7a530f on #f4ece0 is 5.83:1, which clears the 3:1
   non-text minimum. */

.form-notice {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: #f4ece0;
  color: #4a3f2f;
  border-left: 4px solid #7a530f;
  border-radius: 3px;
  font: 500 0.9375rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.form-notice b { color: #5c2018; }

/* The link carries the phone number, so it must not depend on colour alone to be
   recognisable (SC 1.4.1). The underline is the browser's default; it stays.

   ⚠️ WHY THE SELECTOR IS p.form-notice a:not(.btn) AND NOT .form-notice a.
   Because .form-notice a LOST A CASCADE FIGHT AND THE PHONE NUMBER RENDERED AT
   1.21:1 — effectively invisible — on the one page where it matters most.

     .form-notice a                            specificity (0,1,1)
     .gate a:not(.btn)  [lounge styles.css]    specificity (0,2,1)  ← won

   The age gate is <body class="gate">, and .gate sets
   background-color: var(--color-ink), so the lounge sheet is CORRECT to colour
   its links with --color-accent-soft (copper cu200 #f6d3a8, documented 11.69:1
   on the dark ink). This notice injects a LIGHT island into that dark page, and
   the dark-surface link colour bled into it: #f6d3a8 on this panel's #f4ece0.
   The fix belongs here, not in the lounge sheet, which is not wrong.

   p.form-notice a:not(.btn) is (0,2,2) and beats (0,2,1) OUTRIGHT, rather than
   tying on specificity and winning on load order — notice.css happens to be
   injected last, and "happens to" is not a contrast guarantee.

   And the reason this was worth chasing: every form in this build is disabled,
   so that phone number is the ONLY working contact route on the first page of
   the lounge. Measured ratios are in the report, taken from the browser's own
   composited colours — the 10.70 figure below was read off the declaration,
   which is exactly how a declaration that never applied got certified. */
p.form-notice a:not(.btn) { color: #5c2018; text-underline-offset: 2px; }
p.form-notice a:not(.btn):hover { color: #000; }

/* A disabled control still has to be readable — a visitor is reading this form
   to see what it ASKS, not to fill it in. Browsers grey disabled text to around
   2:1 by default, which fails SC 1.4.3 outright. */
input:disabled, select:disabled, textarea:disabled, button:disabled {
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}
button:disabled { cursor: not-allowed; }

/* Printing drops the tinted panel to white; the anchor has to be re-coloured
   with it or it keeps a colour chosen for a tinted background. */
@media print {
  .form-notice { background: #fff; color: #000; border-left-color: #000; }
  .form-notice a, .form-notice b { color: #000; }
}