/* ============================================================
   Flash Log v1.5 delta — flashlog-v15.css
   flashlog.css の「後」に読み込む上書き＋追加レイヤー。
   v1.5 で確定した配色文法:
     予定・見積もり = グレー / 実績 = 青 / オレンジ = 超過・注意のみ
   （旧: 予定=青・実績=オレンジ を全面置換。2026-07-05 アプリ側決定に追随）
   ============================================================ */

/* ---------- 1) Token overrides ---------- */
:root {
  /* 意味色 v1.5 */
  --fl-est: #8a919c;                       /* 見積もり・予定 = グレー */
  --fl-est-soft: rgba(130, 138, 152, 0.13);
  --fl-act: #0a6cf0;                       /* 実績 = 青（ブランドと同系） */
  --fl-act-soft: rgba(10, 108, 240, 0.10);
  --fl-over: #ff9500;                      /* 超過・あふれ・注意のみ */
  --fl-over-soft: rgba(255, 149, 0, 0.13);

  /* 旧トークンを v1.5 の意味へ付け替え（旧名を使う既存部品の色事故防止） */
  --fl-plan: var(--fl-est);
  --fl-plan-soft: var(--fl-est-soft);
  --fl-actual: var(--fl-act);
  --fl-actual-soft: var(--fl-act-soft);
}

/* ヒーロー背景から旧オレンジの光を除去（青＋グレーの2灯へ） */
.fl-hero {
  background:
    radial-gradient(900px 480px at 78% -10%, rgba(62, 176, 255, 0.16), transparent 70%),
    radial-gradient(700px 420px at 8% 12%, rgba(130, 138, 152, 0.10), transparent 70%),
    var(--fl-bg);
}

/* チップの v1.5 名 */
.fl-chip-est  { color: #6b7280; background: var(--fl-est-soft); border-color: transparent; }
.fl-chip-act  { color: var(--fl-act); background: var(--fl-act-soft); border-color: transparent; }
.fl-chip-over { color: #b45309; background: var(--fl-over-soft); border-color: transparent; }

/* 行末バッジ（グレー=見積 / 青=実績）— flashlog.css 版の明示上書き */
.fl-timebadge .plan { background: #9aa3af; }
.fl-timebadge .actual { background: var(--fl-act); }

/* ---------- 2) さわれるデモ部品 ---------- */

/* デモの容器 */
.fl-demo {
  background: var(--fl-surface-2);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  padding: clamp(18px, 3vw, 28px);
}
.fl-demo-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 620; color: var(--fl-act);
  margin-bottom: 12px;
}
.fl-demo-hint::before { content: "👆"; }

/* 日ビュー風のやること行（タップで完了） */
.fl-taskrow {
  display: flex; align-items: center; gap: 12px;
  background: var(--fl-bg);
  border: 1px solid var(--fl-border);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: transform var(--fl-dur-fast) var(--fl-ease), box-shadow var(--fl-dur-fast) ease;
  box-shadow: var(--fl-shadow-sm);
}
.fl-taskrow:hover { transform: translateY(-1px); box-shadow: var(--fl-shadow-md); }
.fl-taskrow + .fl-taskrow { margin-top: 8px; }
.fl-taskrow .chk {
  width: 24px; height: 24px; flex-shrink: 0;
  border: 2px solid #c6ccd6; border-radius: 50%;
  display: grid; place-items: center;
  color: transparent; font-size: 13px; font-weight: 800;
  transition: background var(--fl-dur-fast) ease, border-color var(--fl-dur-fast) ease, color var(--fl-dur-fast) ease;
}
.fl-taskrow.done .chk { background: var(--fl-act); border-color: var(--fl-act); color: #fff; }
.fl-taskrow .t { flex: 1; font-weight: 600; font-size: 15px; min-width: 0; }
.fl-taskrow .t small { display: block; font-weight: 500; font-size: 12px; color: var(--fl-text-subtle); }
.fl-taskrow.done .t { color: var(--fl-text-subtle); text-decoration: line-through; }
.fl-taskrow .est {
  font-family: var(--fl-font-display); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 650; color: #6b7280;
  background: var(--fl-est-soft); border-radius: 8px; padding: 3px 9px; white-space: nowrap;
}
.fl-taskrow .act {
  font-family: var(--fl-font-display); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 650; color: #fff;
  background: var(--fl-act); border-radius: 8px; padding: 3px 9px; white-space: nowrap;
  display: none;
}
.fl-taskrow.done .act { display: inline-block; }

/* 区切り線（時間帯ラベル） */
.fl-daydivider {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--fl-text-subtle);
  margin: 18px 0 10px;
}
.fl-daydivider::before, .fl-daydivider::after { content: ""; flex: 1; height: 1px; background: var(--fl-border-strong); }

/* 予定/実績サマリーバー */
.fl-sumbar { font-size: 13px; font-weight: 600; }
.fl-sumbar .lbl-est { color: #6b7280; }
.fl-sumbar .lbl-act { color: var(--fl-act); }
.fl-sumbar .track { height: 9px; background: var(--fl-surface-1); border-radius: 5px; overflow: hidden; margin: 4px 0 12px; }
.fl-sumbar .fill-est { height: 100%; background: #b8bec9; border-radius: 5px; }
.fl-sumbar .fill-act { height: 100%; background: var(--fl-act); border-radius: 5px; transition: width 0.6s var(--fl-ease); }

/* 星（今日のこれだけ / ふりかえり） */
.fl-starbtn {
  background: none; border: none; padding: 2px;
  font-size: 22px; line-height: 1; cursor: pointer;
  filter: grayscale(1); opacity: 0.4;
  transition: filter var(--fl-dur-fast) ease, opacity var(--fl-dur-fast) ease, transform var(--fl-dur-fast) var(--fl-ease);
}
.fl-starbtn.on { filter: none; opacity: 1; transform: scale(1.08); }

/* 音声波形 */
.fl-wave { display: inline-flex; gap: 3px; align-items: flex-end; height: 22px; }
.fl-wave i {
  width: 4px; border-radius: 2px; background: var(--fl-act);
  animation: flwave 0.55s ease-in-out infinite alternate;
}
.fl-wave i:nth-child(1) { height: 8px; }
.fl-wave i:nth-child(2) { height: 18px; animation-delay: 0.1s; }
.fl-wave i:nth-child(3) { height: 11px; animation-delay: 0.2s; }
.fl-wave i:nth-child(4) { height: 20px; animation-delay: 0.3s; }
.fl-wave i:nth-child(5) { height: 9px;  animation-delay: 0.4s; }
@keyframes flwave { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .fl-wave i { animation: none; } }

/* ---------- 3) 章レイアウトの追加ヘルパー ---------- */

/* 黒章（フォーカス/Apple風の静かな章） */
.fl-dark {
  background: #0d0f14;
  color: #f3f5fa;
}
.fl-dark .fl-title, .fl-dark h2, .fl-dark h3 { color: #f7f9fd; }
.fl-dark .fl-lede, .fl-dark p { color: #a8b0bf; }
.fl-dark .fl-card { background: #151922; border-color: rgba(255,255,255,0.08); }
.fl-dark .fl-card h3 { color: #eef1f8; }
.fl-dark .fl-card p { color: #99a1b0; }

/* Watch ベゼル */
.fl-watch {
  position: relative;
  width: var(--watch-w, 210px);
  border-radius: calc(var(--watch-w, 210px) * 0.30);
  padding: calc(var(--watch-w, 210px) * 0.045);
  background: linear-gradient(160deg, #3a3d44, #17181c 60%);
  box-shadow: var(--fl-shadow-device), inset 0 0 0 2px rgba(255,255,255,0.06);
}
.fl-watch::after {
  content: "";
  position: absolute; right: calc(var(--watch-w, 210px) * -0.035); top: 26%;
  width: calc(var(--watch-w, 210px) * 0.06); height: calc(var(--watch-w, 210px) * 0.19);
  border-radius: 4px; background: #2c2f36;
}
.fl-watch img { width: 100%; height: auto; border-radius: calc(var(--watch-w, 210px) * 0.26); }

/* 数字はいつも等幅 */
.fl-num { font-variant-numeric: tabular-nums; }