/* LOUD · hover and press states

 * The original wrote these as style-hover / style-active attributes, which the DC runtime
 * compiled into pseudo-states. React has no inline :hover, so they live here — 18 hover
 * values and 7 press values across the portal. That count is why this is a handful of
 * classes and not a CSS-in-JS dependency.
 *
 * EVERY DECLARATION IS !important, AND IT HAS TO BE. Every element carrying h-edge also
 * sets its border inline — all 236 of them — and 66 of 67 h-fill elements set background
 * inline. AN INLINE DECLARATION BEATS ANY CLASS RULE, hovered or not, regardless of
 * specificity. Without !important these rules are inert: the cursor registers, nothing
 * moves. Verified against a probe element built like the port's markup.
 *
 * The DC runtime did not have this problem, because style-hover merged into the element's
 * own style object rather than competing with it from a stylesheet. The class translation
 * is what introduces the collision, so the translation has to carry the fix.
 *
 * Safe here because NO ELEMENT WANTS TWO HOVER VALUES FOR ONE PROPERTY — checked across
 * all eleven components: zero elements carry two state classes touching the same property.
 * If one ever needs to, it needs its own class, not an override.
 *
 * THE USE COUNTS BELOW ARE MEASURED across all eleven ported components, not estimated.
 * EIGHT rules read 0 uses and are kept deliberately: each was mapped from a style-hover
 * or style-active value that exists in the .dc.html source, so deleting them would
 * silently drop a state the next re-translation expects to find a class for.
 */
.h-edge:hover{border-color:var(--x-ink) !important}                 /* 236 uses · outline controls */
.h-fill:hover{background:var(--x-surface-2) !important}               /*  66 uses · rows, rail buttons */
.h-b103:hover{filter:brightness(1.03) !important}                   /*  74 uses · filled tiles */
.h-ink:hover{color:var(--x-ink) !important}                         /*   4 uses · icon-only buttons */
.h-b104:hover{filter:brightness(1.04) !important}                   /*   2 uses */
.h-b115:hover{filter:brightness(1.15) !important}                   /*   1 use  */
.h-under:hover{text-decoration:underline !important}                /*   3 uses */
.h-accent:hover{border-color:var(--x-accent) !important}          /*   5 uses · rostering */
/* A DYNAMIC hover colour cannot be a static class. The element sets --hov inline from
 * its own datum (a lane hue, a team hue) and this one rule reads it — which is how the
 * original's style-hover="border-color:{{ b.hover }}" survives the port intact. */
.h-var:hover{border-color:var(--hov) !important}                    /*   8 uses */
.h-fill2:hover{background:var(--x-surface-2) !important}                   /*   1 use  */
.h-edge3:hover{border-color:var(--x-ink-3) !important}              /*   0 uses · kept, mapped from source */
.h-ink2:hover{color:var(--x-ink-2) !important}                      /*   0 uses · kept, mapped from source */
.h-surf:hover{background:var(--x-surface) !important}                 /*   1 use  */
.h-op1:hover{opacity:1 !important}                                  /*   0 uses · kept, mapped from source */
.h-danger:hover{border-color:var(--x-bad) !important}          /*   4 uses */
.h-danger-ink:hover{color:var(--x-bad) !important}             /*   1 use  */
.h-danger-fill:hover{background:var(--x-bad) !important}           /*   0 uses · kept, mapped from source */
.h-accent-ink:hover{color:var(--x-accent) !important}             /*   0 uses · kept, mapped from source */
.h-sep:hover{border-color:var(--x-line) !important}              /*   0 uses · kept, mapped from source */
.p-99:active{transform:scale(.99) !important}                       /*  26 uses */
.p-985:active{transform:scale(.985) !important}                     /*   0 uses · kept, mapped from source */
.p-96:active{transform:scale(.96) !important}                       /*   0 uses · kept, mapped from source */
.p-98:active{transform:scale(.98) !important}                       /*  14 uses */
.p-995:active{transform:scale(.995) !important}                     /*   3 uses */
.p-97:active{transform:scale(.97) !important}                       /*   1 use  */
.p-996:active{transform:scale(.996) !important}                     /*   1 use  */
@media (prefers-reduced-motion:reduce){
  /* !important HERE TOO, and it is not decoration. The press rules above are !important
   * because they have to beat an inline transform — which means an un-!important reset
   * LOSES to them, and reduced motion would not suppress the press scale at all. A reset
   * that has to out-rank what it resets carries the same weight as the thing it resets. */
  .p-99:active,.p-97:active,.p-996:active,.p-98:active,.p-995:active,.p-985:active,.p-96:active{transform:none !important}
}