/* hot_cold.css - the ONE hot / cold look (1673, owner pick "look 2"). Paired with js/hot_cold.js and the +mt3HotCold mixin (templates/mixins/mt3.pug).
   The mixin draws <span class="hc-tag" data-hc-state="hot|cold"> inside a row, tile or card; the script marks that part data-hc and paints a small canvas BEHIND
   its content (z-index -1 inside an isolated part), so it never covers a name, number or logo and never moves or resizes the part. */
[data-hc] { isolation: isolate; }
[data-hc] > canvas.hcfx { position: absolute; z-index: -1; pointer-events: none; display: block; border: 0; margin: 0; padding: 0; }
/* where WebGL is missing (or before the first paint) the part still wears a plain coloured edge */
html:not([data-hc-gl]) [data-hc="hot"] { box-shadow: inset 0 0 0 1px rgba(255, 70, 55, .6); }
html:not([data-hc-gl]) [data-hc="cold"] { box-shadow: inset 0 0 0 1px rgba(120, 190, 255, .6); }
:root[data-theme="light"]:not([data-hc-gl]) [data-hc="hot"] { box-shadow: inset 0 0 0 1px rgba(200, 30, 20, .6); }
:root[data-theme="light"]:not([data-hc-gl]) [data-hc="cold"] { box-shadow: inset 0 0 0 1px rgba(30, 100, 210, .6); }
/* a table row (tr, .mt3-tr, role=row) holds no canvas: it always wears the plain coloured edge (js/hot_cold.js marks it data-hc-flat) */
[data-hc-flat="1"][data-hc="hot"] { box-shadow: inset 3px 0 0 rgba(255, 70, 55, .85), inset 0 0 0 1px rgba(255, 70, 55, .45); }
[data-hc-flat="1"][data-hc="cold"] { box-shadow: inset 3px 0 0 rgba(120, 190, 255, .85), inset 0 0 0 1px rgba(120, 190, 255, .45); }
:root[data-theme="light"] [data-hc-flat="1"][data-hc="hot"] { box-shadow: inset 3px 0 0 rgba(200, 30, 20, .85), inset 0 0 0 1px rgba(200, 30, 20, .4); }
:root[data-theme="light"] [data-hc-flat="1"][data-hc="cold"] { box-shadow: inset 3px 0 0 rgba(30, 100, 210, .85), inset 0 0 0 1px rgba(30, 100, 210, .4); }
.hc-tag { display: contents; }
.hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* the mark's control: made by the script OUTSIDE any row link and laid over the corner mark. It takes no pointer events (the script reads a tap or a hover on
   the bare mark itself), so it never covers a name, crest or number and the row link keeps every other tap. It is there for the keyboard and screen readers. */
.hc-tap { position: absolute; z-index: 3; left: 0; top: 0; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0 0 8px 0; background: transparent; color: inherit; pointer-events: none; -webkit-tap-highlight-color: transparent; }
.hc-tap:focus { outline: none; }
.hc-tap:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
/* the sentence: ONE floating box at the end of the page (never clipped by a card), above the part or below it, never over the part's name */
.hc-pop { position: fixed; z-index: 2147483000; left: 0; top: 0; width: max-content; max-width: min(260px, calc(100vw - 16px)); margin: 0; padding: 8px 10px; border-radius: 10px; font: 500 14px/1.35 var(--m-bodyf, inherit); text-align: left; overflow-wrap: break-word; color: var(--m-tx, #fff); background: var(--m-sf, #1b2030); border: 1px solid var(--m-bd, rgba(255, 255, 255, .18)); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); pointer-events: none; }
:root[data-theme="light"] .hc-pop { color: var(--m-tx, #10131a); background: var(--m-sf, #fff); border-color: var(--m-bd, rgba(0, 0, 0, .14)); }
:root .hc-pop[data-hc="hot"] { border-left: 3px solid #ff4637; }
:root .hc-pop[data-hc="cold"] { border-left: 3px solid #78beff; }
.hc-pop[hidden] { display: none; }

/* 1777 (owner build 12, picture 64): gentle looping motion on the hot / cold edge, CSS only. js/hot_cold.js adds ONE <span class="hcfx-css"> with four <i> specks to every marked part (never a table row's tr).
   Hot = a soft glow pulse and a few tiny embers drifting up along the edge; cold = a faint shimmer and a few small snowflakes drifting down. Only transform and opacity move, the layer sits behind the content
   (z-index -1 in the part's own stacking context), takes no pointer events and cannot move or resize the part, so it never covers a name, the W/L badge or the corner mark. No pause control, ever. */
.hcfx-css { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; contain: paint; }
.hcfx-css i { position: absolute; display: block; width: 3px; height: 3px; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.hcfx-css i:nth-child(1) { left: 3%; } .hcfx-css i:nth-child(2) { left: 31%; } .hcfx-css i:nth-child(3) { left: 66%; } .hcfx-css i:nth-child(4) { left: 97%; }
[data-hc="hot"] > .hcfx-css { box-shadow: inset 0 0 12px 0 rgba(255, 70, 55, .30); animation: hc-glow 2.8s ease-in-out infinite; }
[data-hc="hot"] > .hcfx-css i { bottom: -4px; background: #ffb347; box-shadow: 0 0 4px 1px rgba(255, 110, 40, .8); animation: hc-ember 3.6s linear infinite; }
[data-hc="cold"] > .hcfx-css { box-shadow: inset 0 0 12px 0 rgba(120, 190, 255, .28); animation: hc-glow 3.6s ease-in-out infinite; }
[data-hc="cold"] > .hcfx-css i { top: -5px; width: 5px; height: 5px; border-radius: 0; background: linear-gradient(#e9f6ff, #e9f6ff) center / 100% 1px no-repeat, linear-gradient(#e9f6ff, #e9f6ff) center / 1px 100% no-repeat, linear-gradient(45deg, transparent 45%, #e9f6ff 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #e9f6ff 45% 55%, transparent 55%); animation: hc-flake 4.6s linear infinite; }
.hcfx-css i:nth-child(2) { animation-delay: -1.1s; } .hcfx-css i:nth-child(3) { animation-delay: -2.2s; } .hcfx-css i:nth-child(4) { animation-delay: -3.1s; }
:root[data-theme="light"] [data-hc="hot"] > .hcfx-css i { background: #d9531e; box-shadow: 0 0 3px 1px rgba(200, 60, 20, .6); }
:root[data-theme="light"] [data-hc="cold"] > .hcfx-css i { filter: brightness(.55) saturate(2.2); }
@keyframes hc-ember { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .9; } 70% { opacity: .6; } 100% { transform: translate3d(5px, -72px, 0); opacity: 0; } }
@keyframes hc-flake { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 15% { opacity: .85; } 80% { opacity: .5; } 100% { transform: translate3d(-4px, 72px, 0) rotate(120deg); opacity: 0; } }
@keyframes hc-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* reduced motion (the OS setting, or the kit's motion / extras switch off): the specks stay away, the glow only breathes slowly */
@media (prefers-reduced-motion: reduce) {
  .hcfx-css i { display: none; }
  [data-hc] > .hcfx-css { animation-duration: 5s; }
}
html[data-motion="off"] .hcfx-css i, html[data-extras="off"] .hcfx-css i { display: none; }
html[data-motion="off"] [data-hc] > .hcfx-css, html[data-extras="off"] [data-hc] > .hcfx-css { animation-duration: 5s; }