:root {
  color-scheme: dark;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family:
    'Hiragino Sans',
    'Hiragino Kaku Gothic ProN',
    'Yu Gothic',
    'Noto Sans JP',
    'Inter',
    'Segoe UI',
    system-ui,
    sans-serif;
  background: #0d1117;
  color: #dce6f1;
  line-height: 1.7;
}

#app {
  height: 100%;
}

.sas0-instrument {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 16px;
  overflow: auto;
  background: #0b1017;
  font-size: 15px;
}

.sas0-weather-image {
  display: block;
  width: 100%;
  max-height: 100%;
  border: 0;
  object-fit: contain;
  background: #0a131f;
}

.sas0-weather-scrub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.sas0-weather-scrub-slider {
  flex: 1;
  accent-color: #5fae8c;
}

.sas0-weather-scrub-label {
  flex-shrink: 0;
  font-size: 13px;
  color: #95a8be;
  font-variant-numeric: tabular-nums;
}

.sas0-map-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.sas0-map {
  flex: 1;
  min-height: 0;
  width: 100%;
  background: #0a131f;
}

/* 降水ナウキャストのタイムバー（地図と情報パネルの間）。予測コマを表示して
   いる間は accent-color を切り替えて、実況との違いが色でも分かるようにする。 */
.sas0-map-nowcast {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 8px 16px;
  border-top: 1px solid #243247;
  background: #111a26;
}

.sas0-map-nowcast-title {
  flex-shrink: 0;
  font-size: 13px;
  color: #95a8be;
}

.sas0-map-nowcast-slider {
  flex: 1;
  min-width: 0;
  accent-color: #9b4fd6;
}

.sas0-map-nowcast.is-forecast .sas0-map-nowcast-slider {
  accent-color: #5f8ecf;
}

.sas0-map-nowcast-label {
  flex-shrink: 0;
  min-width: 8.5em;
  text-align: right;
  font-size: 13px;
  color: #d7e2ee;
  font-variant-numeric: tabular-nums;
}

.sas0-map-nowcast.is-forecast .sas0-map-nowcast-label {
  color: #9dc0ea;
}

/* 状況図の更新ボタンと鮮度表示（D82）。古い状況を現在と取り違えないよう、
   取得時刻と経過時間を常に隣に出す。 */
.sas0-map-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 6px 16px;
  border-bottom: 1px solid #243247;
  background: #111a26;
  font-size: 13px;
}

.sas0-map-refresh {
  flex-shrink: 0;
  padding: 4px 14px;
  font-size: 14px;
  color: #dce6f1;
  background: #1a2432;
  border: 1px solid #243247;
  border-radius: 6px;
  cursor: pointer;
}

.sas0-map-refresh:hover:not(:disabled) {
  background: #243247;
}

.sas0-map-refresh:disabled {
  opacity: 0.6;
  cursor: default;
}

.sas0-map-status {
  min-width: 0;
  color: #95a8be;
}

.sas0-map-status.is-stale {
  color: #f0d9a0;
}

/* 警報データを取得できなかった地域がある時の帯（D81）。状況図では地図の上、
   警報・注意報では一覧の先頭に出す。灰色＝「不明」(平穏ではない)の注意書き。 */
.sas0-map-data-warning,
.sas0-data-warning {
  flex-shrink: 0;
  margin: 0;
  box-sizing: border-box;
  padding: 8px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #f0d9a0;
  background: #2e2615;
  border-bottom: 1px solid #5a4a22;
}

.sas0-data-warning {
  margin-bottom: 12px;
  border: 1px solid #5a4a22;
  border-radius: 8px;
}

.sas0-map-info {
  flex-shrink: 0;
  width: 100%;
  height: 110px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 14px 16px;
  border-top: 1px solid #243247;
  background: #111a26;
}

.sas0-map-info-placeholder {
  font-size: 13px;
  color: #95a8be;
  line-height: 1.6;
}

.sas0-map-info-title {
  font-size: 16px;
  font-weight: 700;
}

.sas0-map-info-area {
  margin-top: 4px;
  font-size: 13px;
  color: #95a8be;
}

.sas0-map-info-warning {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.sas0-map .maplibregl-popup-content {
  background: #111a26;
  color: #dce6f1;
  padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.sas0-map .maplibregl-popup-tip {
  border-top-color: #111a26;
  border-bottom-color: #111a26;
}

.sas0-map .maplibregl-popup-close-button {
  color: #95a8be;
}

.sas0-caption {
  margin: 8px 0 0;
  font-size: 13px;
  color: #95a8be;
}

.sas0-caption a {
  color: #7ba7e0;
}

.sas0-caption a:hover {
  color: #a6c6ef;
}

/* 警報・注意報の一覧⇔北海道全体表示(tabularmap、D77)の切り替え。
   .sas0-warning-instrumentは.sas0-instrumentのflex columnをそのまま使い、
   ここでは各ペインの伸縮だけを足す。 */
.sas0-warning-mode-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.sas0-warning-mode-button {
  padding: 6px 14px;
  font-size: 14px;
  color: #dce6f1;
  background: #111a26;
  border: 1px solid #243247;
  border-radius: 6px;
  cursor: pointer;
}

.sas0-warning-mode-button:hover {
  border-color: #4c85f0;
}

.sas0-warning-mode-button.is-active {
  color: #0d1117;
  background: #5fae8c;
  border-color: #5fae8c;
}

/* tabularmap.js自身の.tm-rootがheight:100%を前提にしている
   (docs/vendor/tabularmap/README.md参照)ため、flex:1/min-height:0で
   実際の高さを持たせる — .sas0-map-wrap(状況図)と同じパターン。 */
.sas0-warning-tabular-pane {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.sas0-warning-section {
  border: 1px solid #243247;
  background: #111a26;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.sas0-warning-section h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sas0-warning-section ul,
.sas0-quake-list,
.sas0-volcano-list {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}

.sas0-quake-list,
.sas0-volcano-list {
  border: 1px solid #243247;
  background: #111a26;
  border-radius: 8px;
  padding: 12px 16px 12px 2em;
}

.sas0-quake-list li,
.sas0-volcano-list li {
  padding: 4px 0;
  border-bottom: 1px solid #1a2432;
}

.sas0-quake-list li:last-child,
.sas0-volcano-list li:last-child {
  border-bottom: 0;
}

.sas0-severity-advisory {
  color: #e4c74a;
}

.sas0-severity-warning {
  color: #e46a4a;
  font-weight: 600;
}

.sas0-severity-special {
  color: #d24aa8;
  font-weight: 700;
}

.sas0-quake-trend-svg {
  display: block;
  width: 100%;
  height: auto;
  background: #0b1017;
}

.sas0-quake-trend-grid {
  stroke: #1a2432;
  stroke-width: 1;
}

.sas0-quake-trend-axis-label {
  fill: #95a8be;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sas0-quake-trend-point {
  fill: #f5c542;
  fill-opacity: 0.85;
  stroke: #0d1117;
  stroke-width: 1;
}

.sas0-change-log-refresh {
  display: block;
  margin: 0 0 16px;
  padding: 6px 14px;
  font-size: 14px;
  color: #dce6f1;
  background: #1a2432;
  border: 1px solid #243247;
  border-radius: 6px;
  cursor: pointer;
}

.sas0-change-log-refresh:hover {
  background: #243247;
}

.sas0-change-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sas0-change-log-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #1a2432;
  font-size: 14px;
}

.sas0-change-log-list li:last-child {
  border-bottom: 0;
}

.sas0-change-log-time {
  flex-shrink: 0;
  color: #95a8be;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.sas0-change-log-category {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.sas0-change-log-category-warning {
  color: #e4c74a;
  background: rgba(228, 199, 74, 0.15);
}

.sas0-change-log-category-quake {
  color: #f5c542;
  background: rgba(245, 197, 66, 0.15);
}

.sas0-change-log-category-volcano {
  color: #e46a4a;
  background: rgba(228, 106, 74, 0.15);
}

.sas0-link-list-heading {
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #95a8be;
  letter-spacing: 0.02em;
}

.sas0-link-list-heading:first-child {
  margin-top: 0;
}

.sas0-link-list {
  border: 1px solid #243247;
  background: #111a26;
  border-radius: 8px;
  overflow: hidden;
  /* .sas0-instrument is a flex column; overflow != visible makes a flex
     item's auto min-height resolve to 0, so without this it gets crushed
     to near-nothing whenever total content exceeds the viewport instead
     of just scrolling (which .sas0-instrument's own overflow:auto already
     provides). */
  flex-shrink: 0;
}

.sas0-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid #1a2432;
}

.sas0-link-row:last-child {
  border-bottom: 0;
}

.sas0-link-row-title {
  font-size: 15px;
  font-weight: 600;
}

.sas0-link-row-desc {
  margin-top: 2px;
  font-size: 13px;
  color: #95a8be;
  line-height: 1.5;
}

.sas0-link-row-action {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: #7ba7e0;
  text-decoration: none;
  white-space: nowrap;
}

.sas0-link-row-action:hover {
  color: #a6c6ef;
}

.sas0-link-row-action[aria-disabled='true'] {
  color: #3a4657;
  pointer-events: none;
}

.sas0-tour-intro {
  margin: 0 0 20px;
  max-width: 60ch;
  color: #95a8be;
}

.sas0-tour-running-note {
  margin: 0 0 16px;
  color: #dce6f1;
}

.sas0-tour-target-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: #111a26;
  border-radius: 8px;
}

.sas0-tour-target-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.sas0-tour-interval-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.sas0-tour-interval-input {
  width: 70px;
  padding: 4px 8px;
  font-size: 14px;
  color: #dce6f1;
  background: #111a26;
  border: 1px solid #243247;
  border-radius: 6px;
}

.sas0-tour-start-button {
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 600;
  color: #0d1117;
  background: #5fae8c;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.sas0-tour-start-button:hover {
  background: #74c19f;
}

/* 巡回モード中は、Open MCT自体のヘッダー・左ツリー・パンくずバーを隠し、
   計器の表示だけを画面いっぱいに残す——ブラウザ本体のFullscreen API
   （タブ・アドレスバーを消す）と組み合わせて、壁掛けディスプレイ向けの
   キオスク的な見た目にする。クラス名は実際のOpen MCT/Espressoテーマの
   DOM構造から確認済み（.l-shell__head/.l-shell__pane-tree/.l-browse-bar）。
   （右側のInspectパネル.l-shell__pane-inspectorも同様に隠す）。D53の
   Plot/テレメトリ統合とは違い、ここではOpen MCTのオブジェクト/
   コンポジションモデルには一切触れず、可視性のCSSのみを上書きしている。 */
.sas0-tour-active .l-shell__head,
.sas0-tour-active .l-shell__pane-tree,
.sas0-tour-active .l-shell__pane-inspector,
.sas0-tour-active .l-browse-bar {
  display: none !important;
}

.sas0-tour-overlay {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(13, 17, 23, 0.85);
  border: 1px solid #243247;
  border-radius: 8px;
  font-size: 13px;
  color: #dce6f1;
}

.sas0-tour-overlay-label {
  font-variant-numeric: tabular-nums;
}

.sas0-tour-overlay-stop {
  padding: 4px 10px;
  font-size: 13px;
  color: #dce6f1;
  background: #1a2432;
  border: 1px solid #243247;
  border-radius: 6px;
  cursor: pointer;
}

.sas0-tour-overlay-stop:hover {
  background: #243247;
}

/* 読みやすさ（D83）。Open MCT自身のクロームは基準が12px固定で、ツリー項目は
   個別に12pxを指定している。sas0側の文字（上のfont-size指定）を+1pxしたのに
   合わせて、ツリー・ヘッダー・Inspectorなどもそろえる。行間も少し広げる。 */
.l-shell {
  font-size: 13px;
  line-height: 1.5;
}

.l-shell .c-tree__item,
.l-shell .l-pane__label,
.l-shell .c-object-label {
  font-size: 13px;
}