/* Shared look for the fixture pages: mobile first, so they're usable on a phone.
   Selectors that size fields use :where() (no specificity), so page-specific rules
   (honeypot traps, split phone boxes) always win. */
*, *::before, *::after { box-sizing: border-box; }
body { font: 16px/1.5 -apple-system, system-ui, sans-serif; color: #111827; background: #f9fafb;
  max-width: 640px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { font-size: 22px; line-height: 1.25; margin: 4px 0 8px; }
h2, h3 { font-size: 17px; margin: 24px 0 4px; }
.note { color: #6b7280; font-size: 14px; }
form { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 4px 16px 16px; margin-top: 16px; }
fieldset { border: 1px solid #e5e7eb; border-radius: 8px; margin: 16px 0 0; padding: 4px 12px 12px; }
label, legend { display: block; margin-top: 14px; font-weight: 500; }
/* 16px text keeps iOS Safari from zooming in when a field is focused */
:where(input:not([type=checkbox], [type=radio], [type=submit], [type=button]), select, textarea) {
  display: block; width: 100%; font: inherit; padding: 10px 12px; margin-top: 4px;
  border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: inherit; }
:where(input[type=checkbox], input[type=radio]) { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
:where(label:has(> input[type=checkbox]), label:has(> input[type=radio])) { font-weight: 400; }
:where(textarea) { min-height: 96px; }
:where(button, input[type=submit]) { display: block; width: 100%; margin-top: 20px; padding: 12px; font: 600 16px/1.2 inherit;
  border: 0; border-radius: 10px; background: #2563eb; color: #fff; }
iframe { width: 100%; height: 360px; border: 1px solid #d1d5db; border-radius: 8px; margin-top: 12px; background: #fff; }
table { width: 100%; border-collapse: collapse; }
table td { padding: 6px 8px 6px 0; vertical-align: top; }
a.fixture-home { display: inline-block; margin-bottom: 8px; font-size: 14px; color: #2563eb; text-decoration: none; }
ul.fixtures { padding: 0; list-style: none; }
ul.fixtures a { display: block; padding: 12px 14px; margin-top: 8px; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 10px; color: #1d4ed8; text-decoration: none; }
@media (prefers-color-scheme: dark) {
  body { color: #f9fafb; background: #111827; }
  form, fieldset, iframe, ul.fixtures a { background: #1f2937; border-color: #374151; }
  :where(input:not([type=checkbox], [type=radio], [type=submit], [type=button]), select, textarea) {
    background: #111827; border-color: #4b5563; }
  ul.fixtures a { color: #93c5fd; }
  .note { color: #9ca3af; }
}