/* ===========================================================================
   POLISH LAYER — Aug 27 2026
   One stylesheet, loaded by every page. Motion, tap feedback, spacing rhythm,
   accessibility. Deliberately additive: it does not touch the palette, the
   type family, or any layout that carries the brand. If a rule here changed
   how Better Every Bucket LOOKS rather than how it FEELS, it doesn't belong.
   =========================================================================== */

/* ---- 1. respect the user, always -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  -webkit-text-size-adjust: 100%;          /* let Dynamic Type through */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;             /* no rubber-band under the top bar */
}
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- 2. page enters instead of snapping -------------------------------- */
@keyframes beb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body > .frame { animation: beb-in 220ms cubic-bezier(.22,.61,.36,1) both; }
html.beb-leaving body { opacity: .55; transition: opacity 140ms ease-out; }

/* ---- 3. every tappable thing answers ----------------------------------- */
a, button, .cta, .tool, .setbtn, .drop, .chip, .speedsel button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 140ms cubic-bezier(.22,.61,.36,1),
              opacity 140ms ease, background-color 160ms ease, border-color 160ms ease;
}
a:active, button:active, .cta:active, .tool:active,
.setbtn:active, .drop:active, .chip:active { transform: scale(.975); }

/* a real target on every control — 44pt is the iOS floor */
button, .cta, .setbtn, .tool, .chip { min-height: 44px; }

/* ---- 4. one disabled state, everywhere --------------------------------- */
button[disabled], .cta[disabled], .setbtn[disabled], button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
  filter: saturate(.6);
}

/* ---- 5. focus you can actually see (keyboard + switch control) --------- */
:focus-visible {
  outline: 2px solid #e8c675;
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---- 6. results arrive, they don't appear ------------------------------ */
@keyframes beb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rverdict, .rrow, .beb-fix, .beb-keep { animation: beb-rise 260ms cubic-bezier(.22,.61,.36,1) both; }
/* stagger the report rows so the card reads top-down instead of flashing */
.rrow:nth-child(1){animation-delay:20ms}  .rrow:nth-child(2){animation-delay:45ms}
.rrow:nth-child(3){animation-delay:70ms}  .rrow:nth-child(4){animation-delay:95ms}
.rrow:nth-child(5){animation-delay:120ms} .rrow:nth-child(6){animation-delay:145ms}
.rrow:nth-child(n+7){animation-delay:165ms}

/* ---- 7. the progress bar should breathe while it works ---------------- */
.bar { transition: opacity 180ms ease; }
.bar i { transition: width 200ms cubic-bezier(.4,0,.2,1); }
@keyframes beb-pulse { 0%,100%{opacity:1} 50%{opacity:.62} }
.bar.working i { animation: beb-pulse 1.1s ease-in-out infinite; }

/* ---- 8. reserve the space before the video exists ---------------------- */
/* stops the hard page jump when a clip loads and the player suddenly appears */
.player { transition: opacity 200ms ease; }
.player:not(.active) { opacity: 0; }
.player.active { opacity: 1; }
.xstage, .stage { min-height: 210px; background: #000; }

/* ---- 9. never clip a number or a heading ------------------------------ */
h1, h2, h3, .rrow .val, .rgrade .g, .stats b {
  overflow-wrap: break-word;
  hyphens: auto;
}
.rrow .val { font-variant-numeric: tabular-nums; }   /* numbers stop shifting */

/* ---- 10. small iPhones (SE / mini, 375px and under) ------------------- */
@media (max-width: 380px) {
  h1 { font-size: 42px; }
  h2 { font-size: 28px; }
  .frame { padding-left: 18px; padding-right: 18px; }
  .rverdict { padding: 18px 16px; }
  .rverdict .vh { font-size: 23px; }
  .rgrade .g { font-size: 44px; }
  .rrow { gap: 12px; padding: 14px 0; }
  .rrow .gr { width: 40px; height: 40px; font-size: 17px; }
  .rrow .val { font-size: 21px; }
}

/* ---- 11. safe areas, so nothing hides under the notch or the bar ------ */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .frame { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ---- 12. selection + scrollbar, quiet and on-brand -------------------- */
::selection { background: rgba(232,198,117,.28); }