/* ==========================================================================
   kit_pop.css - the ONE hover pop-out (queue 1602 WO-05, motion catalogue row 2, Fable decision D5; owner 1294 + 1478, 7 Nov 2026).
   "Every dashboard box gets the same hover effect" (1294), "half of what it was" (1478), and the public pages are no exception (D5).
   The Command Deck pop-out halved: the border takes the section colour, a 3 px bar sits on the left, a soft shadow, the box scales 1.01 in 160 ms.
   Each box draws its own border, bar and shadow in its own sheet (they carry that box's colour); THIS sheet owns the number, the token set and the
   rule that moves the box, so the kit shell, the public pages, the league cards and the guide can never disagree again.
   Linked by layout_preline.pug, public/v3/layout_public.pug and error_public.pug.
   - Pointer devices only: `(hover: hover) and (pointer: fine)`. A phone gets the press (kit_tap.js, row 1) and never a box that stays popped after a tap.
   - Never while a pop-up inside the box is open (a transform would move its fixed pop-up), and a table or tall panel is never listed.
   - Reduced motion plays it too (the 7 Nov ruling, row 19; D4 supersedes the 1294 "small lift without scale" clause).
   - Transform only; the box already carries its own transition (160 ms, var(--k-dur-2)); no will-change.
   ========================================================================== */
:root { --k-pop-scale: 1.01; --k-pop-shadow: 0 6px 14px -12px rgb(0 0 0 / .6); }
html[data-theme="light"] { --k-pop-shadow: 0 6px 14px -12px rgb(15 23 42 / .22); }

@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] body :is(
    /* the kit's boxes */
    .k3-box, .k-idx-card, .ka-lg, .mv-t,
    .k-card .k3-glance > .k-statusrow, .k-doors[data-card="lr-sections"] > .k-door, .k3-wall .k-dash-crestcell,
    .p-content:has(.k3-roombar) .k-card,
    /* the app pages in the kit shell, the league page */
    .mt2-shell :is(.mt2-card, .mt2-lgc), .bc--v3 :is(.bc-seg, .bc-lstage, .bc-stage),
    /* the public pages: the Broadcast boxes, tiles, game cards, doors and the league finder's cards (the row layout stays a list) */
    .r1-box, .bv .tile, .bv .gm, .pb-fc, .pb-pod, .pb-door, .pbx .bx, .pbx .seg.bc-seg, .lq:not(.lq--rows) .bc-lc,
    /* 1611: the Leagues board tile (Find a League, My Leagues, the public page); its colour border and left bar are in leagues_board.css */
    .lg .rc,
    /* the Getting Started guide's tiles */
    .gsg-path
  ):is(:hover, :focus-within):where(:not(:has([role="dialog"]:not([hidden]), [aria-modal="true"]:not([hidden]), .bc-tip.is-open))) {
    transform: scale(var(--k-pop-scale)); z-index: 4;
  }
  /* Row 1 over row 2 (1602 Opus fix): a box that is itself a control (an index card, a section door, a status row, a crest cell, a league card) presses to .97
     on a click exactly as a tap presses it on the phone. The rule above outranks kit_tap.js's press (specificity 0), so without this the popped box never
     pressed on a computer: the phone pressed, the desktop did not. Same specificity as the pop rule and later, so it wins while the box is held. */
  html[data-motion="on"] body :is(
    .k-idx-card, .k-card .k3-glance > .k-statusrow, .k-doors[data-card="lr-sections"] > .k-door, .k3-wall .k-dash-crestcell, .lq:not(.lq--rows) .bc-lc,
    a.mv-t, .gsg-path, .mt2-shell a.mt2-card, .lg .rc:has(> a.rc-link:active)
  ):active {
    transform: scale(.97);
  }
  /* row 2's 160 ms on the Leagues board tile (1602 Opus fix): its own sheet moves only the border and the shadow, so the 1.01 lift snapped on with no time at all.
     A tile that is reordering after a bump keeps its own 360 ms move. */
  html[data-motion="on"] .lg .rc:not(.is-moving, .is-shifting) { transition: border-color 160ms var(--k-ease, ease), box-shadow 160ms var(--k-ease, ease), transform 160ms var(--k-ease, ease); }
  /* the pop-out look the public Broadcast boxes lacked: the square box keeps its square corners and takes the section colour on its border, the 3 px bar and the soft shadow (D5) */
  .pbx .bx, .pbx .seg.bc-seg { transition: border-color var(--k-dur-2, 160ms) var(--bc-ease, ease), box-shadow var(--k-dur-2, 160ms) var(--bc-ease, ease), transform var(--k-dur-2, 160ms) var(--bc-ease, ease); }
  .pbx .bx:hover, .pbx .bx:focus-within, .pbx .seg.bc-seg:hover, .pbx .seg.bc-seg:focus-within {
    border-color: color-mix(in srgb, var(--hue, var(--h-sky)) 70%, var(--border)); border-top-color: var(--hue, var(--h-sky));
    box-shadow: inset 3px 0 0 var(--hue, var(--h-sky)), var(--k-pop-shadow);
  }
}