/* Storixa — interaction layer.
   Loaded last. Owns input-mode sizing, touch targets, and the states the
   surface could enter but had no answer for: error and overflow.
   Visual size is preserved wherever the hit area can grow instead. */

/* ─────────────────────────────────────────────────────────────────────────────
   1 · iOS Safari input zoom.
   Any field under 16px makes iOS zoom the whole viewport on focus, which
   shifts the layout and forces the reader to pinch back. The floor is applied
   by width, not by device, because a narrow desktop window has the same
   problem in a responsive emulator.
   ───────────────────────────────────────────────────────────────────────────── */
@media(max-width:640px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .v5-command-dialog input,
  .v5-estimator-inputs input{
    font-size:1rem;
  }
}

/* Taps should not wait out the double-tap-zoom delay. */
input,
select,
textarea,
label,
summary,
button,
a[href]{
  touch-action:manipulation;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2 · Touch targets.
   On coarse pointers the working target is 44px. Where the control owns its
   row, the control itself grows. Where it sits inline in text, the hit area
   grows through padding with an equal negative margin, so the visual size and
   the surrounding rhythm are unchanged and no hit areas overlap.
   ───────────────────────────────────────────────────────────────────────────── */
@media(pointer:coarse){
  /* Header: the primary navigation path. The mobile override in storixa-v5.css
     sets 39px at (0,2,0), so these match that specificity to win. */
  .site-header .v5-search-open{min-width:44px;height:44px}
  .site-header .menu-button,
  .detail-header .menu-button{min-height:44px;width:44px}
  .site-header .btn-header,
  .detail-header .btn-header{min-height:44px}

  /* Sticky quick nav and the playground toolbar. */
  .v5-quick-nav a{min-height:44px;display:inline-flex;align-items:center}
  .v5-play-tabs button{min-height:44px}
  .v5-selectors button,
  .v5-choice-grid button{min-height:44px}
  .v5-switch{min-height:44px}
  .mobile-persona{min-height:44px}
  .growth-review-btn{min-height:44px}
  .plan-btn{min-height:44px}

  /* A card title that fills its row and grows the tap area without moving. */
  .capability-content h3 a{
    display:inline-block;
    padding-block:9px;
    margin-block:-9px;
  }
}

/* Above the 24px floor but under the 44px target: controls that live inside the
   simulated product consoles. Growing these to 44px would destroy the density
   they are imitating, so they keep their size and clear the floor instead. */
@media(pointer:coarse){
  .omni-choices button,
  .ads-choices button,
  .growth-options button,
  .persona-switch button,
  .trust-policy button,
  .billing-switch button,
  .wholesale-product-grid button,
  .v5-quick-nav a{min-height:32px}
}

/* The persona pills render ~18px tall inside the scaled hero mock, which is
   under the 24px floor even for a mouse. The visible pill keeps its size and
   the hit area grows around it.
   The invisible `::after` expands the hit area. The row has 7px of gap
   and 11px of margin, so 2px of
   horizontal and 9px of vertical reach cannot overlap a neighbour. */
.persona::after{
  content:"";
  position:absolute;
  inset:-9px -2px;
  border-radius:inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3 · Overflow. The scenario calculator accepts ranges that produce very large
   results. A currency figure must not break the card it sits in.
   ───────────────────────────────────────────────────────────────────────────── */
.v5-estimator-results>div{min-width:0}
.v5-estimator-results strong{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:none;
  font-size:clamp(15px,1.9vw,28px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4 · Error. The calculator clamps out-of-range input for the maths but left
   the field showing the unclamped value, so the field and the result disagreed
   with no explanation. The note names the limit and what was used instead.
   ───────────────────────────────────────────────────────────────────────────── */
.v5-estimator-note{
  display:none;
  margin:10px 0 0;
  padding:9px 11px;
  border:1px solid #f0d9a8;
  border-inline-start-width:3px;
  border-radius:10px;
  background:var(--warning-bg);
  color:#7a5a12;
  font-size:12px;
  line-height:1.5;
}
.v5-estimator-note.is-shown{display:block}
/* Native range validity, surfaced without shouting. */
.v5-estimator-inputs input:out-of-range{
  border-color:#d9a441;
  background:#fffdf7;
}
.v5-estimator-inputs input:focus-visible:out-of-range{outline-color:#b8830f}