/* =============================================================
   sorae Launch Widget  v1
   - go4liftoff / The Space Devs に近いダーク基調ビジュアル
   - テーマは CSS カスタムプロパティで一元管理し、ルート要素の
     クラス切替(.sorae-theme-*)で全体変更する。
   - 表示部品(DetailPanel)はリスト型・単体型で共有。
   - 複数ドメインから読み込まれる前提のため、全セレクタを
     .sorae-launch-widget スコープに閉じ込め、サイト側CSSと衝突しにくくする。
   ============================================================= */

/* ---------- テーマトークン(ダーク: 基準) ---------- */
.sorae-launch-widget,
.sorae-theme-dark {
  --s-bg:          #0a0e17;
  --s-surface:     #131a26;
  --s-surface-2:   #1b2433;
  --s-text:        #eef2f8;
  --s-text-muted:  #9aa7bd;
  --s-accent:      #4ea3ff;
  --s-accent-strong:#1f7fe0;
  --s-border:      rgba(255,255,255,.10);
  --s-overlay:     linear-gradient(180deg, rgba(8,11,18,.15) 0%, rgba(8,11,18,.75) 60%, rgba(8,11,18,.95) 100%);
  --s-live:        #ff4d4f;
  --s-success:     #36d399;
  --s-failure:     #f87272;
  --s-pending:     #fbbf24;
  --s-radius:      14px;
  --s-radius-sm:   8px;
  --s-shadow:      0 8px 28px rgba(0,0,0,.45);
  --s-card-min:    320px;
  --s-font:        "Inter","Hiragino Sans","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* 将来の差し替え用フォールバック背景(伏線)。既定は none(無地+オーバーレイ) */
  --s-fallback-image: none;
}

/* ---------- 汎用ライトテーマ ---------- */
.sorae-theme-light {
  --s-bg:          #eef1f6;
  --s-surface:     #ffffff;
  --s-surface-2:   #f3f5fa;
  --s-text:        #14202e;
  --s-text-muted:  #5a6b80;
  --s-accent:      #1f7fe0;
  --s-accent-strong:#155fb0;
  --s-border:      rgba(15,30,50,.12);
  --s-overlay:     linear-gradient(180deg, rgba(10,15,25,.10) 0%, rgba(10,15,25,.55) 60%, rgba(10,15,25,.85) 100%);
  --s-live:        #e0353a;
  --s-success:     #15a06b;
  --s-failure:     #d64545;
  --s-pending:     #c98a07;
  --s-shadow:      0 6px 20px rgba(20,40,70,.12);
}

/* ---------- sorae 純正ライトテーマ (sorae.info の記事に馴染む) ---------- */
.sorae-theme-sorae {
  --s-bg:          #f7f8fa;
  --s-surface:     #ffffff;
  --s-surface-2:   #f0f3f7;
  --s-text:        #1d2733;
  --s-text-muted:  #61708a;
  --s-accent:      #0b5cab;          /* sorae 系の落ち着いた青 */
  --s-accent-strong:#08457f;
  --s-border:      rgba(20,40,70,.10);
  --s-overlay:     linear-gradient(180deg, rgba(12,20,32,.08) 0%, rgba(12,20,32,.50) 58%, rgba(12,20,32,.82) 100%);
  --s-live:        #d83b3f;
  --s-success:     #1a8f63;
  --s-failure:     #c83f3f;
  --s-pending:     #b07d06;
  --s-shadow:      0 4px 16px rgba(20,40,70,.10);
}

/* =============================================================
   ルートコンテナ
   ============================================================= */
.sorae-launch-widget {
  box-sizing: border-box;
  font-family: var(--s-font);
  color: var(--s-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.sorae-launch-widget *,
.sorae-launch-widget *::before,
.sorae-launch-widget *::after { box-sizing: border-box; }

/* テーマトグル */
.sorae-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.sorae-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--s-surface-2);
  color: var(--s-text-muted);
  border: 1px solid var(--s-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sorae-theme-toggle:hover { color: var(--s-text); border-color: var(--s-accent); }

/* =============================================================
   リストグリッド (レスポンシブ)
   PC=2〜3カラム / タブレット=2 / スマホ=1
   ============================================================= */
.sorae-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(var(--s-card-min), 1fr));
}

@media (max-width: 1023px) {
  /* タブレット: 2カラム上限 */
  .sorae-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  /* スマホ: 1カラム縦積み。カード内の主要情報を大きく見せる */
  .sorae-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* =============================================================
   打ち上げカード
   ============================================================= */
.sorae-card {
  position: relative;
  border-radius: var(--s-radius);
  overflow: hidden;
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  box-shadow: var(--s-shadow);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.sorae-card:hover { transform: translateY(-3px); border-color: var(--s-accent); }
.sorae-card:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }

/* 背景画像 + 暗いグラデーションオーバーレイ(可読性確保: 必須) */
.sorae-card-hero {
  position: relative;
  min-height: 168px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  background-color: var(--s-surface-2);
  /* 画像未指定時は --s-fallback-image(既定none)。手置きのデフォルト背景を後から差し込める */
  background-image: var(--s-fallback-image);
}
.sorae-card-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--s-overlay);
  z-index: 1;
}
.sorae-card-hero > * { position: relative; z-index: 2; }

/* ステータスバッジ(右上) */
.sorae-status-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.sorae-status-badge[data-status="success"] { background: var(--s-success); border-color: transparent; color:#04150e; }
.sorae-status-badge[data-status="failure"],
.sorae-status-badge[data-status="partial_failure"] { background: var(--s-failure); border-color: transparent; }
.sorae-status-badge[data-status="go"] { background: var(--s-accent-strong); border-color: transparent; }
.sorae-status-badge[data-status="tbc"],
.sorae-status-badge[data-status="tbd"],
.sorae-status-badge[data-status="hold"] { background: var(--s-pending); border-color: transparent; color:#231a02; }

/* 日本関連リボン */
.sorae-jp-flag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  background: #fff;
  color: #bc002d;
}

/* 事業者名 */
.sorae-provider {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #cfe0ff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* ミッション名 */
.sorae-mission {
  margin: 4px 0 2px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
}
.sorae-mission-en {
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
/* 射場名 */
.sorae-site-line {
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,.82);
  display: flex;
  align-items: center;
  gap: 5px;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* カード下部: カウントダウン + JST日時 */
.sorae-card-foot {
  padding: 14px 16px;
  background: var(--s-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sorae-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 18px;
  color: var(--s-accent);
  letter-spacing: .02em;
}
.sorae-countdown[data-state="past"] { color: var(--s-text-muted); font-size: 15px; }
.sorae-countdown[data-state="live"] { color: var(--s-live); }
.sorae-datetime {
  text-align: right;
  font-size: 12px;
  color: var(--s-text-muted);
}
.sorae-datetime strong { display:block; color: var(--s-text); font-size: 13px; }

/* スマホ時は主要情報を一段大きく(潰さない) */
@media (max-width: 639px) {
  .sorae-mission   { font-size: 21px; }
  .sorae-countdown { font-size: 20px; }
  .sorae-card-hero { min-height: 180px; }
  .sorae-card-foot { flex-wrap: wrap; }
}

/* =============================================================
   詳細パネル (DetailPanel: リスト展開時と単体型で共有)
   ============================================================= */
.sorae-detail {
  background: var(--s-surface-2);
  border-top: 1px solid var(--s-border);
  overflow: hidden;
}
/* アコーディオン(リスト内インライン展開): max-height トランジション */
.sorae-card .sorae-detail {
  max-height: 0;
  transition: max-height .35s ease;
}
.sorae-card.is-open .sorae-detail { max-height: 1400px; }

/* 単体型は常時展開・カード装飾も詳細寄りに */
.sorae-launch-detail .sorae-detail {
  border-radius: var(--s-radius);
  border: 1px solid var(--s-border);
  border-top: 1px solid var(--s-border);
}

.sorae-detail-inner { padding: 18px; display: grid; gap: 16px; }

.sorae-detail-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--s-border);
}
.sorae-detail-row:last-child { border-bottom: none; padding-bottom: 0; }
.sorae-detail-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--s-text-muted);
  letter-spacing: .03em;
}
.sorae-detail-value { font-size: 14px; }
.sorae-detail-value .en { color: var(--s-text-muted); font-size: 12px; }

@media (max-width: 639px) {
  .sorae-detail-row { grid-template-columns: 1fr; gap: 3px; }
}

/* ボタン群 */
.sorae-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sorae-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--s-radius-sm);
  border: 1px solid var(--s-border);
  background: var(--s-surface);
  color: var(--s-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.sorae-btn:hover { border-color: var(--s-accent); transform: translateY(-1px); }
.sorae-btn-live {
  background: var(--s-live);
  border-color: transparent;
  color: #fff;
}
.sorae-btn-live::before {
  content:"";
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  animation: sorae-pulse 1.2s infinite;
}
.sorae-btn-primary { background: var(--s-accent-strong); border-color: transparent; color:#fff; }
@keyframes sorae-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* コア詳細グリッド */
.sorae-core-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.sorae-core-item {
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}
.sorae-core-item span { display:block; font-size: 11px; color: var(--s-text-muted); margin-bottom: 2px; }

/* 結果ステータス(打ち上げ後) */
.sorae-result-tag {
  display: inline-flex; align-items:center; gap:7px;
  font-weight: 700; font-size: 15px;
}
.sorae-result-tag[data-status="success"] { color: var(--s-success); }
.sorae-result-tag[data-status="failure"],
.sorae-result-tag[data-status="partial_failure"] { color: var(--s-failure); }

/* 送客CTA(単体型) */
.sorae-cta-wrap {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--s-border);
  text-align: center;
}

/* 状態: ローディング / エラー / 空 */
.sorae-state {
  padding: 40px 16px;
  text-align: center;
  color: var(--s-text-muted);
  font-size: 14px;
}
.sorae-skeleton {
  border-radius: var(--s-radius);
  background: linear-gradient(90deg, var(--s-surface) 25%, var(--s-surface-2) 50%, var(--s-surface) 75%);
  background-size: 200% 100%;
  animation: sorae-shimmer 1.3s infinite;
  min-height: 240px;
}
@keyframes sorae-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* アクセシビリティ: モーション抑制 */
@media (prefers-reduced-motion: reduce) {
  .sorae-card, .sorae-detail, .sorae-btn { transition: none; }
  .sorae-skeleton, .sorae-btn-live::before { animation: none; }
}