/* Japan Earthquake feed — Hi-Fi mockup design system
   Aesthetic: "calibrated instrument" — JMA palette is the ONLY saturated color;
   everything else is ink, paper, and hairlines. IBM Plex Sans JP + Plex Mono.
   Binding rules: 02-design-revised.md (palette exact, Shindo-first, tsunami always, attribution visible). */

:root {
  /* Official JMA intensity palette — 00-research-summary.md. DO NOT TOUCH. */
  --shindo-1: #F2F2FF; --shindo-2: #00AAFF; --shindo-3: #0041FF;
  --shindo-4: #FAE696; --shindo-5L: #FFE600; --shindo-5U: #FF9900;
  --shindo-6L: #FF2800; --shindo-6U: #A50021; --shindo-7: #B40068;

  --font-ui: 'IBM Plex Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-data: 'IBM Plex Mono', 'IBM Plex Sans JP', monospace;
}

/* ---------- themes ---------- */
.stage[data-theme="light"] {
  --bg: #F5F4EF;          /* warm paper */
  --bg-panel: #FFFFFF;
  --ink: #1A1D27;
  --ink-2: #5A5F6E;
  --hairline: #D9D7CE;
  --map-sea: #E3E6EC;
  --map-land: #C6C9CF;
  --map-land-line: #F5F4EF;
  --footer-bg: #1A1D27;
  --footer-ink: #C9CBD4;
}
.stage[data-theme="dark"] {
  --bg: #0B0E1A;          /* ink navy — JMA guideline: dark sea makes warning colors carry */
  --bg-panel: #121624;
  --ink: #F0F1F5;
  --ink-2: #8B90A0;
  --hairline: #252B3D;
  --map-sea: #0E1322;
  --map-land: #2A2F3E;
  --map-land-line: #0B0E1A;
  --footer-bg: #060810;
  --footer-ink: #8B90A0;
}

/* ---------- harness chrome (dev only, not part of the design) ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #16181D; overflow: hidden; }
#toolbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; gap: 10px; align-items: center; padding: 8px 14px;
  background: #0C0D10; color: #9AA0AC; font: 12px/1.4 var(--font-data);
  border-bottom: 1px solid #23262E;
}
#toolbar label { display: flex; gap: 5px; align-items: center; }
#toolbar select {
  background: #16181D; color: #E6E8EC; border: 1px solid #2C313B;
  border-radius: 4px; padding: 3px 6px; font: inherit;
}
#toolbar .links a { color: #6AA8FF; margin-left: 8px; text-decoration: none; }
#viewport { position: absolute; inset: 37px 0 0 0; overflow: hidden; }

/* ---------- the 1920×1080 stage ---------- */
.stage {
  width: 1920px; height: 1080px; position: absolute; left: 0; top: 0; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); transform-origin: top left;
}

/* ---------- shindo badge (shared component) ---------- */
.badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-data); font-weight: 600; line-height: 1;
  border-radius: 6px;
}
.badge .lbl { font-size: 0.26em; font-weight: 500; letter-spacing: 0.12em; opacity: 0.85; margin-bottom: 0.18em; }
.badge .num { font-size: 1em; letter-spacing: -0.02em; }
.badge .num small { font-size: 0.45em; font-weight: 600; }

/* ---------- full-screen layout ---------- */
.fs { display: grid; grid-template-rows: 96px 1fr 56px; height: 100%; }

.fs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; border-bottom: 1px solid var(--hairline);
}
.fs-header .title { display: flex; align-items: baseline; gap: 18px; }
.fs-header .title .ja { font-size: 34px; font-weight: 700; letter-spacing: 0.06em; }
.fs-header .title .en { font-size: 17px; color: var(--ink-2); letter-spacing: 0.18em; text-transform: uppercase; }
.fs-header .clock { font: 500 24px var(--font-data); color: var(--ink-2); }
.fs-header .clock b { color: var(--ink); font-weight: 600; }

.fs-body { display: grid; grid-template-columns: 1fr 700px; min-height: 0; }

/* map pane */
.map-pane { position: relative; border-right: 1px solid var(--hairline); background: var(--map-sea); overflow: hidden; }
.map-pane svg.basemap { position: absolute; inset: 4% 2%; width: 96%; height: 92%; }
.map-pane svg.basemap path { fill: var(--map-land); stroke: var(--map-land-line); stroke-width: 1.2; }
.map-pane svg.basemap g.lit path { stroke: rgba(0,0,0,0.35); stroke-width: 0.8; }
.epi {
  position: absolute; width: 64px; height: 64px; transform: translate(-50%, -50%);
  pointer-events: none;
}
.epi::before, .epi::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 58px; height: 10px;
  background: #E8380D; border-radius: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,0.75);
}
.epi::before { transform: translate(-50%,-50%) rotate(45deg); }
.epi::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.epi .pulse {
  position: absolute; inset: -22px; border: 3px solid #E8380D; border-radius: 50%;
  opacity: 0; animation: epipulse 2.4s ease-out infinite;
}
@keyframes epipulse { 0% { transform: scale(0.4); opacity: 0.9; } 70% { transform: scale(1); opacity: 0; } 100% { opacity: 0; } }

.map-legend {
  position: absolute; left: 28px; bottom: 24px; display: flex; gap: 0;
  border: 1px solid var(--hairline); border-radius: 5px; overflow: hidden;
  font: 500 15px var(--font-data); box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
.map-legend span { padding: 7px 12px; }

/* region intensity blocks (over map, top-left) */
.region-strip {
  position: absolute; left: 28px; top: 24px; max-width: 46%;
  display: flex; flex-direction: column; gap: 10px;
}
.region-row { display: flex; align-items: stretch; gap: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,0.14); }
.region-row .badge { width: 96px; min-height: 60px; font-size: 34px; border-radius: 0; flex: none; }
.region-row .names {
  background: var(--bg-panel); padding: 8px 16px; display: flex; flex-direction: column; justify-content: center;
  font-size: 19px; line-height: 1.35; min-width: 220px;
}
.region-row .names .en { font-size: 13px; color: var(--ink-2); }

/* right column */
.col { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; background: var(--bg-panel); }

.latest { padding: 34px 44px 26px; border-bottom: 1px solid var(--hairline); }
.latest .kicker { font: 500 15px var(--font-data); letter-spacing: 0.22em; color: var(--ink-2); text-transform: uppercase; margin-bottom: 18px; }
.latest .hero { display: flex; gap: 30px; align-items: center; }
.latest .hero .badge { width: 168px; height: 168px; font-size: 92px; flex: none; box-shadow: 0 10px 34px rgba(0,0,0,0.18); }
.latest .facts { min-width: 0; }
.latest .facts .time { font: 500 21px var(--font-data); color: var(--ink-2); margin-bottom: 6px; }
.latest .facts .epi-ja { font-size: 44px; font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; }
.latest .facts .epi-en { font-size: 19px; color: var(--ink-2); margin-top: 2px; }
.latest .facts .mags { display: flex; gap: 26px; margin-top: 14px; font: 600 26px var(--font-data); }
.latest .facts .mags span small { font-size: 15px; color: var(--ink-2); font-weight: 500; margin-right: 6px; letter-spacing: 0.08em; }

.tsunami { padding: 18px 44px; border-bottom: 1px solid var(--hairline); display: flex; gap: 14px; align-items: center; }
.tsunami .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); flex: none; }
.tsunami.alert { background: rgba(255,153,0,0.13); }
.tsunami.alert .dot { background: var(--shindo-5U); box-shadow: 0 0 0 4px rgba(255,153,0,0.25); }
.tsunami .ja { font-size: 22px; font-weight: 600; }
.tsunami .en { font-size: 15px; color: var(--ink-2); }
.tsunami.alert .ja { color: #B25E00; }
.stage[data-theme="dark"] .tsunami.alert .ja { color: var(--shindo-5U); }

.history { padding: 26px 44px; min-height: 0; overflow: hidden; }
.history h3 { font: 500 15px var(--font-data); letter-spacing: 0.22em; color: var(--ink-2); text-transform: uppercase; margin-bottom: 14px; }
.history table { width: 100%; border-collapse: collapse; font-size: 20px; }
.history td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.history tr:last-child td { border-bottom: none; }
.history .badge { width: 52px; height: 44px; font-size: 24px; }
.history .t { font: 500 18px var(--font-data); color: var(--ink-2); white-space: nowrap; }
.history .e .ja-n { font-weight: 600; }
.history .e .en-n { font-size: 13px; color: var(--ink-2); }
.history .m { font: 600 19px var(--font-data); text-align: right; white-space: nowrap; }
.history .m small { color: var(--ink-2); font-weight: 500; }

/* footer */
.fs-footer {
  background: var(--footer-bg); color: var(--footer-ink);
  display: flex; align-items: center; justify-content: space-between; padding: 0 48px;
  font-size: 16px;
}
.fs-footer .brand { font-weight: 700; letter-spacing: 0.04em; color: #fff; opacity: 0.9; }
.fs-footer .brand span { color: #4AA3FF; }

/* ---------- quiet state ---------- */
.quiet { display: grid; grid-template-rows: 96px 1fr 56px; height: 100%; }
.quiet-body { display: grid; place-items: center; }
.quiet-inner { text-align: center; max-width: 1480px; padding: 0 60px; }
.quiet-inner .ok-ring {
  width: 120px; height: 120px; margin: 0 auto 36px; border-radius: 50%;
  border: 4px solid var(--hairline); display: grid; place-items: center;
  font: 600 52px var(--font-data); color: var(--ink-2);
}
.quiet-inner .line-ja { font-size: 40px; font-weight: 700; line-height: 1.4; }
.quiet-inner .line-en { font-size: 21px; color: var(--ink-2); margin-top: 10px; }
.tip {
  margin: 44px auto 0; max-width: 880px; text-align: left;
  border: 1px solid var(--hairline); border-left: 6px solid var(--shindo-2);
  background: var(--bg-panel); border-radius: 8px; padding: 24px 32px;
}
.tip .tip-k { font: 500 14px var(--font-data); letter-spacing: 0.2em; color: var(--ink-2); text-transform: uppercase; margin-bottom: 10px; }
.tip .tip-ja { font-size: 24px; font-weight: 600; line-height: 1.5; }
.tip .tip-en { font-size: 16px; color: var(--ink-2); margin-top: 6px; }
.quiet-recent { margin-top: 40px; font: 500 18px var(--font-data); color: var(--ink-2); }

/* ---------- zone layout ---------- */
.zone-stage { position: relative; height: 100%; }
.zone-bgcontent {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(1200px 700px at 30% 20%, rgba(74,163,255,0.16), transparent 60%),
    linear-gradient(150deg, #1B2030 0%, #11141E 100%);
  color: #3A4154; font: 600 64px var(--font-ui); letter-spacing: 0.08em;
}
.zone {
  position: absolute; top: 0; right: 0; bottom: 0; width: 560px;
  background: var(--bg); border-left: 1px solid var(--hairline);
  display: grid; grid-template-rows: 78px auto auto 1fr 48px;
}
.zone-h { display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border-bottom: 1px solid var(--hairline); }
.zone-h .ja { font-size: 26px; font-weight: 700; letter-spacing: 0.05em; }
.zone-h .clock { font: 500 17px var(--font-data); color: var(--ink-2); }
.zone-latest { padding: 24px 30px 20px; border-bottom: 1px solid var(--hairline); background: var(--bg-panel); }
.zone-latest .row { display: flex; gap: 20px; align-items: center; }
.zone-latest .badge { width: 104px; height: 104px; font-size: 56px; flex: none; }
.zone-latest .time { font: 500 16px var(--font-data); color: var(--ink-2); }
.zone-latest .epi-ja { font-size: 29px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.zone-latest .epi-en { font-size: 14px; color: var(--ink-2); }
.zone-latest .mags { font: 600 18px var(--font-data); margin-top: 8px; display: flex; gap: 16px; }
.zone-latest .mags small { color: var(--ink-2); font-weight: 500; margin-right: 4px; }
.zone-tsunami { padding: 13px 30px; border-bottom: 1px solid var(--hairline); font-size: 16px; font-weight: 600; }
.zone-tsunami.alert { background: rgba(255,153,0,0.13); color: #B25E00; }
.stage[data-theme="dark"] .zone-tsunami.alert { color: var(--shindo-5U); }
.zone-tsunami .en { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.zone-list { padding: 18px 30px; overflow: hidden; }
.zone-list .zrow { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.zone-list .zrow:last-child { border-bottom: none; }
.zone-list .badge { width: 44px; height: 38px; font-size: 20px; flex: none; }
.zone-list .t { font: 500 15px var(--font-data); color: var(--ink-2); white-space: nowrap; }
.zone-list .e { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-list .m { font: 600 15px var(--font-data); color: var(--ink-2); }
.zone-f { background: var(--footer-bg); color: var(--footer-ink); font-size: 12.5px; display: flex; align-items: center; padding: 0 30px; }

/* ---------- ticker layout ---------- */
.ticker-stage { position: relative; height: 100%; }
.ticker-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 84px;
  background: var(--bg); border-top: 1px solid var(--hairline);
  display: flex; align-items: stretch; overflow: hidden;
}
.ticker-label {
  flex: none; display: flex; flex-direction: column; justify-content: center; padding: 0 28px;
  background: var(--ink); color: var(--bg); z-index: 2;
}
.stage[data-theme="dark"] .ticker-label { background: #E8380D; color: #fff; }
.ticker-label .ja { font-size: 24px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; }
.ticker-label .en { font: 500 11px var(--font-data); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.ticker-track-clip { position: relative; flex: 1; overflow: hidden; }
#tickerTrack {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 56px;
  will-change: transform; white-space: nowrap; padding-right: 120px;
}
.tk-item { display: inline-flex; align-items: center; gap: 16px; font-size: 27px; }
.tk-item .badge { width: 56px; height: 50px; font-size: 27px; }
.tk-item .t { font: 500 22px var(--font-data); color: var(--ink-2); }
.tk-item .e { font-weight: 700; }
.tk-item .m { font: 600 22px var(--font-data); color: var(--ink-2); }
.tk-item .ts { font-size: 21px; font-weight: 600; }
.tk-item .ts.alert { color: #B25E00; }
.stage[data-theme="dark"] .tk-item .ts.alert { color: var(--shindo-5U); }
.tk-sep { color: var(--hairline); font-size: 30px; }
.tk-attr { font-size: 17px; color: var(--ink-2); }
.tk-quiet { font-size: 25px; font-weight: 600; padding-left: 28px; display: flex; align-items: center; height: 100%; }
.tk-quiet .en { font-size: 16px; color: var(--ink-2); font-weight: 500; margin-left: 18px; }