/* ゆる〜り日記 — パステル・うすピンク */

:root {
  --bg: #fff7f9;
  --surface: #ffffff;
  --pink-50: #fff0f4;
  --pink-100: #fde4ec;
  --pink-200: #fbd3df;
  --pink-300: #f6b8ca;
  --pink-500: #e48aa5;
  --pink-700: #b4587a;
  --lavender: #eee8fb;
  --mint: #e3f5ec;
  --peach: #ffece1;
  --sky: #e4f1fb;
  --lemon: #fff7da;
  --text: #4d3f46;
  --muted: #8d7b84;
  --line: #f3dde5;
  --danger: #c9566f;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 2px 10px rgba(228, 138, 165, 0.12);
  --font: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* 画面の高さを 100vh / 100dvh で決めない:iPhone のホーム画面のアプリでは、この高さが見えている範囲より
   少し大きくなることがあり、中身が収まっていても少しスクロールできてしまうため。背景の色は html に付ける。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  overscroll-behavior: none; /* 画面の端で伸びる動き(バウンス)を出さない */
  touch-action: manipulation; /* ダブルタップでズームしない(中の要素にも効く) */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px; /* iPhone は 16px 未満の入力欄でズームしてしまうため、16px を下回らない */
  line-height: 1.7;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.app {
  max-width: 560px;
  margin: 0 auto;
}

/* ---- ヘッダー ---- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  min-height: calc(56px + var(--safe-top));
  padding: var(--safe-top) calc(4px + var(--safe-right)) 0 calc(4px + var(--safe-left));
  background: var(--pink-100);
  border-bottom: 1px solid var(--pink-200);
}

.app-title {
  grid-column: 2;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdr-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.hdr-btn:active { background: var(--pink-200); }
#hdr-back { grid-column: 1; }
#hdr-settings { grid-column: 3; }
.hdr-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--pink-700);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 本文 ---- */
.view {
  padding: 16px calc(16px + var(--safe-right)) calc(32px + var(--safe-bottom)) calc(16px + var(--safe-left));
  outline: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card > p:first-child { margin-top: 0; }
.card > p:last-child { margin-bottom: 0; }

.group { margin-top: 24px; }
.group:first-child { margin-top: 0; }

.section-title {
  margin: 0 4px 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.big-text { margin: 0; font-size: 1.15rem; font-weight: 700; }
.mt { margin-top: 10px; }
.hint { margin: 12px 4px 0; font-size: 0.85rem; color: var(--muted); }

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid var(--pink-300);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active { background: var(--pink-50); }
.btn:disabled { opacity: 0.5; }
.btn-primary { background: var(--pink-300); border-color: var(--pink-300); }
.btn-primary:active { background: var(--pink-500); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-block { display: flex; width: 100%; }
.btn-small { min-height: 36px; padding: 4px 14px; font-size: 0.9rem; }

/* ---- ホーム ---- */
.today {
  margin: 0 4px 12px;
  font-weight: 700;
  color: var(--pink-700);
}

.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--lemon);
  border: 1px solid #f3e3a6;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.signal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--surface);
  border: 2px solid var(--pink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 1.1rem;
  font-weight: 700;
}
.signal-btn:active { background: var(--pink-50); }
.signal-dots { display: inline-flex; gap: 5px; }
.signal-dots i { width: 14px; height: 14px; border-radius: 50%; }
/* 信号機の色は信号機の機能の中だけで使う */
.sd-blue { background: #7fb6e6; }
.sd-yellow { background: #f2d36b; }
.sd-red { background: #ea8a8a; }
.sd-black { background: #5b5458; }

.home-section { margin-top: 24px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.home-section:nth-of-type(n+2) .tiles { grid-template-columns: repeat(2, 1fr); }

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 92px;
  padding: 10px 6px;
  border-radius: var(--radius);
  background: var(--pink-50);
  border: 1px solid var(--line);
  text-align: center;
  line-height: 1.3;
  font-weight: 600;
}
.tile:active { filter: brightness(0.96); }
.tile-icon { font-size: 1.9rem; line-height: 1; }
.tile-label { font-size: 0.95rem; }

.tile-condition, .tile-feelings { background: var(--mint); }
.tile-meal, .tile-calendar { background: var(--peach); }
.tile-medicine, .tile-report { background: var(--lavender); }
.tile-vital, .tile-diary { background: var(--sky); }
.tile-backup { background: var(--surface); }
.tile-backup.is-due { background: var(--lemon); border-color: #f0dc8f; }
.tile-sub { font-size: 0.72rem; font-weight: 400; color: var(--muted); }
.tile-due { padding: 0 8px; border-radius: 999px; background: #fff; font-size: 0.72rem; font-weight: 700; color: #8a6d00; }
/* 今日バックアップを取った日は、みどりの印 */
.tile-backup.is-done { background: var(--mint); border-color: #b9e3cc; }
.tile-ok { padding: 0 8px; border-radius: 999px; background: #fff; font-size: 0.72rem; font-weight: 700; color: #2f6b4f; }
.notice-soft { background: var(--pink-50); border-color: var(--pink-200); }

/* ---- 一覧の行(設定など) ---- */
.rows { padding: 0; }
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
.row:first-child { border-top: 0; }
.row-link:active { background: var(--pink-50); }
.row-link > span:first-child { flex: 1; }
.chev { color: var(--pink-500); font-size: 1.4rem; line-height: 1; }

.badge {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--pink-100);
  color: var(--pink-700);
  font-size: 0.75rem;
  font-weight: 700;
}

.stepper { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.stepper output { min-width: 1.5em; text-align: center; font-weight: 700; font-size: 1.1rem; }
.stepper .unit { font-size: 0.9rem; color: var(--muted); }
.step-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--pink-300);
  border-radius: 50%;
  background: var(--surface);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.step-btn:active { background: var(--pink-100); }

/* ---- メニュー画面 ---- */
.menu-list { display: grid; gap: 10px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-weight: 600;
}
.menu-item:active { background: var(--pink-50); }
.menu-item > span:nth-child(2) { flex: 1; }
.menu-icon { font-size: 1.5rem; line-height: 1; }

/* ---- 準備中の画面 ---- */
.placeholder { text-align: center; padding: 32px 16px; }
.ph-icon { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.ph-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; }
.ph-phase {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--pink-50);
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- 更新のお知らせ ---- */
.update-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 16px 0;
  padding: 8px 8px 8px 16px;
  background: var(--lavender);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

/* ---- お知らせ(トースト) ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  z-index: 30;
  max-width: calc(100% - 32px);
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(77, 63, 70, 0.92);
  color: #fff;
  font-size: 0.95rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- 確認ダイアログ ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(77, 63, 70, 0.35);
}
.modal {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(77, 63, 70, 0.2);
}
.modal-title { margin: 0 0 8px; font-size: 1.1rem; }
.modal-body { margin-bottom: 20px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; padding: 10px 8px; }

/* ---- 開けなかったとき ---- */
.fatal { text-align: center; }
.fatal-title { font-weight: 700; font-size: 1.1rem; }

/* =========================================================
   フェーズ2:記録の画面
   ========================================================= */

.lead { margin: 0 4px 12px; font-weight: 700; font-size: 1.05rem; }
.empty { margin: 0 4px; color: var(--muted); font-size: 0.9rem; }
.hint-top { margin: 0 4px 12px; }
.mt-group { margin-top: 24px; }
.link-row {
  display: block;
  margin-top: 24px;
  padding: 12px 4px;
  color: var(--pink-700);
  font-size: 0.95rem;
  text-align: center;
}

/* ---- 入力欄 ---- */
.field { display: block; margin-top: 12px; }
.field:first-child { margin-top: 0; }
.field-label { display: block; margin-bottom: 4px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 16px; /* iPhone のズーム防止 */
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}
.input:focus { outline: 2px solid var(--pink-300); outline-offset: 0; border-color: var(--pink-300); }
textarea.input { resize: vertical; }
input[type="datetime-local"].input,
input[type="date"].input,
input[type="time"].input { min-width: 0; text-align: left; }
.with-unit { display: flex; align-items: center; gap: 6px; }
.with-unit .input { flex: 1; min-width: 0; }
.unit { flex: none; font-size: 0.85rem; color: var(--muted); }

.form-actions { display: grid; gap: 10px; margin-top: 16px; }
.btn-ghost-danger { border-color: var(--line); color: var(--danger); background: var(--surface); }


/* ---- 気分 ---- */
.mood-list { display: grid; gap: 10px; }
.mood-btn {
  min-height: 56px;
  padding: 10px 16px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.mood-btn:active { background: var(--pink-50); }
.mood-btn { display: flex; align-items: center; justify-content: center; gap: 12px; }
.mood-emoji { font-size: 1.6rem; line-height: 1; }

/* 選ぶボタン(縦に並ぶ、1つだけ選ぶ) */
.seg-list { display: grid; gap: 8px; margin-bottom: 16px; }
.seg-btn {
  min-height: 44px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
}
.seg-btn[aria-pressed="true"] { border: 2px solid var(--pink-500); background: var(--pink-100); }

/* ---- 体調のチップ(複数選ぶ) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.chip {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--pink-200);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: manipulation;
}
.chip[aria-pressed="true"] { background: var(--pink-300); border-color: var(--pink-300); font-weight: 700; }
.chip[aria-pressed="true"]::before { content: "✓ "; }

/* ---- 記録の一覧 ---- */
.rec-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: left;
  line-height: 1.5;
  cursor: pointer;
}
.rec-item:first-child { border-top: 0; }
.rec-item:active { background: var(--pink-50); }
.rec-time { flex: none; min-width: 3em; font-weight: 700; color: var(--pink-700); font-variant-numeric: tabular-nums; }
.rec-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rec-sub { display: block; font-size: 0.85rem; color: var(--muted); white-space: pre-wrap; }

/* ---- 日付の切り替え ---- */
.day-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.day-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pink-200);
  border-radius: 50%;
  background: var(--surface);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--pink-700);
  cursor: pointer;
}
.day-label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.day-input {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 16px;
  font-weight: 700;
  min-width: 0;
}
.today-badge { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--pink-100); color: var(--pink-700); font-size: 0.8rem; font-weight: 700; }

/* ---- 食事・バイタルのカード ---- */
.meal-card, .vital-card { margin-bottom: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.card-title { font-weight: 700; font-size: 1.05rem; }
.time-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.input-time { width: 7.5em; min-height: 40px; padding: 6px 8px; }
.vital-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.vital-grid .field { margin-top: 0; }

/* ---- 服薬 ---- */
.med-list { display: grid; gap: 10px; }
.med-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.med-btn:active { background: var(--pink-50); }
.med-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.med-count { font-weight: 700; color: var(--pink-700); font-variant-numeric: tabular-nums; }
.med-limit, .dose-warning {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--lemon);
  font-size: 0.85rem;
}
.dose-warning { margin: 0 0 12px; padding: 8px 12px; }
.dose-group { margin-bottom: 12px; }
.dose-head { font-weight: 700; background: var(--pink-50); border-radius: var(--radius) var(--radius) 0 0; }
.dose-group .rec-time { font-size: 1.2rem; min-width: 1.6em; }

/* ---- 一覧の編集 ---- */
.edit-row { gap: 6px; padding: 4px 8px 4px 0; }
.edit-main {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 6px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.edit-main:active { background: var(--pink-50); }
.icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--pink-700);
  font-size: 1.1rem;
  cursor: pointer;
  touch-action: manipulation;
}
.icon-btn:disabled { opacity: 0.3; }

/* ダイアログ内のボタンが3つのとき */
.modal-actions .btn-ghost-danger { flex: 0.8; }
.modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
.vital-grid .unit { width: 3.2em; }

/* =========================================================
   v0.3.0:ドラッグでの並び替え・見る画面
   ========================================================= */

/* ---- 並び替えのつまみ ---- */
.drag-handle {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--pink-500);
  font-size: 1.5rem;
  line-height: 1;
  cursor: grab;
  touch-action: none; /* つまみの上ではスクロールしない */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.drag-handle:active { background: var(--pink-50); cursor: grabbing; }
.sort-list.sorting { -webkit-user-select: none; user-select: none; }
.sort-list .edit-row { position: relative; background: var(--surface); }
.sort-list .shifting { transition: transform 0.15s ease; }
.sort-list .dragging {
  z-index: 2;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(180, 88, 122, 0.25);
  opacity: 0.96;
}

/* ---- 見る画面のカード ---- */
.add-btn { margin-bottom: 16px; }
.count-line { margin: 0 4px 12px; color: var(--muted); }
.count-line strong { color: var(--pink-700); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.view-card { display: block; margin-bottom: 12px; }
.view-card:active { background: var(--pink-50); }
.view-card .card-head { margin-bottom: 6px; }
.card-time { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--pink-700); font-variant-numeric: tabular-nums; }
.view-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vital-view { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.vv-item { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.vv-item dt { font-size: 0.85rem; color: var(--muted); }
.vv-item dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.vv-item small { margin-left: 2px; font-weight: 400; font-size: 0.75rem; color: var(--muted); }

/* ---- 入力画面 ---- */
.seg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mt-field { margin-top: 16px; }
.sort-list .edit-row:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.sort-list .edit-row:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }

/* =========================================================
   フェーズ3:日記・信号機・気持ちの整理
   ========================================================= */

/* ---- 日記 ---- */
.prompt-box { display: grid; gap: 8px; justify-items: start; margin-bottom: 4px; }
.prompt-current {
  position: relative;
  width: 100%;
  padding: 10px 48px 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--lavender);
}
.prompt-head { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.prompt-text { margin: 0; font-weight: 700; }
.prompt-clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; }
.prompt-label { margin: 0 0 4px; font-size: 0.85rem; color: var(--muted); }
.fav-toggle {
  min-height: 44px;
  padding: 6px 16px;
  border: 1px solid var(--pink-200);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
}
.fav-toggle[aria-pressed="true"] { background: var(--lemon); border-color: #f0dc8f; }
.fav-mark { color: #d9a400; }
.kind-badge { padding: 1px 10px; border-radius: 999px; background: var(--pink-100); color: var(--pink-700); font-size: 0.75rem; font-weight: 700; }
.view-text.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

/* ---- 信号機(色はこの機能の中だけで使う) ---- */
.sig-blue { --sig: #7fb6e6; --sig-ink: #1f3b55; }
.sig-yellow { --sig: #f2d36b; --sig-ink: #4a3a00; }
.sig-red { --sig: #ea8a8a; --sig-ink: #4d1515; }
.sig-black { --sig: #4a4347; --sig-ink: #ffffff; }
.signal-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sig-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 84px;
  padding: 10px 14px;
  border: 3px solid transparent;
  border-radius: var(--radius);
  background: var(--sig);
  color: var(--sig-ink);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.sig-btn[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 3px #fff inset; }
.sig-name { font-size: 1.4rem; font-weight: 800; line-height: 1.2; }
.sig-label { font-size: 0.85rem; line-height: 1.35; }
.sig-hint { text-align: center; margin-top: 20px; }
.signal-detail {
  margin-top: 16px;
  padding: 18px 18px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 10px solid var(--sig, var(--pink-300));
  box-shadow: var(--shadow);
}
.sig-border-blue { --sig: #7fb6e6; }
.sig-border-yellow { --sig: #f2d36b; }
.sig-border-red { --sig: #ea8a8a; }
.sig-border-black { --sig: #4a4347; }
.card.sig-border-blue, .card.sig-border-yellow, .card.sig-border-red, .card.sig-border-black { border-left: 10px solid var(--sig); }
.sig-title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.3rem; line-height: 1.4; }
.sig-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sig); }
.sig-head { margin: 18px 0 6px; font-size: 1rem; color: var(--muted); }
.sig-text { font-size: 1.3rem; line-height: 1.8; overflow-wrap: anywhere; }
.sig-text p { margin: 0 0 4px; }
.sig-text ul { margin: 0; padding-left: 1.3em; }
.sig-text li { margin-bottom: 4px; }
.sig-empty { color: var(--muted); font-size: 1rem; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.field-label-row .field-label { margin: 0; }

/* ---- 相談したいことメモ ---- */
.consult-card { margin-bottom: 10px; padding: 0; }
.consult-top { display: flex; align-items: stretch; }
.consult-main { flex: 1; min-width: 0; padding: 14px 16px; }
.consult-main:active { background: var(--pink-50); border-radius: var(--radius) 0 0 0; }
.consult-main .view-text { margin-bottom: 4px; }
.check-btn {
  flex: none;
  width: 92px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius) 0 0;
  background: var(--mint);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.consult-card.is-done { opacity: 0.75; }
.consult-card.is-done .check-btn { background: var(--surface); font-weight: 400; }
.done-list summary { cursor: pointer; padding: 8px 0; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 12px; font-weight: 600; }
.check-row input { width: 24px; height: 24px; accent-color: var(--pink-500); }

/* ---- 整理シート ---- */
.level-btn {
  min-height: 48px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
}
.level-btn[aria-pressed="true"] { background: var(--pink-300); border-color: var(--pink-500); }
.ws-row { margin-top: 8px; }
.ws-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.ws-level { display: flex; align-items: center; gap: 4px; }
.ws-level strong { font-size: 1.3rem; }
.ws-level small { color: var(--muted); margin-right: 8px; }
.level-dots { display: inline-flex; gap: 3px; }
.level-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--pink-100); }
.level-dots i.on { background: var(--pink-500); }

/* ---- 「しんどい」のときの下からのお知らせ ---- */
.modal-backdrop.sheet { place-items: end center; padding: 0; background: rgba(77, 63, 70, 0.2); }
.modal-backdrop.sheet .modal {
  max-width: 560px;
  border-radius: var(--radius) var(--radius) 0 0;
  padding-bottom: calc(20px + var(--safe-bottom));
}
.calm-list { margin: 4px 0 0; padding-left: 1.3em; font-size: 1.05rem; line-height: 1.8; }
.text-link {
  display: inline;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--pink-700);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* =========================================================
   フェーズ4:カレンダー・日付ごとの一覧・相談用の表示
   ========================================================= */

/* ---- カレンダー ---- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-title { margin: 0; font-size: 1.2rem; }
.cal-today { display: flex; margin: 0 auto 10px; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.cal-wd { text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 74px;
  padding: 3px 3px 0;
  border-radius: 10px;
  background: var(--pink-50);
}
.cal-cell:active { background: var(--pink-100); }
.cal-cell.is-blank { background: transparent; }
.cal-cell.is-future { opacity: 0.55; }
.cal-cell.is-today { outline: 2px solid var(--pink-500); outline-offset: -2px; background: #fff; }
.cal-cell.is-picked { outline: 2px solid var(--pink-700); outline-offset: -2px; }
/* 左上に日付、右上に気分の絵文字 */
.cal-top { display: flex; align-items: flex-start; justify-content: space-between; height: 20px; }
.cal-num { padding-left: 1px; font-size: 0.85rem; font-weight: 700; line-height: 20px; font-variant-numeric: tabular-nums; }
.is-sun .cal-num, .cal-wd.is-sun { color: #c0607a; }
.is-sat .cal-num, .cal-wd.is-sat { color: #5f7fae; }
.cal-mood { font-size: 1rem; line-height: 20px; }
/* 日付の下に「お通じ」、その下に「生理」の段。帯はマスのすき間(4px)をこえて隣のマスとつながる。
   週の端(日曜の左・土曜の右)は、カレンダーの端(マスの余白3px+カレンダーの余白8px)までのばして、次の行に続くように見せる */
.cal-lane { position: relative; display: block; height: 16px; }
.band { position: absolute; top: 4px; height: 8px; left: 4px; right: 1px; border-radius: 999px; }
.band.cont-l { left: -6px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.band.cont-r { right: -6px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.band.wrap-l { left: -11px; }
.band.wrap-r { right: -11px; }
.band-bowel { background: #e7d3bd; }
.band-period { background: #f6bfd0; }
.lane-emoji { position: absolute; left: -1px; top: 50%; transform: translateY(-50%); font-size: 13px; line-height: 1; }
/* 右下の日記の三角:ひとこと日記(水色・大)の上に、一日の日記(ピンク・小)を重ねる */
.tri { position: absolute; right: 0; bottom: 0; border-bottom-right-radius: 10px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.tri-hitokoto { width: 22px; height: 22px; background: #a6d6f0; }
.tri-diary { width: 13px; height: 13px; background: #ee8fb0; }
.legend-tri { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cal-legend { margin-top: 12px; font-size: 0.8rem; color: var(--muted); }
.cal-legend p { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 4px 6px; }
.legend-head { font-weight: 700; }

/* ---- 日付ごとの一覧 ---- */
.day-empty { margin-bottom: 8px; }
.day-sec { margin-bottom: 14px; }
.day-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 6px; }
.day-sec-title { margin: 0; font-size: 0.95rem; }
.day-sec.is-empty { margin-bottom: 4px; }
.day-sec.is-empty .day-sec-title { font-weight: 600; color: var(--muted); }

/* ---- 相談用の表示 ---- */
.rp-controls { margin-bottom: 16px; }
.seg-row-2 { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.report { display: grid; gap: 12px; }
.rp-header { padding: 4px 4px 0; }
.rp-heading { margin: 0; font-size: 1.25rem; }
.rp-period { margin: 2px 0 0; font-size: 1.05rem; font-weight: 700; color: var(--pink-700); }
.rp-made { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted); }
.rp-section {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.rp-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--pink-100);
  font-size: 1.05rem;
}
.rp-note { font-size: 0.75rem; font-weight: 400; color: var(--muted); margin-left: 6px; }
.rp-none { margin: 0; font-size: 0.85rem; color: var(--muted); }
.rp-sub + .rp-sub { margin-top: 12px; }
.rp-subtitle { margin: 0 0 4px; font-size: 0.95rem; }
.rp-times { margin: 0; padding: 0; list-style: none; }
.rp-times li { display: flex; gap: 12px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.rp-times li:last-child { border-bottom: 0; }
.rp-time { flex: none; min-width: 3.2em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pink-700); }
.rp-entry { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.rp-entry:last-child { border-bottom: 0; }
.rp-entry p { margin: 0; }
.rp-tag { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: var(--pink-50); font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.rp-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.rp-counts span { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.rp-other { margin: 6px 0 0; font-size: 0.85rem; }
.rp-foot { margin: 8px 0 0; font-size: 0.75rem; color: var(--muted); }
.rp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.rp-table th, .rp-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rp-table th { font-weight: 700; white-space: nowrap; }
.rp-table .num { white-space: nowrap; }
.rp-vitals th, .rp-vitals td { text-align: center; }
.rp-vitals thead th { font-size: 0.8rem; color: var(--muted); }
.rp-vitals small { display: block; font-size: 0.65rem; font-weight: 400; }
.rp-dash { color: #c9bcc2; }
.rp-scroll { overflow-x: auto; }
.rp-charts { display: grid; gap: 14px; }
.rp-consults { margin: 0; padding-left: 1.4em; }
.rp-consults li { padding: 4px 0; }
.rp-consults p { margin: 0; white-space: pre-wrap; }

/* ---- グラフ ---- */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: #eadde3; stroke-width: 1; }
.ch-day { stroke: #f3e8ec; stroke-width: 1; }
.ch-axis { fill: #8d7b84; font-size: 10px; }
.ch-line { fill: none; stroke: #9a5a74; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { fill: #9a5a74; }
.ch-val { fill: #4d3f46; font-size: 9.5px; font-weight: 700; }
/* 2本目の線(血圧の下):水色の点線・白抜きの点。上と重なっても色と線の形で見分けられ、
   白黒で印刷しても、点線と白抜きで見分けられる */
.ch-line.sub { stroke: #3a96d0; stroke-dasharray: 5 4; }
.ch-dot.sub { fill: #fff; stroke: #3a96d0; stroke-width: 1.6; }
.ch-val.sub { fill: #2c6f9b; }
.ch-hour { stroke: #f3e8ec; stroke-width: 1; stroke-dasharray: 2 3; }
.ch-hour-label { fill: #b3a3ab; font-size: 8.5px; }
.ch-pick { fill: none; stroke: var(--pink-500); stroke-width: 2; }

/* 血圧の上・下の見本 */
.ch-keys { display: inline-flex; gap: 10px; margin-left: auto; font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.ch-key { display: inline-flex; align-items: center; gap: 3px; }
.ch-key svg { width: 24px; height: 8px; overflow: visible; }
.rp-chart .rp-subtitle { display: flex; align-items: baseline; flex-wrap: wrap; }

/* 拡大・点のタップ */
.chart-hint { margin: 0 0 8px; font-size: 0.8rem; color: var(--muted); }
.chart-box { position: relative; }
.chart-stage { position: relative; border-radius: 8px; cursor: pointer; }
.chart-box.is-zoomed .chart-stage { background: var(--pink-50); cursor: grab; }
.chart-tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 4px; }
.chart-tool {
  width: 36px;
  height: 36px;
  border: 1px solid var(--pink-200);
  border-radius: 50%;
  background: var(--surface);
  color: var(--pink-700);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.chart-tool:disabled { opacity: 0.35; }
.chart-reset { order: -1; margin-right: auto; }
.ch-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 1px;
  max-width: 220px;
  padding: 6px 10px;
  background: rgba(77, 63, 70, 0.94);
  color: #fff;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.ch-tip-date { font-size: 0.75rem; opacity: 0.85; }
.ch-tip-row strong { font-size: 1rem; }
.ch-tip-row small { margin-left: 2px; font-size: 0.75rem; }
.ch-tip-name { display: inline-block; min-width: 1.6em; margin-right: 4px; padding: 0 5px; border-radius: 6px; background: #9a5a74; font-size: 0.75rem; text-align: center; }
.ch-tip-row.sub .ch-tip-name { background: #3a96d0; }

/* ---- 印刷(A4縦・ボタンなどは出さない) ---- */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  html, body { background: #fff !important; }
  body { font-size: 10.5pt; line-height: 1.5; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .app-header, .update-bar, .toast, .modal-backdrop, .no-print, .hint { display: none !important; }
  .app { max-width: none; min-height: 0; }
  .view { padding: 0 !important; }
  .report { gap: 3mm; }
  .rp-section { box-shadow: none; border: 0.3mm solid #d9c7cf; border-radius: 3mm; padding: 3mm 4mm; break-inside: avoid; page-break-inside: avoid; }
  .rp-header { padding: 0 0 1mm; border-bottom: 0.5mm solid #e48aa5; }
  .rp-heading { font-size: 15pt; }
  .rp-period { font-size: 12pt; }
  .rp-charts { grid-template-columns: 1fr 1fr; gap: 3mm 6mm; }
  .rp-section > .chart-box { max-width: 125mm; margin: 0 auto; }
  .rp-chart { break-inside: avoid; }
  .rp-scroll { overflow: visible; }
  .ch-tip, .chart-hint, .chart-tools { display: none !important; }
  .chart-stage { background: none !important; }
}

/* =========================================================
   フェーズ5:ロック
   ========================================================= */

.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background: linear-gradient(to bottom, var(--pink-100), var(--bg) 45%);
  padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
}
.lock-inner { max-width: 360px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.lock-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; color: var(--pink-700); }
.lock-brand img { border-radius: 14px; box-shadow: var(--shadow); }
.lock-note { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--muted); text-align: center; }

/* ---- テンキー ---- */
.pc-pad { text-align: center; }
.pc-title { margin: 0 0 12px; font-weight: 700; }
.pc-dots { display: flex; justify-content: center; gap: 18px; margin-bottom: 8px; }
.pc-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--pink-500); }
.pc-dots i.on { background: var(--pink-500); }
.pc-dots.shake { animation: pc-shake 0.35s; }
@keyframes pc-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) { .pc-dots.shake { animation: none; } }
.pc-msg { min-height: 2.8em; margin: 0 0 8px; font-size: 0.85rem; color: var(--pink-700); }
.pc-keys { display: grid; grid-template-columns: repeat(3, 72px); justify-content: center; gap: 14px 22px; }
.pc-key {
  width: 72px;
  height: 72px;
  border: 1px solid var(--pink-200);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.pc-key:active { background: var(--pink-100); }
.pc-key:disabled { opacity: 0.4; }
.pc-del, .pc-bio { border-color: transparent; background: transparent; box-shadow: none; font-size: 1rem; color: var(--pink-700); }
.pc-bio { font-weight: 700; }

/* ---- 設定のロック画面 ---- */
.lock-warn { margin-top: 16px; }
.lock-setup { padding: 20px 8px; }
.step-label { margin: 0 0 4px; text-align: center; font-size: 0.8rem; color: var(--muted); }
.seg-row-5 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.seg-row-5 .seg-btn { padding: 0 2px; font-size: 0.9rem; }
.badge-on { background: var(--mint); color: #2f6b4f; }

/* ---- 設定「アプリについて」 ---- */
.info-row { align-items: flex-start; }
.info-value { flex: none; max-width: 40%; text-align: right; font-weight: 700; color: var(--pink-700); }
.info-copy { flex-direction: column; align-items: stretch; gap: 6px; }
/* ドキッとさせないよう、説明文と同じ落ち着いた色・太さ */
.info-value.is-soft { font-weight: 400; font-size: 0.85rem; color: var(--muted); }

/* ---- ロック画面「パスコードを忘れたら」 ---- */
.lock-forgot { align-self: center; margin-top: 4px; font-size: 0.9rem; }
.lock-guide { justify-content: flex-start; max-width: 520px; }
.forgot { line-height: 1.8; }
.forgot-title { margin: 0 0 8px; font-size: 1.2rem; color: var(--pink-700); }
.forgot p { margin: 0 0 8px; }
.forgot-box { margin: 12px 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.forgot-box ul { margin: 0; padding-left: 1.2em; }
.forgot-box li + li { margin-top: 6px; }
.forgot-step-head { font-weight: 700; margin-bottom: 4px !important; }
.forgot-steps { margin: 12px 0; padding-left: 1.4em; }
.forgot-steps li { margin-bottom: 12px; }
.forgot-steps li::marker { font-weight: 700; color: var(--pink-700); }
.nowrap { white-space: nowrap; }

/* ---- 不具合報告:まだ見ていない返信の印 ---- */
#hdr-settings { position: relative; }
#hdr-settings.has-badge::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pink-500);
  border: 2px solid var(--pink-100);
}
.badge-new { background: var(--pink-500); color: #fff; }

/* ---- 下書きを戻したときのお知らせ ---- */
.draft-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--lavender);
  font-size: 0.9rem;
}
.draft-bar .btn { flex: none; }

/* =========================================================
   v0.9.0:相談メモのタグ・相談後のメモ、整理シートのつらさ、生理、気分の絵文字
   ========================================================= */

/* ---- 相談したいことメモ:タグ・しぼりこみ ---- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-chip {
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--pink-200);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
}
.filter-chip[aria-pressed="true"] { background: var(--pink-300); border-color: var(--pink-300); font-weight: 700; }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.tag { padding: 0 8px; border-radius: 999px; background: var(--lavender); font-size: 0.75rem; font-weight: 700; line-height: 1.7; }

/* ---- 相談後のメモ ---- */
.comments { border-top: 1px solid var(--line); }
.comment { display: block; padding: 8px 16px; border-bottom: 1px dashed var(--line); }
.comment:active { background: var(--pink-50); }
.comment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.comment-head .chev { font-size: 1.2rem; }
.comment-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-add { display: block; padding: 10px 16px; color: var(--pink-700); font-size: 0.9rem; font-weight: 600; }
.comment-add:active { background: var(--pink-50); border-radius: 0 0 var(--radius) var(--radius); }
.consult-quote { background: var(--pink-50); }
.consult-quote .field-label { margin-bottom: 2px; }

/* ---- 整理シートのつらさ:0〜10 を同じ横幅で縦に11段 ---- */
.level-list { display: grid; gap: 6px; }
.level-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 16px; text-align: left; }
.level-num { flex: none; min-width: 1.4em; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.level-name { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.ws-level-name { margin-left: 4px; font-weight: 700; }
.level-name-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.level-name-row:first-child { margin-top: 0; }
.level-name-row .input { flex: 1; min-width: 0; }

/* ---- 体調:生理の「はじまった/おわった」 ---- */
.period-phase { margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--pink-50); }

/* ---- 気分の絵文字 ---- */
.emoji-row { display: grid; grid-template-columns: 1fr 4.5em auto; align-items: center; gap: 10px; margin-top: 10px; }
.emoji-row:first-child { margin-top: 0; }
.emoji-label { font-weight: 600; }
.emoji-input { padding: 6px; font-size: 1.5rem; text-align: center; }

/* ---- 相談用の表示のカレンダー ---- */
.rp-calendar .cal-grid { box-shadow: none; }
.rp-calendar .cal-legend { margin-top: 8px; }
.rp-consult-tags { margin: 0 0 2px !important; }
.rp-comments { margin: 4px 0 0; padding: 4px 0 0 12px; list-style: none; border-left: 3px solid var(--pink-100); }
.rp-comments li { padding: 2px 0; }
.rp-comments .rp-note { margin-left: 0; }

@media print {
  .rp-calendar { break-inside: avoid; page-break-inside: avoid; }
  /* 余白・すき間は画面と同じ(帯をすき間・端までのばす長さが px で決まっているため) */
  .rp-calendar .cal-grid { border: 0.3mm solid #e8d6dd; }
  .rp-calendar .cal-legend { font-size: 8pt; }
}

/* =========================================================
   v0.10.0:選んで削除・薬の情報・更新のお知らせ
   ========================================================= */

/* ---- 更新のお知らせ:文の下に「バックアップ」「更新する」を並べる ---- */
.update-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 10px 16px; }
.update-text { margin: 0; line-height: 1.5; font-weight: 600; }
.update-text .small { font-weight: 400; color: var(--muted); }
.update-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- 一覧の編集:選んで削除 ---- */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.list-head .section-title { margin-bottom: 0; }
.select-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.select-row { justify-content: flex-start; gap: 4px; padding-left: 14px; cursor: pointer; }
.select-row .edit-main { padding-left: 8px; }
.select-check { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--danger); }
.is-selecting .sort-list { border-color: var(--pink-300); }
.btn-danger:disabled { opacity: 0.4; }

/* ---- 服薬:薬の情報(タップで開く) ---- */
.med-item { display: grid; gap: 0; }
.med-info { margin: -6px 8px 0; padding: 10px 14px 8px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--pink-50); font-size: 0.9rem; }
.med-info summary { color: var(--pink-700); font-weight: 600; cursor: pointer; }
.med-info-list { margin: 6px 0 0; }
.med-info-list div { padding: 4px 0; border-top: 1px dashed var(--line); }
.med-info-list dt { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.med-info-list dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 薬の詳細情報:信号機と同じく「・」で始まる行は箇条書き(linesHtml) */
.med-info-list dd.med-detail { white-space: normal; }
.med-detail p { margin: 0 0 2px; }
.med-detail ul { margin: 0; padding-left: 1.3em; }
.med-detail li { margin-bottom: 2px; }

/* =========================================================
   v0.12.0:選択肢などの編集ボタン・ヘルプ
   ========================================================= */

/* ---- 見出しの横の「✎ 選択肢を編集」(どの画面でも同じ見た目) ---- */
.head-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; }
.head-row > .section-title, .head-row > .lead, .head-row > p, .head-row > .sig-title { margin: 0 4px; }
.group > .head-row .section-title { margin: 0 4px; }
.field-label-row { flex-wrap: wrap; }
.edit-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  margin-left: auto;
  min-height: 40px;
  padding: 4px 14px 4px 11px;
  border: 1.5px solid var(--pink-300);
  border-radius: 999px;
  background: var(--pink-50);
  color: var(--pink-700);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.edit-link:active { background: var(--pink-100); }
.edit-link svg, .edit-row-icon svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.modal .head-row { margin-bottom: 6px; }

/* 設定の「選択肢・名前の編集」 */
.edit-row-link { justify-content: flex-start; gap: 10px; }
.row-link.edit-row-link > span.edit-row-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--pink-50); border: 1.5px solid var(--pink-300); color: var(--pink-700); }
.edit-row-title { flex: 1; }

/* ---- ヘッダーの「?」(ホームだけ) ---- */
#hdr-help { grid-column: 1; grid-row: 1; }
#hdr-back { grid-row: 1; }

/* ---- ヘルプ ---- */
.help-list { display: grid; gap: 10px; }
.help-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  scroll-margin-top: calc(72px + var(--safe-top));
}
.help-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary:active { background: var(--pink-50); border-radius: var(--radius); }
.help-icon { flex: none; width: 1.6em; font-size: 1.4rem; text-align: center; }
.help-head { flex: 1; display: grid; line-height: 1.5; }
.help-title { font-weight: 700; }
.help-what { font-size: 0.85rem; color: var(--muted); }
.help-chev { flex: none; color: var(--pink-500); font-size: 1.4rem; line-height: 1; transition: transform 0.15s; }
.help-item[open] .help-chev { transform: rotate(90deg); }
.help-item[open] summary { border-bottom: 1px dashed var(--line); }
@media (prefers-reduced-motion: reduce) { .help-chev { transition: none; } }
.help-body { padding: 10px 16px 16px; font-size: 0.95rem; }
.help-where { display: grid; gap: 4px; padding: 8px 12px; background: var(--lemon); border-radius: var(--radius-sm); }
.help-where-head { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.help-path { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-weight: 600; }
.help-arrow { color: var(--pink-500); }
.help-steps { margin: 10px 0 0; padding-left: 1.3em; }
.help-steps > li { margin-bottom: 6px; }
.help-sublist { margin: 4px 0 0; padding-left: 1.1em; }
.help-sublist li { margin-bottom: 4px; }
.help-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  border: 1px solid var(--pink-300);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: 1px;
}
.help-edit { background: var(--pink-50); border-width: 1.5px; color: var(--pink-700); }
.help-edit svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.help-grip { color: var(--pink-700); }
.help-open { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.help-body .forgot { margin-top: 4px; }
.help-body .forgot-title { display: none; }
.help-body .forgot-box { background: var(--pink-50); }
.prompt-row { justify-self: stretch; margin: 0; }
.level-note { margin: 0 4px 8px; }

/* =========================================================
   v0.13.0:バックアップ・このアプリのデータを消す
   ========================================================= */

/* 設定:名前の下に選ぶボタンが並ぶ行 */
.row-col { flex-direction: column; align-items: stretch; gap: 10px; }
.row-col .seg-row { width: 100%; }
.danger-text { color: var(--danger); }
.danger-text .muted { color: var(--muted); }

/* バックアップの画面:今日取ったか */
.backup-today { margin: 8px 0 0; font-size: 0.9rem; font-weight: 700; color: #8a6d00; }
.backup-last.is-today { background: var(--mint); border-color: #b9e3cc; }
.backup-last.is-today .backup-today { color: #2f6b4f; }

/* このアプリのデータを消す */
.wipe-warn { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--lemon); font-size: 0.9rem; }
.lock-wipe { margin-top: 24px; }
.forgot-last { margin-top: 8px !important; font-weight: 700; }
/* ロック画面(z-index: 50)の上に、確認のダイアログを出す */
.lock-screen ~ .modal-backdrop { z-index: 60; }
/* ロック画面の確認ダイアログで出るお知らせ(「けす」と入力してください など)も見えるように */
body:has(.lock-screen) .toast { z-index: 70; }

/* ---- 引っ越し ---- */
.notice-move { background: var(--mint); border-color: #b9e3cc; color: inherit; text-decoration: none; }
.move-step-head { margin-top: 0; font-weight: 700; color: var(--pink-700); }
.move-saved { margin: 10px 0 0; font-size: 0.85rem; color: #2f6b4f; font-weight: 700; word-break: break-all; }
.move-status { margin: 10px 0 0; font-weight: 700; }
.move-status.is-ok { color: #2f6b4f; }
.move-status.is-error { color: var(--danger); }
.move-done { background: var(--mint); border-color: #b9e3cc; }
.move-done .big-text { color: #2f6b4f; }
.move-wait { text-align: center; }
.move-file .btn-big { min-height: 64px; font-size: 1.15rem; margin: 12px 0; }
.move-pick-help { margin: 0; padding-left: 1.3em; line-height: 1.6; }
.move-pick-help li + li { margin-top: 6px; }
.move-fname { word-break: break-all; }
.move-step + .move-step, .move-done + .move-step { margin-top: 12px; }