/* JAPAN MONITOR — ダークネイビー軍事調
 *
 * design.md は「黒背景+白文字の大面積使用」を禁じているため、純黒ではなく
 * Navy Dark #111B2E をベースにしている。アクセントは既存ブランドの
 * Coral #E8734A（そのまま警告色として機能する）。原色・蛍光色は使わない。
 */
:root {
  --bg:        #0B1220;
  --panel:     #111B2E;
  --panel-2:   #16223A;
  --line:      #243556;
  --line-soft: #1B2942;
  --ink:       #DCE3F0;
  --ink-dim:   #8FA0BF;
  --ink-faint: #5F7196;
  --coral:     #E8734A;
  --coral-dim: #B4552F;
  --amber:     #E8B14A;
  --steel:     #6E8BC0;
  --ok:        #4AA88A;
  --mono: "JetBrains Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace;
  --sans: "Noto Sans JP", "Inter", system-ui, -apple-system, sans-serif;
  --rail: 380px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  overscroll-behavior: none;
  overflow-x: hidden;
  max-width: 100vw;
}
a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- 骨格 */
.app {
  display: grid;
  /* 1fr のトラック最小幅は auto（＝中身の min-content）なので、
     ティッカーや長い見出しに押し広げられる。minmax(0,1fr) で止める。 */
  grid-template-columns: minmax(0, 1fr) var(--rail);
  grid-template-rows: 48px minmax(0, 1fr) 40px;
  grid-template-areas: "head head" "map rail" "alert alert";
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
/* グリッドの子は既定で min-width:auto のため、中身の最小幅（ティッカーの
   nowrap や長い見出し）に押し広げられて横スクロールが出る。0 で止める。 */
.app > * { min-width: 0; min-height: 0; }

/* ---------------------------------------------------------------- ヘッダ */
.head {
  grid-area: head;
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--mono); font-weight: 700; font-size: 15px;
  letter-spacing: .14em; color: var(--ink); white-space: nowrap;
}
.brand b { color: var(--coral); }
.head .sep { width: 1px; height: 22px; background: var(--line); }
.stat { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.stat b { color: var(--ink); font-weight: 600; }
.head .grow { flex: 1; }
.clock { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral); margin-right: 6px; vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* ---------------------------------------------------------------- 地図 */
.mapwrap { grid-area: map; position: relative; background: var(--bg); }
#map { position: absolute; inset: 0; background: var(--bg); }
.leaflet-container { background: var(--bg); outline: none; font-family: var(--sans); }
.leaflet-control-attribution {
  background: rgba(17,27,46,.86) !important;
  color: var(--ink-faint) !important;
  font-size: 10px !important;
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.leaflet-control-attribution a { color: var(--steel) !important; }

/* 操作パネル */
.tools {
  position: absolute; left: 12px; top: 12px; z-index: 500;
  width: 248px;
  background: rgba(17,27,46,.94);
  border: 1px solid var(--line);
  border-radius: 4px;
  backdrop-filter: blur(6px);
}
.tools .grp { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.tools .grp:last-child { border-bottom: 0; }
.tools h3 {
  margin: 0 0 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; color: var(--ink-faint); font-weight: 600;
}
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.modes button {
  font-family: var(--mono); font-size: 11px; padding: 7px 0;
  background: var(--panel-2); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
  transition: all .15s;
}
.modes button:hover { color: var(--ink); border-color: var(--steel); }
.modes button[aria-pressed="true"] {
  background: var(--coral-dim); border-color: var(--coral); color: #fff;
}
.radius-row { display: flex; align-items: center; gap: 8px; }
.radius-row input[type=range] { flex: 1; accent-color: var(--coral); }
.radius-val {
  font-family: var(--mono); font-size: 12px; color: var(--coral);
  min-width: 54px; text-align: right;
}
.hint { font-size: 11px; color: var(--ink-faint); line-height: 1.5; margin-top: 6px; }

/* 絞り込みのチップ */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.chips:last-child { margin-bottom: 0; }
.chips button {
  font-family: var(--mono); font-size: 10.5px; padding: 5px 8px;
  background: var(--panel-2); color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
  transition: all .12s; flex: 1 1 auto; white-space: nowrap;
}
.chips button:hover { color: var(--ink); border-color: var(--steel); }
.chips button[aria-pressed="true"] {
  background: #1E3355; border-color: var(--steel); color: var(--ink);
}
.tools h3 .reset {
  float: right; font-family: var(--mono); font-size: 9.5px;
  color: var(--coral); background: none; border: 1px solid var(--coral-dim);
  border-radius: 3px; padding: 1px 5px; cursor: pointer; letter-spacing: 0;
}

.search { position: relative; }
.search input {
  width: 100%; padding: 7px 9px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); font-family: var(--sans); font-size: 12px;
}
.search input:focus { outline: none; border-color: var(--coral); }
.suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 600;
  max-height: 240px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 3px 3px;
}
.suggest div { padding: 6px 9px; font-size: 12px; cursor: pointer; }
.suggest div:hover, .suggest div.on { background: var(--panel-2); color: var(--coral); }
.suggest .pref { color: var(--ink-faint); font-size: 11px; margin-left: 6px; }

.legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 500;
  background: rgba(17,27,46,.94); border: 1px solid var(--line);
  border-radius: 4px; padding: 9px 11px;
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
}
.legend span { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.zoombtns { position: absolute; right: 12px; top: 12px; z-index: 500; display: grid; gap: 4px; }
.zoombtns button {
  width: 30px; height: 30px; font-size: 15px; font-family: var(--mono);
  background: rgba(17,27,46,.94); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
}
.zoombtns button:hover { color: var(--coral); border-color: var(--coral); }

/* 地図上の点 */
.pt { stroke-width: 1; }
.ring { animation: ring 2.4s ease-out infinite; transform-origin: center; }
@keyframes ring {
  0%   { r: 4; opacity: .85; }
  100% { r: 22; opacity: 0; }
}

/* ---------------------------------------------------------------- 右レール */
.rail {
  grid-area: rail;
  display: flex; flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--line);
  min-height: 0;
}
.rail-head {
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 8px;
}
.rail-head h2 {
  margin: 0; font-family: var(--mono); font-size: 12px;
  letter-spacing: .16em; color: var(--coral); font-weight: 600;
}
.rail-head .sub { font-size: 11px; color: var(--ink-faint); font-family: var(--mono); }
.rail-head .clear {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  color: var(--ink-faint); border: 1px solid var(--line); background: none;
  padding: 3px 7px; border-radius: 3px; cursor: pointer;
}
.rail-head .clear:hover { color: var(--coral); border-color: var(--coral); }

.feed { flex: 1; overflow-y: auto; min-height: 0; }
.feed::-webkit-scrollbar { width: 8px; }
.feed::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.feed::-webkit-scrollbar-track { background: transparent; }

.item {
  display: block; padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .12s;
}
.item:hover { background: var(--panel-2); }
.item.fresh { animation: slidein .5s ease-out; }
@keyframes slidein {
  from { opacity: 0; transform: translateY(-6px); background: var(--panel-2); }
  to   { opacity: 1; transform: none; }
}
.item .meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
  margin-bottom: 3px;
}
.item .t {
  font-size: 12.5px; line-height: 1.5; color: var(--ink);
  overflow-wrap: anywhere; word-break: break-word;
}
.item:hover .t { color: #fff; }
.item .place {
  color: var(--steel); border: 1px solid var(--line);
  padding: 0 4px; border-radius: 2px;
}
.item .sev1 { color: var(--ink-dim); }
.item .sev2 { color: var(--amber); }
.item .sev3 { color: var(--coral); font-weight: 700; }
.item .ext { margin-left: auto; opacity: .4; max-width: 45%;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty { padding: 28px 16px; text-align: center; color: var(--ink-faint); font-size: 12px; }

/* ---------------------------------------------------------------- アラート帯 */
.alertbar {
  grid-area: alert;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border-top: 1px solid var(--line);
  overflow: hidden; padding-left: 12px;
}
.alertbar .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--bg); background: var(--coral); padding: 3px 8px; border-radius: 2px;
  white-space: nowrap; flex-shrink: 0;
}
.marquee { flex: 1; overflow: hidden; white-space: nowrap; min-width: 0; }
.marquee > span {
  display: inline-block; padding-left: 100%;
  animation: scroll 64s linear infinite;
  animation-delay: -7s;   /* 開いた直後から文字が見えている状態にする */
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
}
.marquee:hover > span { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-100%); } }
.marquee a { color: var(--ink-dim); }
.marquee a:hover { color: var(--coral); }
.marquee .d { color: var(--line); margin: 0 14px; }

/* ---------------------------------------------------------------- 静的ページ */
.doc { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; }
.doc h1 { font-size: 26px; margin: 0 0 4px; }
.doc h2 { font-size: 17px; margin: 32px 0 10px; color: var(--coral);
          border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.doc .lead { color: var(--ink-dim); font-size: 13px; margin-bottom: 24px; }
.doc .back { font-family: var(--mono); font-size: 11px; color: var(--steel); }
.doc ul { padding-left: 20px; }
.doc .list { border-top: 1px solid var(--line-soft); }
.doc .list .item { padding-left: 0; padding-right: 0; }
.doc .grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px;
}
.doc .grid a {
  font-size: 12px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink-dim);
}
.doc .grid a:hover { border-color: var(--coral); color: var(--coral); }
.doc .grid a b { color: var(--ink); font-family: var(--mono); font-size: 11px; float: right; }

/* ---------------------------------------------------------------- フッタ */
.credit {
  padding: 14px 16px; font-size: 10.5px; color: var(--ink-faint);
  line-height: 1.7; border-top: 1px solid var(--line);
}
.credit a { color: var(--steel); }

/* ---------------------------------------------------------------- スマホ */
@media (max-width: 860px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px 52vh minmax(0, 1fr) 36px;
    grid-template-areas: "head" "map" "rail" "alert";
  }
  .rail { border-left: 0; border-top: 1px solid var(--line); }
  .tools { width: calc(100% - 24px); max-width: 340px; left: 12px; top: 8px; }
  .tools .grp { padding: 8px 10px; }
  .tools .hint { display: none; }
  .modes button { font-size: 12px; padding: 9px 0; }
  .brand { font-size: 13px; letter-spacing: .1em; }
  .head .stat.opt { display: none; }
  .legend { display: none; }
}