/* ==========================================================================
   Prototype control panel: not part of the production design system.
   Page links, hero variants (home v1), stripes and review notes.
   ========================================================================== */
.proto-fab {
  position: fixed; left: 16px; bottom: 16px; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  background: #FFF6D6; color: #3A2E00; border: 1px solid #D6A622;
  font: 700 0.75rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.proto-fab .icon { width: 16px; height: 16px; }
.proto-panel {
  position: fixed; left: 16px; bottom: 72px; z-index: 900; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto;
  background: #fff; color: #171613; border: 1px solid #CBC6BA; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
  font-family: var(--font-body); font-size: 0.8125rem;
}
.proto-panel[hidden] { display: none; }
.proto-panel header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #171613; color: #fff; }
.proto-panel header strong { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.proto-panel header button { background: none; border: 0; color: #fff; width: 32px; height: 32px; display: grid; place-items: center; }
.proto-group { padding: 14px 16px; border-bottom: 1px solid #EFECE6; }
.proto-group > p { font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: #5E5A50; margin-bottom: 10px; }
.proto-opts { display: grid; gap: 6px; }
.proto-opt { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border: 1px solid #E2DED5; cursor: pointer; }
.proto-opt:hover { border-color: #858073; }
.proto-opt input { margin: 2px 0 0; accent-color: #171613; }
.proto-opt b { display: block; font-weight: 600; }
.proto-opt small { display: block; color: #5E5A50; font-size: 0.6875rem; line-height: 1.4; margin-top: 2px; }
.proto-opt:has(input:checked) { border-color: #171613; background: #F7F5F1; }
.proto-toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; }
.proto-toggle input { width: 40px; height: 22px; accent-color: #171613; }
.proto-pages { display: grid; gap: 4px; }
.proto-pages a { display: flex; justify-content: space-between; padding: 8px 10px; border: 1px solid #E2DED5; }
.proto-pages a:hover { border-color: #171613; }
.proto-pages a[aria-current="page"] { background: #171613; color: #fff; border-color: #171613; }
.proto-foot { padding: 12px 16px; color: #5E5A50; font-size: 0.6875rem; line-height: 1.5; }

/* Review chrome clearance: pinned scene copy sits above the Prototype button on phones (remove with this file) */
@media (max-width: 767px) { :root { --proto-clear: 56px; } }

/* Solutions menu dropdown (6 Nov) */
.proto-select select { width: 100%; min-height: 40px; padding: 0 36px 0 10px; border: 1px solid #CBC6BA; border-radius: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23403D36' stroke-width='1.75'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; font: inherit; font-size: 0.875rem; color: #171613; cursor: pointer; }
.proto-select select:focus-visible { outline: 2px solid #171613; outline-offset: 2px; }
.proto-hint { display: block; margin-top: 6px; font-size: 0.75rem; line-height: 1.4; color: #5E5A50; }