/* ============================================================
   HEIRS OF THE FIRE - Touch feel
   Press feedback, tap-target sizes and the request progress bar.
   ============================================================ */

/* WHY THIS FILE EXISTS (maggie, 2026-09-05: "often you'd press something and it
   wouldn't do it, or you'd press it and it is thinking for a long time, or it is
   loading but you can't tell after pressing").

   Measured on a 375x812 phone before any of this: of the sixty interactive
   elements visible on the General tab, FIFTY-NINE were under 40 px tall - the
   bell, the settings cog and the help button were 23 px - and the whole
   stylesheet contained exactly two :active rules. A phone has no hover, so
   until now a tap produced no acknowledgement of any kind: the only way to know
   whether the game had heard you was to wait and see whether anything changed.
   That is the whole of the "I pressed it and it didn't do it" complaint. Often
   it HAD done it.

   Three separate things are wrong and they get three separate answers:

     it did not hear me      ->  the tap target is too small (sizes, below,
                                 and only where the pointer is coarse - the
                                 desktop layout is deliberately untouched)
     did it hear me?         ->  a press state, everywhere, instantly
     is it thinking?         ->  the progress bar, driven from api.js

   The press states are global rather than phone-only on purpose: a transform
   and a filter cost no layout, and a button that answers the mouse feels better
   too. */

/* -- 1. THE PRESS ------------------------------------------------------ */

button,
.btn,
.sidebar-nav-item,
.sec-tab,
.chip,
[role="button"],
[onclick] {
  -webkit-tap-highlight-color: rgba(212, 174, 90, 0.18);
  touch-action: manipulation;   /* no double-tap-to-zoom delay on the control */
}

/* 60 ms in, none out: the acknowledgement has to be instant, but springing back
   slowly is what makes it read as a press rather than a flicker. */
button:not(:disabled):active,
.btn:not(:disabled):active,
.sidebar-nav-item:active,
.sec-tab:active,
.chip:active,
[role="button"]:active {
  transform: scale(0.97);
  filter: brightness(1.18);
  transition: transform 60ms ease-out, filter 60ms ease-out;
}

button, .btn, .sidebar-nav-item, .sec-tab, .chip, [role="button"] {
  transition: transform 130ms ease, filter 130ms ease;
}

/* A control the game has disabled must not pretend to answer. */
button:disabled:active,
.btn:disabled:active { transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active,
  .btn:not(:disabled):active,
  .sidebar-nav-item:active,
  .sec-tab:active,
  .chip:active,
  [role="button"]:active { transform: none; }
}

/* -- 2. THE SIZE OF THE THING YOU ARE AIMING AT ------------------------ */

/* Only where the pointer is coarse. A mouse is accurate to the pixel and the
   desktop layout was drawn for one; growing every control there would push the
   sidebar and the panels around for no gain. 44 px is Apple's floor and the one
   the platform's own controls use. */
@media (pointer: coarse) {
  button,
  .btn,
  .sidebar-nav-item,
  .sec-tab,
  select,
  /* A text box written without a type attribute is still a text box - the
     Calendar's event title and note are two - and it measured 30 px beside the
     44 px selects in the same form. */
  input:not([type]),
  input[type="email"],
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="search"] {
    min-height: var(--tap-min);
  }

  /* The three little round buttons in the header - bell, cog, help - measured
     23 px tall and 24 to 35 wide. They are the ones most often missed. */
  .bell-btn {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
  }

  /* A checkbox or radio cannot simply be made 44 px without looking absurd, so
     the box keeps its size and the LABEL grows around it. */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  /* A fold header is a control even though it is a div. `.pane-head` is the
     one the Chronicle and Whispers fold on, and it measured 20 px - the
     smallest thing on the screen that a player is expected to hit. */
  .sidebar-section-header,
  .pane-head {
    min-height: var(--tap-min);
    display: flex;
    align-items: center;
  }

  /* The last one under the floor after everything above: the brand in the
     sidebar, which reloads the game. A span, 28 px tall and 72 wide. */
  .sidebar-brand-text {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding-inline: 4px;
  }

  /* THE UI REVIEW OF 2026-09-17. Everything above lifted HEIGHT; these were
     44 px tall and 13 to 40 px wide. The worn-gear cross removes the item in
     one tap and was the narrowest thing in the game. */
  .inv-slot-unequip,
  .inv-slot-words,
  .inv-btn,
  .modal-close,
  input[type="color"] {
    min-width: var(--tap-min);
  }
  input[type="color"],
  summary {
    min-height: var(--tap-min);
  }
  summary {
    display: flex;
    align-items: center;
  }

  /* Accept beside Decline, Bet beside Sponsor: 5 px apart, so a thumb that
     misses one lands on the other. */
  .gathering-ask,
  .gathering-row,
  .gathering-pair,
  .gathering-day,
  .gathering-contest {
    gap: 0.6rem;
  }

  /* iOS zooms into any field under 16 px and stays zoomed. These three are
     sized inline, hence the !important. */
  .ret-body textarea,
  .ret-body select,
  #seat-order-pick {
    font-size: 16px !important;
  }
}

/* A pet that is also an heirloom carries four pills, which left no room for
   its name. They wrap under it instead, in the Inventory tab only - the Market
   and the Crown's lists share the row. */
@media (max-width: 768px) {
  #tab-inventory .inv-item-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 55%;
    gap: 0.5rem;
  }
}

/* -- 3. IS IT THINKING? ------------------------------------------------ */

/* Driven by api.js, which counts requests in flight (see "THE PROGRESS BAR"
   there). It appears only after 250 ms, so the ordinary fast call never
   flickers a bar on screen, and it sits above everything including the toasts.
   The point is not decoration: this game's server is a single process doing
   synchronous reads, so one player's slow request genuinely stalls everybody,
   and a player who can SEE that it is thinking does not press again. */
#hof-busy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100000;
  pointer-events: none;
  background: linear-gradient(90deg,
              rgba(212, 174, 90, 0) 0%,
              var(--accent-gold, #D4AE5A) 45%,
              var(--accent-ember, #D4713A) 70%,
              rgba(212, 174, 90, 0) 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 140ms ease;
}

#hof-busy.on {
  opacity: 1;
  animation: hof-busy-sweep 1.1s linear infinite;
}

@keyframes hof-busy-sweep {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #hof-busy.on { animation: none; background-position: 30% 0; }
}