/* MINE 予定（groupware 段階 G2）── 滞在・読み書き型の器と、S2／S3／お知らせの部品
   正本:
     * groupware/DESIGN.md §3.3（S2）・§3.4（S3）・§4.1〜4.7（トークン3段）・§5.5・§5.6・§5.10〜5.13
     * 2026-09-13／14 の裁定（R1・R6・R10・R12・S1・S5・S6・S9・m2・m6）
     * 文字組みは DESIGN §5.0（＝highdef-tool.md §11.4）
   読み込み順: tokens.css → styles.css → このファイル。**上の2つの宣言は1行も書き換えない。**
   ここに足すのは「まだ存在しない名前」と「新しいクラス」だけ。 */

/* ==========================================================================
   1. DESIGN §4.2 のうち、tokens.css・styles.css にまだ無い名前だけを足す
   ========================================================================== */
:root {
  --panel-line: #D9D2C7;     /* パネルの縁（白の上 1.50）。操作しないものにだけ使う（R1） */
  --radius-panel: 6px;
  --shadow-panel: 0 1px 2px rgba(42, 39, 36, .06);
  --gutter: 8px;             /* 列と列の溝。滞在型はパネル間もこれ */

  --fs-read-sp: 16px;        /* 滞在・読み書き型のスマホ base */
  --fs-read: 15px;           /* 滞在・読み書き型の PC base */
  --lh-read: 1.5;

  --state-unread: #3F456F;
  --read-max: 610px;
  --container-tablet: 720px;
  --z-sheet: 30;

  /* 器の既定（§4.2 T2。.screen の外の部品＝シートが参照する。§4.3 と同値） */
  --face: var(--surface);
  --face-line: transparent;
  --face-radius: var(--radius);
  --face-shadow: var(--shadow-card);
  --row: 60px;
}

/* ==========================================================================
   2. 書式は器に付けたクラスで切る（§4.1）。色は1つも上書きしない（R1）
   ========================================================================== */
.fmt-glance {
  --face: var(--surface);
  --face-line: transparent;          /* カードは罫なし（本番 .s-card と同じ・裁定 S4） */
  --face-radius: var(--radius);      /* 10px */
  --face-shadow: var(--shadow-card); /* 2段 */
  --row: 60px;                       /* 行の高さ。MINE 本番の .s-kv（R12） */
}
/* 上書きは §4.4 の8行だけ。色は1つも触らない */
.fmt-dwell {
  --face: var(--surface);
  --face-line: var(--panel-line);
  --face-radius: var(--radius-panel);
  --face-shadow: var(--shadow-panel);
  --row: var(--row-h);
  --fs-body-sp: var(--fs-read-sp);
  --fs-body: var(--fs-read);
  --lh-ui: var(--lh-read);
}

/* ==========================================================================
   3. 器（§4.6）。ヘッダ・下タブ・左ナビはこの外（§4.1 の第2規則）
   ========================================================================== */
.app { display: block; background: var(--bg); }
.app .screen { display: block; }
.gw-wrap { padding: 0 16px; }
/* 本文の下端の逃げ。下タブは body.has-tabbar が持つので、ここは器の余白だけ */
.gw-body { padding-bottom: 24px; }

/* ---- S2・お知らせのヘッダは本番の .s-head をそのまま使う。右端の操作だけ足す ---- */
.s-head .gw-acts { display: flex; align-items: center; gap: 4px; margin-right: -8px; }
.gw-iconbtn {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: var(--radius-sm);
  color: var(--ink-strong); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gw-iconbtn:hover { background: var(--surface-sunken); }
.gw-ico { flex: none; display: block; }

/* 「全員／自分だけ」の切替（FR-03）。操作部品なので文字組みの規則の適用除外（§5.0-3） */
.gw-seg { display: inline-flex; border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.gw-seg button {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-sub);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.gw-seg button + button { border-left: 0; }
.gw-seg button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }

/* アバターの寸法（§5.12・裁定 S8）。styles.css の .mine-av は 28px を既定に持つので、
   22px のときだけ上書きする。色で人を分けない */
.mine-av.av-22 { width: 22px; height: 22px; font-size: 11px; }
.mine-av.av-28 { width: 28px; height: 28px; font-size: 13px; }

/* ==========================================================================
   4. パネル（滞在・読み書き型の器）
   ========================================================================== */
.panel {
  background: var(--face);
  border: 1px solid var(--face-line);
  border-radius: var(--face-radius);
  box-shadow: var(--face-shadow);
  overflow: hidden;
}
.panel + .panel { margin-top: var(--gutter); }

/* 滞在型の列ヘッダ・帯（48px。主役の面は置かない） */
.dband {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 0 16px; display: flex; align-items: center; gap: 8px; min-height: var(--row-h);
}
.dband .nm { font-size: 17px; font-weight: 700; color: var(--ink-strong); }
.dband .t2 { font-size: 13px; font-weight: 400; color: var(--ink-sub); }
.dband .lbl { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--ink-sub); }
.dband.wide { padding: 8px 16px; flex-wrap: wrap; min-height: 56px; }
/* PC はヘッダ帯を出さない（styles.css の PC 規則）ので、画面名はパネルの見出し行が持つ。
   スマホではヘッダが同じ語を出しているため、この行は描かない */
.dband.pc-only { display: none; }
.dband .pill-meta { margin-left: auto; }

/* 節と節の間（§3.1。一瞥型はカード間 24px・滞在型はパネル間 8px） */
.gw-gap-t { margin-top: 16px; }
.gw-gap-t24 { margin-top: 24px; }

/* ==========================================================================
   5. S2 スマホ — 日付ストリップ（全幅の帯 116px。裁定 R6・m2）
      内訳: padding 10 ／ 月と「今日へ」20 ／ 曜日 16 ／ 日 44 ／ サマリ 20 ／ padding 6
   ========================================================================== */
/* 縁も角丸も付けない（DESIGN §3.3。溝が効くのは列が2本以上ある PC だけ） */
.dstrip { background: var(--surface); padding: 10px 16px 6px; min-height: 116px; }
.dstrip .bigrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 20px;
}
.dstrip .lbl { font-size: 13px; font-weight: 800; letter-spacing: .06em; line-height: 20px; color: var(--ink-sub); }
.dstrip .strip { display: grid; grid-template-columns: repeat(7, 1fr); }
.dcell {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: var(--tap-min); min-width: 0; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.dcell .wd { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .02em; line-height: 16px; color: var(--ink-sub); }
/* 日の行 44px ＝ 選択日の円 36px ＋ 点 4px ＋ 間 4px（DESIGN §3.3 の内訳） */
.dcell .dn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dcell.sel .dn { background: var(--primary); color: #FFFFFF; }
.dcell .pip { width: 4px; height: 4px; margin-top: 4px; border-radius: 50%; background: var(--ink-sub); opacity: .55; }
.dcell .pip.off { opacity: 0; }
.dstrip .sum { min-height: 20px; line-height: 20px; font-size: 13px; color: var(--ink-sub); }
/* 「今日へ」は今日から離れているときだけ描く（押せないボタンを描かない） */
.gw-linkbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-right: -8px;
  border: 0; background: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; font-weight: 400; color: var(--primary); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gw-linkbtn:hover { background: var(--primary-weak); }

/* ==========================================================================
   6. S2 スマホ — 4人を1枚のパネルに積む（§5.5・裁定 R6）
   ========================================================================== */
.lane-wrap { margin-top: var(--gutter); }
.lane + .lane { border-top: 1px solid var(--line); }
.lane-h {
  display: flex; align-items: center; gap: 10px; min-height: var(--row-h);
  padding: 0 8px 0 16px;
  background: var(--surface-sunken); border-bottom: 1px solid var(--line);
}
.lane-h .nm { font-size: 17px; font-weight: 700; color: var(--ink-strong); }
.lane-h .pill-meta { margin-left: auto; }
.lane-plus {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: var(--radius-sm);
  color: var(--ink-sub); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lane-plus:hover { background: var(--primary-weak); color: var(--primary); }
/* 付帯値の小ピル（件数）。--radius-pill の許可対象3つのうちの1つ（§4.5） */
.pill-meta {
  flex: none; height: 20px; padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--fs-meta); font-weight: 700; color: var(--ink-sub);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 予定行。1行 48px ／ 2行 56px ／ 2行＋変更の印 76px（§5.5） */
.evrow {
  display: block; width: 100%; min-height: var(--row-h); padding: 6px 16px;
  border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.evrow + .evrow { border-top: 1px solid var(--line); }
.evrow.two { min-height: 56px; }
.evrow.chg { min-height: 76px; }
.evrow.mine { background: var(--primary-weak); }
.evrow:hover { background: var(--surface-sunken); }
.evrow.mine:hover { background: var(--primary-weak); }
.evrow .l1 { display: flex; align-items: baseline; }
/* 1行の中に並ぶ文字要素は同じサイズ・同じ太さ（§5.0-1・2） */
.evrow .tm {
  width: 116px; flex: none; font-size: var(--fs-body); font-weight: 600; line-height: 1.4;
  color: var(--ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.evrow .ti {
  flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.4;
  color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evrow .l2 {
  display: block; margin-left: 116px; margin-top: 2px;
  font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evrow .ch {
  display: flex; align-items: center; gap: 4px; margin-left: 116px; margin-top: 2px;
  font-size: var(--fs-micro); font-weight: 400; color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
}
/* 予定ゼロの人。空状態がそのまま代理登録の入口になる（§5.5） */
.evnone {
  display: flex; align-items: center; gap: 12px; min-height: var(--row-h);
  padding: 0 16px 0 92px; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink-muted);
}
.evnone .add {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  border: 0; background: none; font-family: inherit;
  font-size: 15px; font-weight: 400; color: var(--primary); cursor: pointer;
}

/* ==========================================================================
   7. S2 PC — 週ビュー（列＝日7・行＝メンバー4。§5.5・裁定 S5・S6）
      1280px のとき 145 ＋ 7×118.43 = 974（パネルの罫の内側）
   ========================================================================== */
.wgrid { display: grid; grid-template-columns: 145px repeat(7, 1fr); }
/* 日列7本を等幅にする。min-width:0 が無いと中身の幅で列が広がる（裁定 S6） */
.wgrid > * { min-width: 0; }
.wh {
  min-height: var(--row-h); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  border-bottom: 1px solid var(--line); padding: 4px 2px;
}
.wh .wd { font-size: var(--fs-micro); font-weight: 700; color: var(--ink-sub); }
.wh .dn {
  font-size: 17px; font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums;
  min-width: 32px; height: 24px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
/* 「今日」は罫でなく内側の影で示す。border を足すと今日の列だけ 2px 広くなる（裁定 S6） */
.wh.today { background: var(--primary-weak); box-shadow: inset 1px 0 0 var(--primary-line), inset -1px 0 0 var(--primary-line); }
.wh.today .dn { background: var(--primary); color: #FFFFFF; }
.wname {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 8px; min-height: 76px;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.wname .nm { font-size: 15px; font-weight: 700; color: var(--ink-strong); line-height: 1.3; }
.wcell {
  position: relative; min-height: 76px; padding: 6px;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.wcell.today { background: var(--primary-weak); box-shadow: inset 1px 0 0 var(--primary-line), inset -1px 0 0 var(--primary-line); }
.wcell .cell-add {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink-muted); opacity: 0; cursor: pointer;
}
.wcell .cell-add:hover { background: var(--surface-sunken); opacity: 1; }
.wcell.has .cell-add:hover { background: transparent; opacity: .55; }

/* 予定チップ（§5.6）。見た目そのものを 44px にする。負のマージンで広げない（裁定 S1） */
.chip-event {
  position: relative; z-index: 1; display: block; width: 100%; min-height: var(--tap-min);
  padding: 5px 8px; border: 0; border-radius: var(--radius-chip);
  background: var(--surface-sunken); color: var(--ink);
  text-align: left; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.chip-event .ct {
  display: block; font-size: var(--fs-meta); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink-muted);
}
.chip-event .cn { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 自分が参加者。今日の列と面が同じになるので、縁を足して分ける（§5.6） */
.chip-event.mine { background: var(--primary-weak); color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--primary-line); }
.chip-event.mine .ct { color: var(--ink-sub); }
.chip-event .chg { position: absolute; top: 4px; right: 4px; color: var(--ink-sub); }
.chip-event .plus { font-size: var(--fs-micro); color: var(--ink-sub); }

/* ==========================================================================
   8. S2 PC — 日ビュー（列＝メンバー・行＝時間帯。64 ＋ 4×227.5 = 974）
   ========================================================================== */
.dvh, .dvall, .dvbody { display: grid; grid-template-columns: 64px repeat(4, 1fr); }
.dvh > *, .dvall > *, .dvbody > * { min-width: 0; }
.dvh { border-bottom: 1px solid var(--line); }
.dvh .c {
  min-height: var(--row-h); display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--ink-strong);
}
.dvall { border-bottom: 1px solid var(--line); }
.dvall .lb {
  min-height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); font-weight: 700; color: var(--ink-sub);
}
.dvall .c { min-height: 40px; padding: 3px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.dvbody { position: relative; }
.dvtimes { position: relative; }
.dvtimes .tl {
  height: 48px; font-size: var(--fs-micro); color: var(--ink-sub); text-align: right; padding-right: 8px;
  font-variant-numeric: tabular-nums; transform: translateY(-6px);
}
.dvcol { position: relative; border-left: 1px solid var(--line); }
.dvslot { display: block; width: 100%; height: 48px; min-height: 48px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; }
.dvslot:hover { background: var(--surface-sunken); }
.dvev { position: absolute; left: 3px; right: 3px; z-index: 1; overflow: hidden; }
/* 変更の印つきは3行目が出るので 60px（裁定 S11） */
.dvev.chg { min-height: 60px; }
.dvev .ch3 {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-micro); color: var(--ink-sub); font-variant-numeric: tabular-nums;
}
.nowline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--danger); z-index: 2; pointer-events: none; }
.nowlabel {
  position: absolute; left: 2px; top: -8px; padding: 0 2px;
  font-size: var(--fs-micro); font-weight: 700; color: var(--danger-ink);
  background: var(--surface); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   9. S2 PC — パネルの見出し行（週レンジと操作。操作部品は §5.0-3 の適用除外）
   ========================================================================== */
.s2bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
.s2bar .rng {
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--ink-strong);
}
.s2bar .sp { flex: 1; }
.pillgrp { display: flex; border-radius: var(--radius-sm); overflow: hidden; }
.pillbtn {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-sub);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pillbtn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.pillgrp .pillbtn + .pillbtn { border-left: 0; }
.facebtn {
  min-height: 44px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.facebtn:hover { background: var(--primary-weak); }

/* ==========================================================================
   10. 空・エラー・読み込み中（§3.11）
   ========================================================================== */
.gw-empty {
  min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; text-align: center; font-size: 15px; color: var(--ink-sub);
}
.gw-err {
  min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; text-align: center; font-size: 15px; color: var(--danger-ink);
}
.gw-skel { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.gw-skel i {
  display: block; height: 14px; border-radius: var(--radius-sm); background: var(--surface-sunken);
  animation: gwpulse 1200ms ease-in-out infinite;
}
@keyframes gwpulse { 0%, 100% { opacity: 1 } 50% { opacity: .6 } }
/* 副ボタンの罫は 1px --line-strong（裁定 S9） */
.btn-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap-min); padding: 0 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--primary);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.btn-sec:hover { background: var(--primary-weak); }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 20px; border: 0; border-radius: var(--radius-sm);
  background: var(--primary); color: #FFFFFF; box-shadow: var(--shadow-primary);
  font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: .14em; cursor: pointer;
}
.fmt-dwell .btn-primary { min-height: var(--row-h); }
.btn-primary:hover { background: var(--primary-hover); }

/* ==========================================================================
   11. お知らせ一覧（/menu/notices。滞在型・1件 68px・§5.13）
   ========================================================================== */
.nlist .nrow { display: flex; align-items: center; min-height: 68px; padding-right: 8px; background: var(--surface); }
.nlist .nrow + .nrow { border-top: 1px solid var(--line); }
.nrow .nmain {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 4px 12px 16px; border: 0; background: none; text-align: left;
  cursor: pointer; font-family: inherit;
}
.nrow .nmain:hover { background: var(--surface-sunken); }
.nrow .ic { color: var(--ink-sub); margin-top: 3px; flex: none; }
.nrow .tx { flex: 1; min-width: 0; }
.nrow .n1 {
  display: block; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nrow .n2 {
  display: block; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--ink-sub);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ページャ（§5.11）。50件ごと・各44×44・並び替えはサーバ側 */
.pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pgb {
  width: 44px; height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--primary);
  font-family: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.pgb[aria-current="page"] { background: var(--primary); color: #FFFFFF; border-color: var(--primary); }
.pgb[disabled] { color: var(--ink-disabled); cursor: default; }
.pgi { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--ink-sub); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   12. S3 シート（スマホ）／ ダイアログ（PC）── §5.10・裁定 R10・m6
   ========================================================================== */
.gw-scrim { position: fixed; inset: 0; background: rgba(28, 26, 23, .42); z-index: var(--z-sheet); }
.gw-sheetwrap {
  /* 影は DESIGN §4.2 の2段（R12）。本番 tokens.css の --shadow-modal は
     時刻申請ダイアログ（.s-dialog）が使っているので :root では書き換えない */
  --shadow-sheet: 0 2px 8px rgba(42, 39, 36, .10), 0 16px 40px rgba(42, 39, 36, .18);
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1);
  background: var(--surface);
  /* 角丸は開いた画面の書式を継承する（裁定 R10・m6） */
  border-radius: var(--face-radius) var(--face-radius) 0 0;
  box-shadow: var(--shadow-sheet);
  max-height: 88vh; display: flex; flex-direction: column;
  animation: gwrise var(--dur) var(--ease);
}
@keyframes gwrise {
  from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(6px) }
  to { opacity: 1; transform: none; filter: blur(0) }
}
.sheet .handle { width: 36px; height: 4px; border-radius: var(--radius-pill); background: var(--line-strong); margin: 8px auto; flex: none; }
.sheet-h {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 8px; flex: none;
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.sheet-h .t {
  text-align: center; font-size: 17px; font-weight: 700; color: var(--ink-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-h button {
  min-height: 44px; padding: 0 12px; border: 0; background: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 17px; cursor: pointer;
}
.sheet-h .cancel { color: var(--ink-sub); justify-self: start; font-weight: 400; }
.sheet-h .ok { color: var(--primary); font-weight: 700; justify-self: end; grid-column: 3; }
/* スマホはシート。主アクションはヘッダ右で、フッターを持たない（§5.10） */
.sheet-h .closex { display: none; }
.sheet-f { display: none; }
.sheet-b { overflow-y: auto; padding: 16px; flex: 1; }
@media (min-width: 1024px) {
  /* PC はダイアログ。ヘッダは題名と ×、操作はフッターに移す（§5.10） */
  .sheet.dialog {
    left: 50%; right: auto; bottom: auto; top: 12vh; transform: translateX(-50%);
    width: 560px; border-radius: var(--face-radius); max-height: 76vh;
  }
  .sheet.dialog .handle { display: none; }
  .sheet.dialog .sheet-h { grid-template-columns: 1fr auto; min-height: 56px; padding: 0 8px 0 16px; }
  .sheet.dialog .sheet-h .cancel, .sheet.dialog .sheet-h .ok { display: none; }
  .sheet.dialog .sheet-h .t { text-align: left; font-size: 20px; font-weight: 700; }
  .sheet.dialog .sheet-h .closex {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; color: var(--ink-sub); border-radius: var(--radius-sm);
  }
  .sheet.dialog .sheet-h .closex:hover { background: var(--surface-sunken); }
  .sheet.dialog .sheet-f {
    display: flex; justify-content: flex-end; align-items: center; gap: 12px;
    min-height: 64px; padding: 0 16px; flex: none;
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .sheet.dialog .sheet-f .sheet-save { min-height: 44px; width: 120px; padding: 0; }
}

/* ---- S3 のフォーム（§3.4） ---- */
.fld { margin-bottom: 16px; }
.fld > label, .fld > .lb {
  display: block; font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em;
  color: var(--ink-sub); margin-bottom: 6px;
}
.fld-err { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--danger-ink); }
.fld-note { margin: 6px 0 0; font-size: 13px; font-weight: 400; color: var(--ink-sub); line-height: 1.5; }
.inp {
  width: 100%; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 17px;
}
textarea.inp { padding: 11px 12px; min-height: 96px; line-height: 1.6; resize: vertical; }
select.inp { min-height: 48px; }
.frow {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  border-top: 1px solid var(--line); padding: 6px 0;
}
.frow .fl { font-size: 17px; color: var(--ink-strong); min-width: 72px; flex: none; white-space: nowrap; }
.frow .fv { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.frow .inp { min-height: 44px; width: auto; padding: 0 8px; font-size: 16px; }
.frow input[type="date"] { width: 150px; }
.frow input[type="time"] { width: 104px; }
.frow select.inp { width: auto; min-width: 110px; }
.swbtn {
  padding: 6px 0; margin: -6px 0; min-height: 44px; min-width: 52px;
  display: inline-flex; align-items: center; border: 0; background: none; cursor: pointer;
}
.sw { width: 52px; height: 32px; border-radius: var(--radius-pill); background: var(--line-strong); position: relative; flex: none; display: block; }
.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px;
  border-radius: 50%; background: #FFFFFF; transition: left var(--dur) var(--ease);
}
.swbtn[aria-checked="true"] .sw { background: var(--primary); }
.swbtn[aria-checked="true"] .sw::after { left: 23px; }
/* 参加者のチップ（§3.4） */
.pchipwrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 10px;
  border-radius: var(--radius-chip); background: var(--primary-weak); color: var(--ink-strong);
  font-size: 15px; font-weight: 700;
}
.pchip .x {
  width: 44px; height: 44px; min-height: 44px; min-width: 44px; margin: -10px -8px -10px -10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink-sub); border-radius: var(--radius-chip); cursor: pointer;
}
.pchip-btn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--primary);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.pchip-btn:hover { background: var(--primary-weak); }
.gw-meta { font-size: 13px; font-weight: 400; color: var(--ink-sub); font-variant-numeric: tabular-nums; line-height: 1.6; }
.gw-del {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-left: -8px;
  border: 0; background: none; font-family: inherit;
  font-size: 15px; font-weight: 700; color: var(--danger-ink); text-decoration: underline; cursor: pointer;
}
/* 毎週の予定の範囲選択（この回だけ／この回以降／全回） */
.scoperow { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--ink-strong); }
.scoperow input { width: 18px; height: 18px; accent-color: var(--primary); }
/* 409（他の人が先に変更した）の告知。§3.11 のエラーと同じ作り */
.gw-conflict {
  padding: 12px 14px; margin-bottom: 16px; border-radius: var(--radius-sm);
  background: var(--danger-bg); border: 1px solid var(--danger-line); border-left: 4px solid var(--danger);
  font-size: 15px; color: var(--danger-ink); line-height: 1.6;
}
.gw-conflict b { display: block; font-weight: 800; margin-bottom: 4px; }

/* ==========================================================================
   13. トースト（§5.11）。下タブの 12px 上
   ========================================================================== */
.gw-toastwrap {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(var(--mine-chrome-b) + 12px);
  z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.gw-toast {
  width: 100%; max-width: 420px; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-modal); border-left: 4px solid var(--success);
  font-size: 15px; color: var(--ink); pointer-events: auto;
}
.gw-toast .bdot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); flex: none; }
.gw-toast.warn { border-left-color: var(--warning); }
.gw-toast.warn .bdot { background: var(--warning); }
.gw-toast.bad { border-left-color: var(--danger); }
.gw-toast.bad .bdot { background: var(--danger); }

/* ==========================================================================
   14. ブレークポイント（§4.6）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .gw-wrap { max-width: var(--container-tablet); margin-inline: auto; }
  .dstrip { max-width: var(--container-tablet); margin-inline: auto; }
}
@media (min-width: 1024px) {
  /* 左ナビ 240px は body.has-tabbar の padding-left（styles.css）が持つ。
     ここで足すのは列の溝（左8px）と右端・上下の8px だけ。
     1280px のとき 1280 − 240 − 8 − 8 = 1024 が本文領域、
     内側の padding 24px ×2 を引いて 976、パネルの 1px 罫 ×2 を引いて **974**（裁定 S5） */
  .app { padding: var(--gutter); }
  .gw-wrap { padding: 0 24px; }
  .s2-pcwrap { padding-top: 16px; }
  .dband.pc-only { display: flex; }
  .gw-body { padding-bottom: 32px; }
  .fmt-dwell { font-size: var(--fs-body); }
  /* PC は 15px/600（§5.0 の具体） */
  .evrow .tm, .evrow .ti { font-size: var(--fs-body); }
  .evrow .tm { width: 110px; }
  .evrow .l2, .evrow .ch { margin-left: 110px; }
  .gw-toastwrap { left: auto; right: 24px; bottom: 24px; width: 420px; }
}

/* ==========================================================================
   15. アクセシビリティ（§4.7。残る分岐は動きの1つだけ）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; transform: none; }
  .gw-skel i { animation: none; }
  .sw::after { transition: none; }
}