/* ==========================================================================
   TOUCH TARGETS — the 44px floor, in one place

   The device audit found 23 distinct controls under the floor across the
   eight common phone sizes. They were not 23 different bugs: they were 23
   controls written as `padding: 8px 14px` with no minimum, which lands
   somewhere near 30px once the font is small. On a desktop mouse that is
   fine. On a phone, held by someone in their sixties, it is a miss.

   ⚠️ WHY A FLOOR AND NOT 23 EDITS. Every one of those rules was locally
   reasonable, and the next control somebody writes will be locally
   reasonable too. A floor holds for the ones not written yet.

   44px is Apple's HIG minimum and the number the rest of this codebase
   already uses (gear.js, the nav, settings rows). WCAG 2.5.8 asks only for
   24px; we are not aiming at the legal minimum, we are aiming at an
   audience the product was explicitly built for.

   ⚠️ WHAT IS DELIBERATELY EXEMPT:
   - links inside running prose (`p a`, `li a`) — inline text is not a
     target, and padding them out breaks the line box
   - anything inside .fs-nav / .nav, which nav-buttons.css already sizes
   - controls the author has explicitly opted out with .no-floor
   ========================================================================== */

/* ⚠️ SPECIFICITY. `button { min-height:44px }` is (0,0,1) and loses to any
   page rule like `.kbtn { min-height:38px }` at (0,1,0) -- which is exactly
   what happened: the hand keyboard stayed at 38px through a whole audit
   cycle while this file claimed to have fixed it. :where() would be worse
   (zero specificity); the attribute form lifts these to (0,1,1) so they
   beat a single class without needing !important. */
button[class], button:not([class]),
[role="button"],
input[type="submit"],
input[type="button"],
select {
  min-height: 44px;
}

/* Standalone links that behave as buttons or as navigation. `.back` and
   `.back-link` are the "← Back to Home" links at the top of most pages:
   they sit on their own line, they are the only way back, and they were
   17-20px tall. */
a[class].btn,
a[class].back,
a[class].back-link,
a[class].button,
a[class*="-btn"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* The named offenders, which need padding rather than just a floor —
   min-height alone leaves the text hugging the top edge on a block button. */
[class].skill-btn,
[class].cat-btn,
[class].bet-chip,
[class].action-btn,
[class].kbtn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ⚠️ .bet-chip is `height: 100%` of the action row, so on a short screen the
   row shrank it below the floor. min-height wins over height:100% only
   because it is a minimum — the chip still grows with the row, it just
   stops following it down. These are the buttons that commit money in a
   hand; they are the last thing that should get small. */

/* ---- exemptions ---------------------------------------------------------
   Order matters: these come after, so they win. */
/* ⚠️ THIS BLOCK BROKE THE NAV AND IT TOOK A SCREENSHOT TO FIND.

   It used to list `.fs-nav button` and `.nav button` and reset
   `display: revert; align-items: revert`. `.fs-nav-item` IS a <button>, so
   this file — which loads AFTER nav-buttons.css — was undoing the rail's own
   `display:flex; align-items:center` on every item. The flex column fell back
   to align-items:normal, the icon box sat at the start instead of the centre,
   and every glyph rendered 57px left of its own label. The labels still looked
   centred because `text-align:center` survived, which made it read as a
   mysterious alignment quirk rather than an override.

   THE NAV IS NOW EXCLUDED ENTIRELY. nav-buttons.css owns its own sizing and
   its own layout; this file has no business reaching into it. An exemption
   that resets `display` is far too blunt a tool for what it was for — turning
   OFF a 44px floor never needed to touch layout at all. */
p a, li a, .note a, .lede a, .desc a, .hint a,
.no-floor {
  min-height: 0;
}

/* The nav is sized by nav-buttons.css and must not be overridden here. */
.fs-nav-item, .nav .item { min-height: 58px; }

/* ==========================================================================
   ⚠️ THE FLOOR WAS LOSING TO ITS OWN NEIGHBOUR

   The nav rail turned this up first. `button[class]` above is (0,1,1) -- it is
   written that way on purpose, so it beats a page rule like `.kbtn` without
   needing !important. But it ALSO beats every single-class floor further down
   this very file, and every single-class floor in any stylesheet, whatever the
   load order. Specificity is not order.

   So `.fs-nav-item { min-height: 58px }` resolved to 44px, and the named
   offenders below were in the same position: their floor existed and lost.

   It never showed at desktop size because flex and padding gave the elements
   more than any floor anyway. It bit on SHORT viewports, which is exactly when
   the floor is the only thing left protecting the target.

   Two classes takes these to (0,2,0), which wins on specificity and so does
   not depend on where the rule sits or which file loads last.
   ========================================================================== */
.skill-btn[class],
.cat-btn[class],
.pl-skip[class],
a[class].back,
a[class].back-link,
a[class].btn.ghost,
.bet-chip[class],
.action-btn[class],
.kbtn[class] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ⭐⭐ THE ACTION AREA RAISES ITS OWN FLOOR, AND IT HAD TO COME HERE.
   `button[class]` above is (0,1,1) and `.fs-btn` is (0,1,0) -- one notch, and
   the action buttons measured 44px while `action-area.css` said 64. ⚠️ I first
   excluded them in `legibility-floor.css`, which freed DEAL and did nothing
   here, because that file was never the winner. This block's own preamble said
   so: the attribute form "beats every single-class floor in any stylesheet,
   whatever the load order. Specificity is not order."
   ⛔ 64px is §22's floor and Eric's instruction in his own words -- "Do NOT
   solve narrow layouts by making the buttons tiny" -- and it exists to stop the
   SIZING tiles out-weighing the ACTION, which is the one thing he was explicit
   about: not "a gigantic RAISE box containing four tiny buttons", and equally
   not tiny actions under fat size chips. The row wraps before anything shrinks. */
.fs-btn[class] {
  min-height: clamp(64px, 7.4vh, 84px);
}