/*
 * ヌリコヨミ 画面の見た目（値は tokens.css の変数を使う）
 * 1d「スイスの編集デザイン」: 角丸なし、影なし。区切りは罫線と余白、優先順位は文字の大きさと太さで作る。
 */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-ja);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---- ヘッダー ---- */
.app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 var(--gutter);
  border-bottom: var(--rule-width) solid var(--color-rule);
}
.app-name { font-weight: 700; letter-spacing: .04em; }

.switcher summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min);
  font-weight: 700;
  letter-spacing: .04em;
  list-style: none;
  cursor: pointer;
}
.switcher summary::-webkit-details-marker { display: none; }
.switcher summary::after { content: "▼"; font-size: 8px; font-weight: 400; }
.switcher-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-bg);
  border-bottom: var(--rule-width) solid var(--color-rule);
}
.switcher-menu a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--gutter);
  border-top: var(--rule-soft-width) solid var(--color-rule-soft);
  text-decoration: none;
}
.switcher-menu a[aria-current] { border-left: 3px solid var(--color-signal); font-weight: 700; }

/* ---- グループのメニュー ---- */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--rule-width) solid var(--color-rule);
}
.tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: none;
  border-right: var(--rule-soft-width) solid var(--color-rule-soft);
  border-bottom: 3px solid transparent;
}
.tabs a:last-child { border-right: 0; }
.tabs a[aria-current="page"] { color: var(--color-ink); font-weight: 700; border-bottom-color: var(--color-ink); }

/* ---- ページ ---- */
.page { max-width: 560px; margin: 0 auto; padding-bottom: 48px; }

/* PC で開いたとき: PC 専用レイアウトは v1 のスコープ外。画面全体をスマホ幅で中央に寄せ、左右を罫線で区切る（Q18） */
@media (min-width: 640px) {
  html { background: var(--color-surface); }
  body {
    max-width: 560px;
    min-height: 100vh;
    margin: 0 auto;
    border-left: var(--rule-width) solid var(--color-rule);
    border-right: var(--rule-width) solid var(--color-rule);
  }
}
.section-heading {
  margin: 0;
  padding: 20px var(--gutter) 8px;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: .08em;
  border-bottom: var(--rule-width) solid var(--color-rule);
}
.text-danger { color: var(--color-danger); font-weight: 700; }
.page-title {
  margin: 0;
  padding: 18px var(--gutter) 12px;
  font-size: var(--text-heading);
  font-weight: 700;
  border-bottom: var(--rule-width) solid var(--color-rule);
}
.page-title .num { font-weight: 400; color: var(--color-muted); }
.section { border-top: var(--rule-width) solid var(--color-rule); margin-top: 24px; }
.section-title {
  margin: 0;
  padding: 14px var(--gutter) 8px;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: .08em;
}
.note { margin: 0; padding: 12px var(--gutter); color: var(--color-muted); }
.note--ink { color: var(--color-ink); }
.note--error { color: var(--color-danger); }

.flash {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0;
  padding: 10px var(--gutter);
  background: var(--color-surface);
  border-left: 3px solid var(--color-ink);
  border-bottom: var(--rule-soft-width) solid var(--color-rule-soft);
}
.flash--error { border-left-color: var(--color-danger); color: var(--color-danger); }

/* ---- ログイン・登録 ---- */
.auth-head { padding: 32px var(--gutter) 16px; border-bottom: var(--rule-width) solid var(--color-rule); }
.brand { margin: 0; font-size: var(--text-caption); color: var(--color-muted); letter-spacing: .2em; }
.auth-title { margin: 4px 0 0; font-size: var(--text-title); font-weight: 700; line-height: 1.2; }
.form-error { margin: 0; padding: 10px var(--gutter); color: var(--color-danger); border-left: 3px solid var(--color-danger); }

/* ---- フォーム: 1d の「ラベル｜値」の2列 ---- */
.field {
  display: grid;
  grid-template-columns: 96px 1fr;
  border-bottom: var(--rule-soft-width) solid var(--color-rule-soft);
}
.field > label,
.field-label {
  padding: 14px 8px 12px var(--gutter);
  font-size: var(--text-caption);
  color: var(--color-muted);
  border-right: var(--rule-soft-width) solid var(--color-rule-soft);
}
.field-body { min-width: 0; padding: 6px var(--gutter) 8px; }
.field-text { padding-top: 12px; overflow-wrap: anywhere; }
.field--stack { grid-template-columns: 1fr; }
.field--stack > .field-label { border-right: 0; padding-bottom: 0; }
.input {
  width: 100%;
  min-height: var(--tap-min);
  padding: 6px 0;
  font-size: var(--text-input);
  background: transparent;
  border: 0;
  border-bottom: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius);
}
.input:focus { outline: none; border-bottom-width: 2px; }
.required { color: var(--color-signal); margin-left: 2px; }
.password-box { display: flex; align-items: flex-end; gap: 8px; }
.password-box .input { flex: 1; min-width: 0; }
.password-toggle {
  flex: none;
  min-width: 52px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.password-toggle[aria-pressed="true"] { background: var(--color-ink); color: var(--color-bg); }
.hint { margin: 4px 0 0; font-size: var(--text-caption); color: var(--color-muted); }
.error { margin: 4px 0 0; font-size: var(--text-caption); color: var(--color-danger); }

/* ---- ボタン ---- */
.actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px var(--gutter); }
.actions--stack { flex-direction: column; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.button--primary { background: var(--color-primary-bg); color: var(--color-primary-ink); border-color: var(--color-primary-bg); }
.button--danger { color: var(--color-danger); border-color: var(--color-danger); }
.button--quiet { border-color: transparent; font-weight: 400; color: var(--color-muted); text-decoration: underline; }
.button--block { width: 100%; }
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 4px;
  font-size: 12px;
  color: var(--color-muted);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}
.link-danger { color: var(--color-danger); }

/* ---- 一覧 ---- */
.list { margin: 0; padding: 0; list-style: none; }
.list-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 6px var(--gutter);
  border-bottom: var(--rule-soft-width) solid var(--color-rule-soft);
}
.list-row--link { display: flex; }
.list-row--link a { display: flex; align-items: center; min-height: var(--tap-min); }
.list-title { font-weight: 700; }
.list-sub { font-size: var(--text-caption); color: var(--color-muted); }
.row-link { display: flex; align-items: center; min-height: var(--tap-min); padding: 0 4px; color: var(--color-muted); }
.row-actions { display: flex; align-items: center; gap: 4px; }
.role {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 10px;
  border: var(--rule-width) solid var(--color-rule);
  vertical-align: 2px;
}

/* ---- 色 ---- */
.bar { display: inline-block; width: 18px; height: var(--bar-height); background: var(--cat); }
.bar--tall { width: var(--bar-height); height: 26px; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
  background: var(--cat);
  /* 横に長い1文字（﷽ など）でも、四角からはみ出さない */
  overflow: hidden;
}
.avatar--link { width: 32px; height: 32px; font-size: 13px; }
/* 白い文字が読みにくい明るい色は、濃い文字にする（ライト） */
.avatar.cat-orange,
.avatar.cat-yellow,
.avatar.cat-sky,
.avatar.cat-lime { color: #0a0a0a; }
/* ダークモードの淡い色の四角には濃い文字（日のマスの小さな四角も同じ） */
@media (prefers-color-scheme: dark) {
  .avatar,
  .mini-avatar { color: #0c0b0d; }
}

.avatars, .legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 4px var(--gutter) 16px; list-style: none; }
.avatars li, .legend li { display: flex; align-items: center; gap: 8px; }

.palette {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 6px;
  border-top: var(--rule-soft-width) solid var(--color-rule-soft);
  border-left: var(--rule-soft-width) solid var(--color-rule-soft);
}
.palette label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: var(--tap-min);
  padding: 8px 0 6px;
  font-size: 10.5px;
  border-right: var(--rule-soft-width) solid var(--color-rule-soft);
  border-bottom: var(--rule-soft-width) solid var(--color-rule-soft);
  cursor: pointer;
}
.palette input { position: absolute; opacity: 0; pointer-events: none; }
.swatch { display: block; width: 24px; height: 24px; background: var(--cat); }
.palette input:checked ~ .swatch { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.palette input:checked ~ .palette-name { font-weight: 700; }
.palette input:focus-visible ~ .swatch { outline: 2px dashed var(--color-signal); outline-offset: 2px; }

.segmented { display: inline-flex; margin-top: 4px; border: var(--rule-width) solid var(--color-rule); }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: flex; align-items: center; min-height: 36px; padding: 0 16px; }
.segmented label + label span { border-left: var(--rule-width) solid var(--color-rule); }
.segmented input:checked + span { background: var(--color-ink); color: var(--color-bg); }
.segmented input:focus-visible + span { outline: 2px dashed var(--color-signal); outline-offset: -4px; }

/* ---- 招待 ---- */
.invitation { padding: 12px var(--gutter); border-bottom: var(--rule-soft-width) solid var(--color-rule-soft); }
.url-box { display: flex; border: var(--rule-width) solid var(--color-rule); }
.url-box input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap-min);
  padding: 0 8px;
  font-family: var(--font-num);
  font-size: 13px;
  background: transparent;
  border: 0;
}
.url-box button {
  padding: 0 14px;
  font-weight: 700;
  background: var(--color-primary-bg);
  color: var(--color-primary-ink);
  border: 0;
  cursor: pointer;
}
.invitation-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: var(--text-caption);
  color: var(--color-muted);
}
.invited-group { border-bottom: var(--rule-soft-width) solid var(--color-rule-soft); }
.invited-group .field-label { display: block; border-right: 0; padding-bottom: 0; }
.invited-group-name { margin: 0; padding: 0 var(--gutter) 16px; font-size: var(--text-title); font-weight: 700; line-height: 1.3; }

/* ---- 月表示カレンダー（1d: 大きな月の数字、罫線の表、セル幅いっぱいのバー） ---- */
.month-head { display: flex; align-items: flex-end; gap: 12px; padding: 12px var(--gutter) 10px; }
.month-number { margin: 0; font-size: var(--text-display); font-weight: 500; line-height: .86; letter-spacing: -.04em; }
.month-title { margin: 0; padding-bottom: 4px; font-size: 11px; font-weight: 400; line-height: 1.35; color: var(--color-muted); }
.month-title .num { font-size: 15px; color: var(--color-ink); }
.month-nav { display: flex; margin-left: auto; border: var(--rule-width) solid var(--color-rule); }
.month-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  height: var(--tap-min);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.month-nav a + a { border-left: var(--rule-width) solid var(--color-rule); }
.month-nav [data-month-prev],
.month-nav [data-month-next] { font-size: 16px; font-weight: 400; }

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 10.5px;
  color: var(--color-muted);
  border-top: var(--rule-width) solid var(--color-rule);
  border-bottom: var(--rule-width) solid var(--color-rule);
}
.weekdays span { padding: 3px 0 2px 5px; }
.weekdays .is-sun { color: var(--color-sunday); }
.weekdays .is-sat { color: var(--color-saturday); }

/* 縦のスクロールはブラウザに任せ、横の動きは JS でスワイプとして扱う */
.month-grid { touch-action: pan-y; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: var(--rule-width) solid var(--color-rule); }
.cell {
  position: relative;
  display: block;
  min-width: 0;
  min-height: var(--cell-height);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border-right: var(--rule-soft-width) solid var(--color-rule-soft);
  -webkit-tap-highlight-color: transparent;
}
.cell:last-child { border-right: 0; }
.cell.is-selected { background: var(--color-selected-bg); }
.cell.is-selected::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--color-signal); }
.cell-head { display: flex; align-items: center; gap: 1px; height: 23px; padding: 3px 0 0 4px; }
.day-number { padding: 0 3px; font-size: 15px; font-weight: 500; line-height: 19px; }
.cell.is-sun .day-number,
.day-list-weekday.is-sun { color: var(--color-sunday); }
.cell.is-sat .day-number,
.day-list-weekday.is-sat { color: var(--color-saturday); }
.cell.is-outside .day-number { color: var(--color-outside); }
.cell.is-today .day-number { background: var(--color-today-bg); color: var(--color-today-ink); }
.holiday-mark { font-size: 9px; color: var(--color-sunday); }

.lanes { display: flex; flex-direction: column; gap: var(--bar-gap); padding-top: 4px; }
.segment { display: block; height: var(--bar-height); margin: 0 3px; background: var(--cat); }
/* 複数日の予定は、つながる側の余白をなくして隣の日のバーと1本に見せる */
.segment.continues-left { margin-left: 0; }
.segment.continues-right { margin-right: 0; }
/* ほかのメンバーだけの予定は斜線（誰の予定かを形で示す模様。仕様確定ログ Q13） */
.segment.is-other,
.event-bar.is-other {
  border: 1px solid var(--cat);
  background: repeating-linear-gradient(135deg, var(--cat) 0 1.5px, transparent 1.5px 4px);
}
/* 削除済みカテゴリの予定は中空のグレー。自分の予定は実線、ほかのメンバーの予定は破線で区別を残す */
.segment.is-deleted,
.event-bar.is-deleted { background: transparent; border: 1.5px solid var(--color-deleted); }
.segment.is-deleted.is-other,
.event-bar.is-deleted.is-other { border-style: dashed; }
.segment.is-empty { visibility: hidden; }
.more { padding-left: 5px; font-size: 10px; line-height: 1; }
/* その日の予定の参加者の1文字（アイコンの色の15px の四角）。スマホ幅のマス（約55px）に1行3人、6人分で2行（Q25〜Q28） */
.cell-people { display: grid; grid-template-columns: repeat(3, 15px); gap: 2px; padding: 4px 2px 0; }
.mini-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: var(--cat);
}
.mini-avatar.cat-orange,
.mini-avatar.cat-yellow,
.mini-avatar.cat-sky,
.mini-avatar.cat-lime { color: #0a0a0a; }
.cell-more-people { display: block; padding: 1px 2px 0; font-size: 8px; line-height: 1.1; color: var(--color-muted); white-space: nowrap; }
.input--icon-char { width: 4em; font-size: 22px; text-align: center; }

.holiday-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 0;
  padding: 6px var(--gutter);
  font-size: 10.5px;
  color: var(--color-muted);
  border-bottom: var(--rule-soft-width) solid var(--color-rule-soft);
}

/* ---- 日の予定一覧 ---- */
.day-list { background: var(--color-surface); border-bottom: var(--rule-width) solid var(--color-rule); }
.day-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px var(--gutter) 10px;
  border-bottom: var(--rule-width) solid var(--color-rule);
}
.day-list-date { margin: 0; font-size: var(--text-title); font-weight: 500; line-height: 1; }
.day-list-weekday { font-size: 12px; font-weight: 700; }
.day-list-holiday { font-size: 11px; color: var(--color-sunday); }
.day-list-count { margin-left: auto; font-size: 11px; color: var(--color-muted); }
.tag { padding: 2px 6px; font-size: 10px; background: var(--color-ink); color: var(--color-bg); }

.event {
  display: grid;
  grid-template-columns: 72px var(--bar-height) 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 10px var(--gutter);
  border-bottom: var(--rule-soft-width) solid var(--color-rule-soft);
}
.event-people { display: flex; justify-content: flex-end; gap: 2px; }
.event-people .avatar { width: 22px; height: 22px; font-size: 10px; }
.event-bar { display: block; width: var(--bar-height); height: 26px; background: var(--cat); }
.event-body { min-width: 0; }
.event-title { display: block; font-weight: 700; overflow-wrap: anywhere; }
.event.is-deleted .event-title { color: var(--color-muted); }
.event-sub { display: block; font-size: var(--text-caption); color: var(--color-muted); }
.event-time { font-size: 12.5px; white-space: nowrap; }
a.event { color: inherit; text-decoration: none; }
a.event:active { background: var(--color-bg); }
.day-actions { border-top: var(--rule-soft-width) solid var(--color-rule-soft); }
.day-actions .button { flex: 1; }
.paint-mark { display: inline-block; width: 12px; height: 12px; margin-right: 8px; background: var(--color-signal); }

/* ---- 汎用 ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.flash form { margin: 0; }
.flash-action {
  min-height: 36px;
  padding: 0 14px;
  font-weight: 700;
  background: var(--color-primary-bg);
  color: var(--color-primary-ink);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.back-link { margin: 0; padding: 10px var(--gutter); font-size: 12px; border-bottom: var(--rule-soft-width) solid var(--color-rule-soft); }
.back-link a { color: var(--color-muted); }

/* ---- 選択肢（カテゴリのチップ・繰り返し・曜日・参加者） ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { position: relative; cursor: pointer; }
.chip input, .choices input { position: absolute; opacity: 0; pointer-events: none; }
.chip-body {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 12.5px;
  border: var(--rule-width) solid var(--color-rule-soft);
}
.chip-swatch { display: block; width: 10px; height: 10px; background: var(--cat); }
.chip input:checked + .chip-body { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); font-weight: 700; }
.chip input:focus-visible + .chip-body,
.choices input:focus-visible + span { outline: 2px dashed var(--color-signal); outline-offset: 2px; }

.choices {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
  border-top: var(--rule-width) solid var(--color-rule-soft);
  border-left: var(--rule-width) solid var(--color-rule-soft);
}
.choices label { position: relative; cursor: pointer; }
.choices span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 12.5px;
  border-right: var(--rule-width) solid var(--color-rule-soft);
  border-bottom: var(--rule-width) solid var(--color-rule-soft);
}
.choices input:checked + span { background: var(--color-ink); color: var(--color-bg); }
.choices input:disabled + span { color: var(--color-disabled); cursor: not-allowed; }
.choices--days span { justify-content: center; width: 40px; padding: 0; }
.choices--days .is-sun span { color: var(--color-sunday); }
.choices--days .is-sat span { color: var(--color-saturday); }
.choices--days input:checked + span { color: var(--color-bg); }
.choices--people span { min-height: var(--tap-min); padding-left: 6px; }
.choices--people .avatar { width: 22px; height: 22px; font-size: 10px; }
.choices--people input:disabled:checked + span { color: var(--color-bg); cursor: default; }

.repeat-detail { margin-top: 12px; }
.repeat-detail[hidden] { display: none; }
.repeat-detail-label { display: block; font-size: var(--text-caption); color: var(--color-muted); }
.repeat-end-inputs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 6px; }
.repeat-end-inputs .input { width: auto; }
.count-input { display: inline-flex; align-items: flex-end; gap: 4px; }
.count-input .input { width: 72px; }
.time-range { display: flex; align-items: flex-end; gap: 8px; margin-top: 6px; }
.time-range .input { width: auto; min-width: 0; flex: 1; }
.input:disabled { color: var(--color-disabled); border-bottom-style: dashed; }
.textarea { min-height: 72px; resize: vertical; line-height: var(--leading-body); }

/* ---- 予定の詳細 ---- */
.detail-head { display: flex; align-items: stretch; gap: 12px; padding: 16px var(--gutter) 14px; border-bottom: var(--rule-width) solid var(--color-rule); }
.bar--head { width: var(--bar-height); height: auto; min-height: 36px; }
.detail-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.detail-category { margin: 2px 0 0; font-size: var(--text-caption); color: var(--color-muted); }
.avatars--inline { padding: 0; }
/* 予定の詳細の場所。タップで Google マップを開く（Q29・Q30） */
.map-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.map-link-note { margin-left: 8px; font-size: var(--text-caption); color: var(--color-muted); white-space: nowrap; }

/* ---- 繰り返しの3択 ---- */
.scope-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px var(--gutter);
  color: inherit;
  text-decoration: none;
  border-bottom: var(--rule-soft-width) solid var(--color-rule-soft);
}
.scope-choice:active { background: var(--color-surface); }

/* ---- 塗りモード（1d: 黒い帯でモードの切り替わりを示し、塗った日はカテゴリ色のベタに反転） ---- */
.paint-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 12px var(--gutter);
  background: var(--color-ink);
  color: var(--color-bg);
}
.paint-bar .paint-mark { margin-right: 0; }
.paint-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.paint-help { margin-left: auto; font-size: 11px; opacity: .75; }
/* 塗りモード: 長押しで文字が選ばれたり、メニューが出たりしないようにする（なぞって範囲選択するため。Q34） */
.paint .cell { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* なぞっているあいだと「なぞって選ぶ」のあいだは、指の動きをスクロールに使わない */
.paint.is-dragging .month-grid,
.paint--drag .month-grid { touch-action: none; }
.paint.is-dragging .month-grid { box-shadow: inset 0 0 0 2px var(--color-signal); }
.paint-drag-toggle.is-on { color: var(--color-ink); font-weight: 700; text-decoration: none; border-color: var(--color-ink); }

button.cell {
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: var(--rule-soft-width) solid var(--color-rule-soft);
  cursor: pointer;
}
.paint-stamp { display: none; }
.paint .cell.is-painted { background: var(--cat); box-shadow: inset 0 0 0 2px var(--color-ink); }
.paint .cell.is-painted .lanes,
.paint .cell.is-painted .cell-people,
.paint .cell.is-painted .cell-more-people { visibility: hidden; }
.paint .cell.is-painted .day-number { color: #ffffff; }
.paint.cat-orange .cell.is-painted .day-number,
.paint.cat-yellow .cell.is-painted .day-number,
.paint.cat-sky .cell.is-painted .day-number,
.paint.cat-lime .cell.is-painted .day-number { color: #0a0a0a; }
.paint .cell.is-painted .paint-stamp { position: absolute; right: 4px; bottom: 3px; display: block; font-size: 10px; font-weight: 700; color: inherit; }
@media (prefers-color-scheme: dark) {
  .paint .cell.is-painted .day-number { color: #0c0b0d; }
}
.paint-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--color-surface);
  border-top: var(--rule-width) solid var(--color-rule);
}
.paint-label { margin: 0; padding: 10px var(--gutter) 0; font-size: var(--text-caption); color: var(--color-muted); }
.paint-categories { flex-wrap: nowrap; overflow-x: auto; padding: 6px var(--gutter) 10px; }
.paint-categories .chip { flex: none; }
.paint-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px var(--gutter) 12px;
  border-top: var(--rule-soft-width) solid var(--color-rule-soft);
}
.paint-count { margin: 0; font-size: 13px; }
.paint-count > .num:first-child { font-size: 22px; font-weight: 500; }
.paint-dates { display: block; font-size: 11px; color: var(--color-muted); }
.paint-buttons { display: flex; gap: 8px; margin-left: auto; }
.paint-error { padding: 8px var(--gutter) 0; }
.button:disabled { opacity: .4; cursor: not-allowed; }