/* Slice: order, wave 2 (touch and interaction).
   Scoped to o-* / ef-form classes that only the order, contact, pricing,
   trade-account and line-sheet templates output, plus the .o-pill this slice's JS adds.
   Motion is transform/opacity only and switched off under prefers-reduced-motion. */

/* ---------- pricing: live tier ladder ---------- */
.o-ladder.is-live .o-ladder-rows li { cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 48px; transition: background-color .2s var(--ease), transform .15s var(--ease); outline: none; }
.o-ladder.is-live .o-ladder-rows li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform .25s var(--ease); }
.o-ladder.is-live .o-ladder-rows li.is-on { background: var(--accent-soft); }
.o-ladder.is-live .o-ladder-rows li.is-on::after { transform: scaleY(1); }
.o-ladder.is-live .o-ladder-rows li.is-on .o-ladder-p { color: var(--accent-ink); }
.o-ladder.is-live .o-ladder-rows li.is-on .o-ladder-t { color: var(--on-accent); background: var(--accent); border-radius: 3px; padding: 4px 6px; justify-self: start; }
.o-ladder.is-live .o-ladder-rows li:active { transform: scale(.985); }
.o-ladder.is-live .o-ladder-rows li:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .o-ladder.is-live .o-ladder-rows li:hover:not(.is-on) { background: var(--surface-2); }
}

/* Quantity calculator under the ladder (shown by JS only). */
.o-calc { padding: 16px 20px 14px; border-top: 2px solid var(--ink); display: grid; gap: 10px; }
.o-calc[hidden] { display: none; }
.o-calc-label { font: 500 .7rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.o-calc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.o-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); flex: none; }
.o-step-btn { width: 44px; height: 46px; border: 0; background: transparent; color: var(--ink); font: 600 1.3rem/1 var(--f-display); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: background-color .15s, transform .12s var(--ease); }
.o-step-btn:active { transform: scale(.88); background: var(--accent-soft); }
.o-step-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.o-calc-qty { width: 76px; height: 46px; border: 0; border-inline: 1px solid var(--rule); text-align: center; font: 600 16px/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink); background: transparent; -moz-appearance: textfield; appearance: textfield; }
.o-calc-qty::-webkit-outer-spin-button, .o-calc-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.o-calc-qty:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
@media (hover: hover) and (pointer: fine) { .o-step-btn:hover { background: var(--surface-2); } }

/* Track and square thumb come from the shared range style (20-system.css, --fill set by our JS). */
.o-calc-range { flex: 1 1 160px; min-width: 0; height: 44px; margin: 0; touch-action: pan-y; }

.o-calc-out { margin: 0; display: grid; gap: 2px; min-height: 3.6em; }
.o-calc-tier { font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.o-calc-sum { font: 500 1rem/1.3 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); overflow-wrap: anywhere; }
.o-calc-sum b { font: 600 1.35rem/1.2 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.o-calc-tag { font-size: .8rem; color: var(--ink-2); }
.o-calc-next { margin: 0; padding: 8px 10px; font-size: .86rem; line-height: 1.4; color: var(--ink); background: var(--accent-soft); border-radius: var(--radius); }
.o-calc-next[hidden] { display: none; }
.o-ladder-note b { color: var(--ink); font-weight: 600; }

/* ---------- forms: progress meter ---------- */
.o-meter { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.o-meter-bar { position: relative; flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.o-meter-bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease), background-color .3s; }
.o-meter-txt { flex: none; font: 500 .68rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.o-meter.is-done .o-meter-bar i { background: var(--ok); }
.o-meter.is-done .o-meter-txt { color: var(--ok); }

/* Field focus: the label lights up with the input. */
.ef-form .field > span:first-child { transition: color .2s; }
.ef-form .field:focus-within > span:first-child { color: var(--accent-ink); }

/* ---------- forms: quick-add lines ---------- */
.o-quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -4px; min-width: 0; }
.o-quick-k { font: 500 .66rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-right: 2px; }
.o-quick-b { min-height: 36px; padding: 0 12px; border: 1px dashed var(--rule-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 .84rem/1 var(--f-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color .15s, border-color .15s, color .15s, transform .12s var(--ease); }
.o-quick-b:active { transform: scale(.94); }
.o-quick-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.o-quick-b.is-used { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .o-quick-b:hover { border-color: var(--accent); color: var(--accent-ink); } }
@media (pointer: coarse) { .o-quick-b { min-height: 44px; padding: 0 14px; font-size: .92rem; } }
/* Phones: one swipeable row instead of four wrapped rows. */
@media (max-width: 560px) {
  .o-quick { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); }
  .o-quick::-webkit-scrollbar { display: none; }
  .o-quick-k { display: none; }
  .o-quick-b { scroll-snap-align: start; flex: none; }
}

/* ---------- forms: press and send feedback ---------- */
.ef-form .btn[type="submit"] { transition: transform .2s var(--ease), background-color .2s, box-shadow .2s; touch-action: manipulation; }
.ef-form .btn[type="submit"]:active:not([disabled]) { transform: scale(.97); }
.ef-form .btn[type="submit"][disabled] { cursor: progress; }
.ef-form .btn[aria-busy="true"] { position: relative; }
.ef-form .btn[aria-busy="true"] .icon { animation: o-nudge .8s var(--ease) infinite; }
@keyframes o-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.ef-form.o-shake { animation: o-shake .42s var(--ease); }
@keyframes o-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.ef-form .notice[data-out="ok"]:not([hidden]) { animation: o-pop .4s var(--ease) both; }
@keyframes o-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- what happens next ---------- */
.o-steps.o-anim li { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.o-steps.o-anim.is-in li { opacity: 1; transform: none; }
.o-steps.o-anim.is-in li:nth-child(2) { transition-delay: .1s; }
.o-steps.o-anim.is-in li:nth-child(3) { transition-delay: .2s; }
.o-steps.o-anim.is-in li:nth-child(4) { transition-delay: .3s; }
.o-steps li.is-now::before { background: var(--accent); color: var(--on-accent); }
.o-steps li.is-now b::after { content: " · now"; font: 500 .7rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }

/* ---------- contact channels: tactile ---------- */
.o-ch { -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease), transform .15s var(--ease); }
a.o-ch:active { transform: scale(.98); background: var(--accent-soft); }
a.o-ch:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  a.o-ch > .icon { transition: transform .25s var(--ease); }
  a.o-ch:hover > .icon { transform: translateY(-2px); }
}
.o-more .icon { transition: transform .2s var(--ease); }
.o-more:active .icon, .o-more:hover .icon { transform: translateX(3px); }

/* ---------- phones: back-to-form pill ---------- */
.o-pill { display: none; }
@media (max-width: 860px) {
  .o-pill { position: fixed; z-index: 44; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px - 54px - 12px); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: 600 .95rem/1.1 var(--f-display); box-shadow: var(--shadow-hover); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; opacity: 0; transform: translateY(calc(100% + 30px)); pointer-events: none; transition: transform .35s var(--ease), opacity .25s; }
  .o-pill.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .o-pill.is-on:active { transform: scale(.95); }
  .o-pill:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
  .o-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(31, 79, 209, .35); flex: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .o-ladder.is-live .o-ladder-rows li, .o-ladder.is-live .o-ladder-rows li::after, .o-step-btn, .o-meter-bar i,
  .o-quick-b, .ef-form .btn[type="submit"], .o-ch, .o-pill, .o-steps.o-anim li, .o-more .icon { transition: none; }
  .o-ladder.is-live .o-ladder-rows li:active, .o-step-btn:active, .o-quick-b:active, a.o-ch:active, .o-pill.is-on:active, .ef-form .btn[type="submit"]:active:not([disabled]) { transform: none; }
  .ef-form .btn[aria-busy="true"] .icon, .ef-form.o-shake, .ef-form .notice[data-out="ok"]:not([hidden]) { animation: none; }
  .o-steps.o-anim li { opacity: 1; transform: none; }
}