/* Global rules from the mockup helmet. Layout and colours live inline in the templates, exactly as in mockup/. */
:root {
  --bg: #F4F5F2;
  --card: #FFFFFF;
  --border: #E1E3DE;
  --ink: #16181D;
  --ink-2: #5B6170;
  --you: #1F4FC4;
  --you-bg: #EEF2FC;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F4F5F2; }
a { color: #1F4FC4; }
a:hover { color: #163A92; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid #1F4FC4; outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Tip toggles in the competitor form are real radio buttons styled like the mockup buttons. */
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle span {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; box-sizing: border-box;
  background: #FFFFFF; color: #16181D; border: 1px solid #D8DAD5;
}
.toggle input:checked + span { background: #16181D; color: #FFFFFF; border-color: #16181D; }
.toggle input:focus-visible + span { outline: 3px solid #1F4FC4; outline-offset: 2px; }
.field-error { font-size: 12px; color: #8C1D12; font-weight: 500; }
textarea.json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
@media (max-width: 600px) {
  h1 { font-size: 24px !important; }
}