/* =============================================================
   Misionero Hub — Material Design 3
   index.html から style.css の後に読み込む（＝本番で有効）。
   ブランド緑 #123d32 を種色にして M3 のトーナルパレットを生成し、
   既存トークンを M3 のロールに割り当て直している。
   ============================================================= */
[hidden] { display: none !important; }

:root {
  /* ── M3 トーナルパレット（種色 #123d32 / hue 172° から生成）──── */
  --p10:#002019; --p20:#01382c; --p30:#005140; --p40:#036b56; --p50:#01876d;
  --p80:#69dabb; --p90:#86f7d7; --p95:#b7ffe9;
  --s10:#002019; --s30:#294d43; --s40:#41655a; --s90:#c2ebde; --s95:#d0faec;
  --t10:#001f28; --t30:#044d60; --t40:#19667d; --t90:#b6eaff;
  --n10:#171d1b; --n20:#2c3230; --n90:#dde4e1; --n95:#ebf2f0; --n96:#eef5f3;
  --n98:#f3fbf8; --n100:#ffffff;
  --nv30:#3b4a45; --nv50:#6b7a75; --nv80:#b9cac4; --nv90:#d5e6e0;

  /* ── M3 カラーロール（ライト）───────────────────────── */
  --md-primary: var(--p40);
  --md-on-primary: #fff;
  --md-primary-container: var(--p90);
  --md-on-primary-container: var(--p10);
  --md-secondary: var(--s40);
  --md-secondary-container: var(--s90);
  --md-on-secondary-container: var(--s10);
  --md-tertiary: var(--t40);
  --md-tertiary-container: var(--t90);
  --md-error: #b3261e;
  --md-on-error: #fff;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;
  --md-surface: #e6efeb;                          /* 地。カードとの差を作るため少し濃く */
  --md-on-surface: var(--n10);
  --md-on-surface-variant: var(--nv30);
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #ffffff;             /* カードは白。地との差で境目を出す */
  --md-surface-container: #eff5f3;
  --md-surface-container-high: #e2eeea;            /* 未読・押している間 */
  --md-surface-container-highest: #d8e7e1;
  --md-outline: var(--nv50);
  --md-outline-variant: #cadcd5;                   /* 輪郭。目立たせず、でも切れ目が分かる濃さ */

  /* ── M3 形（Shape）─────────────────────────────────── */
  --md-corner-xs: 4px;
  --md-corner-s: 8px;
  --md-corner-m: 12px;
  --md-corner-l: 16px;
  --md-corner-xl: 28px;
  --md-corner-full: 999px;

  /* ── 既存トークンを M3 ロールへ差し替え ───────────────── */
  --brown: var(--md-primary);
  --brown-2: var(--p30);
  --cream: var(--md-surface);
  --card: var(--md-surface-container-low);
  --surface: var(--md-surface-container-low);
  --surface-2: var(--md-secondary-container);
  --ink: var(--md-on-surface);
  --muted: var(--md-on-surface-variant);
  --line: var(--md-outline-variant);
  --unread: var(--md-surface-container-high);
  --red: var(--md-error);
  --orange: #7d5700;
  --green: var(--md-primary);
  --accent-soft: #dcefe7;
  --accent-soft-2: var(--md-primary-container);
  --critical-soft: var(--md-error-container);
  --warn-soft: #ffe9c4;
  --info-soft: #dcefe7;
  --warn-text: #573f00;
  --body-text: var(--md-on-surface-variant);

  --r-sm: var(--md-corner-s);
  --r-md: var(--md-corner-m);
  --r-card: var(--md-corner-l);

  /* M3 は影ではなく面のトーン差で階層を出す */
  --shadow-card: none;
}

/* ── M3 タイプスケール ─────────────────────────────────── */
.section-heading h2 { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: 0; }
.topbar .brand { font-size: 22px; line-height: 28px; font-weight: 500; }
.item .title { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; }
.item .body { font-size: 14px; line-height: 20px; letter-spacing: 0.25px; }
.item .src, .item .time, .item .cat { font-size: 11px; line-height: 16px; letter-spacing: 0.5px; font-weight: 500; }

/* ── カードは影を捨ててトーン差で立てる ──────────────────── */
/* 影ではなく「白いカード＋髪の毛1本の輪郭」で1枚ずつを区切る。
   M3 の Filled card（面のトーン差だけ）は、地との差が小さすぎて境目が消えた */
.quick-action, .action-card, .settings-card, .settings-row, .item,
.exp-form, .stat, .exp-line, .ord-items, .ord-addr, .mor-card {
  border: 1px solid var(--md-outline-variant);
  box-shadow: none;
  background: var(--md-surface-container-low);
}
.item.unread { background: var(--md-surface-container-high); }
.item.read { background: var(--md-surface-container-low); }

/* ── 操作カード: 左の線をやめ、アイコンをトーナル容器にする ──── */
.action-card {
  border-radius: var(--md-corner-l);
  background: var(--md-surface-container-low);
}
.action-card .action-icon {
  border-radius: var(--md-corner-full);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.action-card > .arrow {
  border: 0;
  background: transparent;
  color: var(--md-on-surface-variant);
  font-size: 20px;
}

/* ── ボタンは M3 の pill 形 ────────────────────────────── */
.login-card button, .btn, .primary-btn, button.primary,
#sale-cart-submit, #ship-submit, #rb-save, #exp-submit, #bean-submit {
  border-radius: var(--md-corner-full);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-weight: 500;
  letter-spacing: 0.1px;
}
.text-button { color: var(--md-primary); font-weight: 500; }

/* ── フィルターチップ（通知タブ）──────────────────────── */
.tabs button {
  border: 1px solid var(--md-outline);
  border-radius: var(--md-corner-s);
  background: transparent;
  color: var(--md-on-surface-variant);
  font-weight: 500;
}
.tabs button.active {
  border-color: transparent;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

/* ── トップバー ───────────────────────────────────────── */
.topbar {
  border-bottom: 0;
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.page-title { border-left-color: #ffffff59; }

/* ── M3 Navigation bar（下タブ）──────────────────────────
   ・高さ80px ・アクティブは 64×32 の pill インジケータ
   ・ラベルは常時表示（label-medium） */
.bottom-nav {
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
  border-top: 0;
  background: var(--md-surface-container);
}
.bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.bottom-nav button > span {
  display: grid;
  width: 64px;
  height: 32px;
  place-items: center;
  border-radius: var(--md-corner-full);
  font-size: 20px;
  transition: background 0.15s;
}
.bottom-nav button.active { color: var(--md-on-surface); font-weight: 500; }
.bottom-nav button.active > span { background: var(--md-secondary-container); }

/* ── 状態レイヤー（押した時の反応）───────────────────────── */
.action-card, .settings-row, .item, .tabs button, .bottom-nav button { position: relative; }
.action-card:active, .settings-row:active, .item:active { background: var(--md-surface-container-high); }

/* ── 帯・ゲージ ──────────────────────────────────────── */
.alert-band { border: 1px solid var(--md-outline-variant); border-radius: var(--md-corner-l); box-shadow: none; }
.alert-band.critical { background: var(--md-error-container); color: var(--md-on-error-container); }
.alert-band.warn { background: #ffe9c4; color: #573f00; }
#budget-card, #next-event {
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
}
/* ホームの主役なので、ここだけ紙一枚ぶん持ち上げる */
#budget-card { box-shadow: 0 1px 2px rgba(0, 32, 25, 0.05); }

.action-list { gap: 5px; }

/* ── ホームのかたまりを分ける ───────────────────────────────
   同じ大きさのカードが等間隔で続くと、どこまでが1つの話か分からない。
   「知らせ」→「数字」→「次の予定」の3かたまりに見えるよう間を空ける */
#home-alerts:not(:empty) { margin-bottom: 12px; }
.home-top { margin-bottom: 18px; }
#next-event { margin-bottom: 18px; }
.section-heading { margin: 22px 0 10px; }

/* app.js が後から差し込むCSSより強くするため id で当てる */
#home-minutes.home-mn {
  margin-bottom: 18px;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
}
#action-list .act-grp { border: 1px solid var(--md-outline-variant); }

/* 「次の出店」は下に続きがあるとき1枚のカードに見せる作り。
   上で足した下余白がそこに割り込むので、続きがある時だけ外す */
#next-event.has-more { margin-bottom: 0; border-bottom: 0; }
.ne-more {
  margin-bottom: 18px;
  border: 1px solid var(--md-outline-variant);
  border-top: 0;
  background: var(--md-surface-container-low);
}

/* 未読は白いカードとの差で分かるようにする */
.item.unread {
  background: var(--md-surface-container-high);
  border-color: #b7d3c8;
}

/* ゲージは「0 から今の売上まで伸びる」動き。初期状態は app.js 側で空にしている。
   0.6秒だと伸びたことに気づきにくいので少し長くし、終わりを緩める */
.bc-gauge .g-fill { transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* 動きが苦手な人の設定を尊重する（値はそのまま出る） */
@media (prefers-reduced-motion: reduce) {
  .bc-gauge .g-fill { transition: none; }
}