/* Earth Map Suite critical UI rebuild + NicheWorks base */
:root{
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --panel:#ffffff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#64748b;
  --muted2:#94a3b8;
  --accent:#111827;
  --blue:#2563eb;
  --green-bg:#f0fdf4;
  --green-bd:#bbf7d0;
  --red-bg:#fef2f2;
  --red-bd:#fecaca;
  --amber-bg:#fff7ed;
  --amber-bd:#fed7aa;
}
*{box-sizing:border-box;}
html,body{min-height:100%;}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
a{color:#2563eb;text-decoration:underline;}
[hidden]{display:none!important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.nw-header{padding:16px 12px 8px;border-bottom:1px solid var(--border);text-align:center;}
.nw-title{margin:0;font-size:20px;letter-spacing:.2px;}
.nw-lead{margin:7px 0 0;font-size:12px;color:var(--muted);}
.nw-lang-switch{margin-top:6px;font-size:12px;color:var(--muted);}
.nw-lang-switch button{border:0;background:transparent;padding:0 2px;color:#374151;cursor:pointer;}
.nw-lang-switch button.active{font-weight:700;text-decoration:underline;}

.nw-main{width:min(100%,1440px);max-width:1440px;margin:0 auto;padding:14px 12px 24px;}
.ad-slot{margin:12px 0 16px;min-height:58px;padding:10px;border:1px dashed #d4d4d8;color:var(--muted2);display:flex;align-items:center;justify-content:center;font-size:12px;text-align:center;}
.card{border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden;margin:12px 0;box-shadow:0 1px 0 rgba(0,0,0,.03);}
.card-hd{padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg-soft);}
.card-title{margin:0;font-size:14px;}
.card-bd{padding:14px;}
.bullet{margin:0;padding-left:20px;color:var(--muted);font-size:13px;}
.bullet li{margin:4px 0;}
.hint{margin:8px 0 0;color:var(--muted);font-size:12px;}

/* Replace outdated privacy note visually without touching markup. */
.nw-note{margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-soft);color:var(--muted);font-size:0;}
.nw-note[data-i18n="ja"]::after{content:"stormモードでは、GSMaPメタデータ確認のため bbox・期間・preset をデータ取得エンドポイントへ送信します。GA4には生のbboxや座標は送信しません。";font-size:12px;}
.nw-note[data-i18n="en"]::after{content:"Storm mode sends bbox, date range, and preset to the data endpoint to check GSMaP metadata. Raw bbox/coordinates are not sent to GA4.";font-size:12px;}

.field{display:flex;flex-direction:column;gap:6px;margin:10px 0;min-width:0;}
.label{font-size:12px;color:var(--muted);font-weight:600;}
.input,.textarea,.select{width:100%;min-width:0;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);font-size:14px;outline:none;}
.textarea{min-height:100px;resize:vertical;}
.row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.row>.field{flex:1 1 160px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 13px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);font-size:13px;cursor:pointer;text-decoration:none;}
.btn:hover{background:var(--bg-soft);}
.btn.primary,.ems-mode-tabs .btn.active,.ems-mode-tabs .btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;}
.actions,.storm-actions,.compare-actions,.card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}

.out{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-soft);font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;}
.out:empty{display:none;}
.status-card{padding:12px;border-radius:12px;border:1px solid var(--border);background:#fff;font-size:13px;}
.status-card.status-loading{border-color:#bfdbfe;background:#eff6ff;}
.status-card.status-success{border-color:var(--green-bd);background:var(--green-bg);}
.status-card.status-error{border-color:var(--red-bd);background:var(--red-bg);}

/* Workspace */
.ems-workspace{display:grid;gap:12px;margin:12px 0 14px;}
.ems-modebar,.ems-status-row,.ems-input-column,.results-root{min-width:0;}
.ems-modebar{border:1px solid var(--border);border-radius:16px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 0 rgba(0,0,0,.03);}
.ems-mode-controls{display:flex;flex-direction:column;gap:8px;align-items:stretch;}
.ems-mode-select{max-width:260px;}
.ems-mode-tabs{display:flex;flex-wrap:wrap;gap:8px;}
.ems-status-row{display:grid;gap:8px;}
.ems-input-column,.results-root{border:1px solid var(--border);border-radius:16px;background:#fff;padding:14px;box-shadow:0 1px 0 rgba(0,0,0,.03);}
.ems-section-label{margin-bottom:10px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;}
.panel-head h3,.download-card h3,.note-card h3{margin:0 0 4px;font-size:15px;}
.setup-summary{margin:10px 0;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--bg-soft);font-size:12px;overflow-wrap:anywhere;}
.input-editor{border:1px solid var(--border);border-radius:12px;padding:9px 11px;background:#fff;}
.input-editor summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--text);}

/* Mode scoping: CSS-first fallback. If JS fails to set data-current-mode, show storm only. */
.input-panel,.result-panel{display:none!important;min-width:0;}
.input-panel[data-input-mode="storm"],.result-panel[data-result-mode="storm"]{display:block!important;}
html[data-current-mode="compare"] .input-panel,html[data-current-mode="compare"] .result-panel,
html[data-current-mode="card"] .input-panel,html[data-current-mode="card"] .result-panel{display:none!important;}
html[data-current-mode="storm"] .input-panel[data-input-mode="storm"],
html[data-current-mode="storm"] .result-panel[data-result-mode="storm"],
html[data-current-mode="compare"] .input-panel[data-input-mode="compare"],
html[data-current-mode="compare"] .result-panel[data-result-mode="compare"],
html[data-current-mode="card"] .input-panel[data-input-mode="card"],
html[data-current-mode="card"] .result-panel[data-result-mode="card"]{display:block!important;}

.result-panel-storm{gap:14px;}
html[data-current-mode="storm"] .result-panel-storm,.result-panel-storm{display:grid!important;grid-template-columns:1fr;}
.ems-main-panel,.ems-side-panel{min-width:0;display:flex;flex-direction:column;gap:12px;}

/* Storm preview should not disappear before first run: show a usable placeholder shell. */
.storm-replay{margin:0;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff;display:flex!important;flex-direction:column;gap:12px;}
.storm-preview-banner{padding:9px 11px;border:1px solid var(--amber-bd);border-radius:12px;background:var(--amber-bg);display:flex;flex-direction:column;gap:3px;color:#9a3412;font-size:12px;}
.storm-preview-banner strong{color:#7c2d12;}
.storm-status{font-size:12px;color:var(--muted);}
.storm-toolbar{display:flex;flex-direction:column;gap:10px;}
.storm-controls{display:flex;align-items:center;gap:8px;min-width:0;}
.storm-slider{flex:1;min-width:0;}
.storm-meta,.storm-toggle{font-size:12px;color:var(--muted);}
.storm-toggle{display:flex;align-items:center;gap:6px;}
.storm-canvases{display:grid;grid-template-columns:1fr;gap:12px;}
.storm-panel,.compare-card,.card-output-panel{border:1px solid var(--border);border-radius:12px;padding:9px;background:var(--bg-soft);min-width:0;}
.storm-panel-title,.compare-card-title,.card-output-label{font-size:12px;color:var(--muted);margin-bottom:6px;}
canvas{max-width:100%;height:auto;display:block;background:#fff;border-radius:10px;border:1px solid var(--border);}

.storm-metadata{margin:0;padding:12px;border:1px solid #bfdbfe;border-radius:14px;background:#eff6ff;display:flex!important;flex-direction:column;gap:10px;}
.storm-metadata[hidden],.compare-output[hidden],.card-output[hidden],.storm-replay[hidden]{display:none!important;}
.storm-metadata.metadata-ok{border-color:var(--green-bd);background:var(--green-bg);}
.storm-metadata.metadata-error{border-color:var(--red-bd);background:var(--red-bg);}
.storm-metadata-header{display:flex;flex-direction:column;gap:4px;}
.storm-metadata-title{margin:0;font-size:14px;}
.storm-metadata-note,.storm-metadata-body p{margin:0;color:var(--muted);font-size:12px;}
.storm-metadata-state{font-size:13px;font-weight:800;color:var(--text);}
.storm-metadata-list{margin:8px 0 0;display:grid;grid-template-columns:minmax(94px,auto) minmax(0,1fr);gap:6px;font-size:12px;}
.storm-metadata-list dt{font-weight:800;color:var(--text);}
.storm-metadata-list dd{margin:0;color:var(--muted);overflow-wrap:anywhere;word-break:break-word;}
#stormMetadataBody:empty::before{content:"Metadata status will appear after Run storm.";font-size:12px;color:var(--muted);}
html[lang="ja"] #stormMetadataBody:empty::before{content:"Run storm後にメタデータ状態を表示します。";}
#compareMetadataBody:empty::before{content:"Run compare to show GSMaP metadata status for Period A and Period B.";font-size:12px;color:var(--muted);}
#cardMetadataBody:empty::before{content:"Run card to check GSMaP metadata-only reachability near the selected point.";font-size:12px;color:var(--muted);}
html[lang="ja"] #compareMetadataBody:empty::before{content:"Run compare後にA/B期間のGSMaP metadata状態を表示します。";}
html[lang="ja"] #cardMetadataBody:empty::before{content:"Run card後に選択地点周辺のGSMaP metadata到達性を表示します。";}
.compare-metadata,.card-metadata{border-color:#bfdbfe;background:#eff6ff;}
.compare-metadata-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px;}
.compare-metadata-period{border:1px solid var(--border);border-radius:12px;padding:10px;background:rgba(255,255,255,.72);min-width:0;}
.compare-metadata-period.metadata-ok{border-color:var(--green-bd);background:#f8fff9;}
.compare-metadata-period.metadata-error{border-color:var(--red-bd);background:#fffafa;}
.compare-metadata-period-title{margin:0 0 6px;font-size:13px;color:var(--text);}
.compare-metadata-body:empty::before{content:"Run compare to check Period A/B metadata reachability.";font-size:12px;color:var(--muted);}
html[lang="ja"] .compare-metadata-body:empty::before{content:"Run compare後にPeriod A/Bのmetadata到達性を表示します。";}

.download-card,.note-card{border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--bg-soft);min-width:0;}

.compare-output,.card-output{margin:0;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff;display:flex!important;flex-direction:column;gap:12px;}
.compare-cards,.card-output-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.compare-title,.card-output-title{margin:0 0 6px;font-size:14px;}
.compare-note,.card-output-note{margin:0;color:var(--muted);font-size:12px;}
.compare-metrics,.card-summary{margin:0;display:grid;gap:6px;font-size:12px;color:var(--muted);}
.compare-metrics dt,.card-summary dt{font-weight:800;color:var(--text);}
.compare-metrics dd,.card-summary dd{margin:0;}
.card-map-picker{width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,#e0f2fe 0%,#fef3c7 100%);cursor:crosshair;}
.card-output-meta{font-size:12px;color:var(--muted);overflow-wrap:anywhere;}

/* Donation / related / footer */
.nw-donate{text-align:center;margin:18px 0 10px;padding:8px 0;font-size:12px;color:var(--muted);}
.nw-donate-text{margin:4px 0;font-size:12px;}
.nw-donate-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:6px;}
.nw-donate-links a{display:inline-block;padding:8px 14px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:var(--text);text-decoration:none;}
.nw-other{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);text-align:center;}
.nw-other-title{margin:0 0 8px;font-size:12px;color:var(--muted);}
.nw-other-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;}
.nw-other-links a{font-size:12px;color:#4b5563;}
.nw-footer{margin-top:24px;padding:16px 8px 12px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);text-align:center;line-height:1.6;}
.nw-footer-line{margin:2px 0;}
.nw-footer a{color:var(--muted);}

@media(max-width:480px){
  .nw-main{padding:10px 8px 18px;}
  .nw-title{font-size:17px;}
  .row{flex-direction:column;align-items:stretch;gap:0;}
  .btn{width:100%;}
  .actions,.storm-actions,.compare-actions,.card-actions{flex-direction:column;}
  .ems-mode-tabs{display:none;}
  .storm-metadata-list{grid-template-columns:1fr;}
  .compare-metadata-grid{grid-template-columns:1fr;}
  .ems-modebar,.ems-input-column,.results-root,.storm-replay,.storm-metadata,.download-card,.note-card,.compare-output,.card-output{border-radius:12px;padding:10px;}
}
@media(min-width:480px){
  .ems-modebar{flex-direction:row;align-items:flex-start;justify-content:space-between;}
  .ems-mode-controls{align-items:flex-end;min-width:300px;}
  .btn{width:auto;}
}
@media(min-width:768px){
  .storm-canvases{grid-template-columns:repeat(2,minmax(0,1fr));}
  .compare-metadata-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .compare-cards,.card-output-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
}
@media(min-width:960px){
  .ems-workspace{grid-template-columns:minmax(280px,32%) minmax(0,1fr);align-items:start;}
  .ems-modebar,.ems-status-row{grid-column:1/-1;}
  .ems-input-column{position:sticky;top:8px;}
  .results-root{min-height:520px;}
}
@media(min-width:1200px){
  .ems-workspace{grid-template-columns:minmax(280px,320px) minmax(0,1fr);}
  html[data-current-mode="storm"] .result-panel-storm,.result-panel-storm{grid-template-columns:minmax(0,1fr) minmax(280px,360px);align-items:start;}
}