/* Empire Five · 20-system: shared touch, press and feedback layer (wave 2).
   Loads after every 10-* part. Page slices (20-home, 20-product...) load after this and may override.
   Rules: transform/opacity only for motion, hover effects only on hover-capable pointers,
   44px minimum targets on coarse pointers, everything static under prefers-reduced-motion. */

:root {
  --press: .97;
  --press-sm: .985;
  --t-press: .14s;
  --ripple: rgba(255, 255, 255, .34);
  --ripple-ink: rgba(14, 27, 44, .12);
}

/* ---------- tap behavior ---------- */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, [role="tab"], [role="button"], .chip, .choice, input[type="range"] { touch-action: manipulation; }
img { -webkit-user-drag: none; }
.btn, .chip, .seg button, .plate-tabs button, .choice, .stepper button, .chain-steps button { -webkit-user-select: none; user-select: none; }

/* ---------- press states (tactile on every device) ---------- */
.btn, .chip, .choice, .seg button, .plate-tabs button, .thumbs button, .chain-steps button,
.social a, .brand-line, .nav-toggle, .line-remove, .pick, .tick, .pms button, .cert-badges a, .wa-float {
  transition-property: background-color, color, border-color, box-shadow, transform, opacity;
}
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: translate(var(--mx), var(--my)) scale(var(--press)); transition-duration: var(--t-press); }
.chip:active, .seg button:active, .plate-tabs button:active, .thumbs button:active, .chain-steps button:active,
.social a:active, .nav-toggle:active, .line-remove:active, .pick:active, .pms button:active, .cert-badges a:active { transform: scale(var(--press)); transition-duration: var(--t-press); }
.choice:active { transform: scale(var(--press-sm)); transition-duration: var(--t-press); }
/* Full-width FAQ rows would look like they shrink, so a press reads as color instead of scale. */
.faq summary:active { color: var(--accent-ink); }
.wa-float:active { transform: scale(.92); }

/* Larger linked tiles: press is a slight sink plus an ink edge, so the whole tile reads as one control. */
.pcard, .sport, .sport-row, .link-card, .guide-card, .chain-mini-item, .mega-sport, .mega-link { transition-property: transform, border-color, box-shadow, background-color; }
.pcard:active, .sport-row:active, .link-card:active, .guide-card:active, .chain-mini-item:active { transform: scale(var(--press-sm)); border-color: var(--ink); transition-duration: var(--t-press); }
.sport:active { transform: scale(var(--press-sm)); }
.mega-sport:active, .mega-link:active { background: var(--accent-soft); }

/* ---------- ripple (JS adds .ef-rip span; nothing renders without JS) ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.ef-rip { position: absolute; z-index: -1; left: var(--rx, 50%); top: var(--ry, 50%); width: var(--rs, 200px); height: var(--rs, 200px); margin: calc(var(--rs, 200px) / -2) 0 0 calc(var(--rs, 200px) / -2); border-radius: 50%; background: var(--ripple); pointer-events: none; transform: scale(0); opacity: 1; animation: ef-rip .55s var(--ease) forwards; }
.btn-ghost .ef-rip, .chip .ef-rip { background: var(--ripple-ink); }
.cta-band .btn-ghost .ef-rip, .btn-ghost.on-dark .ef-rip { background: rgba(255, 255, 255, .22); }
@keyframes ef-rip { 70% { opacity: .9; } to { transform: scale(1); opacity: 0; } }

/* ---------- hover only where hover exists ---------- */
/* Touch screens keep the last hover state stuck after a tap. Button hovers are already gated in
   main.css; this cancels the tile rules that 10-system draws on :hover. */
@media (hover: none) {
  .guide-card:hover::after, .link-card:hover::after, .sport:hover::before { transform: scaleX(0); }
  .sport:hover img { transform: none; }
  .faq summary:hover { color: inherit; }
  /* Pressed state replaces hover feedback on tiles. */
  .guide-card:active::after, .link-card:active::after, .sport:active::before { transform: scaleX(1); transition-duration: .2s; }
}

/* Desktop: arrow nudge and a measured accent rule under text links. */
@media (hover: hover) and (pointer: fine) {
  .text-link, .more-link a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); }
  .text-link:hover, .more-link a:hover { text-decoration: none; background-size: 100% 1px; }
  .text-link .icon, .more-link a .icon { transition: transform .25s var(--ease); }
  .text-link:hover .icon, .more-link a:hover .icon { transform: translateX(3px); }
  .pcard:hover .pcard-custom .icon { transform: translateX(2px); }
}

/* ---------- touch targets on coarse pointers (44px minimum) ---------- */
@media (pointer: coarse) {
  .btn, .btn-sm { min-height: 48px; }
  .chip, .seg button, .plate-tabs button, .filter-bar .chip, .chip-opt { min-height: 44px; }
  .plate-tabs button { padding-inline: 14px; }
  .social a { width: 44px; height: 44px; }
  .brand-line { min-height: 44px; }
  .line-remove, .files button { min-width: 44px; min-height: 44px; }
  .pms button { width: 44px; height: 44px; }
  .sizes-grid input { min-height: 44px; font-size: 1rem; }
  .input { min-height: 48px; font-size: 16px; } /* 16px stops iOS zooming into fields */
  .faq summary { min-height: 56px; }
  .faq-toc a, .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs ol { row-gap: 0; }
  .foot ul a { display: inline-flex; align-items: center; min-height: 40px; }
  .foot ul { gap: 2px; }
  .deco-opt { min-height: 44px; }
  .deco-opt input { width: 20px; height: 20px; }
  .thumbs button { min-height: 56px; }
  input[type="range"] { height: 44px; }
  .mega-sport, .mega-link { min-height: 52px; }
}

/* ---------- range slider: a ruled track with a square thumb ---------- */
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--rule-strong) var(--fill, 0%)); border-radius: 0; }
input[type="range"]::-moz-range-track { height: 4px; background: var(--rule-strong); border-radius: 0; }
input[type="range"]::-moz-range-progress { height: 4px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 3px; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 1px 0 var(--rule-strong); transition: transform .15s var(--ease); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 3px; background: var(--surface); border: 2px solid var(--accent); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
input[type="range"]:focus-visible { outline-offset: 6px; }
@media (pointer: coarse) { input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; } }

/* ---------- checkboxes and radios: brand accent, readable focus ---------- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------- FAQ accordion (JS animates height; CSS handles the marker) ---------- */
.faq summary { position: relative; transition: color .2s; }
.faq[open] summary { color: var(--ink); }
.faq[open] { border-bottom-color: var(--rule-ink); }
.faq.is-anim { overflow: hidden; }
.faq-a { transform-origin: top; }
.faq.is-opening .faq-a { animation: ef-faq-in .32s var(--ease) both; }
@keyframes ef-faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- scroll edges: horizontal scrollers show there is more ---------- */
.ef-scroller { position: relative; }
.ef-scroller.has-more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.ef-scroller.has-more-l.has-more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.ef-scroller.has-more-l:not(.has-more-r) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.tiers-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }

/* Utility for slices: horizontal swipe rail with snap (opt in with class="ef-rail"). */
.ef-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: var(--s-2); }
.ef-rail::-webkit-scrollbar { display: none; }
.ef-rail > * { scroll-snap-align: start; }

/* ---------- table rows: the active tier reads first ---------- */
.tiers tbody tr.on td { color: var(--ink); }
.tiers tbody tr.on td:first-child { font-weight: 600; }

/* ---------- toggle feedback ---------- */
.choice[aria-pressed="true"] .tick, .chip-opt[aria-pressed="true"], .seg button[aria-pressed="true"] { animation: ef-pop .28s var(--ease); }
@keyframes ef-pop { 40% { transform: scale(1.08); } }

/* ---------- inputs: filled and invalid states read at a glance ---------- */
.input:user-invalid { border-color: var(--warn); }
.field:focus-within > span:first-child { color: var(--accent-ink); }

/* ---------- keyboard focus inside tiles and dark bands ---------- */
.pcard:focus-within { border-color: var(--ink); }
.pcard-link:focus-visible { outline-offset: -3px; }
.sport:focus-visible, .sport-row:focus-visible, .link-card:focus-visible, .guide-card:focus-visible, .chain-mini-item:focus-visible { outline-offset: 2px; }
/* Ruled FAQ rows have no side padding: pull the ring in so it is not clipped by the column edge. */
.faq summary:focus-visible { outline-offset: -2px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .chip:active, .choice:active, .pcard:active, .sport:active, .sport-row:active, .link-card:active, .guide-card:active { transform: none !important; }
  .ef-rip { display: none; }
  .choice[aria-pressed="true"] .tick, .chip-opt[aria-pressed="true"], .seg button[aria-pressed="true"], .faq.is-opening .faq-a { animation: none; }
}