/* /quake/ page — builds on styles.css tokens and economy.css panels (.ec-panel, .ec-tabs, .al-*) */
:root {
  --q-micro: #9AA38F; --q-minor: #6FA84F; --q-light: #D9A82B; --q-moderate: #E07B2E; --q-strong: #D2402F; --q-major: #8E1B1B;
  --q-sea: #DCE8EE; --q-land: #ECEADF; --q-prov: #F7F6F0; --q-line: #C9C6B6;
}
:root[data-theme="dark"] {
  --q-micro: #7D876F; --q-sea: #0E2530; --q-land: #1B2118; --q-prov: #283222; --q-line: #4B5842;
}
.c-micro { --qc: var(--q-micro); } .c-minor { --qc: var(--q-minor); } .c-light { --qc: var(--q-light); }
.c-moderate { --qc: var(--q-moderate); } .c-strong { --qc: var(--q-strong); } .c-major { --qc: var(--q-major); }

/* latest / strongest cards + stats */
.qk-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.qk-feature { display: grid; gap: 12px; }
.qk-card {
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 18px 14px; box-shadow: var(--shadow); animation: mk-drop .6s cubic-bezier(.2,.8,.2,1) both;
}
.qk-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--qc); }
.qk-card-k { font-size: .75rem; font-weight: 700; color: var(--text-mute); }
.qk-card-row { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
.qk-big { flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: color-mix(in srgb, var(--qc) 16%, transparent); border: 2px solid var(--qc); }
.qk-big b { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.qk-big small { font-size: .62rem; color: var(--text-mute); margin-top: 2px; }
.qk-card-where { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.6; }
.qk-card-meta { margin: 2px 0 0; font-size: .82rem; color: var(--text-dim); }
.qk-card-meta span { color: var(--text-mute); }
.qk-card-cls { margin: 4px 0 0; font-size: .82rem; color: var(--text-dim); line-height: 1.7; }
.qk-card-cls b { color: var(--text); }
.qk-calm { margin: 0; padding: 12px 14px; border-radius: var(--r); background: var(--mk-good-tint); border: 1px solid color-mix(in srgb, var(--mk-good) 30%, transparent); font-size: .9rem; line-height: 1.8; }
.qk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qk-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; display: grid; gap: 2px; }
.qk-stat b { font-size: 1.7rem; font-weight: 800; color: var(--green-ink); line-height: 1.2; }
:root[data-theme="dark"] .qk-stat b { color: var(--green); }
.qk-stat span { font-size: .8rem; color: var(--text-dim); font-weight: 600; }

/* map + list */
.qk-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.qk-map { position: relative; margin-top: 6px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border-soft); }
.qk-map svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.qm-sea { fill: var(--q-sea); }
.qm-land { fill: var(--q-land); stroke: var(--q-line); stroke-width: 1; }
.qm-prov path { fill: var(--q-prov); stroke: var(--q-line); stroke-width: 1; transition: fill .2s; }
.qm-prov path:hover { fill: color-mix(in srgb, var(--green) 14%, var(--q-prov)); }
.qm-cities circle { fill: var(--text-dim); }
.qm-cities text { font-size: 20px; font-weight: 600; fill: var(--text-dim); text-anchor: middle; paint-order: stroke; stroke: var(--q-prov); stroke-width: 4px; font-family: inherit; }
.qm-quakes circle { fill: var(--qc); fill-opacity: .55; stroke: var(--qc); stroke-width: 2; cursor: pointer; transition: opacity .2s, transform .2s; transform-box: fill-box; transform-origin: center; }
.qm-quakes circle.age-old { fill-opacity: .18; stroke-opacity: .45; }
.qm-quakes circle.age-week { fill-opacity: .4; }
.qm-quakes circle.age-new { fill-opacity: .7; stroke: var(--text); stroke-width: 2.5; }
.qm-quakes circle.age-new.c-micro, .qm-quakes circle.age-new.c-minor { stroke: var(--qc); }
.qm-quakes circle.pulse { animation: qk-ping 1.8s ease-out infinite; }
@keyframes qk-ping { 0% { stroke-width: 2.5; } 70% { stroke-width: 14; stroke-opacity: 0; } 100% { stroke-width: 2.5; stroke-opacity: 0; } }
.qm-quakes circle.off { display: none; }
.qm-quakes circle.hl { stroke: var(--text); stroke-width: 5; fill-opacity: .9; }
.qk-tip { width: 210px; text-align: start; }
.qk-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; font-size: .74rem; color: var(--text-mute); }
.qk-legend li { display: flex; align-items: center; gap: 6px; }
.qk-legend i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--q-light); display: inline-block; }
.qk-legend .lg-new { background: color-mix(in srgb, var(--q-light) 70%, transparent); border-color: var(--text); }
.qk-legend .lg-week { background: color-mix(in srgb, var(--q-light) 40%, transparent); }
.qk-legend .lg-old { background: color-mix(in srgb, var(--q-light) 18%, transparent); opacity: .6; }
.qk-legend .lg-size i { width: var(--s); height: var(--s); border-color: var(--text-mute); }

.qk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 760px; overflow-y: auto; overscroll-behavior: contain; }
.qk-list:empty::after { content: attr(data-empty); color: var(--text-mute); font-size: .88rem; padding: 10px 0; }
.qk-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 6px; border-bottom: 1px solid var(--border-soft); border-radius: var(--r-sm); cursor: pointer; transition: background .15s; }
.qk-row:hover, .qk-row.hl { background: var(--inset); }
.qk-row.off { display: none; }
.qk-row.fresh { animation: mk-drop .6s cubic-bezier(.2,.8,.2,1) both; }
.qk-mag { flex-shrink: 0; min-width: 52px; padding: 5px 6px; border-radius: 10px; text-align: center; display: grid;
  background: color-mix(in srgb, var(--qc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--qc) 55%, transparent); }
.qk-mag b { font-size: 1.12rem; font-weight: 800; line-height: 1.2; unicode-bidi: isolate; }
.qk-mag small { font-size: .62rem; font-weight: 700; color: var(--text-dim); }
.qk-body { display: grid; gap: 2px; min-width: 0; }
.qk-where { font-size: .9rem; font-weight: 700; line-height: 1.6; }
.qk-meta { font-size: .76rem; color: var(--text-mute); }
.qk-src { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.qk-src a { font-size: .66rem; font-weight: 700; text-decoration: none; color: var(--text-dim); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px; direction: ltr; }
.qk-src a:hover { border-color: var(--green); color: var(--accent); }
.qk-src i { font-style: normal; color: var(--mk-good); font-weight: 800; font-size: .8rem; }

/* magnitude scale + safety */
.qk-scale { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qk-scale li { display: flex; align-items: center; gap: 12px; font-size: .86rem; line-height: 1.7; color: var(--text-dim); }
.qk-scale li b { color: var(--text); }
.qk-scale .qk-mag { min-width: 92px; }
.qk-scale .qk-mag b { font-size: .8rem; white-space: nowrap; }
.qk-safe { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; line-height: 1.8; font-size: .9rem; }
.qk-safe li::marker { color: var(--accent); font-weight: 800; }

.al-form select { max-width: 100%; }
.qk [hidden], .qk-tip[hidden] { display: none !important; }

@media (max-width: 960px) {
  .qk-top, .qk-split { grid-template-columns: 1fr; }
  .qk-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qk-list { max-height: 520px; }
}
@media (max-width: 760px) {
  .qk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qm-cities g:not(.major) text { display: none; }
  .qm-cities text { font-size: 30px; stroke-width: 6px; }
  .qk-big { width: 64px; height: 64px; } .qk-big b { font-size: 1.45rem; }
  .qk-card { padding: 12px 14px; }
  .al-form { gap: 6px; }
  .al-form > span { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) { .qk-card, .qk-row.fresh, .qm-quakes circle.pulse { animation: none !important; } }