/* =========================================================
   PROTOTYPE ONLY: header option switcher
   Shows one of three hero designs. Remove this file, js/options.js,
   the switcher markup and the two unused hero sections at sign-off.
   ========================================================= */

/* Only the chosen hero is shown (option 1, the brick hero, if no choice yet) */
:root:not([data-option]) [data-hero]:not([data-hero="1"]),
:root[data-option="1"] [data-hero]:not([data-hero="1"]),
:root[data-option="2"] [data-hero]:not([data-hero="2"]),
:root[data-option="3"] [data-hero]:not([data-hero="3"]) { display: none !important; }

/* Option 2 (editorial): slightly softer corners (4px) on cards, buttons, inputs and graphics */
:root[data-option="2"] { --radius-s: 4px; --radius-m: 4px; }

/* Option 2 (editorial): no blurred backdrop shapes */
:root[data-option="2"] .blobs { display: none; }

/* Off-brand floating control: a quiet "Prototype" tab that opens the option buttons */
.proto-switch {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.08);
  font: 500 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #3F3F46;
  letter-spacing: 0;
}
.proto-switch__toggle {
  min-height: 32px; padding: 0 10px;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; color: #71717A;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.proto-switch__toggle[aria-expanded="true"] { color: #18181B; }
.proto-switch__options { display: flex; gap: 4px; }
.proto-switch__options[hidden] { display: none; }
.proto-switch__btn {
  min-height: 32px; padding: 0 12px;
  border: 0; border-radius: 7px;
  background: transparent; color: #3F3F46;
  font: inherit; cursor: pointer;
}
.proto-switch__btn:hover { background: #F4F4F5; }
.proto-switch__btn[aria-pressed="true"] { background: #18181B; color: #FFFFFF; }
.proto-switch__toggle:focus-visible, .proto-switch__btn:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
@media (max-width: 480px) { .proto-switch__btn { padding: 0 9px; } }