html{color-scheme:dark;}
:root{
  --top-h: 0px;
  --bg0:#07060b;
  --bg1:#0d0b14;
  --bg2:#141123;
  --card:#17142a;
  --line:rgba(255,255,255,.10);
  --txt:#f3f2ff;
  --mut:rgba(255,255,255,.68);

  --wizz-pink:#ff2fa6;
  --wizz-mag:#ff00b8;
  --wizz-purple:#7a3cff;
  --wizz-cyan:#2ef4ff;

  --ok:#2ee59d;
  --med:#ffcf5a;
  --high:#ff8a3d;
  --crit:#ff4b5c;

  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  --top-h: 0px;
}


*{box-sizing:border-box}

[hidden],
.hidden{ display:none !important; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--txt);
  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(255,47,166,.22), transparent 55%),
    radial-gradient(900px 500px at 80% 10%, rgba(122,60,255,.22), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, rgba(46,244,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.top{
  position:sticky;
  top:0;
  z-index:240;
  padding:16px 18px 10px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  justify-content:flex-start;
  background:linear-gradient(180deg, rgba(7,6,11,.92), rgba(7,6,11,.72));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}


.brand__title{
  white-space:nowrap;
  font-size:22px;
  font-weight:800;
  letter-spacing:.3px;
  background:linear-gradient(90deg,var(--wizz-pink),var(--wizz-purple),var(--wizz-cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 18px rgba(255,47,166,.18);
}

.viewpill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,47,166,.45);
  background:linear-gradient(90deg, rgba(255,47,166,.30), rgba(122,60,255,.24));
  color:rgba(255,255,255,.92);
  font-weight:900;
  letter-spacing:.25px;
  cursor:pointer;
  flex:0 0 auto;
  user-select:none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
}
.viewpill__k{
  font-size:11px;
  opacity:.9;
}
.viewpill__v{
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}
@media (max-width: 520px){
  .brand__row{flex-wrap:wrap;}
  .brand__title{white-space:normal;}
}

.brand__sub{
  margin-top:4px;
  color:var(--mut);
  font-size:13px;
}


.brand__row{
  display:flex;
  align-items:baseline;
  gap:12px;
}
.brand__row .brand__title{
  white-space:nowrap; margin:0; }

.tiles{
  display:grid;
  grid-template-columns:repeat(5, minmax(210px, 1fr));
  gap:12px;
  width:min(1180px, 100%);
  margin:0 auto;
}
@media (max-width: 1180px){
  .tiles{grid-template-columns:repeat(3, minmax(210px, 1fr));}
}
@media (max-width: 820px){
  .tiles{grid-template-columns:repeat(2, minmax(210px, 1fr));}
}
@media (max-width: 520px){
  .tiles{grid-template-columns:1fr;}
}
@media (max-width: 1180px){
  .tiles{grid-template-columns:repeat(3, minmax(210px, 1fr));}
}
@media (max-width: 820px){
  .tiles{grid-template-columns:repeat(2, minmax(210px, 1fr));}
}
@media (max-width: 520px){
  .tiles{grid-template-columns:1fr;}
}



.tile{
  color:var(--txt);
  border:1px solid transparent;
  border-radius:18px;
  padding:14px 14px;
  min-height:96px;
  text-align:left;
  cursor:pointer;
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(255,47,166,.55), rgba(120,84,255,.35), rgba(46,244,255,.22)) border-box;
  box-shadow:
    0 18px 34px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 28px rgba(255,47,166,.10);
  transition:transform .12s ease, box-shadow .20s ease, filter .20s ease;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
}
.tile:hover{
  transform:translateY(-2px);
  filter:saturate(1.08);
  box-shadow:
    0 22px 44px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 34px rgba(255,47,166,.16);
}
.tile__k{
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
  opacity:.95;
  line-height:1.15;
  min-height:26px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:none;
}
.tile__v{
  font-size:44px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1;
  margin-top:2px;
}
.tile__s{
  font-size:13px;
  color:rgba(255,255,255,.75);
  line-height:1.2;
  min-height:20px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.9;
}
.tile__iata{
  margin-top:auto;
  font-family:var(--mono);
  font-weight:900;
  letter-spacing:.6px;
  color:rgba(255,255,255,.92);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
  align-items:flex-start;
}
.tile__iata span{
  font-size:13px;
  padding:3px 7px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}

/* BASE airports: subtle but noticeable pulse in tile IATA chips */
@keyframes basePulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(255,47,166,.00); }
  50%{ box-shadow:0 0 0 6px rgba(255,47,166,.22); }
}
.tile__iata .iata-chip{ display:inline-flex; }
.tile__iata .iata-chip--base{
  border-color:rgba(255,47,166,.65);
  background:rgba(255,47,166,.10);
  animation:basePulse 2.8s ease-in-out infinite;
}
.tile__iata .iata-chip--more{ opacity:.85; }
@media (prefers-reduced-motion: reduce){
  .tile__iata .iata-chip--base{ animation:none; }
}
.tile--eng{
  border-color:rgba(255,75,92,.45);
  box-shadow:0 0 18px rgba(255,75,92,.12);
}
.tile--ghost{
  opacity:.90;
}

.toolbar{
  padding:10px 18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.search{
  flex:0 1 320px;
  max-width:360px;
  min-width:260px;
  border-radius:14px;
  padding:12px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--txt);
  outline:none;
  font-weight:650;
}
.search:focus{
  border-color:rgba(255,47,166,.40);
  box-shadow:0 0 0 4px rgba(255,47,166,.08);
}

.select{
  border-radius:14px;
  padding:12px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--txt);
  outline:none;
  font-weight:650;
}

.toggle{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  user-select:none;
  font-weight:700;
}

/* View toggle button (Auto / TV) */
.viewbtn{
  margin-left:12px;
  margin-top:0;
  width:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,47,166,.35);
  background:linear-gradient(90deg, rgba(255,47,166,.18), rgba(122,60,255,.16));
  color:var(--txt);
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.viewbtn:hover{ border-color:rgba(255,47,166,.55); }
.viewbtn .btn__k{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.78;
}
.viewbtn .btn__v{
  font-weight:950;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

/* Device-aware responsiveness (keep data dense on desktop, reduce columns on small screens) */
body.device-mobile .col-raw,
body.device-tablet .col-raw{
  display:none;
}
body.device-mobile .search{ min-width: 180px; }
.toggle input{ transform:scale(1.05); }

.legend{
  margin:0 18px 10px 18px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.legend__tip{ color:var(--mut); font-size:12px; margin-bottom:10px; }
.legend__row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:8px 0; }
.legend__txt{ color:var(--mut); font-size:12px; margin-right:8px; }

.statusline{
  margin:0 18px 10px 18px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.statusline__item{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.80);
}

.tablewrap{
  margin:0 18px 20px 18px;
  border-radius:16px;
  border:1px solid var(--line);
  overflow:hidden;
  background:rgba(0,0,0,.20);
}
.tbl{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left;
  padding:12px 12px;
  font-size:12px;
  letter-spacing:.25px;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line);
}
tbody td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}
tbody tr:hover{ background:rgba(255,255,255,.02); }
.col-airport{ width:200px; }
.col-alert{ width:90px; }
.col-vis{ width:100px; }
.col-lowvis{ width:110px; }
.col-trig{ width:260px; }
.col-age{ width:90px; }
.col-raw{ width:420px; }

.airport{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.airport__codes{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:72px;
}
.airport__icao{
  font-family:var(--mono);
  font-weight:900;
  letter-spacing:.6px;
  font-size:13px;
}
.airport__iata{
  font-family:var(--mono);
  font-weight:900;
  letter-spacing:.8px;
  font-size:12px;
  color:rgba(255,255,255,.82);
}
.airport__iata.is-base{
  color:var(--wizz-pink);
  text-shadow:0 0 10px rgba(255,47,166,.22);
}
.airport__name{
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.2;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  font-weight:900;
  letter-spacing:.3px;
  font-size:12px;
}
.pill--ok{ color:var(--ok); border-color:rgba(46,229,157,.35); }
.pill--med{ color:var(--med); border-color:rgba(255,207,90,.35); }
.pill--high{ color:var(--high); border-color:rgba(255,138,61,.35); }
.pill--crit{ color:var(--crit); border-color:rgba(255,75,92,.40); box-shadow:0 0 16px rgba(255,75,92,.10); }

.age{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);
  font-size:12px;
  font-weight:800;
}
.age--fresh{ border-color:rgba(46,229,157,.35); }
.age--warn{ border-color:rgba(255,207,90,.35); }
.age--stale{ border-color:rgba(255,75,92,.35); }

.triggers{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.triggers--drawer{ margin-top:6px; }
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  font-family:var(--mono);
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  white-space:nowrap;
}
.tag--eng{ border-color:rgba(255,75,92,.45); box-shadow:0 0 14px rgba(255,75,92,.10); }
.tag--cig{ border-color:rgba(46,229,157,.40); }
.tag--vis{ border-color:rgba(255,207,90,.35); }
.tag--rvr{ border-color:rgba(122,60,255,.35); }
.tag--wx{ border-color:rgba(255,255,255,.18); }
.tag--gust{ border-color:rgba(46,244,255,.35); }
.tag--src{
  border-color:rgba(255,255,255,.18);
  padding:1px 6px;
  font-size:11px;
  opacity:.9;
}

/* highlight bubbles — avoid overlap */
.raw{
  margin:0;
  font-family:var(--mono);
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.45;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}
.hl{
  display:inline-block;
  padding:1px 7px;
  margin:2px 3px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  font-weight:900;
  line-height:1.2;

  display:inline-block;
  margin:0 4px 3px 0;
  line-height:1.25;
}
.hl[data-cat="vis"]{ border-color:rgba(255,207,90,.35); }
.hl[data-cat="rvr"]{ border-color:rgba(122,60,255,.35); }
.hl[data-cat="wx"]{ border-color:rgba(255,255,255,.18); }
.hl[data-cat="cig"]{ border-color:rgba(46,229,157,.40); }
.hl[data-cat="eng"]{ border-color:rgba(255,75,92,.50); box-shadow:0 0 14px rgba(255,75,92,.10); }

/* VIS thresholds */
.hl-vis-800{ background:rgba(255,207,90,.12); }
.hl-vis-550{ background:rgba(255,186,90,.14); }
.hl-vis-500{ background:rgba(255,160,90,.16); }
.hl-vis-300{ background:rgba(255,138,61,.18); }
.hl-vis-250{ background:rgba(255,120,61,.20); }
.hl-vis-175{ background:rgba(255,75,92,.22); }
.hl-vis-150{ background:rgba(255,75,92,.28); }

/* RVR thresholds */
.hl-rvr-500{ background:rgba(122,60,255,.14); }
.hl-rvr-300{ background:rgba(170,90,255,.18); }
.hl-rvr-200{ background:rgba(255,90,220,.20); }
.hl-rvr-75 { background:rgba(255,75,92,.26); }

/* hazards */
.hl-wx-ts{ background:rgba(255,75,92,.22); }
.hl-wx-snow{ background:rgba(46,244,255,.14); }
.hl-wx-fog{ background:rgba(255,255,255,.10); }
.hl-wx-rain{ background:rgba(255,207,90,.10); }

/* wind gusts */
.hl[data-cat="wind"]{ border-color:rgba(46,244,255,.30); }
.hl-gust-25{ background:rgba(46,244,255,.08); }
.hl-gust-30{ background:rgba(46,244,255,.12); }
.hl-gust-40{ background:rgba(255,75,92,.18); }

.trend{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-weight:900;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  opacity:.95;
  margin-left:8px;
}
.trend--up{ border-color:rgba(46,229,157,.35); }
.trend--down{ border-color:rgba(255,75,92,.35); }
.trend--flat{ border-color:rgba(255,255,255,.18); }
.trend--new{ border-color:rgba(255,207,90,.35); }

.muted{ color:var(--mut); }

/* Drawer */
.drawer{
  position:fixed;
  top:var(--top-h); right:0;
  height:calc(100vh - var(--top-h));
  width:min(520px, 94vw);
  background:linear-gradient(180deg, rgba(15,12,26,.98), rgba(10,8,18,.98));
  border-left:1px solid rgba(255,255,255,.12);
  padding:18px 18px;
  transform:translateX(102%);
  transition:transform .20s ease;
  z-index:230;
  overflow:auto;
  scroll-padding-bottom:72px;
  -webkit-overflow-scrolling: touch;
}

/* Extra scroll room so the last "Decoded" box bottom border is always visible */
.drawer::after{
  content:"";
  display:block;
  height:48px;
}
.drawer.is-open{ transform:translateX(0); }
.drawer__close{
  position:sticky;
  top:0;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  color:var(--txt);
  font-size:18px;
  cursor:pointer;
}
.drawer__head{ margin-top:6px; }
.drawer__airport{ font-weight:900; font-size:18px; letter-spacing:.2px; }
.drawer__sub{ color:var(--mut); font-size:12px; margin-top:2px; }

.cards{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  border-radius:14px;
  padding:10px 10px;
}
.card__k{ color:var(--mut); font-size:12px; }
.card__v{ font-weight:900; font-size:22px; margin-top:4px; }
.drawer__section{ margin-top:14px; }
.drawer__k{ font-weight:900; letter-spacing:.2px; margin-bottom:8px; }

.btn{
  margin-top:12px;
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,47,166,.40);
  background:linear-gradient(90deg, rgba(255,47,166,.28), rgba(122,60,255,.22));
  color:var(--txt);
  font-weight:900;
  cursor:pointer;
}
.btn:hover{ border-color:rgba(255,47,166,.60); }

.decoded{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  border-radius:14px;
  padding:10px 12px;
  color:rgba(255,255,255,.86);
  font-size:13px;
}
.decoded ul{ margin:0; padding-left:18px; }
.decoded li{ margin:4px 0; }

.scrim{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.50);
  z-index:40;
}


/* Dropdown readability */
.select{ -webkit-appearance:none; appearance:auto; }
.select option, .select optgroup{
  background:#0d0b14;
  color:var(--txt);
}

/* Quick View triggers layout */
.drawer .triggers{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.drawer .tag{ display:inline-flex; align-items:center; gap:6px; }


.select{ color-scheme: dark; }
.select option, .select optgroup{ background:#0f0c1a; color:#fff; }



/* TV mode: dashboard-only (hide interactive controls) */
body.view-tv .toolbar,
body.view-tv .legend{ display:none; }
body.view-tv #tileReset{ display:none; }
/* TV mode: large typography + extra readable, far-distance dashboard */
body.view-tv{
  --top-h: var(--top-h);
}
body.view-tv .tiles{
  grid-template-columns:repeat(4, minmax(280px, 1fr));
  width:min(1800px, 100%);
  gap:18px;
}
body.view-tv .tile{
  border-radius:22px;
  padding:18px 18px;
  min-height:130px;
  box-shadow:
    0 24px 44px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 46px rgba(255,47,166,.16);
}
body.view-tv .tile__k{font-size:26px;min-height:36px;}
body.view-tv .tile__v{ font-size:54px; text-shadow:0 0 18px rgba(255,47,166,.22), 0 0 26px rgba(46,244,255,.14); }
body.view-tv .tile__s{font-size:15px;min-height:22px;}
body.view-tv .tile__iata{ justify-content:flex-start; }
body.view-tv .tile__iata span{
  font-size:16px;
  padding:7px 10px;
  border-radius:999px;
}
body.view-tv .brand__title{
  white-space:nowrap; font-size:26px; }
body.view-tv .brand__sub{ font-size:13px; }

body.view-tv .tbl th{ font-size:13px; }
body.view-tv .tbl td{ font-size:16px; }
body.view-tv .airport__icao{ font-size:20px; }
body.view-tv .airport__iata{ font-size:18px; }
body.view-tv .raw{ font-size:14px; line-height:1.6; }
body.view-tv .trend{ font-size:13px; padding:4px 10px; }
body.view-tv .tag{ font-size:13px; padding:6px 10px; }


/* v28: ensure VIEW pill stays compact (no full-width bar) */
.viewpill{
  width: fit-content;
  max-width: max-content;
  flex: 0 0 auto;
  margin-left: 12px;
}
.brand__row{ align-items: center; }
.brand__title{ white-space: nowrap; }


/* v30: stats link */
.statsLink{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;font-weight:700;letter-spacing:.04em;font-size:.78rem;background:rgba(0,0,0,.18)}
.statsLink:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
.brand__sub--links{margin-top:.35rem}


/* --- OM policy tiles: stability / overflow guards --- */
.tile { overflow: hidden; }
.tile__s{
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tile--om{ border-color: rgba(255,255,255,.18); }
.tile--data{ border-style: dashed; }


/* OM build: prevent KPI subtitle overflow (Dataset tile, TV/AUTO) */
.tile{ overflow:hidden; }
.tile__s{ white-space:normal; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#tileDataset .tile__s{ font-size:12px; line-height:1.2; }


/* OM policy tags */
.tag--stop{ border-color: rgba(255,0,0,.45); background: rgba(255,0,0,.12); }
.tag--lvto{ border-color: rgba(255,165,0,.45); background: rgba(255,165,0,.12); }
.tag--warn{ border-color: rgba(255,255,0,.35); background: rgba(255,255,0,.10); }


/* Explain section */
.explain{
  margin:10px 14px 12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  border-radius:16px;
}
.explain h2{
  margin:0 0 8px;
  font-size:18px;
}
.explain__lead{
  margin:0 0 12px;
  opacity:.92;
  line-height:1.45;
}
.explain__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.explain__card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  border-radius:14px;
  padding:12px;
}
.explain__card h3{
  margin:0 0 8px;
  font-size:14px;
}
.explain__card ul{
  margin:0;
  padding-left:18px;
  line-height:1.45;
  opacity:.92;
}
@media (max-width: 980px){
  .explain__grid{ grid-template-columns: 1fr; }
}



/* Header quick links (Stats / Settings) styled like VIEW pill */
a.viewpill{ text-decoration:none; }
.viewpill--link{ gap:0.35rem; }
.viewpill--link .viewpill__v{ display:none; }
.viewpill--link .viewpill__k{ font-weight:800; }

/* Main split layout: table + sticky explain */
.contentSplit{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap: 14px;
  align-items:start;
}
.contentSplit__aside{
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow:auto;
}
@media (max-width: 1100px){
  .contentSplit{
    grid-template-columns: 1fr;
  }
  .contentSplit__aside{
    position: static;
    max-height: none;
    overflow: visible;
    order: -1;
  }
}

/* Ages cell */
.col-ages{ white-space:nowrap; }
.ages{ display:flex; flex-direction:row; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:nowrap; }
.agepill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-family:var(--mono);
  font-size:12px;
  line-height:1;
}
.age__k{
  display:inline-block;
  width: 14px;
  opacity: .75;
  font-weight: 800;
  letter-spacing: .04em;
  margin-right: 6px;
}


/* AUTO view: do not pin the tiles/header while scrolling */
body.view-auto header.top{ position:static; top:auto; }


/* Table column nowrap fixes */
.tbl th:nth-child(4), .tbl td:nth-child(4){ white-space:nowrap; }
.tbl th:nth-child(9), .tbl td:nth-child(9){ white-space:nowrap; }
.tbl th:nth-child(4){ min-width:110px; }
.tbl td:nth-child(4){ min-width:110px; }
.tbl th:nth-child(9){ min-width:140px; }
.tbl td:nth-child(9){ min-width:140px; }

.worst{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.worst__v{ min-width:40px; text-align:right; }

/* --- Tile hover tooltips (dashboard) --- */
.tile-tip{
  position:fixed;
  z-index:10000;
  max-width:460px;
  padding:12px 12px;
  border-radius:16px;
  background:rgba(18,16,32,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
}
.tile-tip.is-on{opacity:1; transform:translateY(0);}
.tile-tip__h{display:flex; align-items:center; gap:10px; margin:0 0 8px 0;}
.tile-tip__t{font-weight:900; letter-spacing:.02em;}
.tile-tip__b{font-size:12px; color:rgba(255,255,255,.78); margin:0 0 6px 0; line-height:1.35;}
.tile-tip__k{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.6); margin-top:10px;}
.tile-tip__om{font-size:12px; color:rgba(255,255,255,.82); margin-top:6px; line-height:1.35;}
.tile-tip__ul{margin:6px 0 0 16px; padding:0;}
.tile-tip__ul li{margin:2px 0; font-size:12px; color:rgba(255,255,255,.85);}