/* site-polish.css — shared design/animation layer for every page (v1)
   Same language as the new header + home: Apple ease, press feedback,
   readable label sizes, bigger tap targets, shimmer, reduced-motion safe. */
:root{--mz-ease:cubic-bezier(.32,.72,0,1);--mz-ease-out:cubic-bezier(.23,1,.32,1)}

/* 1. Minimum readable label size (was 8–11px on many pages) */
.text-\[8px\],.text-\[9px\],.text-\[10px\],.text-\[11px\]{font-size:12px !important;line-height:1.35}
@media (max-width:639px){.sm\:text-\[10px\],.sm\:text-\[11px\]{font-size:12px !important}}
.sm\:text-\[10px\],.sm\:text-\[11px\]{font-size:12px !important}

/* 2. Bigger tap areas without changing the layout (invisible hit zone) */
.mz-hit{position:relative}
.mz-hit::after{content:"";position:absolute;inset:-10px;min-width:44px;min-height:44px}
@media (pointer:coarse){
  main button,section button,summary,footer a{min-height:44px}
  footer a{display:inline-flex;align-items:center}
}

/* 3. Press feedback on buttons / pill links (uses `scale`, never clashes with transform) */
:where(a,button)[class*="rounded"]:not([class*="absolute"]):active,
button:not([class*="absolute"]):active,
.mz-press:active{scale:.97}
:where(a,button)[class*="rounded"]{transition-timing-function:var(--mz-ease)}

/* 4. Shimmer while images load (JS adds .mz-sk to the image's wrapper, removes on load) */
.mz-sk{position:relative;overflow:hidden}
.mz-sk::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%),rgba(120,120,120,.12);
  background-size:220% 100%,100% 100%;animation:mzSk 1.3s linear infinite}
@keyframes mzSk{from{background-position:120% 0,0 0}to{background-position:-120% 0,0 0}}

/* 5. Smooth FAQ / accordion / details */
details>summary{transition:color .2s var(--mz-ease)}
details[open]>summary~*{animation:mzOpen .35s var(--mz-ease)}
@keyframes mzOpen{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}

/* 6. Keep glass sparse on heavy pages: only header + sticky bars blur */
main [class*="backdrop-blur"]:not([class*="sticky"]):not([class*="fixed"]){-webkit-backdrop-filter:none;backdrop-filter:none}

/* 7. Readable long text (privacy etc.) */
.mz-prose p,.mz-prose li{font-size:max(16px,1rem);line-height:1.7}

/* 8. Accessibility fallbacks */
@media (prefers-reduced-motion:reduce){
  .mz-sk::before{animation:none}
  details[open]>summary~*{animation:none}
  :where(a,button):active{scale:1}
}
@media (prefers-reduced-transparency:reduce){
  [class*="backdrop-blur"]{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}