/* =========================================================================
   Marquee Poker — shared number-input stepper.

   WHY THIS FILE EXISTS
   --------------------
   Native <input type="number"> spinners are unusable in practice: Safari
   hides them entirely, Chrome renders a tiny hover-only stack, and Firefox
   needs -moz-appearance juggling. configure.html has carried a hand-rolled
   ▲/▼ stepper for a while; the free tools under /tools/ shipped with bare
   number inputs, so the same field looked finished in the admin and
   half-finished on a public landing page.

   This file is the single source of truth for the stepper LOOK. Pages still
   own LAYOUT (how wide the wrapper is in their grid / table) — same split as
   buttons.css. The click behavior lives in input-stepper.js.

   MARKUP CONTRACT (do not vary — input-stepper.js matches on these names):

     <div class="input-with-stepper" style="width:90px;">   <!-- width per context -->
       <input class="has-stepper" type="number" min="1" step="1" value="…">
       <div class="input-stepper" aria-hidden="true">
         <button type="button" class="input-stepper-btn" data-step="up"
                 tabindex="-1" aria-label="Increase">▲</button>
         <button type="button" class="input-stepper-btn" data-step="down"
                 tabindex="-1" aria-label="Decrease">▼</button>
       </div>
     </div>

   The buttons are tabindex="-1" and the stepper is aria-hidden on purpose:
   keyboard users already get ↑/↓ from the native number input, so exposing
   two more tab stops per field would just make the form slower to traverse.

   configure.html keeps its own copy of these rules inline (it also combines
   the stepper with .input-with-prefix and .form-input, which are page-local).
   Its markup follows the same contract, so a field can move either way.
   ========================================================================= */

.input-with-stepper {
  position: relative;
}

/* Reserve room for the stepper and kill the native spinner in every engine.
   Keyed off .has-stepper rather than .form-input so pages that style inputs
   by attribute selector (the /tools/ pages) work without extra classes. */
.input-with-stepper .has-stepper {
  padding-right: 38px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.input-with-stepper .has-stepper::-webkit-inner-spin-button,
.input-with-stepper .has-stepper::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-stepper {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 4px;
  width: 28px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  /* The strip itself must not swallow clicks aimed at the input's right
     edge — only the two buttons are targets. */
  pointer-events: none;
}

.input-stepper-btn {
  pointer-events: auto;
  flex: 1;
  background: transparent;
  border: 0;
  color: #93C5FD;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 80ms ease, color 80ms ease;
}
.input-stepper-btn:hover  { background: rgba(96, 165, 250, 0.12); color: #DBEAFE; }
.input-stepper-btn:active { background: rgba(96, 165, 250, 0.22); color: #F4F4F5; }
.input-stepper-btn + .input-stepper-btn {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* A disabled or read-only field's arrows shouldn't look clickable — the JS
   refuses to step them, so the affordance would be a lie. (The ICM
   calculator's total-pool field goes read-only in Custom prize mode.) */
.input-with-stepper .has-stepper:disabled  ~ .input-stepper .input-stepper-btn,
.input-with-stepper .has-stepper:read-only ~ .input-stepper .input-stepper-btn {
  color: #52525B;
  cursor: not-allowed;
}
.input-with-stepper .has-stepper:disabled  ~ .input-stepper .input-stepper-btn:hover,
.input-with-stepper .has-stepper:read-only ~ .input-stepper .input-stepper-btn:hover {
  background: transparent;
  color: #52525B;
}

/* ---- Compact variant --------------------------------------------------
   For dense rows where a 28px strip would dominate the field — the level
   editor's 76px blind cells, the ICM stack/prize rows. Same component,
   smaller footprint. */
.input-with-stepper.stepper-sm .has-stepper { padding-right: 26px; }
.input-with-stepper.stepper-sm .input-stepper {
  width: 19px;
  top: 3px;
  bottom: 3px;
  right: 3px;
}
.input-with-stepper.stepper-sm .input-stepper-btn { font-size: 8px; }

/* Coarse pointers get no hover state to linger on, and thumbs need a
   bigger target than 14px of half-strip. */
@media (pointer: coarse) {
  .input-stepper { width: 34px; }
  .input-with-stepper .has-stepper { padding-right: 44px; }
  .input-with-stepper.stepper-sm .input-stepper { width: 24px; }
  .input-with-stepper.stepper-sm .has-stepper { padding-right: 31px; }
}