/* ===== 締切カレンダー：iPhone を第一に想定したスタイル =====
   方針：青系で統一し、角丸は最小限（2〜4px）。装飾的なグラデーションや
   影は使わず、1pxの罫線と面の塗り分けで構造を見せる。 */

:root {
  --bg: #0b0f15;
  --bg2: #0f151d;
  --card: #111823;
  --card2: #172130;
  --line: #223140;
  --line2: #2c3d50;
  --text: #e7eef7;
  --muted: #8ba0b8;

  --accent: #3b82f6;         /* 主要な青 */
  --accent-ink: #ffffff;
  --accent-soft: #16283f;
  --accent2: #38bdf8;        /* 明るい青（副次） */
  --indigo: #6172e8;
  --ok: #12a5b8;             /* 完了（青緑） */
  --event: #35b364;          /* 即売会の当日（緑） */
  --life: #2fa36b;           /* 日常のカレンダー（案件の青と分ける） */
  /* 日常の「その日の勤務」。マスには薄く敷くので、ここは元の色を持つ */
  --duty-office: #d9a520;    /* 出社：黄 */
  --duty-remote: #e0555f;    /* リモートワーク：赤 */
  --duty-stay: #4a8ff5;      /* 泊まり勤務：青 */
  /* マスに敷く色。日付と予定を読む邪魔をしないよう、うっすらとだけ乗せる */
  /* 期限切れの知らせの点滅。薄い赤と地の色を行き来する */
  --overdue-a: #2e161b;
  --overdue-b: var(--card);
  --behind-a: #2e2716;       /* 遅れの点滅（薄い黄） */
  --duty-office-bg: color-mix(in srgb, var(--duty-office) 12%, var(--card));
  --duty-remote-bg: color-mix(in srgb, var(--duty-remote) 11%, var(--card));
  --duty-stay-bg: color-mix(in srgb, var(--duty-stay) 11%, var(--card));
  --sky: #38bdf8;            /* 日常の予定（ホームでの目印の水色） */
  /* グラフの系列色。色覚の見分けやすさを検証して決めた3色 */
  --series1: #3b82f6;
  --series2: #e0507f;
  --series3: #e0a02a;        /* 即売会の頒布（青・桃と混ざらない黄橙） */
  --warn: #d9a441;
  --danger: #e0555f;

  --radius: 4px;
  --radius-s: 3px;
  --tab-h: 54px;
  --bar-h: 48px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #eaeff5;
    --bg2: #ffffff;
    --card: #ffffff;
    --card2: #eef3f9;
    --line: #cfdae6;
    --line2: #b9c8d8;
    --text: #0e1a28;
    --muted: #56697e;

    --accent: #1d63d8;
    --accent-ink: #ffffff;
    --accent-soft: #e2ecfc;
    --accent2: #0b7fb8;
    --indigo: #4356c8;
    --ok: #0b7f8f;
    --event: #1d8f4c;
    --life: #157a41;
    --duty-office: #c08a00;
    --duty-remote: #d94b56;
    --duty-stay: #3b82f6;
    --overdue-a: #fdeaec;
    --overdue-b: #ffffff;
    --behind-a: #fdf4e2;
    --duty-office-bg: #fdfce9;
    --duty-remote-bg: #fcf2f2;
    --duty-stay-bg: #f0f5fe;
    --sky: #0b8fd0;
    --series1: #1d63d8;
    --series2: #d6336c;
    --series3: #a1690a;
    --warn: #9a6a05;
    --danger: #c62f3c;
    color-scheme: light;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

.icon { display: block; flex: none; }

/* display:flex / grid を指定した要素は [hidden] の既定（display:none）を
   上回ってしまい、隠したつもりが出たままになる。ここでまとめて押さえる */
[hidden] { display: none !important; }

/* ---------------- 起動の一枚 ----------------

   ロゴを大きく出して、365 の数字を回してから止める。
   index.html に直に書いてあるので、読み込みを待たずに出る。
   回すのは CSS のアニメーションなので、絵が出たその場から動き始める。 */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  /* まん中にうっすら光を置いて、ロゴを浮かせる */
  background-image: radial-gradient(60% 40% at 50% 46%, color-mix(in srgb, var(--indigo) 16%, transparent), transparent 70%);
  transition: opacity .3s ease, transform .3s ease;
  /* 何かあって JS が消しそこねても、ここで必ず開く */
  animation: splash-bye .4s ease 3.2s forwards;
}
.splash.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
@keyframes splash-bye { to { opacity: 0; visibility: hidden; } }

.splash-logo {
  display: flex; align-items: baseline; gap: .04em;
  font-size: clamp(34px, 13.5vw, 62px); font-weight: 800; letter-spacing: .04em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.splash-word { font-weight: 800; }
.splash-num { display: flex; color: var(--indigo); }

/* 数字1桁ぶんの窓。中の帯が上に動いて、狙った数字で止まる */
.splash-reel { display: block; height: 1em; overflow: hidden; }
.splash-strip {
  display: block;
  transform: translateY(calc(var(--land) * -1em));   /* 止まったところ */
  animation: splash-reel .8s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s) both;
}
.splash-strip i { display: block; height: 1em; font-style: normal; text-align: center; }
.splash-reel:nth-child(2) .splash-strip { --delay: .09s; }
.splash-reel:nth-child(3) .splash-strip { --delay: .18s; }
@keyframes splash-reel { from { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  /* 回さずに、はじめから 365 を出す */
  .splash-strip { animation: none; }
  .splash { animation-delay: 1.4s; }
}

/* ---------------- ヘッダー ---------------- */
.appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.appbar-inner { height: var(--bar-h); display: flex; align-items: center; gap: 4px; padding: 0 6px; }
/* 題名は左に置き、そのすぐ右に設定（歯車）を出す */
.appbar-title {
  font-size: 15px; font-weight: 700; text-align: left; letter-spacing: .02em;
  padding-left: 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ロゴ（文字だけ）。アプリの名前を出すところで、365 をインディゴにする */
.logo-word { font-size: 16.5px; font-weight: 800; letter-spacing: .05em; line-height: 1; }
.logo-word i { font-style: normal; color: var(--indigo); margin-left: 1px; }

.appbar-gap { flex: 1; }
.gearbtn { flex: none; }
/* 横断検索（虫めがね）。歯車の右に並べる */
.searchbtn { flex: none; }
.searchbtn[hidden] { display: none; }
/* 案件と日常のカレンダーを行き来するボタン（歯車の右） */
.modebtn {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--text); font-size: 12px; font-weight: 700; padding: 4px 7px; cursor: pointer;
  white-space: nowrap;
}
.modebtn .icon { color: var(--muted); }
.modebtn.life { border-color: var(--life); color: var(--life); }
.modebtn.life .icon { color: var(--life); }
.modebtn[hidden] { display: none; }
.appbar-actions { min-width: 32px; display: flex; justify-content: flex-end; }
#backBtn[hidden] { display: none; }

.iconbtn {
  min-width: 34px; height: 34px; border: 0; background: transparent; border-radius: var(--radius-s);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text);
}
.iconbtn:active { background: var(--card2); }
.iconbtn.small { min-width: 28px; height: 28px; }
.iconbtn.danger { color: var(--danger); }
/* 題名の右に並ぶボタン（歯車・電球・虫めがね）は、色も濃さもそろえる。
   .iconbtn より後ろに置かないと、こちらの色が負けてしまう */
.gearbtn, .ideabtn, .searchbtn { color: var(--muted); }
.gearbtn.on, .ideabtn.on, .searchbtn.on { color: var(--accent); }

/* ---------------- 本体 ---------------- */
.view {
  padding-top: calc(var(--bar-h) + env(safe-area-inset-top));
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 24px);
  min-height: 100vh;
}
.page { padding: 10px 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.pad { padding: 4px 0; }
.mt { margin-top: 10px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.link { color: var(--accent); font-size: 13px; font-weight: 600; }

/* ---------------- タブバー ---------------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(6, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.tab {
  height: var(--tab-h); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10.5px; color: var(--muted); position: relative;
  /* 6つ並ぶので、狭い画面でも2段に折り返さないよう幅を詰められるようにする */
  min-width: 0; padding: 0 1px;
}
/* 「カレンダー」のような長い名前は、狭い端末では少しだけ縮める */
.tab > span:last-child {
  max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap;
}
@media (max-width: 379px) {
  .tab { font-size: 9.5px; letter-spacing: -.02em; }
}
/* キーボードが出ているあいだは、下タブと＋ボタンをしまう。
   iPhone では画面の途中まで押し上げられて浮いてしまうため */
body.kb-open .tabbar, body.kb-open .fab { display: none; }

.tab.on { color: var(--accent); }
.tab.on::before {
  content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 2px; background: var(--accent);
}

/* ---------------- FAB ---------------- */
.fab {
  position: fixed; right: 14px; z-index: 41;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px);
  width: 50px; height: 50px; border-radius: var(--radius); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.fab:active { background: var(--accent-soft); color: var(--accent); }
.fab[hidden] { display: none; }
/* ＋の左に並べる小さめの入口。大きさは＋と同じにする */
.fab-sub {
  right: calc(14px + 50px + 10px);
  background: var(--card); color: var(--text); border-color: var(--line2);
}
/* 3つめ（顧客管理）。＋と発注のさらに左 */
.fab-sub2 { right: calc(14px + (50px + 10px) * 2); }
.fab-sub:active { background: var(--card2); color: var(--accent); }
/* 未確認の発注があるときの印 */
.fab-sub.has-new { border-color: var(--warn); color: var(--warn); }
.fab-sub.has-new::after {
  content: attr(data-count);
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  background: var(--warn); color: var(--card); border-radius: 2px;
  font-size: 10px; font-weight: 700; line-height: 1;
}

/* ---------------- 見出し・カード ---------------- */
.section { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 0; }
.section-title {
  font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .08em;
  border-left: 3px solid var(--accent); padding-left: 7px;
}
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.list { display: flex; flex-direction: column; gap: 6px; }
.empty {
  text-align: center; color: var(--muted); padding: 24px 12px; display: flex; flex-direction: column;
  gap: 12px; align-items: center; border: 1px dashed var(--line2); border-radius: var(--radius);
}

/* ---------------- 行 ---------------- */
.row {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 10px 9px 13px; overflow: hidden; flex-wrap: wrap;
}
.row-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* 色の点。案件やフォルダの色を小さく添える */
.dot { width: 10px; height: 10px; flex: none; display: inline-block; border-radius: 2px; }
.row-title { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row-title .icon { color: var(--muted); }
.row-sub { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
/* 「5〜8P」のような、その日に進める範囲 */
.range {
  font-size: 12.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
  background: var(--accent-soft); padding: 0 5px; border-radius: 2px;
}
.chev { color: var(--muted); display: flex; }
.pct { font-size: 12px; color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.row.is-done { opacity: .55; }
.row.is-done .row-title { text-decoration: line-through; }
.row.deadline.danger { border-color: var(--danger); }
.row.deadline.urgent { border-color: var(--warn); }
.row.plan.is-primary { border-color: var(--accent); }
.tnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 2px; background: var(--card2);
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}

.checkbtn {
  width: 32px; height: 32px; border-radius: var(--radius-s); border: 1px solid var(--line2);
  background: transparent; color: var(--muted); cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.checkbtn.on { background: var(--ok); border-color: var(--ok); color: #04202a; }

/* ---------------- チップ ---------------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; padding: 2px 6px; border-radius: 2px;
  background: var(--card2); color: var(--muted); white-space: nowrap; border: 1px solid transparent;
}
.chip .icon { width: 13px; height: 13px; }
.chip.soft { background: var(--accent-soft); color: var(--accent); }
.chip.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.chip.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.chip.danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.chip.ghosty { background: transparent; border-color: var(--line2); }
.chip.kind-event { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.chip.kind-work { background: color-mix(in srgb, var(--accent2) 16%, transparent); color: var(--accent2); }
.chip.kind-support { background: color-mix(in srgb, var(--indigo) 18%, transparent); color: var(--indigo); }
/* 内容（漫画／イラスト）は種別と区別できるよう枠線だけの表現にする */
.chip.cat-manga { background: transparent; border-color: color-mix(in srgb, var(--indigo) 55%, transparent); color: var(--indigo); }
.chip.cat-illust { background: transparent; border-color: color-mix(in srgb, var(--ok) 55%, transparent); color: var(--ok); }
.chip.removable { border-color: var(--line2); cursor: pointer; }

/* ---------------- 進捗バー ---------------- */
.bar { height: 4px; background: var(--card2); overflow: hidden; border-radius: 0; }
.bar > i { display: block; height: 100%; transition: width .2s linear; }

/* ---------------- ホーム ---------------- */
.today-head {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 2px 0 10px; border-bottom: 1px solid var(--line);
}
/* 見出しの下線の左端だけを差し色にする */
.today-head::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--accent);
}

/* 日付の見出し。数字を大きく、年と「月日」は控えめにして読みやすくする */
.today-date { display: flex; align-items: baseline; gap: 1px; letter-spacing: .01em; }
.td-year { font-size: 14px; font-weight: 700; color: var(--muted); margin-right: 5px; }
.td-num { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.td-unit { font-size: 16px; font-weight: 700; color: var(--muted); margin-right: 3px; }
.td-wd {
  margin-left: 6px; padding: 1px 6px; border: 1px solid var(--line2); border-radius: var(--radius-s);
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.td-wd.sun { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line2)); }
/* 祝日の名前。日付と同じ大きさで、日付のすぐ右に添える */
.td-holiday { font-size: 16px; font-weight: 700; color: var(--danger); margin-left: 6px; }
.daytitle .td-holiday { font-size: 14px; }
.td-wd.sat { color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 45%, var(--line2)); }
.today-sub { font-size: 12.5px; color: var(--muted); }

/* 天気（日付の右）。枠は置かず、そのぶん大きく出す */
.wx {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: transparent; border: 0; padding: 0 2px 2px; color: var(--text); cursor: pointer;
}
.wx:active { opacity: .6; }
.wx .icon { color: var(--accent); }
.wx-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.wx-t b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wx-hl { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 降りそうなときの確率。最高／最低のかわりに出す */
.wx-pop { font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; }
.wx-none { color: var(--muted); }
.wx-none .icon { color: var(--muted); }
.wx-set { font-size: 13px; font-weight: 700; }

/* 天気の画面 */
.wx-sheet { gap: 8px; }
.wx-now { display: flex; align-items: center; gap: 12px; padding: 2px 0 6px; }
.wx-now .icon { color: var(--accent); flex: none; }
.wx-now-main { min-width: 0; }
.wx-now-temp { display: flex; align-items: baseline; gap: 8px; }
.wx-now-temp b { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wx-now-label { font-size: 14px; font-weight: 700; }
.wx-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wx-fact {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 6px 4px; text-align: center; min-width: 0;
}
.wx-fact span { display: block; font-size: 10px; color: var(--muted); }
.wx-fact b { font-size: 13px; font-variant-numeric: tabular-nums; }
/* これから12時間。横に流して見る */
.wx-hours {
  display: flex; gap: 6px; overflow-x: auto; padding: 1px; -webkit-overflow-scrolling: touch;
}
.wx-hour {
  flex: none; width: 54px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 6px 2px;
}
.wx-hour .icon { color: var(--accent); }
.wx-hour b { font-size: 13px; font-variant-numeric: tabular-nums; }
.wx-h-time { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wx-h-pop { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wx-h-pop.on { color: var(--accent); font-weight: 700; }

/* 3日ぶんの予報 */
/* 3日間の1日ぶん。押すと下が開く */
.wx-row { display: block; padding: 0; overflow: hidden; }
.wx-row-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; background: none; border: 0; text-align: left; cursor: pointer;
}
.wx-row-head:active { background: var(--card2); }
.wx-row .icon { color: var(--accent); flex: none; }
.wx-caret { flex: none; color: var(--muted); transition: transform .15s ease; }
.wx-row-head.open .wx-caret { transform: rotate(180deg); }
.wx-detail {
  display: flex; flex-direction: column; gap: 8px;
  padding: 2px 10px 10px; border-top: 1px solid var(--line);
}
.wx-detail .wx-facts { grid-template-columns: repeat(3, 1fr); }
.wx-detail .wx-hours { margin: 0; }
.wx-day { font-size: 12.5px; color: var(--muted); min-width: 5em; flex: none; }
.wx-label { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-temp { font-variant-numeric: tabular-nums; font-size: 13px; flex: none; }
.wx-place { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; }
.wx-place .icon { color: var(--accent); flex: none; }

/* 日別の画面では少し小さめに、中央へ寄せる */
.daytitle .td-num { font-size: 23px; }
.daytitle .td-year { font-size: 12.5px; }
.daytitle .td-unit { font-size: 14px; }

.alerts { display: flex; flex-direction: column; gap: 5px; }
.alert {
  display: flex; gap: 8px; align-items: center; font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--line); border-left-width: 3px; background: var(--card);
  border-radius: var(--radius-s);
}
.alert-icon { flex: none; display: flex; }
.alert.danger { border-left-color: var(--danger); }
.alert.danger .alert-icon { color: var(--danger); }
/* 期限を過ぎている知らせは、薄い赤と地の色をゆっくり行き来させて目を引く */
.alert.overdue { animation: overdue-pulse 3.6s ease-in-out infinite; }
/* 遅れが出ているものも同じようにゆっくり点滅させる（色は注意の黄のまま） */
.alert.behind { --overdue-a: var(--behind-a); animation: overdue-pulse 3.6s ease-in-out infinite; }
@keyframes overdue-pulse {
  0%, 100% { background: var(--overdue-b); }
  50% { background: var(--overdue-a); }
}
@media (prefers-reduced-motion: reduce) {
  .alert.overdue, .alert.behind { animation: none; background: var(--overdue-a); }
}
.alert.warn { border-left-color: var(--warn); }
.alert.warn .alert-icon { color: var(--warn); }
.alert.info { border-left-color: var(--accent); }
.alert.info .alert-icon { color: var(--accent); }
.alert.ok { border-left-color: var(--ok); }
.alert.ok .alert-icon { color: var(--ok); }
/* 「重要」にした日常の予定。押せる本体と、ホームから消すチェックを並べる */
.plan-alert { padding: 5px 6px 5px 10px; }
.alert-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 3px 0; text-align: left;
  font-size: 13px; color: inherit; cursor: pointer;
}
.checkbtn.small { width: 28px; height: 28px; }
/* 勤務実績の入力をうながす帯。押せる本体はリンクなので、下線は消す */
a.alert-main { text-decoration: none; }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.weekday {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); position: relative;
}
.weekday .wd { font-size: 10px; color: var(--muted); }
.weekday.sun .wd { color: var(--danger); }
.weekday.sat .wd { color: var(--accent2); }
.weekday .wn { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.weekday .wbar { width: 62%; background: var(--accent); align-self: center; }
.weekday .wq { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.weekday.today { border-color: var(--accent); background: var(--accent-soft); }
.weekday .wmark { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; background: var(--warn); }

/* ---------------- カレンダー ---------------- */
/* カレンダーの月表示は画面いっぱいに広げる。
   1日の予定が多くてマスに入りきらない月だけ、縦に伸びてスクロールする */
.view.view-calendar {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
}
/* 高さは中身にまかせる。行の高さを sizeRows() が画面に合わせて決めるので、
   予定が少ない月はこれで画面ぴったりになる */
.view.view-calendar .page { height: auto; padding: 6px 6px 4px; gap: 5px; }

.monthnav { display: flex; align-items: center; gap: 4px; flex: none; }
.monthlabel {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: transparent; border: 0; padding: 6px 4px; cursor: pointer; border-radius: var(--radius-s);
}
.monthlabel:active { background: var(--card2); }
.monthlabel .icon { color: var(--muted); }

.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; flex: none; }
.cal-hd { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0; background: var(--card2); }
.cal-hd.sun { color: var(--danger); }
.cal-hd.sat { color: var(--accent2); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  /* 行の高さは view-calendar.js の sizeRows() が決める。
     画面に収まる高さを下限にし、予定が多い行だけ中身の分だけ伸びる */
  flex: 0 0 auto; grid-auto-rows: minmax(34px, auto);
}
@keyframes calFromRight { from { transform: translateX(9%); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes calFromLeft { from { transform: translateX(-9%); opacity: .3; } to { transform: none; opacity: 1; } }
.cal-grid.from-right { animation: calFromRight .16s ease-out; }
.cal-grid.from-left { animation: calFromLeft .16s ease-out; }

.cal-cell {
  position: relative; padding: 2px 2px 1px;
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  display: flex; flex-direction: column; gap: 1px;
  overflow-x: hidden;   /* 横は切る。縦は行数ぶん伸ばす */
}
.cal-cell.out { opacity: .4; }
.cal-cell.off { background: var(--card2); }
/* 入稿日・締切日はうっすら赤、イベント当日はうっすら緑。
   .off や .today より後に置いて、休みの日でも色が分かるようにする */
.cal-cell.has-due { background: color-mix(in srgb, var(--danger) 11%, var(--card)); }
.cal-cell.has-event { background: color-mix(in srgb, var(--event) 15%, var(--card)); }
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 2px; flex: none; }
.cal-n { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cal-cell.sun .cal-n { color: var(--danger); }
.cal-cell.sat .cal-n { color: var(--accent2); }
.cal-sum {
  font-size: 9.5px; font-weight: 700; padding: 0 3px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent); font-variant-numeric: tabular-nums;
}
.cal-sum.done { color: var(--ok); background: color-mix(in srgb, var(--ok) 20%, transparent); }
.cal-sum.over { color: var(--warn); background: color-mix(in srgb, var(--warn) 26%, transparent); }

/* 日ごとの中身。行数に応じてマスが伸びるよう、ここでは高さを抑えない */
.cal-lines { display: flex; flex-direction: column; gap: 1px; }
.cal-line {
  display: flex; align-items: center; gap: 2px; font-size: 9.5px; line-height: 1.35;
  background: var(--card2); padding: 0 1px 0 0; min-width: 0;
}
.cal-line > i { width: 3px; align-self: stretch; min-height: 11px; flex: none; background: var(--muted); }
/* 狭いので「…」は付けず、切れる端をぼかして入る分だけ出す */
.cal-line .nm {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 6px), transparent);
}
.cal-line b {
  flex: none; font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--accent); padding-left: 1px;
}
.cal-line.done b { color: inherit; }
.cal-line.done { opacity: .5; text-decoration: line-through; }
.cal-line.mk { font-weight: 700; }
.cal-line.mk.deadline, .cal-line.mk.printing {
  background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger);
}
.cal-line.mk.event { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
/* 祝日の名前。マスの中では、締切などと混ざらないよう控えめに */
.cal-line.hol {
  font-weight: 700; color: var(--danger); padding-left: 2px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  overflow: hidden; text-overflow: clip; white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 6px), transparent);
}
.cal-more { font-size: 9px; color: var(--muted); padding-left: 4px; }

/* ---------------- 日常のカレンダー ---------------- */
/* マスの地の色は「その日の勤務」だけの意味にする。
   予定があることは行そのもので分かるので、ここで色を重ねると
   勤務の3色に紛れて、どれが働き方の色か読み取れなくなる */
.cal-cell.has-plan { background: var(--card); }
/* その日の勤務の色。.has-plan より後に置いて、予定があっても勤務の色を優先する */
.cal-cell.duty-office { background: var(--duty-office-bg); }
.cal-cell.duty-remote { background: var(--duty-remote-bg); }
.cal-cell.duty-stay { background: var(--duty-stay-bg); }
/* 敷いた色がそのまま見えるよう、日常の行には下地を置かない
   （案件側は card2 の帯のままにして、見分けが付くようにしておく） */
.cal-page.cal-life .cal-line { background: transparent; }
.cal-page.cal-life .cal-cell.today { border-color: var(--life); box-shadow: inset 0 0 0 1px var(--life); }
.cal-page.cal-life .cal-line b { color: var(--muted); font-weight: 600; }
/* iPhone の1マスは50px ほどしかなく、「10:30」を出すと予定名が2文字で切れてしまう。
   狭いうちは名前を優先し、時刻は日別の画面で見せる */
@media (max-width: 520px) {
  .cal-page.cal-life .cal-line b { display: none; }
}

/* 予定の一覧（日別・月の一覧・ホーム）。
   .plan-row は自動スケジュールの行が先に使っているので、別の名前にする */
.ev-row, .home-plan {
  width: 100%; text-align: left; font: inherit; color: inherit;
}
.ev-row .row-main, .home-plan .row-main { cursor: pointer; }
.ev-row .ev-memo, .home-plan .ev-memo { margin: 0; white-space: pre-wrap; }
/* ホームでは案件のノルマと混ざるので、日常の予定だけ薄い水色を敷く */
.view-home .home-plan { background: color-mix(in srgb, var(--sky) 14%, var(--card)); }
.ev-day {
  font-size: 12px; font-weight: 700; color: var(--muted);
  padding: 6px 2px 0; font-variant-numeric: tabular-nums;
}

/* 予定の色を選ぶ */
.sw-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sw {
  width: 30px; height: 30px; border: 2px solid var(--line); border-radius: var(--radius-s);
  cursor: pointer; padding: 0;
}
.sw.on { border-color: var(--text); box-shadow: inset 0 0 0 2px var(--card); }
/* 色を外すための見本。斜線の代わりに×を入れる */
.sw-none {
  background: var(--card2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.ev-repeat { display: flex; flex-direction: column; gap: 8px; }

/* その日の勤務（出社・リモートワーク・泊まり勤務） */
.duty-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.duty-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 42px; padding: 6px 4px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.25;
}
.duty-dot { width: 10px; height: 10px; flex: none; border-radius: 2px; background: var(--dc); }
.duty-btn.duty-office { --dc: var(--duty-office); }
.duty-btn.duty-remote { --dc: var(--duty-remote); }
.duty-btn.duty-stay { --dc: var(--duty-stay); }
/* 選んだものは、カレンダーに敷かれる色をそのまま出す */
.duty-btn.on {
  background: color-mix(in srgb, var(--dc) 24%, var(--card));
  border-color: var(--dc); box-shadow: inset 0 0 0 1px var(--dc);
}
@media (max-width: 359px) { .duty-btn { font-size: 11px; gap: 3px; } }

.daynav { display: flex; align-items: center; gap: 6px; }
.daytitle { flex: 1; text-align: center; }
/* 休業日の印を日付の横に並べる */
.daytitle .today-date { justify-content: center; flex-wrap: wrap; }
.daytitle .today-date .chip { margin-left: 6px; align-self: center; }

/* ---------------- 案件詳細 ---------------- */
.phead {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--pc, var(--accent));
  border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.phead-top { display: flex; align-items: flex-start; gap: 8px; }
.phead-title { font-size: 18px; font-weight: 800; flex: 1; line-height: 1.35; }
.countdown {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--line); padding-top: 9px;
}
.cd-label { display: block; font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.cd-main b { font-size: 16px; font-variant-numeric: tabular-nums; }
.cd-left {
  font-size: 16px; font-weight: 800; padding: 3px 9px; border-radius: 2px;
  background: var(--card2); font-variant-numeric: tabular-nums;
}
.cd-left.overdue { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.cd-left.urgent { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.cd-left.soon { background: var(--accent-soft); color: var(--accent); }
.cd-left.done { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }

.workspan {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 7px 9px; cursor: pointer; color: inherit;
}
.workspan .cd-label { flex: none; }
.workspan-main {
  flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.workspan-main .icon { width: 15px; height: 15px; color: var(--muted); }
.phead-prog { display: flex; align-items: center; gap: 8px; }
.phead-prog .bar { flex: 1; }

/* 案件詳細などの情報カード（.alert.info と衝突しないよう .card 配下に限定） */
.card.info { display: flex; flex-direction: column; gap: 0; padding: 0; }
.info-row { display: flex; gap: 10px; font-size: 13.5px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: 0; }
.info-k { color: var(--muted); min-width: 74px; flex: none; }
.info-v { flex: 1; white-space: pre-wrap; }

.actions { display: flex; flex-direction: column; gap: 6px; }

.task-detail {
  flex-basis: 100%; display: flex; flex-direction: column; gap: 9px;
  padding-top: 9px; margin-top: 2px; border-top: 1px solid var(--line);
}

.daystrip { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 3px; -webkit-overflow-scrolling: touch; }
.daychip {
  flex: none; min-width: 58px; padding: 5px 6px; border-radius: 2px; cursor: pointer;
  background: var(--card2); border: 1px solid var(--line); color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.daychip b { font-size: 11px; font-weight: 700; color: var(--muted); }
.daychip span { font-size: 12.5px; font-weight: 700; }
.daychip u { font-size: 9.5px; color: var(--muted); text-decoration: none; }
.daychip.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.daychip.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); border-color: var(--ok); }
.daychip.miss { background: color-mix(in srgb, var(--danger) 13%, transparent); border-color: var(--danger); }
.daychip.fixed { outline: 1px dashed var(--warn); outline-offset: -3px; }

/* ガント */
.gantt { display: flex; flex-direction: column; gap: 7px; }
.g-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-body { position: relative; display: flex; flex-direction: column; gap: 5px; }
.g-row { display: flex; align-items: center; gap: 8px; }
.g-name { width: 62px; flex: none; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-track { position: relative; flex: 1; height: 16px; background: var(--card2); }
.g-bar { position: absolute; top: 0; bottom: 0; opacity: .5; cursor: pointer; }
.g-bar > i { display: block; height: 100%; background: rgba(255, 255, 255, .6); }
.g-marks { position: absolute; left: 70px; right: 0; top: 0; bottom: 0; pointer-events: none; }
.g-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: .5; }
.g-dl { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--danger); }

/* ---------------- フォーム部品 ---------------- */
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: .06em; }
.field-hint { font-size: 11.5px; color: var(--muted); }
.input {
  width: 100%; background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  border-radius: var(--radius-s); padding: 10px 11px; font-size: 16px; /* iOS のズーム防止に 16px */
  appearance: none; -webkit-appearance: none;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.input.area { min-height: 74px; resize: vertical; }
.input.num { text-align: center; font-variant-numeric: tabular-nums; }
.searchbox { display: flex; align-items: center; gap: 8px; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--radius-s); padding: 0 10px; }
.searchbox .icon { color: var(--muted); }
.searchbox .input { border: 0; background: transparent; padding-left: 0; }
.searchbox .input:focus { outline: 0; }
/* 横断検索の入力欄。指で触りやすいように、ふつうの検索欄より高くする */
.searchbox.big { padding: 2px 8px 2px 12px; }
.searchbox.big .input { font-size: 16px; padding-top: 12px; padding-bottom: 12px; }
/* ブラウザが付ける消すボタンは隠す（自前のものと2つ並んでしまうため） */
.searchbox .input::-webkit-search-cancel-button,
.searchbox .input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.searchbox .search-clear { color: var(--muted); }
.searchbox .search-clear[hidden] { display: none; }
/* 検索でしか出ない、種類のちがう行が並ぶ場所 */
.search-results { display: flex; flex-direction: column; }
.sr-row { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.sr-row > .icon { color: var(--muted); flex: none; }
.sr-row.dim { opacity: .6; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 日付の欄はそれ自体が幅を持つので、2つ並べるとはみ出す。枠に収まるようにする */
.grid2 > *, .grid2 .input { min-width: 0; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.panel { background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.segmented { display: flex; border: 1px solid var(--line2); border-radius: var(--radius-s); overflow: hidden; }
.seg {
  flex: 1; border: 0; border-right: 1px solid var(--line2); background: var(--card2);
  padding: 9px 6px; font-size: 13.5px; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.seg:last-child { border-right: 0; }
.seg.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .input { flex: 1; }
.stepbtn {
  width: 46px; height: 46px; border-radius: var(--radius-s); border: 1px solid var(--line2);
  background: var(--card2); cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.stepbtn:active { background: var(--line); }

.btn {
  border: 1px solid var(--line2); border-radius: var(--radius-s); padding: 10px 13px;
  font-size: 14px; font-weight: 600; background: var(--card2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.tiny { padding: 5px 8px; font-size: 12px; }
.btn.full { width: 100%; }
/* 絵だけのボタン。字が無いぶん左右を詰める */
.btn.only { padding: 10px; }
.btn:active { opacity: .75; }

.row-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
/* 同じ幅のボタンを3つ、折り返さずに並べる（狭い画面では字を小さくする） */
.btn-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.btn-row3 .btn { padding: 9px 4px; font-size: 13px; gap: 4px; min-width: 0; }
@media (max-width: 380px) {
  .btn-row3 .btn { font-size: 11.5px; padding: 9px 2px; gap: 3px; }
  .btn-row3 .btn .icon { width: 15px; height: 15px; }
}
.row-end { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.row-end .input { flex: 1; }
.row-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 5px 0; }
.check { width: 20px; height: 20px; accent-color: var(--accent); flex: none; border-radius: 0; }

.colors { display: flex; gap: 7px; flex-wrap: wrap; }
.color { width: 28px; height: 28px; border-radius: 2px; border: 2px solid transparent; cursor: pointer; }
.color.on { border-color: var(--text); }

.presets { display: flex; gap: 5px; flex-wrap: wrap; }
.preset { border: 1px solid var(--line2); background: var(--card2); border-radius: 2px; padding: 7px 9px; font-size: 12px; cursor: pointer; }

.plans { display: flex; flex-direction: column; gap: 8px; }
.plan-row { display: flex; flex-direction: column; gap: 6px; background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px; }

.preview { background: var(--card2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-s); padding: 9px 10px; display: flex; flex-direction: column; gap: 8px; }
.preview-main { font-size: 14px; }

.prog-head { display: flex; gap: 10px; align-items: center; }
.prog-head .dot { width: 10px; height: 10px; flex: none; }
.quota-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.quota-row.four { grid-template-columns: repeat(2, 1fr); }
.quota-box.over { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.quota-box.over b { color: var(--warn); }
.quota-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 6px; text-align: center; }
.quota-box span { display: block; font-size: 10.5px; color: var(--muted); }
.quota-box b { font-size: 15px; font-variant-numeric: tabular-nums; }
/* 押して直せる枠（この日のノルマ） */
.quota-box.tap { cursor: pointer; border-color: var(--line2); color: inherit; font: inherit; }
.quota-box.tap:active { background: var(--card2); }
.quota-box.tap > span { display: flex; align-items: center; justify-content: center; gap: 3px; }
.quota-box.tap .icon { color: var(--accent); }

/* ノルマの調整シート */
.quota-range {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  border: 1px solid var(--accent); border-radius: var(--radius-s); padding: 8px 10px;
}
.quota-range b { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--accent); }
.after-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; }
.after-row .after-date { font-size: 12.5px; color: var(--muted); min-width: 5.6em; }
.after-row b { font-variant-numeric: tabular-nums; }
.after-row.moved { border-color: var(--accent); }
.after-row.moved b { color: var(--accent); }

.filters { display: flex; gap: 5px; overflow-x: auto; padding: 1px; -webkit-overflow-scrolling: touch; }
.filter { flex: none; border: 1px solid var(--line2); background: var(--card); border-radius: 2px; padding: 6px 12px; font-size: 13px; color: var(--muted); cursor: pointer; }
.filter.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

.tpl-list, .tpl-edit { display: flex; flex-direction: column; gap: 8px; }
.tpl-row { display: flex; flex-direction: column; gap: 6px; background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px; }
.tpl-summary {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0;
  text-align: left; cursor: pointer;
}
.tpl-summary:last-child { border-bottom: 0; }
.tpl-summary strong { display: flex; align-items: center; gap: 6px; }

.menu { display: flex; flex-direction: column; }
.menu-item {
  display: flex; align-items: center; gap: 10px; text-align: left; background: transparent;
  border: 0; border-bottom: 1px solid var(--line); padding: 14px 2px; font-size: 15px; cursor: pointer;
}
.menu-item:last-child { border-bottom: 0; }
.menu-item .icon { color: var(--accent); }
.menu-item .dot { width: 10px; height: 10px; flex: none; }

/* ---------------- ボトムシート ---------------- */
.sheet-back {
  position: fixed; inset: 0; z-index: 60; background: rgba(4, 8, 14, .6);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .18s linear;
}
.sheet-back.show { opacity: 1; }
.sheet {
  width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column;
  background: var(--bg2); border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--line2); border-bottom: 0; border-top: 3px solid var(--accent);
  transform: translateY(14px); transition: transform .2s ease-out;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet-back.show .sheet { transform: translateY(0); }
.sheet-grip { display: none; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 9px 14px; border-bottom: 1px solid var(--line); }
.sheet-title { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.sheet-body { padding: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* 確認の文は2行以上になることがあるので、改行をそのまま出す */
.sheet-msg { font-size: 14.5px; white-space: pre-line; }
.sheet-foot { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.sheet-foot .btn { flex: 1; }

/* ---------------- トースト ---------------- */
.toast-root {
  position: fixed; left: 0; right: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 6px;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px); pointer-events: none;
}
.toast {
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-s); padding: 9px 14px;
  font-size: 13.5px; opacity: 0; transform: translateY(6px); transition: all .18s linear;
  max-width: 86vw; text-align: center; white-space: pre-line;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.danger { background: var(--danger); }
.toast.warn { background: var(--warn); color: #1a1200; }

@media (min-width: 620px) {
  .page { max-width: 620px; margin: 0 auto; width: 100%; }
  /* マスの高さは sizeRows() が画面に合わせて決めるので、ここでは指定しない */
}

/* ---------------- 請求書・領収書 ---------------- */
.docs-entry { border-left: 3px solid var(--accent); }
.doc-head .dot { width: 10px; height: 10px; display: inline-block; }
.doc-new .btn { flex: 1; }
.doc-shortcut { flex: none; color: var(--accent); }
.issuer-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.issuer-row:last-of-type { border-bottom: 0; }
.issuer-row .tpl-summary { border-bottom: 0; flex: 1; }
.issuer-main { display: flex; align-items: center; gap: 9px; }
.issuer-logo { width: 34px; height: 34px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.imgfield { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.imgfield-prev { max-width: 160px; max-height: 70px; object-fit: contain; background: #fff; border: 1px solid var(--line2); padding: 4px; }
.imgfield-prev.seal { max-width: 70px; }
.imgfield-empty {
  width: 70px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line2); color: var(--muted);
}
.items { display: flex; flex-direction: column; gap: 8px; }
.item-row { display: flex; flex-direction: column; gap: 6px; background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px; }

/* 画面上のプレビュー：紙を縮小して見せる */
.doc-preview { overflow-x: auto; background: var(--card2); border: 1px solid var(--line); padding: 10px; }

/* 書面そのもの。印刷を基準に組み、画面では縮小表示する */
.doc-sheet {
  width: 186mm; min-height: 262mm; box-sizing: border-box; padding: 10mm 8mm;
  background: #fff; color: #111; font-size: 10.5pt; line-height: 1.6;
  transform-origin: top left;
}
@media (max-width: 820px) {
  .doc-preview { padding: 8px; }
  .doc-sheet { transform: scale(.46); margin-bottom: -140mm; }
}
.ds-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10mm; }
.ds-title { font-size: 20pt; font-weight: 800; letter-spacing: .3em; border-bottom: 2px solid #111; padding-bottom: 2mm; }
.ds-meta { text-align: right; font-size: 9pt; color: #333; }
.ds-parties { display: flex; justify-content: space-between; gap: 8mm; margin-top: 8mm; }
.ds-to { flex: 1; }
.ds-client { border-bottom: 1px solid #111; padding-bottom: 1.5mm; margin-bottom: 2mm; }
.ds-client-name { font-size: 13pt; font-weight: 700; }
.ds-honorific { font-size: 11pt; }
.ds-from { width: 62mm; position: relative; text-align: left; }
.ds-logo { max-width: 46mm; max-height: 16mm; object-fit: contain; display: block; margin-bottom: 2mm; }
.ds-issuer-name { font-size: 11.5pt; font-weight: 700; }
.ds-small { font-size: 8.5pt; color: #333; }
.ds-seal { position: absolute; right: 0; bottom: -4mm; width: 18mm; height: 18mm; object-fit: contain; mix-blend-mode: multiply; }
.ds-total { display: flex; align-items: baseline; gap: 4mm; border: 1.5px solid #111; padding: 3mm 5mm; margin-top: 8mm; }
.ds-total-label { font-size: 10pt; }
.ds-total-value { font-size: 18pt; font-weight: 800; letter-spacing: .02em; }
.ds-total-note { font-size: 8.5pt; color: #444; }
.ds-proviso, .ds-subject { margin-top: 4mm; font-size: 10.5pt; border-bottom: 1px dotted #999; padding-bottom: 1.5mm; }
.ds-received { margin-top: 2mm; font-size: 10pt; }
.ds-items { width: 100%; border-collapse: collapse; margin-top: 6mm; font-size: 9.5pt; }
.ds-items th, .ds-items td { border: 1px solid #999; padding: 2mm 2.5mm; text-align: left; }
.ds-items thead th { background: #eef2f7; font-weight: 700; }
.ds-items .num { text-align: right; white-space: nowrap; }
.ds-items .unit { width: 14mm; }
.ds-sums-wrap { display: flex; justify-content: flex-end; margin-top: 4mm; }
.ds-sums { border-collapse: collapse; min-width: 70mm; font-size: 10pt; }
.ds-sums th, .ds-sums td { border: 1px solid #999; padding: 2mm 3mm; }
.ds-sums th { background: #eef2f7; text-align: left; font-weight: 600; }
.ds-sums td { text-align: right; white-space: nowrap; }
.ds-sums tr.grand th, .ds-sums tr.grand td { font-weight: 800; background: #dde8f6; }
.ds-bank, .ds-note { margin-top: 6mm; border: 1px solid #999; padding: 3mm; }
.ds-bank-title { font-size: 9pt; font-weight: 700; margin-bottom: 1mm; }

/* ---------------- 印刷 ---------------- */
@media print {
  .splash, .appbar, .tabbar, .fab, .toast-root, #sheetRoot,
  .doc-actions, .section, .card, .actions, .doc-head { display: none !important; }
  .view { padding: 0 !important; min-height: 0 !important; height: auto !important; overflow: visible !important; }
  .page { padding: 0 !important; max-width: none !important; gap: 0 !important; }
  .doc-preview { padding: 0 !important; border: 0 !important; background: #fff !important; overflow: visible !important; }
  .doc-sheet { transform: none !important; margin: 0 !important; width: auto !important; min-height: 0 !important; padding: 0 !important; }
  html, body { background: #fff !important; }
}
@page { size: A4 portrait; margin: 12mm; }
.item-head { display: flex; align-items: center; gap: 8px; }
.item-head .field-label { flex: 1; }
.item-amount { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
.item-row .grid3 { grid-template-columns: 1fr 1fr 1.4fr; align-items: end; }

/* ---------------- 名義の切り替え ---------------- */
.scopebtn {
  display: inline-flex; align-items: center; gap: 5px; max-width: 46vw;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--text); font-size: 12.5px; font-weight: 600; padding: 5px 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.scopebtn.on { border-color: var(--accent); }
.scopebtn .icon { color: var(--muted); flex: none; }
.scopebtn span { overflow: hidden; text-overflow: ellipsis; }
.scope-dot { width: 9px; height: 9px; flex: none; display: inline-block; border-radius: 1px; }
.scope-dot.big { width: 12px; height: 12px; }
.menu-item.on { color: var(--accent); font-weight: 700; }
.menu-item .menu-check { margin-left: auto; color: var(--accent); display: flex; }

/* ---------------- 売上 ---------------- */
.year-nav { display: flex; align-items: center; justify-content: center; gap: 6px; }
.year-label {
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  font-size: 19px; font-weight: 800; letter-spacing: .02em; padding: 4px 14px;
  font-variant-numeric: tabular-nums;
}
.sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sum-box {
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 8px 6px; text-align: center; min-width: 0;
}
.sum-box span { display: block; font-size: 10.5px; color: var(--muted); }
.sum-box b { font-size: 14px; font-variant-numeric: tabular-nums; word-break: break-all; }
.sum-box.big { grid-column: span 3; }
.sum-box.big b { font-size: 22px; color: var(--accent); }
.sum-box.ok b { color: var(--ok); }
.sum-box.fan b { color: var(--series2); }
.sum-box.stock b { color: var(--series3); }
.sum-box.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.sum-box.warn b { color: var(--warn); }

/* 手順の箇条書き（設定の中の「こうやって使う」） */
.howto { margin: 0; padding-left: 1.3em; font-size: 12.5px; color: var(--muted); }
.howto li { margin: 3px 0; }

/* ---------------- 頒布と在庫 ---------------- */
.stock-row { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.stock-row.dim { opacity: .6; }
/* 残部は数を大きく、単位は小さく添える */
.stock-left {
  flex: none; display: flex; align-items: baseline; gap: 2px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stock-left b { font-size: 17px; font-weight: 700; }
.stock-left span { font-size: 10.5px; color: var(--muted); }
.stock-left.low { color: var(--warn); }
.stock-left.none { color: var(--muted); }
/* 余部の行。本体の下にぶら下がって見えるように、少し引っ込める */
.stock-row.extra-row { padding-left: 22px; }
.stock-row.extra-row .row-title { color: var(--muted); font-size: 13px; }
.stock-row.extra-row .stock-left b { font-size: 15px; }
/* 表紙。一覧では小さく、詳細では大きく出す */
.stock-thumb {
  flex: none; width: 34px; height: 46px; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--line2); background: var(--card2);
}
.stock-cover {
  display: block; width: 100%; max-height: 260px; object-fit: contain;
  border-radius: var(--radius-s); background: var(--card2); border: 1px solid var(--line2);
}
.imgfield-prev.cover { max-width: 120px; max-height: 160px; }
.move-row { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.move-qty { flex: none; font-size: 15px; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.move-qty.minus { color: var(--muted); }

.month-sales { display: flex; flex-direction: column; gap: 3px; }
.ms-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.ms-row.zero { opacity: .4; }
.ms-row.now { font-weight: 700; }
.ms-m { width: 34px; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.ms-row.now .ms-m { color: var(--accent); }
/* 棒は請求書ぶんと支援金ぶんを積む。境目は面の色で2px空けて分ける */
.ms-bar { flex: 1; height: 8px; background: var(--line); border-radius: 1px; overflow: hidden; display: flex; }
.ms-bar i { display: block; height: 100%; background: var(--series1); flex: none; }
.ms-bar i.fan { background: var(--series2); box-shadow: -2px 0 0 var(--card); }
.ms-bar i.stock { background: var(--series3); box-shadow: -2px 0 0 var(--card); }
.ms-note { display: flex; gap: 14px; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.ms-v { width: 78px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.ms-u { width: 62px; flex: none; text-align: right; font-size: 10.5px; color: var(--warn); font-variant-numeric: tabular-nums; }

/* 月別の推移（折れ線）。色は検証済みの2色だけを使う */
.lchart-box { position: relative; display: flex; flex-direction: column; gap: 6px; }
.lchart { width: 100%; height: auto; display: block; touch-action: pan-y; }
.lchart-filter { display: flex; }
.lchart-filter .segmented { flex: 1; }
.lchart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); }
.lc-key { display: inline-flex; align-items: center; gap: 5px; }
.lc-key i { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.lc-key i.is-doc { background: var(--series1); }
.lc-key i.is-fan { background: var(--series2); }
.lc-key i.is-st { background: var(--series3); }

.lc-grid { stroke: var(--line); stroke-width: 1; }
.lc-ytick, .lc-xtick { fill: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.lc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-line.is-doc { stroke: var(--series1); }
.lc-line.is-fan { stroke: var(--series2); }
.lc-line.is-st { stroke: var(--series3); }
/* 重なっても見分けが付くよう、点は面の色で縁取る */
.lc-dot { stroke: var(--card); stroke-width: 2; }
.lc-dot.is-doc { fill: var(--series1); }
.lc-dot.is-fan { fill: var(--series2); }
.lc-dot.is-st { fill: var(--series3); }
.lc-cursor { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 2 2; }

/* 予算の折れ線。予算（これから守るもの）は破線、実際に使った額は実線。
   色が見分けにくいときでも、線の引きかたで区別できる */
.lc-key i.is-bg { background: var(--series1); }
.lc-key i.is-goal { background: var(--ok); }
.lc-key i.is-used { background: var(--series2); }
.lc-line.is-bg { stroke: var(--series1); stroke-dasharray: 5 3; }
.lc-line.is-goal { stroke: var(--ok); stroke-dasharray: 2 3; }
.lc-line.is-used { stroke: var(--series2); stroke-width: 2.4; }
/* 今日のところ。支出の線がどこで止まっているのかが分かる */
.lc-today { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 3 3; }
.bg-chart-note { margin: 0; }
.bg-chart-note.over { color: var(--danger); }

.lchart-read { font-size: 10.5px; color: var(--muted); }
.lc-tip {
  position: absolute; top: 26px; transform: translateX(-50%);   /* top は描画時に合わせ直す */
  background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius-s);
  padding: 5px 8px; font-size: 11px; pointer-events: none; z-index: 3;
  display: flex; flex-direction: column; gap: 1px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
/* display:flex は [hidden] の既定を上回ってしまうので、明示的に消す */
.lc-tip[hidden] { display: none; }
.lc-tip b { font-size: 11.5px; }
.lc-tv { font-variant-numeric: tabular-nums; }
/* 値の文字は文字色のまま。色の印は左の点で示す */
.lc-tv::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; }
.lc-tv.is-doc::before { background: var(--series1); }
.lc-tv.is-fan::before { background: var(--series2); }
.lc-tv.is-st::before { background: var(--series3); }

/* 支援金の一覧 */
.fb-list { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; max-height: 210px; overflow-y: auto; }
.fb-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.fb-ym { width: 42px; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-v { flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
.fb-preview { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--card2); border-radius: var(--radius-s); }
.fb-prow { display: flex; align-items: center; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.fb-prow b { margin-left: auto; }
.fb-prow.dim { opacity: .45; }
.fb-tag { font-size: 10px; color: var(--muted); background: var(--line); padding: 0 4px; border-radius: 2px; flex: none; }

/* ---------------- 経理 ---------------- */
.cat-list { display: flex; flex-direction: column; gap: 1px; }
.cat-row {
  display: flex; align-items: center; gap: 7px; padding: 6px 2px; font-size: 12.5px;
  background: transparent; border: 0; color: var(--text); cursor: pointer; text-align: left; width: 100%;
}
.cat-row.on { background: var(--accent-soft); }
.cat-name { width: 96px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 棒は「量」を見せるものなので、科目ごとに色を変えず1色にする（科目名はすぐ横にある） */
.cat-bar { flex: 1; height: 7px; background: var(--line); border-radius: 1px; overflow: hidden; min-width: 24px; }
.cat-bar i { display: block; height: 100%; background: var(--accent); }

/* 事業／日常の切り替え */
.book-switch .segmented { width: 100%; }

/* 1ヶ月の予算 */
.bg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.bg-head b { font-variant-numeric: tabular-nums; color: var(--ok); }
.bg-head b.over { color: var(--danger); }
/* 見出しと、その横に付ける小さな印（「予算調整済み」など） */
.bg-head-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bg-head-l .chip { flex: none; font-size: 10.5px; padding: 1px 6px; }
.bg-bar { height: 8px; background: var(--line); border-radius: 1px; overflow: hidden; margin: 6px 0 5px; }
.bg-bar i { display: block; height: 100%; background: var(--accent); }
.bg-bar.over i { background: var(--danger); }
.bg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 左の数字が長くても、右のボタンや行き先は折り返さない */
.bg-foot > :last-child { flex: 0 0 auto; white-space: nowrap; }
.cat-v { width: 74px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.cat-p { width: 32px; flex: none; text-align: right; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.ex-row { width: 100%; text-align: left; background: var(--card); cursor: pointer; }
.ex-shot {
  width: 40px; height: 40px; flex: none; margin: 8px 0 8px 8px; border-radius: var(--radius-s);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--card2); color: var(--accent); border: 1px solid var(--line);
}
.ex-shot.none { color: var(--muted); opacity: .5; }
.ex-shot.has-shot { border-color: var(--line2); }
.ex-shot img { width: 100%; height: 100%; object-fit: cover; }
.ex-amount { margin-left: auto; font-variant-numeric: tabular-nums; flex: none; }

/* 固定費 */
.fx-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.fx-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 2px; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); text-align: left; cursor: pointer;
}
.fx-row:last-child { border-bottom: 0; }
.fx-row.off { opacity: .5; }
.fx-main { flex: 1; min-width: 0; }
.fx-v { flex: none; font-variant-numeric: tabular-nums; }
.due-card { display: flex; flex-direction: column; gap: 7px; border-left: 3px solid var(--accent); }
.due-card .row-title { align-items: center; gap: 6px; font-weight: 700; }

/* レシートの読み取り */
.ocr-box { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.shot-box { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.shot-preview {
  max-width: 100%; max-height: 220px; border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--card2);
}

.sales-card { display: flex; flex-direction: column; gap: 8px; }
.sales-card .row-title { align-items: center; }
.sales-card .row-title .chev { margin-left: auto; color: var(--muted); display: flex; }
.quota-row.three { grid-template-columns: repeat(3, 1fr); }

/* ---------------- 取引先・バックアップ ---------------- */
.backup-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
.backup-row .row-main { flex: 1; min-width: 0; }
.backup-row .btn.tiny { flex: none; }
.tpl-summary .row-sub { margin-top: 3px; }

/* 読み込み前の突き合わせ */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cmp-col {
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 9px 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.cmp-t { font-size: 10.5px; color: var(--muted); }
.cmp-when { font-size: 13px; font-variant-numeric: tabular-nums; word-break: break-all; }
.cmp-lines { display: flex; flex-direction: column; gap: 1px; }
.cmp-lines span { font-size: 11.5px; color: var(--muted); }
.danger-text { color: var(--danger); }

/* 選択肢を縦に並べるボタン（同期の衝突など） */
.choice {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 11px 12px; cursor: pointer; color: var(--text);
}
.choice + .choice { margin-top: 6px; }
.choice.primary { border-color: var(--accent); }
.choice.primary strong { color: var(--accent); }
.choice strong { display: block; font-size: 14px; margin-bottom: 2px; }
.choice .chev { flex: none; color: var(--muted); display: flex; }

/* ---------------- 同期ボタン ---------------- */
.syncbtn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 32px; height: 32px; flex: none;
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
}
.syncbtn:active { color: var(--accent); }
/* 未送信の変更があるしるし */
.syncbtn.pending { color: var(--accent); }
.syncbtn.pending::after {
  content: ''; position: absolute; top: 4px; right: 3px;
  width: 6px; height: 6px; border-radius: 1px; background: var(--accent);
}
.syncbtn.busy { color: var(--accent); }
.syncbtn.busy .icon { animation: spin .9s linear infinite; }
.syncbtn.busy::after { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .syncbtn.busy .icon { animation: none; opacity: .5; }
}

/* ---------------- 共有ファイル ---------------- */
.files-page { position: relative; }
/* ドラッグ中は受け取れることを枠で示す（PC） */
.files-page.dropping::after {
  content: 'ここに離すと追加します';
  position: absolute; inset: -4px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--accent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent); font-weight: 700; font-size: 14px;
}

.ftool { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.ftool-here { flex: 1; font-size: 17px; font-weight: 800; letter-spacing: .01em; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fc, inherit); }
.crumb-up {
  display: inline-flex; align-items: center; gap: 1px; padding: 4px 8px 4px 4px; flex: none;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* フォルダとファイルを同じ並びで見せる */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 4px 2px; }
.ftile { position: relative; min-width: 0; }
.ftile-main {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: 0; padding: 10px 4px 12px; cursor: pointer;
  color: var(--text); border-radius: var(--radius-s); min-width: 0;
}
.ftile-main:active { background: var(--card2); }
.ftile-icon { display: flex; align-items: center; justify-content: center; height: 52px; width: 100%; }
.ftile.is-folder .ftile-icon { color: var(--fc, var(--accent)); }
/* 色を付けたフォルダは、地にもうっすら同じ色を敷いて見分けやすくする */
.ftile.is-folder.tinted .ftile-main {
  background: color-mix(in srgb, var(--fc) 10%, var(--card));
  border-color: color-mix(in srgb, var(--fc) 35%, var(--line));
}
.ftile.is-folder.tinted .ftile-main:active { background: color-mix(in srgb, var(--fc) 20%, var(--card)); }
.ftile.is-file .ftile-icon { color: var(--muted); }
/* 画像の中身を出す枠。取りに行っている間はうっすら点滅させる */
.ftile-icon.waiting { opacity: .45; animation: ftile-wait 1.2s ease-in-out infinite; }
@keyframes ftile-wait { 0%, 100% { opacity: .3; } 50% { opacity: .6; } }
.ftile-icon.has-thumb { opacity: 1; animation: none; }
.ftile-thumb {
  max-width: 100%; max-height: 52px; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius-s); background: var(--card2);
  box-shadow: 0 0 0 1px var(--line);
}
@media (prefers-reduced-motion: reduce) {
  .ftile-icon.waiting { animation: none; }
}
.ftile-name {
  font-size: 12.5px; line-height: 1.35; text-align: center; width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-all;
}
.ftile-note { font-size: 10.5px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.ftile-badge {
  font-size: 10px; color: var(--accent); background: var(--accent-soft);
  padding: 0 4px; border-radius: 2px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ftile-more {
  position: absolute; top: 2px; right: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--muted); cursor: pointer; opacity: .7;
}
.ftile-more:active { opacity: 1; color: var(--accent); }

.files-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px;
}

.uploads { display: flex; flex-direction: column; gap: 8px; }
.upload-row { display: flex; flex-direction: column; gap: 5px; }
.upload-row .row-title { align-items: center; gap: 6px; font-size: 12.5px; }
.upload-row.failed { color: var(--danger); }
.upload-row.failed .icon { color: var(--danger); }

/* ---------------- 通知 ---------------- */
.sub-title { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 0; }
.kv { display: flex; flex-direction: column; gap: 6px; }
.kv-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line);
}
.kv-row strong { font-size: 13px; text-align: right; min-width: 0; }

/* ---------------- イベント当日モード ---------------- */
/* 会計バーのぶんだけ、下に場所を空けておく */
.onsite-spacer { height: 210px; }

.onsite-head { display: flex; flex-direction: column; gap: 8px; }
.onsite-head .sum-box.big { grid-column: span 1; }
.onsite-head .row-wrap .btn { flex: 1; }
.onsite-head .sum-box.big b { font-size: 17px; }

/* ホームと在庫からの入口 */
.onsite-entry { border-color: var(--accent); }
.onsite-entry .row-title { color: var(--accent); }

/* 頒布物のボタン。指で押しやすいよう大きめに */
.onsite-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.onsite-tile {
  position: relative; min-height: 84px; padding: 10px 10px 8px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2px;
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius);
  color: var(--text); text-align: left; cursor: pointer;
}
.onsite-tile:active { background: var(--accent-soft); }
.onsite-tile.on { border-color: var(--accent); background: var(--accent-soft); }
.onsite-tile.out { opacity: .55; }
.onsite-name { font-size: 14px; line-height: 1.3; word-break: break-word; }
/* 表紙。手に取ったものと見比べられるように、名前の上に出す */
.onsite-cover {
  width: 100%; height: 76px; object-fit: cover;
  border-radius: var(--radius-s); border: 1px solid var(--line2); background: var(--card2);
}
.onsite-price { font-size: 18px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.onsite-left { font-size: 11px; color: var(--muted); }
.onsite-left.none { color: var(--warn); }
.onsite-badge {
  position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-s); font-size: 13px; font-weight: 700;
}

/* 会計トレイ。タブバーの上に貼り付ける */
.onsite-bar {
  position: fixed; left: 0; right: 0; z-index: 39;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
  background: var(--bg2); border-top: 1px solid var(--line2);
  padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px;
}
.onsite-lines { display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto; }
.onsite-line { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.onsite-line .stepbtn { width: 34px; height: 30px; flex: none; }
.onsite-line-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onsite-line-qty { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.onsite-line-sum { min-width: 64px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.onsite-total { display: flex; align-items: baseline; justify-content: space-between; }
.onsite-total b { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pay-row .btn { min-width: 0; padding: 7px 2px; font-size: 12.5px; }
.pay-row .btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.onsite-change {
  display: flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--ok); border-radius: var(--radius-s); padding: 6px 10px;
  color: var(--ok);
}
.onsite-change b { font-size: 22px; font-variant-numeric: tabular-nums; }
.onsite-change.short { border-color: var(--danger); color: var(--danger); }
.onsite-act { display: grid; grid-template-columns: 1fr 1.7fr; gap: 6px; }
.onsite-act .btn { padding: 13px 4px; font-size: 15px; white-space: nowrap; min-width: 0; }

/* ---------------- 1日の記録 ---------------- */
/* その日の状態（天気・勤務・締切など）を、小さく並べる */
.log-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.log-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line2); border-radius: var(--radius-s);
  padding: 4px 10px; font-size: 12.5px; color: var(--muted);
  background: var(--card);
}
.log-chip .icon { color: inherit; }
.log-chip.duty-office { --dc: var(--duty-office); background: var(--duty-office-bg); }
.log-chip.duty-remote { --dc: var(--duty-remote); background: var(--duty-remote-bg); }
.log-chip.duty-stay { --dc: var(--duty-stay); background: var(--duty-stay-bg); }
.log-chip.mk-event { color: var(--event); border-color: color-mix(in srgb, var(--event) 45%, var(--line2)); }
.log-chip.mk-deadline { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line2)); }
.log-chip.mk-printing { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line2)); }

/* 書くところ */
.log-note { display: flex; flex-direction: column; gap: 10px; }
.log-note textarea { min-height: 96px; }
.log-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mood-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.mood {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 0; padding: 8px 2px 7px; font-size: 10px; line-height: 1.25;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--muted); cursor: pointer; text-align: center;
}
/* 目盛り。段が上がるほど高くなる */
.mood-lv-box { display: flex; align-items: flex-end; height: 18px; }
.mood-lv { display: block; width: 9px; border-radius: 1px; background: var(--line2); }
.mood:nth-child(1) .mood-lv { height: 4px; }
.mood:nth-child(2) .mood-lv { height: 7px; }
.mood:nth-child(3) .mood-lv { height: 10px; }
.mood:nth-child(4) .mood-lv { height: 14px; }
.mood:nth-child(5) .mood-lv { height: 18px; }
.mood.on { border-color: var(--mc, var(--accent)); color: var(--mc, var(--accent)); background: color-mix(in srgb, var(--mc, var(--accent)) 14%, transparent); }
.mood.on .mood-lv { background: var(--mc, var(--accent)); }
.mood:nth-child(1) { --mc: var(--danger); }
.mood:nth-child(2) { --mc: var(--warn); }
.mood:nth-child(3) { --mc: var(--muted); }
.mood:nth-child(4) { --mc: var(--accent); }
.mood:nth-child(5) { --mc: var(--ok); }

/* 一覧に添える、調子の点 */
.mood-dot { width: 8px; height: 8px; flex: none; display: inline-block; border-radius: 2px; background: var(--muted); }
.mood-dot.m1 { background: var(--danger); }
.mood-dot.m2 { background: var(--warn); }
.mood-dot.m3 { background: var(--muted); }
.mood-dot.m4 { background: var(--accent); }
.mood-dot.m5 { background: var(--ok); }

/* その日の中身の1行 */
.log-row { text-align: left; width: 100%; }
.log-row.is-done { opacity: .6; }
.log-amount { flex: none; font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.log-amount.plus { color: var(--ok); }

/* 本文の抜き出し（2行まで） */
.log-excerpt {
  margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.log-list-row .row-title { gap: 7px; }
.log-list-row .row-title .icon { color: var(--muted); }

/* ホームとカレンダーから記録へ */
.log-link { margin-top: 2px; }
/* いちばん下に置いたときは、右下の＋にかぶらないよう少し余白を足す */
.page > .log-link:last-child { margin-bottom: 56px; }
.log-link.has-note { border-color: var(--line2); }

/* ---------------- ひらめきメモ ---------------- */
.idea-card { display: flex; flex-direction: column; gap: 10px; }
/* 書き足すところ。改行できるので、下から生える形にする */
.idea-add { display: flex; gap: 6px; align-items: flex-end; }
.idea-add .idea-in {
  flex: 1; min-width: 0; min-height: 56px; max-height: 220px;
  resize: none; overflow-y: auto; line-height: 1.6;
}
.idea-add .btn { flex: none; white-space: nowrap; }
.idea-hint { margin: 0; }
.idea-list { display: flex; flex-direction: column; gap: 5px; }
.idea {
  display: flex; align-items: flex-start; gap: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card2);
  padding: 2px 2px 2px 0;
}
.idea-text {
  flex: 1; min-width: 0; text-align: left; padding: 8px 4px 8px 10px;
  background: none; border: 0;
  font-size: 13.5px; line-height: 1.6; color: var(--fg); cursor: pointer;
  /* 書いたとおりに改行を出す。長すぎるものは6行で切る */
  white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.idea-text:active { color: var(--accent); }
.idea .iconbtn { flex: none; color: var(--muted); margin-top: 3px; }
/* 送ったものは、送るボタンの色でそれと分かるようにする */
.idea .iconbtn.done { color: var(--ok, var(--accent)); }

/* 書き足すところのタイトル。本文の上に細く置く */
.idea-add { flex-wrap: wrap; }
.idea-add .idea-title-in { flex: 1 0 100%; font-size: 13px; }

/* タイトルだけの行。一覧はこれを並べる */
.idea-slim { align-items: center; padding: 0 2px 0 0; }
.idea-title {
  flex: 1; min-width: 0; text-align: left; padding: 10px 4px 10px 10px;
  background: none; border: 0; cursor: pointer;
  font-size: 13.5px; line-height: 1.4; color: var(--fg);
  display: flex; align-items: center; gap: 6px;
}
.idea-title-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea-title:active .idea-title-t { color: var(--accent); }
.idea-sent { flex: none; display: inline-flex; color: var(--ok, var(--accent)); }
.idea-slim .iconbtn { margin-top: 0; }

/* ひらめきメモの一覧（上のバーの電球から） */
.ideas-page { display: flex; flex-direction: column; gap: 10px; }
.ideas-page .section { margin-top: 2px; }
.idea-day {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px 2px; font-size: 13px; font-weight: 600; color: var(--fg);
}
.idea-day .chev { margin-left: auto; color: var(--muted); }
.ideabtn { flex: none; }
.ideabtn[hidden] { display: none; }
/* 一覧に添えるひらめきの一行 */
.idea-excerpt { display: flex; align-items: flex-start; gap: 5px; -webkit-line-clamp: 1; }
.idea-excerpt .icon { flex: none; margin-top: 1px; }

/* ---------------- フォルダの並べ替え ---------------- */
.fgrid-hint { padding: 6px 2px 0; }
/* 長押ししたときに、文字が選ばれたり吹き出しが出たりしないように */
.fgrid .ftile.is-folder { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* つまんでいる間は、画面が一緒に動かないようにする */
.fgrid.sorting { touch-action: none; }
.fgrid.sorting .ftile-main { pointer-events: none; }
/* つまんだタイル。指について動く */
.ftile-held {
  position: fixed; z-index: 60; margin: 0; pointer-events: none;
  transform: scale(1.06); opacity: .95;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  border-radius: var(--radius);
}
.ftile-held .ftile-main { background: var(--card2); }
.ftile-held .ftile-more { display: none; }
/* 放したら入る場所。まわりのフォルダが脇へ寄って、ここが空く */
.ftile-hole {
  border: 1px dashed var(--accent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* 脇へ寄るときの動き。位置ではなく見た目だけ動かすので、マス目はずれない */
.fgrid.sorting .ftile { transition: transform .16s ease; }

/* ---------------- レシートの読み取り ---------------- */
/* 経理の上に置く入口 */
.scan-row { margin: 2px 0 4px; }
.scan-row .btn { flex: 1; min-width: 0; }

/* 読み取り中と、確認画面のあたま */
.rc-wait { align-items: center; text-align: center; }
.rc-shot {
  display: flex; align-items: center; justify-content: center;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-s);
  overflow: hidden; flex: none;
}
.rc-wait .rc-shot { max-height: 200px; }
.rc-img { display: block; max-width: 100%; max-height: 200px; object-fit: contain; }

.rc-head { display: flex; gap: 10px; align-items: stretch; }
.rc-head .rc-shot { width: 96px; height: 128px; }
.rc-head .rc-img { max-height: 128px; }
.rc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.rc-total b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 品目。名前と金額を並べて、その場で直せる */
.rc-items { display: flex; flex-direction: column; gap: 5px; }
.rc-item { display: flex; align-items: center; gap: 5px; }
.rc-item-name { flex: 1; min-width: 0; }
.rc-item-price { width: 92px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.rc-item .iconbtn { flex: none; color: var(--muted); }
.rc-items .btn { align-self: flex-start; }
/* 分類を選ぶときは2段にする。名前・金額・外すが上、分類が下いっぱい。
   選び口は品目に付く「札」なので、枠を控えめにして1段目より軽く見せる */
.rc-item.with-tag { flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.rc-item.with-tag .tag-select { flex: 1 0 100%; padding: 6px 10px; background: transparent; }
.tag-select.empty { color: var(--muted); }

/* 保存した経費に残る品目 */
.ex-items { display: flex; flex-direction: column; gap: 3px; }
.ex-item {
  display: flex; align-items: baseline; gap: 6px; font-size: 13px;
  padding: 3px 0; border-bottom: 1px solid var(--line);
}
.ex-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-item b { flex: none; font-variant-numeric: tabular-nums; }
.ex-items p { padding-top: 4px; }
.ex-item.with-tag { flex-wrap: wrap; padding-bottom: 6px; }
.ex-item .tag-select { flex: 1 0 100%; padding: 6px 10px; background: transparent; }

/* 分類（設定） */
.tag-row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.tag-row:last-of-type { border-bottom: 0; }
.tag-row .tpl-summary { border-bottom: 0; flex: 1; min-width: 0; }
.tag-move { flex: none; display: flex; flex-direction: column; }
.tag-move .iconbtn { color: var(--muted); }
.tag-move .iconbtn[disabled] { opacity: .3; }
.cat-row .scope-dot { margin-right: 5px; }

/* ==================== 1日の時間の振り分け ==================== */

/* 円グラフ（24時間の時計。0時が上で右回り） */
.tp-pie { display: block; overflow: visible; }
.tp-rest { fill: none; stroke: var(--card2); }
.tp-slice { stroke: var(--card); stroke-width: .8; }
.tp-slice.tap { cursor: pointer; }
.tp-slice.tap:active { opacity: .75; }
.tp-mid-v { font-size: 11px; font-weight: 800; fill: var(--text); }
.tp-mid-l { font-size: 7px; fill: var(--muted); }

/* 長方形（ホーム。0時が左、24時が右） */
.tp-barwrap { display: flex; flex-direction: column; gap: 4px; }
.tp-bar {
  position: relative; height: 26px; border-radius: var(--radius-s); overflow: hidden;
  background: var(--card2); border: 1px solid var(--line);
}
.tp-seg {
  position: absolute; top: 0; bottom: 0; display: block;
  /* 時刻で決まる色は隣どうし似るので、境目に細い切れ目を入れる */
  border-right: 1px solid var(--card);
}
/* 3時間ごとの目盛り。帯の上に薄く重ねる（帯より手前・いまの線より奥） */
.tp-tick {
  position: absolute; top: 0; bottom: 0; width: 1px; z-index: 1;
  background: var(--line); opacity: .8;
}
.tp-tick.big { background: var(--line2); opacity: 1; }
/* いまの時刻。カレンダーと同じ「赤い線」にそろえる。
   帯の色は名前ごとにさまざまなので、どれとも当たらない色で、太めに引く。
   帯は角を丸めるために overflow:hidden なので、はみ出す飾りは付けられない */
.tp-now {
  position: absolute; top: 0; bottom: 0; width: 3px; z-index: 2;
  background: var(--danger); box-shadow: 0 0 0 1.5px var(--card);
  animation: tp-pulse 2.6s ease-in-out infinite;
}
.tp-scale { position: relative; height: 13px; font-size: 10px; color: var(--muted); }
.tp-scale span {
  position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%);
  opacity: .65; font-variant-numeric: tabular-nums;
}
.tp-scale span.big { opacity: 1; }
.tp-scale span:first-child { transform: none; }
.tp-scale span:last-child { transform: translateX(-100%); }

/* ホームの一枚。「いま→次」を上に置き、その下に帯を敷く */
.tp-home { display: block; text-decoration: none; color: inherit; }
.tp-home .tp-nowbar { margin-bottom: 10px; }
.tp-empty { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 日別画面の一枚 */
.tp-card { display: flex; flex-direction: column; gap: 12px; }
/* 円グラフ。カードの余白ぶんまで広げて、真ん中に大きく置く */
.tp-pie-wrap {
  display: flex; justify-content: center;
  width: calc(100% + 20px); margin: 0 -10px;
}
.tp-pie-wrap .tp-pie { width: 100%; height: auto; }
/* まわりに置いた名前と、そこへ引く線 */
.tp-lead { stroke-width: .7; stroke-linecap: round; opacity: .8; }
/* 円を囲う細い目盛り（数字を置かない時刻） */
.tp-hair { stroke: var(--line2); stroke-width: .7; stroke-linecap: round; }
/* 0/6/12/18 の数字。輪の外側。薄くして、名前や線と重なってもよいことにする */
.tp-htick { font-size: 7px; fill: var(--muted); opacity: .5; }
.tp-tag-t { font-weight: 700; }
.tp-tag.tap { cursor: pointer; }
.tp-tag.tap:active { opacity: .75; }
.tp-rows { display: flex; flex-direction: column; }
.tp-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 0; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--text); font-size: 13px;
}
.tp-row.carry { opacity: .6; }
/* いま進行中の行。青くゆっくり明滅させて、どれが「今」か分かるようにする */
.tp-row.now {
  color: var(--accent); border-radius: var(--radius-s);
  animation: tp-row-now 2.6s ease-in-out infinite;
}
.tp-row.now .tp-row-t, .tp-row.now .tp-row-d { color: var(--accent); }
.tp-row.now .tp-row-k { font-weight: 700; }
@keyframes tp-row-now {
  /* color-mix が使えない端末では、下の一段目（薄い青）で出る */
  0%, 100% { background: var(--accent-soft); background: color-mix(in srgb, var(--accent) 26%, transparent); }
  50% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-row.now {
    animation: none;
    background: var(--accent-soft); background: color-mix(in srgb, var(--accent) 26%, transparent);
  }
}
.tp-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tp-row-t { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); width: 88px; font-size: 12px; }
.tp-row-k {
  flex: 1; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
}
.tp-row-k > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* どの案件に使ったか。名前の下に小さく */
.tp-row-p { font-size: 10.5px; color: var(--accent); }
.tp-row-d { flex: none; color: var(--muted); font-size: 11px; }

/* 案件ごとの合計。帯の一覧の下に付ける */
.tp-projs {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.tp-proj {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text); text-decoration: none;
}
.tp-proj i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tp-proj-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-proj b { flex: none; font-variant-numeric: tabular-nums; }
a.tp-proj:active { color: var(--accent); }

/* 何をしていたか。自由に書けて、よく使う名前は押せば入る */
.tp-name { display: flex; flex-direction: column; gap: 7px; }
.tp-name-in { display: flex; align-items: center; gap: 7px; }
.tp-swatch {
  width: 16px; height: 16px; flex: none; border-radius: 2px;
  border: 1px solid var(--line2); background: transparent;
}
.tp-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-kind {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: var(--radius-s); font-size: 13px;
  background: var(--card2); border: 1px solid var(--line2); color: var(--text);
}
.tp-kind.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* 帯に結びつけた案件。1段ずつ積み上げていく */
.tp-projs-edit { display: flex; flex-direction: column; gap: 6px; }
.tp-projs-edit > p { margin: 0; }
.tp-projs-edit > p.over { color: var(--danger); }
.tp-pe-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 10px; border-radius: var(--radius-s);
  background: var(--card2); border: 1px solid var(--line2);
}
.tp-pe-t { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 実時間。押すと入れ直せるので、押せると分かる見た目にする */
.tp-pe-m {
  flex: none; font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
  padding: 4px 9px; border-radius: var(--radius-s); cursor: pointer;
  color: var(--accent); background: var(--accent-soft); border: 1px solid transparent;
}
.tp-pe-m:active { opacity: .75; }
.tp-pe-x {
  flex: none; display: inline-flex; padding: 5px; border-radius: var(--radius-s);
  background: none; border: 0; color: var(--muted); cursor: pointer;
}
.tp-pe-x:active { opacity: .6; }
/* 案件を選ぶところ。押せる行として並べる */
.tp-pick { width: 100%; text-align: left; background: var(--card); cursor: pointer; }
.tp-pick:active { opacity: .8; }

/* いちばん下のボタン。iPhone の幅でも折り返さないよう、等分の1行にする */
.tp-acts { display: grid; gap: 6px; }
.tp-acts.n1 { grid-template-columns: 1fr; }
.tp-acts.n2 { grid-template-columns: repeat(2, 1fr); }
.tp-acts.n3 { grid-template-columns: repeat(3, 1fr); }
.tp-acts .btn { padding: 9px 4px; font-size: 13px; gap: 4px; min-width: 0; white-space: nowrap; }

/* いまの時刻。円は中の色で、帯は縦線で示す */
.tp-nowarc { fill: var(--danger); }

/* いまの時刻の印は、ゆっくり点滅させて見つけやすくする。
   消えきらないので、動きが苦手なときも位置は分かる */
.tp-nowarc { animation: tp-pulse 2.6s ease-in-out infinite; }
@keyframes tp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .28; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-now, .tp-nowarc { animation: none; opacity: 1; }
  .tp-flow i { animation: none; opacity: .85; }
}

/* いま何をしていて、次に何が来るか。左が「いま」、右が「次」 */
.tp-nowbar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 11px; border-radius: var(--radius-s);
  background: var(--card2); border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
}
/* 左右それぞれ。中の入れ物を字の幅ぴったりにして、まん中に置く */
.tp-np { display: flex; justify-content: center; flex: 1 1 0; min-width: 0; }
/* 名前の四角と、その下の時間。四角は広いほう（たいていは時間）の幅に伸びる */
.tp-np-in {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 3px; min-width: 0; max-width: 100%;
}
.tp-np-t {
  padding: 3px 7px; border-radius: var(--radius-s); font-size: 12.5px; font-weight: 600;
  line-height: 1.4; text-align: center;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-np-r {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 次の予定を翌日から持ってきたときの印 */
.tp-np-d {
  flex: none; font-size: 10px; font-weight: 700; line-height: 1.4;
  padding: 0 4px; border-radius: var(--radius-s);
  color: var(--accent2); border: 1px solid currentColor;
}
.tp-np-none {
  font-size: 12px; color: var(--muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-nowbar .btn { flex: none; }

/* いまから次へ流れていく印。> → >> → >>> と順に明るくなる */
.tp-flow { display: flex; align-items: center; gap: 2px; flex: none; color: var(--accent2); }
.tp-flow i {
  width: 13px; height: 13px; opacity: .2;
  border-right: 3px solid currentColor; border-top: 3px solid currentColor;
  transform: rotate(45deg); animation: tp-flow 1.5s linear infinite;
}
.tp-flow i:nth-child(2) { animation-delay: .2s; }
.tp-flow i:nth-child(3) { animation-delay: .4s; }
@keyframes tp-flow {
  0% { opacity: .2; } 20% { opacity: 1; } 60%, 100% { opacity: .2; }
}

@media (max-width: 380px) {
  .tp-acts .btn { font-size: 11.5px; padding: 9px 2px; gap: 3px; }
  .tp-acts .btn .icon { width: 15px; height: 15px; }
}

/* ---------------- 発注（発注フォームから届いたもの） ---------------- */
/* 一覧の行。押して開くのでボタンだが、見た目はほかの行と同じにする */
.order-row { width: 100%; text-align: left; background: var(--card); cursor: pointer; font: inherit; color: inherit; }
/* 未確認の発注は、ひと目で分かるように左端に印を付ける */
.order-row.is-new { border-color: var(--warn); }
/* ホームの知らせ。押すと発注の画面へ行く */
.order-notice { border-color: var(--accent); }

/* ---------------- 設定のジャンル ---------------- */
/* 項目が増えたので、ジャンルごとにたたむ */
.settings-page { gap: 6px; }
.sgroup { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.sgroup.on { border-color: var(--line2); }
.sg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 13px 12px;
  background: none; border: 0; color: var(--text); font: inherit; cursor: pointer;
}
.sg-head strong { font-size: 14.5px; }
.sg-chev { color: var(--muted); display: flex; transition: transform .15s ease; }
.sgroup.on .sg-chev { transform: rotate(180deg); }
.sg-body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 12px 12px; border-top: 1px solid var(--line);
}
/* 中の見出しは、ジャンルの中では一段小さく見せる */
.sg-body .section { margin-top: 4px; }
.sg-body > .card { background: var(--card2); }
@media (prefers-reduced-motion: reduce) { .sg-chev { transition: none; } }

/* ---------------- 顧客管理 ---------------- */

/* 鍵の画面。合言葉（できれば顔）を通すまで、中は出さない */
.crm-lock { align-items: center; text-align: center; max-width: 340px; margin: 0 auto; padding-top: 32px; }
.crm-lock-icon { color: var(--muted); margin-bottom: 4px; }
.crm-lock-title { font-size: 18px; font-weight: 800; letter-spacing: .04em; }
.crm-lock-form { width: 100%; }
.crm-lock-form .input { text-align: center; letter-spacing: .3em; font-size: 18px; }
.crm-lock-msg { min-height: 18px; margin: 0; }
.crm-lock-msg.danger { color: var(--danger); }
.crm-note { margin-top: 10px; }

/* 一覧 */
.crm-count { padding: 2px 2px 0; }
.crm-row { display: flex; align-items: center; gap: 10px; }
.crm-row-icon { flex: none; color: var(--muted); display: flex; }
.crm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.crm-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 「取引中 / 見込み」や「どうなったか」を選ぶところ */
.crm-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-pick .btn { flex: 1 1 auto; }
.crm-pick .btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* 1社の中身 */
.crm-head-top { display: flex; align-items: center; gap: 8px; }
.crm-name { font-size: 17px; font-weight: 800; flex: 1; min-width: 0; word-break: break-word; }
.crm-text { white-space: pre-line; font-size: 13.5px; margin: 0; }
.crm-hist, .crm-visit {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 0; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--text); font-size: 13px;
}
.crm-hist:first-child, .crm-visit:first-child { border-top: 0; }
.crm-hist-d { flex: none; width: 84px; font-variant-numeric: tabular-nums; }
.crm-hist-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-visit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.crm-visit-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- 経理の科目（設定） ---------------- */
.cat-book { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* 自分で足したぶん。押すと消せるので、それと分かる形にする */
.cat-mine { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border: 0; }
.cat-mine i { font-style: normal; opacity: .6; font-variant-numeric: tabular-nums; }
.cat-mine .icon { opacity: .55; }
.cat-mine:active { background: var(--accent-soft); color: var(--accent); }

/* ---------------- 今日の予算（ホーム） ---------------- */
.bg-day { display: flex; flex-direction: column; gap: 10px; }
.bg-day-line { display: flex; flex-direction: column; gap: 5px; }
/* 立て直しのほうは、ふだんの予算より控えめに置く */
.bg-day-line.sub { padding-left: 10px; border-left: 2px solid var(--warn); }
.bg-day-line.sub .bg-head span { color: var(--warn); }
.bg-day-used { display: flex; align-items: baseline; justify-content: space-between; }
.bg-day-used b { font-size: 13px; font-variant-numeric: tabular-nums; }
.bg-day-used b.over, .bg-head b.over { color: var(--danger); }
/* 今日あといくら使えるか。いちばん知りたい数字なので大きく */
.bg-rest {
  display: flex; align-items: stretch;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
/* 左右おなじ幅・おなじ大きさ。2つ並ぶときは真ん中に薄い仕切り */
.bg-rest-c {
  flex: 1 1 0; min-width: 0; padding: 0 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  /* 仕切りのぶんで幅がずれないよう、どちらにも枠を持たせて色だけ変える */
  border-left: 1px solid transparent;
}
.bg-rest-c + .bg-rest-c { border-left-color: var(--line); }
/* 貯金の目標が無いときは1つだけ。そのときは左寄せのまま */
.bg-rest-c:only-child { align-items: flex-start; text-align: left; }
.bg-rest-c.save b { color: var(--accent2); }
.bg-rest-c.save.zero b { color: var(--danger); }
.bg-rest-l { font-size: 12.5px; color: var(--muted); }
.bg-rest b { font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bg-rest-s { font-size: 11px; color: var(--muted); }
.bg-rest.over .bg-rest-c b, .bg-rest.over .bg-rest-l, .bg-rest.over .bg-rest-s { color: var(--danger); }
.bg-rest.over .bg-rest-c.save b { color: var(--accent2); }
.bg-rest.over .bg-rest-c.save.zero b { color: var(--danger); }
/* お金カードの中の「貯金」「節約目標」。1行ずつ、押すと先へ */
.mo-line {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 9px 0; border: 0; border-top: 1px solid var(--line);
  background: none; color: inherit; text-align: left; font: inherit;
  text-decoration: none; cursor: pointer;
}
.mo-k { flex: none; font-size: 12.5px; color: var(--muted); }
.mo-line b { font-size: 15px; font-variant-numeric: tabular-nums; }
.mo-line b.save { color: var(--accent2); }
.mo-s {
  margin-left: auto; min-width: 0; font-size: 11.5px; color: var(--muted);
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mo-u { font-size: 11px; color: var(--muted); margin-left: -4px; }
.mo-s.ok { color: var(--ok); }
.mo-line .chev { flex: none; display: flex; align-items: center; color: var(--muted); }
.mo-line:active { opacity: .7; }

/* ---------------- 今日の献立 ---------------- */
.mn-card { display: flex; flex-direction: column; gap: 10px; }
/* 昼／晩の選び口。押すと入る・外れる */
.mn-pick { display: flex; gap: 6px; }
.mn-pick .btn { flex: 1; }
/* 何人分。見出しを付けないぶん、控えめな大きさで左に置く */
/* 人数と、料理の系統。iPhone の幅でも1行に収まるよう、どちらも小さめに */
.mn-serv { display: flex; align-items: stretch; gap: 6px; }
.mn-serv .segmented { flex: none; }
.mn-serv .seg { flex: none; padding: 7px 11px; font-size: 12.5px; }
.mn-genre { display: flex; gap: 4px; flex: 1; min-width: 0; }
.mn-g {
  flex: 1; min-width: 0; padding: 7px 2px; font-size: 12.5px; font: inherit;
  font-size: 12.5px; line-height: 1.2; color: var(--muted); cursor: pointer;
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius-s);
}
.mn-g:active { opacity: .8; }
.mn-g.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mn-pick .btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.mn-body { display: flex; flex-direction: column; gap: 8px; }
.mn-meal, .mn-shop {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--card2); padding: 8px 10px;
}
.mn-meal > summary, .mn-shop > summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  list-style: none; font-size: 13.5px;
}
.mn-meal > summary::-webkit-details-marker,
.mn-shop > summary::-webkit-details-marker { display: none; }
.mn-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-total { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }

/* 一品ずつ。主菜・副菜の別、調味料の分量、その一品の手順 */
.mn-dishes { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mn-dish { border-top: 1px solid var(--line); padding-top: 8px; }
.mn-dish:first-child { border-top: 0; padding-top: 0; }
.mn-dish-h { display: flex; align-items: center; gap: 6px; font-size: 13px; }
/* その一品だけ出し直す。品名の右端に寄せる */
.mn-redo {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 11px;
  padding: 2px 7px; border-radius: 999px; cursor: pointer;
  color: var(--muted); background: none; border: 1px solid var(--line2);
}
.mn-redo:active { opacity: .75; }
.mn-redo.busy { color: var(--accent); border-color: var(--accent); }
.mn-redo[disabled] { opacity: .5; cursor: default; }
.mn-seas {
  display: flex; gap: 6px; margin-top: 4px;
  font-size: 12px; line-height: 1.6; color: var(--muted);
}
.mn-seas-l { flex: none; color: var(--accent); }
.mn-steps {
  margin: 8px 0 0; padding-left: 18px;
  font-size: 12.5px; line-height: 1.7; color: var(--muted);
}
.mn-seas-v .chip { margin-left: 4px; vertical-align: middle; }
.mn-s-bad { color: var(--text); text-decoration: underline dotted; text-underline-offset: 3px; }

.mn-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.mn-item { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
/* 買い足す調味料。予算には数えていない */
.mn-item.extra .mn-item-n { color: var(--muted); }
.mn-extra-note { margin: 4px 0 0; }
.mn-warn { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--warn); }
.mn-warn .icon { flex: none; }
/* 献立のボタン列。3つ＋歯車が1行に収まるよう、詰めて並べる */
.mn-acts { gap: 6px; }
.mn-acts .btn.grow { flex: 1; min-width: 0; padding-left: 6px; padding-right: 6px; }
.mn-item-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-item b { flex: none; font-variant-numeric: tabular-nums; }

/* 買い物リストの1行。印を付けて消し込む */
.mn-buy { align-items: center; gap: 7px; padding: 3px 0; cursor: pointer; }
.mn-chk { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
/* 買い終わったものは、うすく・取り消し線で見分ける */
.mn-buy.got .mn-item-n { color: var(--muted); text-decoration: line-through; }
.mn-buy.got .mn-price { opacity: .55; }
/* 値段は押すと直せる。押せると分かるように、うっすら囲う */
.mn-price {
  flex: none; font: inherit; padding: 2px 6px; cursor: pointer;
  color: inherit; background: none;
  border: 1px solid transparent; border-radius: var(--radius-s);
}
.mn-price:hover, .mn-price:active { border-color: var(--line2); }
.mn-price b { font-variant-numeric: tabular-nums; }
/* 実際に払った額を控えてあるものは、見当ではないと分かるようにする */
.mn-price.known b { color: var(--ok); }
/* 作った料理の評価とメモ */
.mn-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.mn-stars { display: flex; gap: 1px; }
.mn-star {
  display: inline-flex; padding: 2px; border: 0; background: none; cursor: pointer;
  color: var(--line2);
}
.mn-star:active { opacity: .6; }
/* 付けた星は塗りつぶす */
.mn-star.on { color: var(--warn); }
.mn-star.on svg { fill: currentColor; }
.mn-memo-btn {
  display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 11.5px;
  padding: 3px 8px; border-radius: var(--radius-s); cursor: pointer;
  color: var(--muted); background: none; border: 1px solid var(--line2);
}
.mn-memo-btn.has { color: var(--accent); border-color: var(--accent); }
.mn-memo-btn:active { opacity: .75; }
/* 前に書いたメモ。同じ料理が来たときに読めるように出す */
.mn-memo {
  flex: 1 0 100%; margin: 2px 0 0; font-size: 11.5px; color: var(--text);
  padding: 5px 8px; border-radius: var(--radius-s);
  background: var(--card2); border-left: 2px solid var(--accent);
}

/* まとめて作るときの進み具合と、できたぶんの並び */
.mn-batch-l { margin: 0 0 6px; font-size: 13px; }
.mn-batch-log { max-height: 46vh; overflow-y: auto; margin-top: 8px; }
.mn-batch-row { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mn-batch-row.bad { color: var(--muted); }
.mn-batch-row.bad .chev { color: var(--warn); }
.mn-batch-note { margin: 2px 0 0; }
/* まとめ買いリストの値段。右端にそろえる */
.mn-plan-p { margin-left: auto; font-variant-numeric: tabular-nums; }

.mn-foot { margin: 0; }
.mn-foot.over { color: var(--danger); }

/* 家にある調味料と残り物の設定（献立の歯車から開くシート）。
   数が増えても行が埋もれないよう、それぞれ畳めるようにしてある */
.kt-sec {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--card2); padding: 10px 12px; margin-bottom: 10px;
}
.kt-sec > summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  list-style: none; font-size: 14px;
}
.kt-sec > summary::-webkit-details-marker { display: none; }
.kt-sec > summary > b { flex: 1; min-width: 0; }
.kt-mark { display: inline-flex; color: var(--muted); transition: transform .15s ease; }
.kt-sec[open] .kt-mark { transform: rotate(180deg); }
.kt-sec > p { margin: 8px 0; }
/* 一覧が長くなったら、この中だけを転がす。
   高さを決めると縦並びの行が潰れるので、行は縮ませない */
.kt-sec .list { max-height: 46vh; overflow-y: auto; margin-bottom: 8px; }
.kt-sec .list > * { flex: none; }
.kt-qty { display: flex; gap: 8px; }
.kt-qty .field { flex: 1; }
/* 捨てるもの。今日やることに混ぜて出す */
.toss-row .row-title .icon { color: var(--danger); }

.bg-day-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.bg-day-note.warn { color: var(--warn); }
.bg-day-note.danger { color: var(--danger); }
/* 内訳のひとこと。数字の下にそっと置く */
/* 経理の予算。棒とその下の数字までが、まとめて押せる1つのボタン
   （棒だけだと 8px しかなく、指で狙えない） */
.bg-tap {
  display: block; width: 100%; padding: 0; margin: 0;
  background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.bg-tap:active { opacity: .7; }
.bg-tap .chev { display: inline-flex; color: var(--muted); }
/* 折れ線は予算と同じ枠の中。上の点線が棒のところとの区切りになる */
.bg-chart { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* 日用品・消耗品を今日ぶんから外したときの断り書き */
.bg-supply { margin: -2px 0 0; }

/* 固定費のまとめ入力。記録するものを選ぶ */
.due-pick { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.due-pick .due-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 選ばなかったものは、そうと分かるように薄くする */
.due-pick:has(.check:not(:checked)) .due-t { color: var(--muted); text-decoration: line-through; }
.due-pick:has(.check:not(:checked)) b { color: var(--muted); }

.bg-fixed { margin: -2px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); line-height: 1.5; }
/* 「日常」が「日／常」に割れないように、語の途中では折らない */
.bg-fixed p { margin: 0; word-break: keep-all; overflow-wrap: break-word; }
.bg-fixed p + p { margin-top: 4px; }

/* ---------------- 割増予約メール ---------------- */
.mail-peek summary { font-size: 12.5px; color: var(--accent); cursor: pointer; padding: 6px 0; }
.mail-body {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  font-size: 12px; line-height: 1.6; font-family: inherit;
  background: var(--card2); border: 1px solid var(--line); padding: 10px;
  max-height: 40vh; overflow: auto;
}

/* 固定費の棚卸し（経理 → 固定費 → 棚卸し） */
.rv-wrap .card { margin-bottom: 10px; }
.rv-wrap > p { margin: 8px 0; }
.rv-row { align-items: center; }
.rv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.rv-year { font-variant-numeric: tabular-nums; color: var(--accent); }

/* 立て直しの相談（案件 → 立て直しを相談） */
.ad-wrap .card { padding: 10px 12px; }
.ad-tasks { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.ad-out { display: flex; flex-direction: column; gap: 8px; }
.ad-head { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.6; }
.ad-head .chip { flex: none; margin-top: 1px; }
.ad-plan { display: flex; flex-direction: column; gap: 6px; }
.ad-detail { margin: 0; font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; }

/* 予定ごとのリマインダー（重要にした予定） */
.rm-wrap { display: flex; flex-direction: column; gap: 8px; }
.rm-wrap.off { opacity: .5; }
.rm-list { display: flex; flex-direction: column; gap: 4px; }
.rm-item {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--card2); padding: 6px 6px 6px 9px; font-size: 13px;
}
.rm-item > span { flex: 1; min-width: 0; }
.rm-item .icon { color: var(--accent); flex: none; }
.rm-del { flex: none; width: 28px; height: 28px; }

/* 貯金（経理の「貯金」と、ホームの1行） */
.sv-card { display: flex; flex-direction: column; gap: 10px; }
.sv-total { display: flex; align-items: baseline; justify-content: space-between; }
.sv-label { font-size: 12px; color: var(--muted); }
.sv-total b { font-size: 24px; font-variant-numeric: tabular-nums; color: var(--accent); }
.sv-goal { display: flex; flex-direction: column; gap: 5px; }
.sv-goal-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; }
.sv-goal-head b { font-variant-numeric: tabular-nums; }
.sv-goal-head b.ok { color: var(--ok); }
.sv-line { width: 100%; height: 44px; overflow: visible; }
.sv-line polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sv-sample {
  margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--card2); font-size: 11px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-all; max-height: 30vh; overflow: auto;
}
/* プロット相談（シート） */
.pl-card { display: flex; flex-direction: column; gap: 10px; }
/* シートの中では、外側の枠は要らない */
.sheet-body .pl-card { border: 0; background: none; padding: 0; }
.pl-body { display: flex; flex-direction: column; gap: 8px; }
.pl-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.pl-log { margin: 0; font-size: 12.5px; line-height: 1.7; }
.pl-people { display: flex; flex-direction: column; gap: 4px; }
.pl-person { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.pl-beats { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.pl-beat { font-size: 12.5px; line-height: 1.7; }
.pl-beat-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-beat p { margin: 2px 0 0; color: var(--muted); }
/* 成人向けの場面は、印だけ置く（番号は続けたいので list-item のまま） */
.pl-beat.adult { color: var(--accent2); }
.pl-beat.adult .chip { margin-left: 6px; vertical-align: middle; }

/* 貯金の目標と節約目標 */
.sv-need { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-plan .card { margin-bottom: 10px; }
.sv-line-row {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--line); padding: 8px 0; font-size: 13px;
}
.sv-line-row b { font-variant-numeric: tabular-nums; }
.sv-line-row.over b { color: var(--danger); }
.sv-line-row b.ok { color: var(--ok); }
.sv-line-row b.over { color: var(--warn); }

/* 月が変わったら貯金額を入れてもらう。ホームと経理の両方に出す */
.sv-due {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line2));
  background: color-mix(in srgb, var(--warn) 8%, var(--card));
}
.sv-due:active { opacity: .8; }
.sv-due > svg { color: var(--warn); flex: none; }
.sv-due-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sv-due-t b { font-size: 14px; }
/* 入れたあとのノルマ。上の線は要らない（枠の中で1行だけ出すため） */
.sv-after { padding: 4px 12px 10px; }
.sv-after .sv-line-row { border-top: 0; }
.sv-after p { margin: 0; }
.sv-after-v { display: inline-flex; align-items: baseline; gap: 2px; }
.sv-after-v b { font-size: 17px; font-variant-numeric: tabular-nums; }
.sv-after-v b.save { color: var(--accent2); }