/* NZ Earthquakes: additions on top of the shared dashboard styles */
:root {
  /* depth bands: one blue ramp, shallow = lightest (validated, ordinal, dark surface) */
  --d1: #b7d3f6; --d2: #6da7ec; --d3: #2a78d6; --d4: #184f95;
  --land: #1d1d1f;
  --coast: rgba(255, 255, 255, .22);
  --live: #ef5a1e;
}
.grid-map { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid-map > * { min-width: 0; }
.stack > .panel:last-child { margin-bottom: 20px; }
@media (max-width: 980px) { .grid-map { grid-template-columns: 1fr; } }

.map svg { background: radial-gradient(closest-side, rgba(57, 135, 229, .05), transparent); border-radius: 12px; }
.land { fill: var(--land); stroke: var(--coast); stroke-width: .8; }
.quake { stroke: rgba(5, 5, 5, .55); stroke-width: .5; }
.city-dot { fill: var(--text-dim); }
.city-lbl { font: 500 11px var(--font-body); fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.section-line { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.hl-ring { fill: none; stroke: var(--text); stroke-width: 1.5; }
.big-lbl { font: 600 11px var(--font-body); fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }

.live { border-color: rgba(239, 90, 30, .28); }
.live-label { color: var(--live); display: inline-flex; align-items: center; gap: 8px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(239, 90, 30, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(239, 90, 30, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 90, 30, 0); } }
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 18px; }
@media (max-width: 860px) { .live-grid { grid-template-columns: 1fr; } }
.live-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); margin-top: 0; }
.live-tiles .tile { padding: 14px 16px; }
.live-tiles .tile { background: var(--bg); }
.live-tiles .tile-value { font-size: 28px; }
.mini-h { font: 500 12px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 6px 0 10px; }
.quake-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.quake-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.quake-list li:last-child { border-bottom: 0; }
.quake-list .mag { font: 600 15px var(--font-mono); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 7px; }
.quake-list .mag i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.quake-list .where { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quake-list .where small { display: block; color: var(--muted); font-size: 12.5px; }
.quake-list .when { font: 12px var(--font-mono); color: var(--muted); white-space: nowrap; }
.quake-list a { text-decoration: none; }
.quake-list a:hover .where { color: #ff7d3a; }
.muted-li { color: var(--muted); display: block !important; }
.depth-key { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); margin-top: 10px; }
.depth-key span { display: inline-flex; align-items: center; gap: 6px; }
.depth-key i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.table-wrap.short { max-height: 360px; }
.bar { shape-rendering: crispEdges; }
.mark-lbl { font: 500 11px var(--font-body); fill: var(--gold); }
.mark-line { stroke: rgba(201, 160, 76, .45); stroke-dasharray: 2 3; }
.fit { fill: none; stroke: var(--nz); stroke-width: 1.5; stroke-dasharray: 5 4; }
.table-wrap.tall { max-height: none; }
#table-largest td:first-child, #table-largest td.num, #table-types td.num { white-space: nowrap; }
.map svg { overflow: hidden; }
.quake-list a { min-width: 0; display: block; }
@media (max-width: 600px) {
  .live-tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .quake-list li { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
}
.quake-list .where { display: block; }
@media (max-width: 600px) {
  #table-largest td:last-child, #table-types td:last-child { white-space: nowrap; }
}
@media (max-width: 600px) {
  .quake-list li { grid-template-columns: 48px minmax(0, 1fr); }
  .quake-list .when { display: none; }
  .quake-list .where { white-space: normal; }
}