/* EARTH EXTRAS: shake rings canvas, HOW BAD / volcano blocks in INSPECT, NEAR ME digest in the EARTH tab */
#exw-cv{position:fixed;inset:0;width:100vw;height:100vh;z-index:5;pointer-events:none}

.exw{margin:4px 0 6px}
.exw-g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.exw-c{border:1px solid var(--line2);background:color-mix(in srgb,var(--cy) 4%,transparent);padding:6px 8px;min-width:0}
.exw-c small{display:block;color:var(--dim);font-size:10px;letter-spacing:.2em}
.exw-c b{display:block;font:700 17px var(--hd);letter-spacing:.06em;margin-top:2px;color:var(--ink);overflow-wrap:anywhere}
.exw-c em{display:block;font-style:normal;color:var(--dim);font-size:10px;letter-spacing:.1em;margin-top:2px}
.exw-n{display:block;color:var(--dim);font-size:9.5px;letter-spacing:.1em;line-height:1.5;margin:8px 0 2px}
.exw-ld{animation:exwp 1.2s ease-in-out infinite}
@keyframes exwp{50%{opacity:.4}}
.exw-sm{display:block;position:relative;margin-top:8px;border:1px solid var(--line);background:#000}
.exw-sm img{display:block;width:100%;height:auto;max-height:260px;object-fit:contain}
.exw-sm span{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:10px;letter-spacing:.18em;color:var(--cy2);background:var(--panel2)}
.exw-s2{margin-top:14px}
.exw-t{width:100%;border-collapse:collapse;font-size:11px;margin-top:4px}
.exw-t th{font-weight:400;color:var(--dim);font-size:10px;letter-spacing:.16em;text-align:right;padding:3px 4px;border-bottom:1px solid var(--line)}
.exw-t th:first-child,.exw-t td:first-child{text-align:left}
.exw-t td{padding:5px 4px;text-align:right;border-bottom:1px solid var(--line2);color:var(--ink)}
.exw-t td:first-child{color:var(--dim);letter-spacing:.1em;font-size:10px}
.exw-t td.md{color:var(--warn)}.exw-t td.hi{color:var(--red2);font-weight:700}
.exw-syn{font-size:11px;line-height:1.5;color:var(--m-ink2);margin:8px 0 0;letter-spacing:.02em;max-height:130px;overflow:auto}
.exw-cams button{min-height:40px}
.exw-cams small{color:var(--dim);font-size:10px;letter-spacing:.14em}

/* NEAR ME */
#exw-nm{margin:10px 0 6px;padding:8px 10px 10px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--cy) 7%,transparent),color-mix(in srgb,var(--cy) 2%,transparent))}
.exw-nh{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.2em;color:var(--cy2);margin-bottom:6px}
.exw-nh span{flex:1;min-width:0}
.exw-nh b{font-weight:700;font-size:10px;letter-spacing:.18em;color:var(--c);border:1px solid var(--c);padding:1px 6px}
.exw-nh button{width:28px;height:28px;border:1px solid var(--line);color:var(--cy2);font-size:15px;line-height:1}
.exw-nh button:hover{background:color-mix(in srgb,var(--cy) 20%,transparent);color:var(--m-hi)}
.exw-ng{padding:6px 0;border-top:1px solid var(--line2)}
.exw-gh{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.2em;color:var(--ink)}
.exw-gh i{width:7px;height:7px;background:var(--c);flex:none;box-shadow:0 0 6px var(--c)}
.exw-gh span{flex:1;min-width:0}
.exw-gh b{font:700 14px var(--hd);color:var(--c)}
.exw-on{font-size:10px;letter-spacing:.14em;border:1px solid var(--line);padding:3px 8px;color:var(--cy2);min-height:24px}
.exw-on:hover{background:color-mix(in srgb,var(--cy) 20%,transparent);color:var(--m-hi)}
.exw-it{display:grid;grid-template-columns:1fr auto;gap:0 8px;width:100%;text-align:left;padding:5px 4px 5px 14px;font-size:11px;border-bottom:1px solid var(--line2);min-width:0}
button.exw-it:hover{background:color-mix(in srgb,var(--cy) 12%,transparent)}
.exw-it .t{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.exw-it .r{color:var(--dim);font-size:10px;white-space:nowrap}
.exw-it small{grid-column:1/-1;color:var(--dim);font-size:10px;letter-spacing:.12em}
.exw-it.s3 .t{color:var(--red2)}.exw-it.s2 .t{color:var(--warn)}
.exw-no{padding:4px 4px 2px 14px;color:var(--dim);font-size:10px;letter-spacing:.08em}

@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .exw-g{gap:5px}
  .exw-c b{font-size:16px}
  .exw-sm img{max-height:200px}
  .exw-sm span{position:static;display:block;padding:5px 6px} /* QA: caption sat on top of the ShakeMap legend table */
  .exw-it{min-height:40px;align-items:center;padding-top:6px;padding-bottom:6px}
  .exw-nh button{width:36px;height:36px}
  .exw-on{min-height:34px;padding:4px 10px}
  #exw-nm{margin-top:6px}
  #ins-extra>h2.sec:first-child{margin-top:16px} /* QA: first-child rule ate the gap under TELEMETRY */
}
@media (prefers-reduced-motion: reduce){.exw-ld{animation:none}}
/* UX sweep tab-extras: 44px touch targets */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .exw-on,.exw-nh button{min-height:44px}.exw-nh button{width:44px;height:44px}
}
/* light mode (CJ 10/13 polish): hazard group colors are data, pulled toward ink on paper */
html[data-theme="light"] :is(.exw-nh b,.exw-gh b){color:color-mix(in srgb,var(--c) 58%,var(--ink))}
html[data-theme="light"] .exw-nh b{border-color:color-mix(in srgb,var(--c) 70%,var(--ink))}
/* CJ 10/13 polish: severity colors arrive as --ic (were inline colors), so light mode can pull them toward ink */
.exw-c b.exw-ic,.exw-it .t.exw-ic{color:var(--ic)}
html[data-theme="light"] :is(.exw-c b.exw-ic,.exw-it .t.exw-ic){color:color-mix(in srgb,var(--ic) 58%,var(--ink))}
/* CJ 10/13 polish: HOW BAD / VOLCANO heading sat flush on the TELEMETRY rows on desktop too (the phone fix, everywhere) */
#ins-extra>h2.sec:first-child{margin-top:16px}