:root {
  --bg: #F4F4F3;
  --text: #3D5438;
  --border: #A2B99E;
  --accent: #BC9552;
  --card: #FFFFFF;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 水彩の世界：上=淡い空色、下=草原色、四隅ににじみ（1駅だけ風） */
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 75% 45% at 12% -5%, rgba(198, 216, 222, .55), transparent 62%),
    radial-gradient(ellipse 65% 40% at 88% 2%, rgba(214, 224, 213, .45), transparent 60%),
    radial-gradient(ellipse 55% 45% at -5% 100%, rgba(162, 185, 158, .30), transparent 65%),
    radial-gradient(ellipse 55% 45% at 105% 100%, rgba(188, 149, 82, .16), transparent 65%),
    linear-gradient(180deg, #EEF3F0 0%, #F4F4F3 42%, #EEF2E7 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 76px;
}

.app-header {
  padding: 20px 16px 8px;
  text-align: center;
}

.app-header h1 {
  margin: 0;
  font-size: 22px;
}

.app-header__note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--accent);
}

.firebase-auth {
  margin: 12px auto 4px;
  padding: 10px 12px;
  max-width: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid rgba(162, 185, 158, 0.45);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  font-size: 11px;
}

.app-main {
  flex: 1;
  padding: 8px 16px 24px;
}

.tab-panel h2 {
  font-size: 18px;
  margin: 8px 0 12px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.section-head h2 {
  margin: 0;
}

/* ボタン */
.btn {
  font-family: inherit;
  border: none;
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn:active {
  opacity: 0.75;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--share {
  background: var(--text);
  color: #fff;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.share-status {
  min-height: 20px;
  margin: -4px 4px 14px;
  text-align: center;
  color: #687563;
  font-size: 12px;
}

.share-status.is-error { color: #A9583F; }
.share-status.is-success { color: #3D6F43; font-weight: 700; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn--full {
  width: 100%;
  margin: 8px 0 12px;
}

.btn--small {
  padding: 6px 12px;
  font-size: 12px;
}

.btn--danger {
  background: #fff;
  color: #A9583F;
  border: 1px solid #A9583F;
}

/* カード共通 */
/* hidden属性を必ず効かせる（2026-08-31）
   `.card-list{display:flex}` が hidden より強く、「ほかの予約」が閉じられなかった。 */
[hidden] { display: none !important; }

.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  background: var(--card);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(61, 84, 56, 0.09);
  border: 1px solid rgba(162, 185, 158, 0.3);
}

.list-heading {
  font-size: 14px;
  color: var(--accent);
  margin: 16px 0 8px;
}

/* 予約カード */
.booking-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

.badge--status {
  background: var(--border);
  color: var(--text);
}

.badge--done {
  background: #7C9473;
  color: #fff;
}

.badge--cancelled {
  background: #C9C9C7;
  color: #555;
}

.booking-card__date {
  font-weight: bold;
}

.booking-card__family {
  font-size: 15px;
  font-weight: bold;
  margin: 2px 0;
}

.booking-card__memo {
  font-size: 13px;
  color: #5C6E56;
  white-space: pre-wrap;
  margin: 6px 0;
}

.booking-admin-notifications {
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid var(--line, #e3e3df);
  border-radius: 14px;
  background: #fff;
}

.booking-admin-notifications .section-head h3 { margin: 0; }
.booking-notification { padding: 13px 14px; }
.booking-notification.is-unread { border-left: 4px solid #7f9b7a; background: #f3f7f2; }
.booking-notification p { margin: 6px 0 10px; white-space: pre-wrap; font-size: 13px; }
.booking-sync-warning { margin-top: 10px; color: #a9583f; font-size: 12px; font-weight: 700; }
.checkbox-label { display: flex !important; align-items: center; gap: 8px; }
.checkbox-label input { width: auto; }

.booking-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.empty-note {
  font-size: 13px;
  color: #8A968A;
  text-align: center;
  padding: 16px 0;
}

/* フォーム */
.form-card {
  background: var(--card);
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid rgba(162, 185, 158, 0.3);
  box-shadow: 0 6px 18px rgba(61, 84, 56, 0.09);
}

.form-card h3 {
  margin-top: 0;
}

.form-card label[hidden] { display: none; }

.form-card label {
  display: block;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--text);
}

.form-card input,
.form-card select,
.form-card textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #FBFBFA;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
}

/* ⚠️2026-08-26修正：上の `.form-card input { width:100% }` がチェックボックスにも当たり、
   □が横いっぱいに伸びて文字が右端へ回り込んでいた（同じ詳細度で後勝ちしていた）。 */
.form-card .checkbox-label {
  align-items: center;
  gap: 8px;
}
.form-card .checkbox-label input[type="checkbox"] {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0;
  padding: 0;
  accent-color: var(--olive, #6C7A5B);
}

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* 連絡タブ */
.notice {
  font-size: 12px;
  color: var(--accent);
  background: #FBF4E8;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 0 12px;
}

.family-select-label {
  display: block;
  font-size: 13px;
  margin-bottom: 12px;
}

.family-select-label select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
}

.thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
  margin-bottom: 12px;
}

.bubble {
  align-self: flex-start;
  max-width: 80%;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 18px 18px 18px 4px;
  font-size: 14px;
  white-space: pre-wrap;
}
.bubble--parent {
  align-self: flex-end;
  border-color: #c7d7b1;
  border-radius: 18px 18px 4px 18px;
  background: #e6efcf;
}
.bubble__name {
  display: block;
  margin-bottom: 3px;
  color: var(--sub);
  font-size: 10px;
  font-weight: 700;
}
.bubble__image {
  display: block;
  width: min(260px, 100%);
  margin-top: 8px;
  border-radius: 10px;
}

.bubble__time {
  display: block;
  font-size: 10px;
  color: var(--sub);
  margin-top: 4px;
  text-align: right;
}

.book-link {
  display: inline-block;
  font-size: 13.5px;
  color: var(--accent-dark);
  text-decoration: none;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 1px;
  margin: 2px 0 6px;
}
.book-link:hover { color: var(--text); }

.event-row__detail--hint { color: var(--sub); opacity: .65; }

.message-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.message-form textarea {
  flex: 1;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
}

/* 日報タブ：トリガーボタン */
.trigger-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  max-width: 420px;   /* 枠を小さめにして均等配置（2026-08-31） */
  margin-left: auto;
  margin-right: auto;
}

.trigger-btn {
  font-family: inherit;
  border: 1px solid rgba(162, 185, 158, 0.3);
  background: var(--card);
  border-radius: 16px;
  padding: 10px 4px 9px;
  font-size: 12px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(61, 84, 56, 0.08);
  transition: transform 0.08s ease, opacity 0.15s ease;
}

.trigger-btn:active {
  opacity: 0.85;
  transform: scale(0.96);
}

.trigger-btn__icon {
  /* 2026-08-31：絵文字をやめてCodex製アイコン画像に。日報はしっかり目立たせる（ゆかり指示） */
  /* 2026-08-31：主張が強すぎたのでひと回り小さく（ゆかり指示） */
  width: 30px;
  height: 30px;
  display: block;
  margin: 0 auto 1px;
  object-fit: contain;
}

/* アイコンとラベルを、ボタンの中で必ず中央に置く（2026-08-31：右下にズレていた） */
.trigger-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 日報タブ：イベントタグ（低彩度） */
.tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 999px;
  color: #4A4A44;
}

.tag--shokuji { background: #E9C9BE; }
.tag--milk { background: #F2D9E2; }
.tag--nyou { background: #D6E4CE; }
.tag--toilet { background: #DDE9D2; }
.tag--ben { background: #DECDB8; }
.tag--nemuru { background: #CFDAE8; }
.tag--kishou { background: #F1E5B8; }

/* 日報タブ：イベントログ */
.event-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-row__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-row__time {
  font-weight: bold;
}

.event-row__detail {
  font-size: 13px;
  color: #5C6E56;
  cursor: pointer;
  white-space: pre-wrap;
}

.event-row__actions {
  display: flex;
  justify-content: flex-end;
}

.past-log-picker[hidden] { display: none; }

.past-log-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.past-log-picker input[type="date"] {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #FBFBFA;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
}

/* モーダル */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(61, 84, 56, 0.4);
}

.modal__content {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  overflow-y: auto;
  border-radius: 28px 28px 0 0;
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 28px rgba(61, 84, 56, 0.16);
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--text);
  cursor: pointer;
}

.modal__actions {
  margin-top: 16px;
}

.report-detail dt {
  font-size: 12px;
  color: var(--accent);
  margin-top: 12px;
}

.report-detail dd {
  margin: 4px 0 0;
  font-size: 14px;
  white-space: pre-wrap;
}

/* タブナビ */
.tab-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
  border-top: 1px solid rgba(162, 185, 158, 0.35);
  box-shadow: 0 -4px 14px rgba(61, 84, 56, 0.07);
  max-width: 560px;
  margin: 0 auto;
  z-index: 40;
}

.tab-nav__btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0 calc(8px + env(safe-area-inset-bottom));
  font-family: inherit;
  font-size: 11px;
  color: #8A968A;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.tab-nav__icon {
  font-size: 20px;
}

.tab-nav__btn.is-active {
  color: var(--accent);
  font-weight: bold;
}

.agreement-admin-status {
  margin: 10px 0 14px;
  padding: 11px 12px;
  border: 1px solid #ded8cc;
  border-radius: 12px;
  color: #71695d;
  background: #f8f5ef;
  font-size: 12px;
  line-height: 1.6;
}
.agreement-admin-status.is-done { border-color: #b9caa6; color: #3d5438; background: #eef5e6; }
.agreement-admin-status.is-pending { border-color: #e3bdaf; color: #985b4b; background: #fff0eb; }

/* トースト */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 60;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 2026-08-01 管理画面：保護者画面と共通のゆるかわトーン */
:root {
  --cream: #FFF8F2;
  --paper: #FFFEFB;
  --olive: #54622F;
  --olive2: #849454;
  --gold: #E7C56D;
  --ink: #4D493C;
  --sub: #8D8578;
  --pink: #F1A6A2;
  --pink-pale: #FFE4E1;
  --sky: #9BCDD4;
  --sky-pale: #DFF3F5;
  --yellow: #F1D57B;
  --yellow-pale: #FFF3C9;
  --mint: #A8CFB5;
  --mint-pale: #E1F2E5;
  --line: #E8DED1;
  --soft-green: #E2ECC9;
  --shadow: 0 5px 0 rgba(115, 105, 81, .06), 0 10px 24px rgba(85, 78, 61, .06);
  --bg: var(--cream);
  --text: var(--ink);
  --border: var(--line);
  --accent: var(--olive);
  --accent-dark: #3F4B25;
  --card: var(--paper);
}

html { background: var(--cream); }
body {
  color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic", system-ui, sans-serif;
  line-height: 1.55;
  background:
    radial-gradient(circle at 8% 4%, rgba(241,166,162,.13) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 9%, rgba(155,205,212,.14) 0 4px, transparent 5px),
    radial-gradient(circle at 6% 44%, rgba(241,213,123,.12) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 260px),
    var(--cream);
  background-size: 54px 54px, 72px 72px, 44px 44px, auto, auto;
  background-attachment: fixed;
}

button, input, textarea, select { font: inherit; }
input, textarea, select { min-width: 0; max-width: 100%; }
.app { width: min(100%, 680px); max-width: none; padding-bottom: 92px; }
.app-header { padding: 18px 16px 10px; }
.app-brand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.app-brand__mascot { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(84,98,47,.12)); }
.app-brand__eyebrow { margin: 0 0 1px; color: var(--olive2); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-align: left; }
.app-header h1 { color: var(--olive); font-size: 24px; letter-spacing: .025em; text-align: left; }
.app-header__note { margin-top: 2px; color: var(--sub); text-align: left; }
.firebase-auth {
  max-width: 520px;
  margin-top: 10px;
  border: 2px dashed #C8D5A8;
  border-radius: 20px;
  background: rgba(255,254,251,.9);
  box-shadow: 0 4px 0 rgba(132,148,84,.14);
}
.app-main { padding: 8px 16px 30px; }
.tab-panel { position: relative; animation: pane-in .22s ease both; }
@keyframes pane-in { from { opacity: .35; transform: translateY(4px); } }
.tab-panel::before { position: absolute; top: -2px; right: 3px; color: var(--pink); content: "★  ·  ✚"; font-size: 11px; font-weight: 900; letter-spacing: 5px; opacity: .72; pointer-events: none; }
.tab-panel h2 { color: var(--olive); font-size: 20px; letter-spacing: .025em; }
.list-heading { margin-top: 22px; color: var(--olive); font-size: 15px; letter-spacing: .015em; }

.btn { min-height: 42px; border-radius: 16px; font-weight: 700; transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease; }
.btn--primary, .btn--share { border: 0; background: var(--olive); color: #fff; box-shadow: 0 4px 0 #3F4B25; }
.btn--ghost { border: 2px solid var(--olive); background: #FFFDF8; color: var(--olive); box-shadow: 0 3px 0 #DDE5C8; }
.btn--danger { border: 2px solid #C98472; border-radius: 14px; background: #FFFDFB; box-shadow: 0 3px 0 #F0D2C9; }
.btn:active { opacity: .9; transform: translateY(3px); box-shadow: 0 1px 0 rgba(63,75,37,.5); }
.btn--small { min-height: 34px; }

.card, .form-card, .booking-admin-notifications {
  position: relative;
  overflow: hidden;
  border: 2px solid #E9DDCE;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.card::before, .form-card::before, .booking-admin-notifications::before {
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(184,168,144,.28);
  border-radius: 17px;
  content: "";
  pointer-events: none;
}
.card > *, .form-card > *, .booking-admin-notifications > * { position: relative; }
.booking-admin-notifications { border-color: #C9D9A8; background: linear-gradient(145deg, #FFF, #F7FAEF); }
.booking-notification.is-unread { border-left-color: var(--olive2); background: #F0F5E5; }
.badge { background: var(--pink); color: #694441; }
.badge--status { background: var(--soft-green); color: var(--olive); }
.badge--done { background: var(--olive2); color: #fff; }
.notice { border: 1.5px dashed #D8BE70; border-radius: 16px; background: var(--yellow-pale); color: #77683D; }
.empty-note { color: var(--sub); }

.form-card input, .form-card select, .form-card textarea,
.family-select-label select, .message-form textarea, .past-log-picker input[type="date"] {
  padding: 10px 11px;
  border: 1.5px solid #DED6C8;
  border-radius: 13px;
  background: #FFFDF9;
  color: var(--ink);
}
.form-card label, .family-select-label { color: var(--ink); font-weight: 700; }
.form-subsection-heading { margin: 20px 0 12px; padding: 12px 13px; border: 1.5px dashed #BFDDE1; border-radius: 16px; background: var(--sky-pale); }
.form-subsection-heading strong, .form-subsection-heading span { display: block; }
.form-subsection-heading strong { color: var(--olive); font-size: 13px; }
.form-subsection-heading span { margin-top: 2px; color: var(--sub); font-size: 10px; }
.family-children-editor {
  margin: 0;
  padding: 13px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fffdf8;
}
.family-children-editor > legend { padding: 0 6px; color: var(--olive); font-weight: 800; }
.family-child-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, .7fr) auto;
  align-items: end;
  gap: 9px;
  margin-top: 10px;
  padding: 11px;
  border: 1px dashed #cdd5b2;
  border-radius: 13px;
  background: #fff;
}
.family-child-row label { margin: 0; }
.family-child-row .btn-quiet { margin-bottom: 6px; }
.family-child-add { margin-top: 11px; }
@media (max-width: 620px) {
  .family-child-row { grid-template-columns: 1fr; }
  .family-child-row .btn-quiet { justify-self: end; margin-bottom: 0; }
}
.agreement-admin-status { border: 1.5px solid #DDD5C9; border-radius: 15px; background: #FFFDF8; }
.agreement-admin-status.is-done { border-color: #B9CAA6; background: var(--mint-pale); }
.agreement-admin-status.is-pending { border-color: #E3BDAF; background: var(--pink-pale); }

.bubble { border-color: #DED6C8; background: var(--paper); box-shadow: 0 3px 0 #E9E1D7; }
.bubble--parent { border-color: #C5D5A1; background: #EDF5DE; box-shadow: 0 3px 0 #D7E3BE; }
.trigger-btn { border: 2px solid #E8DCCE; border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.trigger-btn:nth-child(3n + 1) { background: var(--pink-pale); border-color: #F0C5C1; }
.trigger-btn:nth-child(3n + 2) { background: var(--sky-pale); border-color: #BFDDE1; }
.trigger-btn:nth-child(3n) { background: var(--yellow-pale); border-color: #E8D38B; }
/* #230 トイレ（7つ目）は淡いグリーンで、排尿・排便と見分けやすく */
.trigger-btn.trigger-btn--toilet { background: #E9F1DE; border-color: #C9DDB0; }

.family-info-readonly { padding: 16px; border: 2px dashed #B8CA8D; border-radius: 26px; background: linear-gradient(145deg, #FFF, #F5F9EA); box-shadow: 0 5px 0 rgba(132,148,84,.15), var(--shadow); }
.family-info-note { margin: 0; color: var(--sub); font-size: 11px; }
.family-info-updated { margin: 4px 0 14px; color: var(--olive); font-size: 11px; font-weight: 800; }
.family-info-view { display: grid; gap: 14px; }
.family-info-section > h4 { display: inline-block; margin: 0 0 8px; padding: 5px 10px; border-radius: 999px; background: var(--pink-pale); color: var(--olive); font-size: 13px; }
.family-info-section:nth-child(2) > h4 { background: var(--sky-pale); }
.family-info-section:nth-child(3) > h4 { background: var(--yellow-pale); }
.family-info-group { margin-bottom: 9px; padding: 13px; border: 1.5px solid var(--line); border-radius: 18px; background: rgba(255,254,251,.94); }
.family-info-group:last-child { margin-bottom: 0; }
.family-info-group h5 { margin: 0 0 5px; color: var(--olive); font-size: 12px; }
.family-info-details { margin: 0; }
.family-info-details > div { display: grid; grid-template-columns: minmax(118px, .4fr) 1fr; gap: 12px; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.family-info-details > div:last-child { border-bottom: 0; }
.family-info-details dt { color: var(--sub); font-size: 10px; font-weight: 700; }
.family-info-details dd { min-width: 0; margin: 0; color: var(--ink); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; white-space: pre-wrap; }
.family-info-details dd.is-missing { color: #A49B8F; font-weight: 500; }

/* #117 シッターによる代理入力フォーム（2026-08-26）。閲覧画面と同じ枠の中に出す。 */
.family-info-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.family-info-edit { display: grid; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 2px dashed #B8CA8D; }
.family-info-edit .family-info-group label { display: block; margin-bottom: 10px; color: var(--sub); font-size: 10px; font-weight: 700; }
.family-info-edit .family-info-group label:last-child { margin-bottom: 0; }
.family-info-edit .family-info-group input,
.family-info-edit .family-info-group textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #FFFDF8;
  color: var(--ink); font-size: 12px; font-weight: 700; font-family: inherit;
}
.family-info-edit .family-info-group select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #FFFDF8;
  color: var(--ink); font-size: 12px; font-weight: 700; font-family: inherit;
}
.family-info-edit .family-info-group label.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.family-info-edit .family-info-group label.checkbox-label input { width: auto; margin-top: 0; }
.family-info-edit .family-info-group label[hidden] { display: none; }

/* #170（2026-08-26）：手打ちを減らすための選択式。保護者用フォームと同じ選択肢を出す。 */
.family-info-hint {
  display: block; margin-top: 2px;
  color: #A49B8F; font-size: 10px; font-weight: 500; line-height: 1.5;
}
.family-info-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.family-info-choice {
  display: inline-flex !important; align-items: center; gap: 6px;
  margin: 0 !important; padding: 7px 11px;
  border: 1.5px solid var(--line); border-radius: 999px; background: #FFFDF8;
  color: var(--ink); font-size: 11px; font-weight: 700; cursor: pointer;
}
.family-info-choice:has(input:checked) { border-color: var(--olive2); background: #F1F5E6; }
.family-info-choice input {
  flex: 0 0 auto;
  width: 16px !important; height: 16px; margin: 0 !important; padding: 0 !important;
  accent-color: var(--olive);
}

.family-info-note.is-caution { padding: 9px 11px; border-radius: 12px; background: var(--pink-pale); color: var(--olive); font-weight: 700; }


.tab-nav { max-width: 680px; padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 2px solid var(--line); background: rgba(255,254,251,.97); box-shadow: 0 -6px 24px rgba(86,76,58,.07); backdrop-filter: blur(12px); }
.tab-nav__btn {
  gap: 1px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--sub);
  -webkit-appearance: none;
  appearance: none;
}
.tab-nav__icon { display: block; width: 46px; height: 46px; border: 1.5px solid transparent; border-radius: 50%; object-fit: cover; background: #FFF9EA; box-shadow: 0 3px 0 #E7DCC7; transition: transform .16s ease, box-shadow .16s ease; }
.tab-nav__btn.is-active { color: var(--olive); font-weight: 800; }
.tab-nav__btn.is-active .tab-nav__icon { border-color: #839552; box-shadow: 0 4px 0 #BACA93; transform: translateY(-2px); }
.tab-nav__btn:focus { outline: none; }
.tab-nav__btn:focus-visible { outline: none; }
.tab-nav__btn:focus-visible .tab-nav__icon {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}
.toast { background: rgba(62,66,48,.92); box-shadow: 0 8px 24px rgba(62,66,48,.2); }

@media (max-width: 375px) {
  .app-main { padding-right: 12px; padding-left: 12px; }
  .app-header { padding-right: 12px; padding-left: 12px; }
  .app-brand__mascot { width: 62px; height: 62px; }
  .app-header h1 { font-size: 21px; }
  .app-brand__eyebrow { font-size: 9px; }
  .trigger-grid { gap: 7px; }
  .trigger-btn { padding: 13px 4px 11px; }
  .message-form { flex-wrap: wrap; }
  .message-form textarea { flex: 1 1 100%; }
  .family-info-readonly { padding: 13px; }
  .family-info-details > div { grid-template-columns: minmax(98px, .42fr) 1fr; gap: 8px; }
  .tab-nav__icon { width: 41px; height: 41px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}


/* 見出しのアイコン（2026-08-31：絵文字をやめてCodex製アイコンに統一）
   ⚠️フッターのタブアイコンより目立たせない（ゆかり指示）＝小さめ＋少し透かす */
.head-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin-right: 0.2em;
  flex: none;
  opacity: 0.72;
  mix-blend-mode: multiply;
}
.head-icon--btn {
  width: 1.05em;
  height: 1.05em;
  opacity: 0.8;
}
.notice--sub {
  margin-top: -0.4em;
  font-size: 0.82rem;
  opacity: 0.85;
}


/* 予約のお知らせ（2026-08-31：依頼者・日時・ひとことの3行に整理） */
.notification-row {
  display: flex;
  gap: 0.6em;
  margin: 0.25em 0;
  line-height: 1.6;
}
.notification-row__label {
  flex: none;
  min-width: 4.5em;
  opacity: 0.7;
  font-size: 0.9em;
}
.notification-extra {
  margin-top: 0.5em;
  font-size: 0.88em;
  opacity: 0.8;
  white-space: pre-wrap;
}


/* 絵本（複数冊）2026-08-31 */
.book-row {
  border: 1px dashed var(--line, #E4E1D8);
  border-radius: 14px;
  padding: 12px 12px 10px;
  margin-bottom: 10px;
}
.book-row + .book-row { margin-top: 0; }
.book-row__remove {
  margin-top: 6px;
  color: #A87658;
}
.book-link { display: inline-block; margin-top: 4px; }

.book-row__preview {
  display: block;
  max-width: 160px;
  max-height: 160px;
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid var(--line, #E4E1D8);
}

/* 記録の時刻はあとから直せる（2026-08-31） */
.event-row__time-input {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  background: #FFFDF8;
  border: 1px solid var(--line, #E4E1D8);
  border-radius: 10px;
  padding: 3px 8px;
  min-width: 88px;
}

/* #206 共有ずみの日報ビューア */
.shared-reports { margin-bottom: 24px; }
.shared-reports__month {
  display: block;
  margin-bottom: 10px;
  font-size: .9rem;
  color: var(--text-sub, #746D64);
}
.shared-reports__month input {
  display: block;
  margin-top: 4px;
}
.shared-report-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.shared-report-card__sub {
  font-size: .84rem;
  color: var(--text-sub, #746D64);
}
.shared-report-detail {
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px;
  background: var(--card, #fff);
  border: 1px solid rgba(162, 185, 158, 0.3);
}
.shared-report-detail h4 { margin: 0 0 4px; }
.shared-report-detail h5 { margin: 14px 0 4px; font-size: .92rem; }
.shared-report-detail ul { margin: 0; padding-left: 1.2em; }
.shared-report-detail li { margin-bottom: 4px; line-height: 1.7; }
.shared-report-detail__meta {
  margin: 0;
  font-size: .84rem;
  color: var(--text-sub, #746D64);
}
.shared-report-detail__letter {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.8;
}


/* 日報タブ：伝達モード（1件1行のコンパクト一覧） */
.log-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.event-sheet {
  padding: 6px 14px;
}

.event-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0 9px 10px;
  border-bottom: 1px solid rgba(61, 84, 56, 0.10);
  border-left: 3px solid transparent;
}

.event-line:last-child { border-bottom: none; }

.event-line--shokuji { border-left-color: #E9C9BE; }
.event-line--milk { border-left-color: #F2D9E2; }
.event-line--nyou { border-left-color: #D6E4CE; }
.event-line--toilet { border-left-color: #DDE9D2; }
.event-line--ben { border-left-color: #DECDB8; }
.event-line--nemuru { border-left-color: #CFDAE8; }
.event-line--kishou { border-left-color: #F1E5B8; }

.event-line__time {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  min-width: 46px;
  flex: none;
}

.event-line .tag { flex: none; }

.event-line__detail {
  font-size: 13px;
  color: #5C6E56;
  white-space: pre-wrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* 2026-09-01 初期化失敗の警告（app.js の catch から出す。真っ白で"消えた"と誤認させない） */
.app-init-error {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 14px 16px;
  background: #b5473a;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* #234: the sender's own messages are on the right; metadata stays outside. */
.thread .message-group { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.thread .message-group.is-self { align-items: flex-end; }
.thread .bubble { align-self: auto; max-width: 80%; overflow-wrap: anywhere; border-radius: 18px 18px 18px 4px; }
.thread .is-self .bubble { border-radius: 18px 18px 4px 18px; }

.tab-nav__btn { position: relative; }
.unread-badge { position: absolute; top: 2px; right: max(3px, calc(50% - 30px)); display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: var(--olive); color: var(--paper, #FFFEFB); border: 2px solid var(--paper, #FFFEFB); font-size: 10px; font-weight: 800; line-height: 1; }
.unread-badge[hidden] { display: none; }