/* Warning-lights page: an instrument-cluster panel where each telltale glows in its real color. */
.mxd h2{margin-bottom:.5rem}
.mxd-note{color:var(--ink-soft,#3b5066);max-width:60ch;margin:0 0 1rem}
.mxd-key{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.25rem;font-size:var(--t-small,.95rem);font-weight:600;color:var(--moxie-navy,#1b3a57);margin:0 0 1.25rem}
.mxd-k{white-space:nowrap}
.mxd-dot{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;margin-right:.4rem;vertical-align:-.04rem}
.mxd-dot--red{background:#ff4b3a;box-shadow:0 0 8px #ff4b3a}
.mxd-dot--amber,.mxd-dot--blink{background:#ffae1a;box-shadow:0 0 8px #ffae1a}

.mxd-panel{position:relative;border-radius:28px;padding:clamp(1rem,3vw,2rem);
  background:radial-gradient(90% 70% at 50% 0%,#14263a 0%,#070d15 75%);
  box-shadow:inset 0 0 0 1px #ffffff10,inset 0 2px 0 #ffffff0d,inset 0 -40px 80px #000a,0 24px 50px -30px #070d15}
.mxd-panel:before{content:"";position:absolute;inset:10px;border-radius:20px;border:1px solid #ffffff08;pointer-events:none}
.mxd-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem}
@media(min-width:620px){.mxd-grid{grid-template-columns:repeat(4,1fr)}}
.mxd-tile{display:grid;justify-items:center;align-content:start;text-align:center;gap:.2rem;height:100%;padding:1rem .5rem .9rem;border-radius:16px;text-decoration:none;transition:background-color .2s ease}
.mxd-tile:hover,.mxd-tile:focus-visible{background:#ffffff0c}
.mxd-tile:focus-visible{outline:3px solid var(--sunshine,#f5c451);outline-offset:-3px}
.mxd-lens{display:grid;place-items:center;width:4.5rem;height:4.5rem;border-radius:50%;margin-bottom:.45rem;
  background:radial-gradient(circle at 50% 40%,#101c29 0%,#050a10 70%);box-shadow:inset 0 2px 6px #000c,0 1px 0 #ffffff12}
.mxd-icon{width:2.6rem;height:2.6rem}
.mxd-red{--c:#ff4b3a}
.mxd-amber{--c:#ffae1a}
.mxd-tile .mxd-icon{color:var(--c);filter:drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 9px color-mix(in srgb,var(--c) 65%,transparent))}
.mxd-tile .mxd-lens{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 14%,#0b1520) 0%,#050a10 72%)}
.mxd-name{font-family:var(--font-display,Montserrat,sans-serif);font-weight:700;color:#eef3f8;font-size:.95rem;line-height:1.25}
.mxd-mean{color:#8fa8bf;font-size:.8rem;line-height:1.35;max-width:16ch}
/* Reduced motion: the flashing light shows a dashed ring instead of blinking */
.mxd-blink .mxd-lens{outline:2px dashed color-mix(in srgb,var(--c) 70%,transparent);outline-offset:3px}

@media (prefers-reduced-motion:no-preference){
  .mxd-blink .mxd-lens{outline:none}
  /* Key-on bulb check: telltales start dark, then come on one by one */
  .mxd-icon,.mxd-lens{transition:color .4s ease-out calc(var(--i) * 60ms),filter .4s ease-out calc(var(--i) * 60ms),background .4s ease-out calc(var(--i) * 60ms)}
  .mxd-panel.mxd-off .mxd-icon{color:#1c2a38;filter:none}
  .mxd-panel.mxd-off .mxd-lens{background:radial-gradient(circle at 50% 40%,#101c29 0%,#050a10 70%)}
  /* Blink is driven by a 0.5s timer in dash-lights.js toggling .mxd-dim on the section */
  .mxd.mxd-dim .mxd-panel:not(.mxd-off) .mxd-blink .mxd-icon{color:#2a2010;filter:none;transition:none}
  .mxd.mxd-dim .mxd-panel:not(.mxd-off) .mxd-blink .mxd-lens{background:radial-gradient(circle at 50% 40%,#101c29 0%,#050a10 70%);transition:none}
  .mxd.mxd-dim .mxd-dot--blink{opacity:.15}
}