/* The Muskoka Parcel · ONE shared hotspot glow + cursor for the cabin (/ : gate, outside, inside, zoom states, dialogs) and /calendar/.
   Every clickable element carries class "hl" (in the markup; js/hl.js also tags anything added later and adds the touch press).
   States: hover (mouse/trackpad only), keyboard :focus-visible, and .hl-press = a brief glow on touch press (js/hl.js).
   Colour: warm goldish-yellow, rgb(255 200 84) ≈ #FFC854 — the hooks' warm halo, pushed toward gold.
   Variants:
     .hl            shape-following glow (filter: drop-shadow). Keep an element's own base filter by putting it in --hl-pre.
     .hl--ring      box-shadow ring: transparent hit areas and the 3D flip calendar (a filter would flatten its 3D pages).
     .hl--via       transparent overlay; the drawing under it glows instead (rules at the bottom).
     .hl--field     text field: glows on focus, keeps the text cursor.
     .hl--nog       pointer cursor only, no glow (the full-room "click to zoom back out" catcher).
   No animation anywhere in here, so reduced motion already gets a static glow. */
:root{
  --hl-rgb:255 200 84;
  --hl-glow:drop-shadow(0 0 4px rgb(var(--hl-rgb) / .95)) drop-shadow(0 0 14px rgb(var(--hl-rgb) / .6));
  --hl-ring:0 0 0 2px rgb(var(--hl-rgb) / .8),0 0 18px 4px rgb(var(--hl-rgb) / .55);
  --hl-cursor:pointer;
}
/* one cursor for everything interactive (no zoom-in/zoom-out/grab one-offs) */
.hl,.hl *{cursor:var(--hl-cursor)!important}
.hl--field,.hl--field *{cursor:text!important}
.hl:disabled,.hl:disabled *{cursor:default!important}

/* default: shape-following glow */
.hl:focus-visible,.hl.hl-press{--hl-on:1;filter:var(--hl-pre,) var(--hl-glow)}
@media (hover:hover){.hl:hover:not(:disabled){--hl-on:1;filter:var(--hl-pre,) var(--hl-glow)}}

/* ring */
.hl.hl--ring:focus-visible,.hl.hl--ring.hl-press{filter:var(--hl-pre,none);box-shadow:var(--hl-ring)}
@media (hover:hover){.hl.hl--ring:hover:not(:disabled){filter:var(--hl-pre,none);box-shadow:var(--hl-ring)}}

/* via: the overlay itself stays invisible, the drawing it covers glows */
.hl.hl--via:focus-visible,.hl.hl--via.hl-press{filter:none}
@media (hover:hover){.hl.hl--via:hover{filter:none}}
.stage:has(>.shelf-hot:focus-visible)>.shelf,.stage:has(>.shelf-hot.hl-press)>.shelf{filter:drop-shadow(0 12px 14px rgba(0,0,0,.5)) var(--hl-glow)}
.stage:has(>.deck-hot:focus-visible)>.odeck,.stage:has(>.deck-hot.hl-press)>.odeck{filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)) var(--hl-glow)}
@media (hover:hover){
  .stage:has(>.shelf-hot:hover)>.shelf{filter:drop-shadow(0 12px 14px rgba(0,0,0,.5)) var(--hl-glow)}
  .stage:has(>.deck-hot:hover)>.odeck{filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)) var(--hl-glow)}
}

/* no glow */
.hl.hl--nog:focus-visible,.hl.hl--nog.hl-press{--hl-on:0;filter:none}
@media (hover:hover){.hl.hl--nog:hover{--hl-on:0;filter:none}}

/* while a log is being dragged to the stove the pointer stays the same pointer (no grab/grabbing) */
.log-drag,.log-drag *{cursor:var(--hl-cursor)!important}