/* 自動生成: build_tokens.py — 直接編集しない。tokens.json を直して再生成する。
 * 参照UI: Stripe（ダッシュボード＋ドキュメント） https://dashboard.stripe.com/login / https://docs.stripe.com
 * 抽出日: 2026-08-09
 */
:root {

  /* border */
  --border-width-hairline: 1px;
  --border-width-thick: 2px;

  /* color */
  --color-accent-active: #82281E;
  --color-accent-default: #B3392A;
  --color-accent-hover: #9A3024;
  --color-accent-subtle: #FBEDE9;
  --color-bg-active: #EBEFF5;
  --color-bg-canvas: #FFFFFF;
  --color-bg-hover: #F4F7FA;
  --color-bg-raised: #FFFFFF;
  --color-bg-selected: #FBEDE9;
  --color-bg-sunken: #F4F7FA;
  --color-bg-surface: #FFFFFF;
  --color-border-default: #D4DEE9;
  --color-border-focus: #B3392A;
  --color-border-strong: #B8C2CF;
  --color-border-subtle: #E3E8EE;
  --color-busy-bg: #F4F7FA;
  --color-busy-bg-cont: #F7F9FC;
  --color-busy-border: #E3E8EE;
  --color-busy-ink: #8792A2;
  --color-busy-ink-strong: #697386;
  --color-fg-disabled: #A3ACBA;
  --color-fg-inverse: #FFFFFF;
  --color-fg-muted: #697386;
  --color-fg-on-accent: #FFFFFF;
  --color-fg-primary: #1A1F36;
  --color-fg-secondary: #414552;
  --color-heat-1: #EEF5F1;
  --color-heat-2: #DDEBE3;
  --color-heat-3: #C8DFD1;
  --color-heat-4: #AED0BC;
  --color-overlay-scrim: rgba(26,31,54,0.45);
  --color-state-danger: #A02617;
  --color-state-danger-bg: #FBEDE9;
  --color-state-danger-border: #E6C9C4;
  --color-state-info: #2F5D7D;
  --color-state-info-bg: #E9F0F5;
  --color-state-info-border: #C9DCE8;
  --color-state-success: #2F7D5E;
  --color-state-success-bg: #EAF3EF;
  --color-state-success-border: #BFDCCF;
  --color-state-success-hover: #276A4F;
  --color-state-warning: #A96A1F;
  --color-state-warning-bg: #FAF1E3;
  --color-state-warning-border: #EAD9BE;
  --color-tag-blue-bg: #E9F0F5;
  --color-tag-blue-fg: #2F5D7D;
  --color-tag-gray-bg: #EBEFF5;
  --color-tag-gray-fg: #414552;
  --color-tag-green-bg: #EAF3EF;
  --color-tag-green-fg: #276A4F;
  --color-tag-orange-bg: #FAF1E3;
  --color-tag-orange-fg: #8F5713;
  --color-tag-purple-bg: #F0ECF4;
  --color-tag-purple-fg: #65479F;
  --color-tag-red-bg: #FBEDE9;
  --color-tag-red-fg: #B3392A;

  /* density */
  --density-control_height_lg: 48px;
  --density-control_height_md: 40px;
  --density-control_height_sm: 32px;
  --density-focus_ring: 2px;
  --density-page_max_width: 760px;
  --density-sidebar_width: 240px;
  --density-table_row_height: 48px;

  /* font */
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "Meiryo", sans-serif;
  --font-leading-none: 1;
  --font-leading-normal: 1.7;
  --font-leading-relaxed: 1.9;
  --font-leading-snug: 1.6;
  --font-leading-tight: 1.4;
  --font-size-2xl: 26px;
  --font-size-3xl: 32px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-sm: 13px;
  --font-size-xl: 21px;
  --font-size-xs: 12px;
  --font-tracking-normal: 0.02em;
  --font-tracking-tight: 0em;
  --font-tracking-wide: 0.22em;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* motion */
  --motion-duration-fast: 120ms;
  --motion-duration-instant: 80ms;
  --motion-duration-normal: 200ms;
  --motion-duration-slow: 320ms;
  --motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* radius */
  --radius-full: 9999px;
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-xl: 10px;

  /* shadow */
  --shadow-lg: 0 12px 32px rgba(26,31,54,0.14);
  --shadow-md: 0 4px 12px rgba(26,31,54,0.10);
  --shadow-none: none;
  --shadow-sm: 0 0 4px rgba(26,31,54,0.10);

  /* space */
  --space-0: 0px;
  --space-05: 2px;
  --space-1: 4px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-2: 8px;
  --space-20: 80px;
  --space-24: 96px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}


*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-fg-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--font-leading-normal);
  letter-spacing: var(--font-tracking-normal);
  font-feature-settings: "palt" 1;
  overflow-wrap: anywhere;
  line-break: strict;
}

h1, h2, h3 { line-height: var(--font-leading-tight); margin: 0; }

/* 文章の中のリンクだけを色付き下線にする。
   部品として作ったリンク(ボタン・カレンダーのマス・タグ・戻る・一覧の行)は各自で見た目を持つ。
   ここで一律に色を付けると、その手の画面が赤い下線だらけになる(2026-08-15に2回やった)。
   除外を1つずつ足していくと必ず足し忘れるので、
   「class を持たないリンク＝文章の中のリンク」という決め方にしてある。
   部品を作るときは必ず class を付けること。 */
.page a:not([class]) {
  color: var(--color-accent-default);
  text-decoration: underline;
  text-underline-offset: var(--space-05);
}

/* 1つ前に戻る導線。どの下層画面にも置く(出口がホームだけだと戻り直しになる) */
.backlink {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
}
.backlink:hover { color: var(--color-fg-secondary); text-decoration: underline; }
.backlink:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
}

.page {
  max-width: var(--density-page_max_width);
  margin: 0 auto;
  padding: var(--space-4);
}

/* ---------- ヘッダ・フッタ ---------- */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
.appbar__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.appbar__by {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-fg-muted);
  white-space: nowrap;
}
.appbar__sub { font-size: var(--font-size-sm); color: var(--color-fg-muted); }
/* いま誰として見ているか。店名より本人の名前を目立たせる(2026-08-17) */
.appbar__me { color: var(--color-fg-primary); font-weight: var(--font-weight-semibold); }
/* どの画面からでも1タップでホームへ(2026-08-17)。
   以前はマトリクスからホームまで「カレンダー→期間→ホーム」の3タップだった */
.appbar__home {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--density-control_height_md);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-fg-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.appbar__home:hover { background: var(--color-bg-hover); }

.sitefoot {
  padding: var(--space-8) var(--space-4) var(--space-10);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-fg-disabled);
}
.sitefoot__links {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}
.sitefoot__links a { color: var(--color-fg-muted); text-decoration: none; }
.sitefoot__links a:hover { text-decoration: underline; }

/* ---------- カード ---------- */
.card {
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card + .card { margin-top: var(--space-4); }
.card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}
.card__sub { font-size: var(--font-size-sm); color: var(--color-fg-muted); margin-bottom: var(--space-4); }

/* ---------- ボタン ---------- */
/* 【トークン名は _ 区切り】--density-control_height_lg であって -height- ではない。
   間違えても CSS は黙って無視するので、ボタンの最低高さが効かず、
   横に並べたときだけ高さが不揃いになって現れる(2026-08-16に11か所まとめて直した)。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--density-control_height_lg);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-width-hairline) solid transparent;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-tight);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard);
}
.btn:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
}
.btn--primary { background: var(--color-accent-default); color: var(--color-fg-on-accent); }
.btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-accent-active); }
.btn--secondary {
  background: var(--color-bg-surface);
  color: var(--color-fg-primary);
  border-color: var(--color-border-default);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-bg-hover); }
.btn--ghost {
  background: transparent;
  color: var(--color-fg-secondary);
  min-height: var(--density-control_height_md);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}
.btn--ghost:hover:not(:disabled) { background: var(--color-bg-hover); }
.btn:disabled {
  background: var(--color-bg-sunken);
  color: var(--color-fg-disabled);
  border-color: var(--color-border-subtle);
  cursor: not-allowed;
}
.btn--line { background: var(--color-state-success); color: var(--color-fg-on-accent); }
.btn--line:hover:not(:disabled) { background: var(--color-state-success-hover); }
/* ボタンを縦に積んだときの間。

   【横に並べる器では、器の側で打ち消す】(2026-08-17)
   以前は「並べる場所ごとに margin-top: 0 を書く」約束にしていたが、
   新しく器を作るたびに書き忘れる。実際 .staffactions で忘れ、
   カレンダーの1つ目のボタンだけが縦に伸びていた（60px対48px）。
   横並びの器は全部 flex なので、**flex の子には最初から効かせない**。
   これで、次に器を増やしたときも同じことが起きない。

   （打ち消し忘れると、2つ目以降だけが下にずれて「先頭が上にずれている」ように見える。
   2026-08-16に期間カードで6px上にずれて見えていたのも同じ原因） */
.btn + .btn { margin-top: var(--space-3); }
.btnrow > .btn + .btn,
.staffactions > .btn + .btn,
.calurl > .btn + .btn,
.daynav > .btn + .btn,
.patternform > .btn + .btn,
.wish__reject > .btn + .btn,
.periodcard__actions > .btn + .btn { margin-top: 0; }
/* 引き伸ばしも止める。器の高さに合わせて1つだけ背が伸びるのを防ぐ */
.btnrow, .staffactions, .calurl, .daynav, .patternform, .wish__reject, .periodcard__actions {
  align-items: center;
}

/* ---------- 入力 ---------- */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-fg-secondary); }
.field__req {
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-default);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.field__hint { font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.field__error { font-size: var(--font-size-sm); color: var(--color-state-danger); }
/* チェック1つ(運営コンソールの「口数を確認しました」)。文字を押しても切り替わるよう label で包む */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-fg-primary);
  cursor: pointer;
}
.check input { margin: 0; flex: none; width: var(--space-4); height: var(--space-4); accent-color: var(--color-accent-default); }
.input {
  width: 100%;
  min-height: var(--density-control_height_lg);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-fg-primary);
}
.input:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
  border-color: var(--color-border-focus);
}
.input--error { border-color: var(--color-state-danger); }

/* ---------- 案内・注意 ---------- */
/* 【前のものとくっつかないようにする】(2026-08-17 祐也さんの指摘)
   これまで .notice は自前の余白を持たず、置く側が毎回 style で足す形だった。
   足し忘れると、ボタンのすぐ下に張り付いて1つの塊に見える（実際そうなっていた）。
   置く側の注意力に頼らず、既定で間を空ける。 */
.notice + .notice,
.staffactions + .notice,
.btnrow + .notice,
.cal + .notice,
.section + .notice { margin-top: var(--space-4); }
.notice {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  background: var(--color-bg-sunken);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-snug);
}
.notice + .notice, .card + .notice, .notice + .card { margin-top: var(--space-4); }
.notice__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.notice--warning {
  background: var(--color-state-warning-bg);
  border-color: var(--color-state-warning-border);
  color: var(--color-state-warning);
}
.notice--danger {
  background: var(--color-state-danger-bg);
  border-color: var(--color-state-danger-border);
  color: var(--color-state-danger);
}
.notice--info {
  background: var(--color-state-info-bg);
  border-color: var(--color-state-info-border);
  color: var(--color-state-info);
}

/* ---------- 相手・用件のサマリー(型A: 常に見えている) ---------- */
.summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-sunken);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.summary__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--density-control_height_lg);
  height: var(--density-control_height_lg);
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-default);
  font-weight: var(--font-weight-semibold);
}
.summary__name { font-weight: var(--font-weight-semibold); }
.summary__meta { font-size: var(--font-size-sm); color: var(--color-fg-muted); }

/* ---------- 一覧(次のシフト等) ---------- */
.list { display: grid; gap: var(--space-2); }
.list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--density-table_row_height);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.list__date { font-weight: var(--font-weight-medium); }
.list__sub { font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.list__time {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* ---------- バッジ ---------- */
.badge {
  display: inline-block;
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border: var(--border-width-hairline) solid transparent;
}
.badge--fixed { background: var(--color-state-info-bg); color: var(--color-state-info); border-color: var(--color-state-info-border); }
.badge--adjusted { background: var(--color-state-warning-bg); color: var(--color-state-warning); border-color: var(--color-state-warning-border); }
.badge--manual { background: var(--color-accent-subtle); color: var(--color-accent-default); }
.badge--done { background: var(--color-state-success-bg); color: var(--color-state-success); border-color: var(--color-state-success-border); }

/* ---------- 空状態 ---------- */
.empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-fg-muted);
}
.empty__title { font-weight: var(--font-weight-semibold); color: var(--color-fg-secondary); margin-bottom: var(--space-2); }
.empty__body { font-size: var(--font-size-sm); margin-bottom: var(--space-5); }

/* ---------- 希望の提出(1日1行) ---------- */
.days {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.dayrow {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.dayrow--weekend { background: var(--color-bg-sunken); }
.dayrow--error { border-color: var(--color-state-danger); background: var(--color-state-danger-bg); }
.dayrow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.dayrow__date {
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dayrow__wd { margin-left: var(--space-1); font-size: var(--font-size-sm); color: var(--color-fg-muted); }

/* ◯△✕。色だけで区別しないよう、選んだものは文字も濃くする */
.marks { display: flex; gap: var(--space-2); }
.mark {
  position: relative;
  display: grid;
  place-items: center;
  min-width: var(--density-control_height_lg);
  min-height: var(--density-control_height_lg);
  padding: 0 var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-fg-muted);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  user-select: none;
}
.mark input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.mark:has(input:checked) {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-default);
  color: var(--color-accent-default);
}
.mark:has(input:focus-visible) {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
}
.mark--none, .mark--x { font-size: var(--font-size-base); }

.dayrow__times { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.dayrow__comment { margin-top: var(--space-3); }
.timepair { display: flex; align-items: center; gap: var(--space-2); }
.timepair__sep { color: var(--color-fg-muted); }
.input--time {
  min-height: var(--density-control_height_md);
  font-variant-numeric: tabular-nums;
}

/* 下に貼りつく保存バー。
   【中身を覆い隠さない】バーの高さぶんだけページの下に余白を足しておかないと、
   一番下の行がバーの裏に入って読めなくなる(2026-08-15に一覧表で実際にそうなった)。 */
.submitbar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  background: var(--color-bg-canvas);
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
}
.submitbar .btn { flex: 1 1 12rem; margin-top: 0; }
.submitbar .field__hint { flex: 1 1 100%; margin: 0; }
.page:has(.submitbar) { padding-bottom: var(--space-24); }

/* ---------- 期間カレンダー ---------- */
.tagbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.tagchip {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-fg-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.tagchip--on {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-default);
  color: var(--color-accent-default);
  font-weight: var(--font-weight-medium);
}

.cal { margin-bottom: var(--space-5); }
.cal__head, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.cal__head { margin-bottom: var(--space-1); }
.cal__wd {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-muted);
  padding: var(--space-1) 0;
}
.cal__wd--weekend { color: var(--color-fg-secondary); }
.cal__cell {
  display: block;
  min-height: var(--space-20);
  padding: var(--space-1);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  text-decoration: none;
  color: var(--color-fg-primary);
  overflow: hidden;
}
.cal__cell--empty { border-color: transparent; background: transparent; }
.cal__cell--weekend { background: var(--color-bg-sunken); }

/* 人数の過不足(§8)。色だけで区別しないよう、数字も必ず添える */
.cal__cell--short { border-color: var(--color-state-danger-border); background: var(--color-state-danger-bg); }
.cal__cell--ok { border-color: var(--color-state-success-border); background: var(--color-state-success-bg); }
.cal__cell--over { border-color: var(--color-state-warning-border); background: var(--color-state-warning-bg); }
.cal__cell--short .cal__planned { color: var(--color-state-danger); }
.cal__cell--ok .cal__planned { color: var(--color-state-success); }
.cal__cell--over .cal__planned { color: var(--color-state-warning); }

.legend {
  display: inline-block;
  padding: 0 var(--space-2);
  margin: 0 var(--space-05);
  border-radius: var(--radius-sm);
  border: var(--border-width-hairline) solid transparent;
  font-size: var(--font-size-xs);
}
.legend--short { background: var(--color-state-danger-bg); border-color: var(--color-state-danger-border); color: var(--color-state-danger); }
.legend--ok { background: var(--color-state-success-bg); border-color: var(--color-state-success-border); color: var(--color-state-success); }
.legend--over { background: var(--color-state-warning-bg); border-color: var(--color-state-warning-border); color: var(--color-state-warning); }

/* 日別画面の充足表示 */
.fill { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.fillchip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  background: var(--color-bg-sunken);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.fillchip--short { background: var(--color-state-danger-bg); border-color: var(--color-state-danger-border); color: var(--color-state-danger); }
.fillchip--ok { background: var(--color-state-success-bg); border-color: var(--color-state-success-border); color: var(--color-state-success); }
.fillchip--over { background: var(--color-state-warning-bg); border-color: var(--color-state-warning-border); color: var(--color-state-warning); }
.fillchip__name { font-weight: var(--font-weight-medium); margin-right: var(--space-2); }

/* 必要人数の設定表 */
/* その日だけ人数を変える。曜日の決まりとの差が分かるように、右に現状を出す */
.dayreq { margin-top: var(--space-3); }
.dayreq__summary { cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.dayreq__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
}
.dayreq__row:first-of-type { border-top: none; }
.dayreq__name { flex: 0 0 auto; min-width: 10ch; font-size: var(--font-size-sm); }
.dayreq__note { flex: 1 1 auto; font-size: var(--font-size-xs); color: var(--color-fg-secondary); }

/* カレンダーURLの行。URLは長いので、コピーのボタンと横に並べる */
.calurl { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-2) 0; }
.calurl .input { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-sm); }
.calurl .btn { width: auto; flex: 0 0 auto; }

/* ---------- お店の設定 ----------
   主役は「曜日ごとに必要な人数」。時間帯の区切りは使う店だけなので、
   たたんで下に置く(以前は使わない店でも大きく最初に出ていた) */
.blocks { border-top: var(--border-width-hairline) solid var(--color-border-subtle); padding-top: var(--space-4); }
.blocks__summary { cursor: pointer; }
.blocks__add { margin-top: var(--space-3); }
/* 入力欄とボタンが画面幅いっぱいに間延びしないようにする。
   幅は「入る文字数」で決める(名前は maxlength=20、時刻は 5〜10文字) */
.input--narrow { max-width: 22ch; }
.blocks .timepair .input--time { max-width: 14ch; }
/* 広い画面では、押せる幅と文の幅を人が読める範囲に収める */
@media (min-width: 768px) {
  .blocks form .btn, .reqtable + .btn, form > .btn { width: auto; min-width: 18ch; }
}

.reqtable { overflow-x: auto; margin-bottom: var(--space-3); }
/* 表を横に送るとき、誰の行かを見失わないよう名前の列を固定する */
.reqtable tbody th[scope='row'] {
  position: sticky; left: 0; z-index: 1;
  background: var(--color-bg-surface);
}
.reqtable thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--color-bg-sunken); }
.reqtable table { border-collapse: collapse; width: 100%; }
.reqtable th, .reqtable td {
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
  padding: var(--space-2);
  text-align: center;
  font-size: var(--font-size-sm);
}
.reqtable thead th { background: var(--color-bg-sunken); color: var(--color-fg-secondary); font-weight: var(--font-weight-medium); }
.reqtable tbody th { text-align: left; white-space: nowrap; font-weight: var(--font-weight-medium); }
.reqtable__weekend { color: var(--color-fg-primary); }
/* 役割ごとの行。時間帯のかたまりの頭に線を引いて、どこで区切れるか見せる */
.reqtable__first > th, .reqtable__first > td { border-top: var(--border-width-hairline) solid var(--color-border-default); }
.reqtable tbody tr:first-child > th, .reqtable tbody tr:first-child > td { border-top: none; }
.reqtable__block { background: var(--color-bg-sunken); vertical-align: top; }

/* 足りないところの一覧 */
.cal__short { color: var(--color-state-danger); font-weight: var(--font-weight-semibold); }

/* 保存メッセージ。押した場所の近くで読めるよう画面の下に浮かせる。
   画面いちばん上に出していた時は、下の週で作業していると目に入らなかった(2026-08-16の点検) */
/* 保存中のマス(2026-08-17)。押してから返事が来るまでの一瞬でも、
   「押したことが伝わっている」と分かるようにする。薄くするだけで、位置も大きさも変えない
   （動かすと、隣を押そうとしていた指が外れる） */
.pcell--saving { opacity: 0.45; pointer-events: none; }

.toast {
  position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  /* 【余白のトークンを幅に使わない】(2026-08-17 祐也さんの指摘)
     max-width に --space-24（96px）を入れていたため、お知らせが
     **縦長の細い黒い箱**になって表の上に居座り、4〜5文字ずつ折り返して読めなかった。
     余白の目盛りと、要素の幅は別の物差し。ここは読める行長で決める。 */
  z-index: 20; margin: 0 auto; max-width: min(34rem, 100%);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-fg-primary); color: var(--color-bg-surface);
  font-size: var(--font-size-sm); line-height: var(--font-leading-snug);
  box-shadow: var(--shadow-md);
  animation: toastout 8s forwards;
}
@keyframes toastout {
  0%, 85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(var(--space-2)); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- 一覧表のマス(押したらその場で保存) ----------
   1マス＝1つの<form>。どのボタンも押した瞬間にそのマスのぶんだけ保存される(2026-08-16)。
   以前の「チェックして最後にまとめて保存」は、画面と実体のずれ・古い値の混入を
   実際に起こしたので廃止した。状態の出し分けはサーバー側の描画だけで行う。 */
.pcell { display: flex; flex-direction: column; gap: var(--space-1); align-items: stretch; }
/* 時間そのものがボタン。押すと承認(入っていれば取り消し) */
.pcell__time {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  display: block; cursor: pointer; width: 100%;
  font-family: inherit; font-size: inherit; color: inherit;
  font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums;
  text-align: center; padding: var(--space-1) 0; border-radius: var(--radius-sm);
}
.pcell__time--on { background: var(--color-accent-default); color: var(--color-fg-on-accent); }
.pcell__wish {
  font-size: var(--font-size-xs); color: var(--color-fg-secondary); text-align: center;
  font-variant-numeric: tabular-nums;
}
/* 変えていないマスでも場所だけ空ける。ボタンの位置がマスごとにずれないように */
.pcell__wish--none { visibility: hidden; }
/* 入れた後に本人が出し直した印。
   マスに1マス(約37px)ぶんの文は入らないので記号だけにし、
   意味は週ごとのまとめ(.weekextra--warn)で文章にする。
   行を増やすとボタンの位置がマスごとにずれるので、必ず「希望」の行に同居させる */
.pcell__renew { color: var(--color-state-warning); font-weight: var(--font-weight-semibold); }
/* ボタンと時間の変更は、スマホの1マス(約36px)には入らないので幅のある画面でだけ出す。
   狭い画面では時間をタップ＝承認/取り消し。時間を変えるのはその日の画面で。 */
.pcell__btn, .pcell__more { display: none; }
@media (min-width: 768px) {
  .pcell__btn { display: block; }
  .pcell__more { display: block; }
}
.pcell__btn {
  width: 100%; text-align: center; cursor: pointer;
  font-family: inherit; font-size: var(--font-size-xs); line-height: var(--font-leading-tight);
  padding: var(--space-1); border-radius: var(--radius-sm);
  border: var(--border-width-hairline) solid var(--color-border-default);
  background: var(--color-bg-surface); color: var(--color-fg-primary);
}
.pcell__btn:hover { border-color: var(--color-border-strong); }
.pcell__btn--yes { font-weight: var(--font-weight-semibold); }
/* <summary>をボタンの見た目にする(標準の▼印は消す) */
summary.pcell__btn { list-style: none; }
summary.pcell__btn::-webkit-details-marker { display: none; }
.pcell__more[open] > summary.pcell__btn { border-color: var(--color-border-strong); }
.pcell__times { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-1); }
.pcell__times .input--time { min-width: 0; flex: 1 1 auto; padding: var(--space-05); font-size: var(--font-size-xs); }
.pcell__times .pcell__btn { flex: 1 1 100%; }
.pcell__reset {
  flex: 1 1 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--font-size-xs); text-decoration: underline;
  text-underline-offset: var(--space-05);
  color: var(--color-accent-default);
}

/* マスの中のひとこと。狭い画面では出さない(数字が押し出されて表が読めなくなる) */
.mx__note { display: none; }
@media (min-width: 768px) {
  .mx__note {
    display: block; margin-top: var(--space-05);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-normal);
    line-height: var(--font-leading-tight); white-space: normal;
  }
}

/* 週の表のすぐ下に置くもの(ひとこと・時間の調整)。
   ページの一番下にまとめると、見ている表から遠すぎて気づかれない(2026-08-15) */
.weekextra {
  margin-top: var(--space-2); padding: var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md); background: var(--color-bg-sunken);
}
.weekextra--warn {
  background: var(--color-state-warning-bg);
  border-color: var(--color-state-warning-border);
}
.weekextra__title {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}
/* たたんだ状態でも「開ける」と分かるように、指標と当たり判定を持たせる */
summary.weekextra--warn {
  background: var(--color-state-warning-bg);
  border-color: var(--color-state-warning-border);
}
.weekextra__title { cursor: pointer; }
details.weekextra[open] > summary.weekextra--warn {
  background: var(--color-state-warning-bg);
  border-color: var(--color-state-warning-border);
}
.weekextra__title {
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
.noterow {
  padding: var(--space-2) 0;
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
}
.weekextra .noterow:first-of-type { border-top: none; padding-top: 0; }
.noterow__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  font-size: var(--font-size-sm); color: var(--color-fg-secondary);
}
.noterow__date { font-weight: var(--font-weight-semibold); color: var(--color-fg-primary); }
.noterow__name { color: var(--color-fg-primary); }
.noterow__mark { color: var(--color-state-warning); font-weight: var(--font-weight-semibold); }
.noterow__times { font-variant-numeric: tabular-nums; }
.noterow__comment { margin-top: var(--space-1); }

.input--num { min-height: var(--density-control_height_md); width: var(--space-12); text-align: center; padding: var(--space-1); }
.cal__cell:hover { border-color: var(--color-border-strong); }
.cal__cell:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
}
.cal__date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.cal__want, .cal__planned {
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-tight);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cal__want { color: var(--color-fg-secondary); margin-top: var(--space-05); }
.cal__maybe { color: var(--color-state-warning); margin-left: var(--space-05); }
.cal__none { color: var(--color-fg-disabled); }
.cal__planned { color: var(--color-accent-default); font-weight: var(--font-weight-semibold); }

/* ---------- 日別タイムライン ---------- */
.daynav { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.daynav .btn { width: auto; }

.tl__heat { display: flex; gap: var(--border-width-hairline); height: var(--space-6); }
.tl__heatcell { flex: 1 1 0; background: var(--color-bg-sunken); border-radius: var(--radius-none); }
.tl__heatcell--1 { background: var(--color-heat-1); }
.tl__heatcell--2 { background: var(--color-heat-2); }
.tl__heatcell--3 { background: var(--color-heat-3); }
.tl__heatcell--4 { background: var(--color-heat-4); }

.tl__ticks { position: relative; height: var(--space-5); margin-top: var(--space-1); overflow: hidden; }
.tl__tick {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
}
.tl__tick--first { transform: translateX(0); }
.tl__tick--last { transform: translateX(-100%); }

.tl__lane {
  position: relative;
  height: var(--space-6);
  margin: var(--space-2) 0;
  background: var(--color-bg-sunken);
  border-radius: var(--radius-sm);
}
.tl__lane--planned { margin: 0 0 var(--space-2); }
.tl__bar {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
.tl__bar--want {
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  color: var(--color-fg-secondary);
}
.tl__bar--maybe {
  background: var(--color-state-warning-bg);
  border: var(--border-width-thick) dashed var(--color-state-warning-border);
  color: var(--color-state-warning);
}
.tl__bar--planned {
  background: var(--color-accent-default);
  color: var(--color-fg-on-accent);
  font-weight: var(--font-weight-medium);
}

.wish {
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.wish + .wish { margin-top: var(--space-3); }
.wish--rejected { background: var(--color-bg-sunken); color: var(--color-fg-muted); }
.wish__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.wish__name { font-weight: var(--font-weight-semibold); margin-right: var(--space-2); }
.wish__mark { font-size: var(--font-size-sm); color: var(--color-fg-muted); margin-left: var(--space-2); }
.wish__mark--tri { color: var(--color-state-warning); }
.wish__comment {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-state-warning-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-state-warning);
}
.wish__slot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.wish__slot--done { color: var(--color-fg-muted); font-size: var(--font-size-sm); }
.wish__slottime { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); }
.wish__adjust { display: flex; align-items: center; gap: var(--space-2); }
.wish__reject { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.wish__reject .input { flex: 1 1 12rem; min-height: var(--density-control_height_md); }
.btn--inline { width: auto; min-height: var(--density-control_height_md); font-size: var(--font-size-sm); }
.wish__reject .btn, .planned .btn { width: auto; }
.badge--rejected { background: var(--color-bg-sunken); color: var(--color-fg-muted); border-color: var(--color-border-default); }

.planned {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.planned + .planned { margin-top: var(--space-2); }
.planned__main { flex: 1 1 auto; min-width: 0; }
.planned__label { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- 確定前チェック ---------- */
.checklist { margin: var(--space-3) 0 0; padding-left: var(--space-5); font-size: var(--font-size-sm); }
.checklist li { margin-bottom: var(--space-1); }
.checklist__date { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); margin-right: var(--space-2); }
.publishbar { margin-top: var(--space-6); }
.dayoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--color-state-warning-border);
}
.dayoff form { margin: 0; }
.dayoff .btn { width: auto; }

/* ---------- 期間の管理(管理者) ---------- */
.periodcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.periodcard + .periodcard { margin-top: var(--space-2); }
.periodcard__main { min-width: 0; }
.periodcard__title { font-weight: var(--font-weight-semibold); }
.periodcard__meta { font-size: var(--font-size-sm); color: var(--color-fg-muted); }
/* ボタンが4つ並ぶと狭い画面で右端がはみ出す(2026-08-15にスマホで発生)。
   折り返しを許し、横幅いっぱいを使わせる */
.periodcard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 100%;
}
/* 【横に並ぶボタンは同じ大きさにする】
   標準のボタンは48px、ghostは40pxなので、混ぜると1つだけ大きく見える
   (2026-08-16に「シフトを組むが大きすぎる」と言われた)。
   並べるときは高さと文字の大きさをそろえ、主役(確定する)だけ色で立たせる */
.periodcard__actions .btn {
  width: auto;
  margin-top: 0;
  /* 縮ませない。縮むと文字が折り返して、その1つだけ背が高くなる */
  flex: 0 0 auto;
  min-height: var(--density-control_height_md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* 横に並べるボタンの列。狭い画面では縦に積む */
.btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.btnrow .btn { width: auto; flex: 1 1 auto; white-space: nowrap; margin-top: 0; }
.periodcard__actions form { margin: 0; }

/* ---------- スタッフの管理 ---------- */
.invitelink {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  word-break: break-all;
  color: var(--color-fg-primary);
}
.staffactions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.staffactions .btn { width: auto; }
.patternform { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.patternform .btn { width: auto; }
.patternform .input { width: auto; }

/* ---------- お店全員のシフト ---------- */
/* ---------- お店全員のシフト（カレンダーの形）---------- */
/* 管理側の .cal をそのまま使い、マスの中身だけ専用にする(2026-08-17)。
   一覧だと「今週いつ入っているか」を掴むのに全部読む必要があった */
.rcell {
  /* 名前と時間が入るので、管理側のマスより高さが要る */
  min-height: var(--space-16);
  align-items: stretch;
  gap: var(--space-05);
  overflow: hidden;
}
/* 画像を作るときの切り替え。ボタンと同じ高さに揃えて、行の中で沈まないようにする */
.pngopt {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--density-control_height_md);
  font-size: var(--font-size-sm); color: var(--color-fg-secondary); cursor: pointer;
}
/* 日ごとのメモ(2026-08-17)。カレンダー・シフト表・画像で同じ見た目にする。
   色の意味はお店が決めるので、こちらでは名前を付けない。
   色はトークンの color.tag.*（状態色とは別枠。意味を持たない色ラベル用）。
   **画像(PNG)は同じ色を値で持っている**——src/domain/day-note.ts と対で直すこと */
.daytag {
  display: block; margin: var(--space-05) 0;
  padding: 1px var(--space-1); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); line-height: var(--font-leading-tight); font-weight: var(--font-weight-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.daytag--red { background: var(--color-tag-red-bg); color: var(--color-tag-red-fg); }
.daytag--orange { background: var(--color-tag-orange-bg); color: var(--color-tag-orange-fg); }
.daytag--green { background: var(--color-tag-green-bg); color: var(--color-tag-green-fg); }
.daytag--blue { background: var(--color-tag-blue-bg); color: var(--color-tag-blue-fg); }
.daytag--purple { background: var(--color-tag-purple-bg); color: var(--color-tag-purple-fg); }
.daytag--gray { background: var(--color-tag-gray-bg); color: var(--color-tag-gray-fg); }
.daynoteform .input { max-width: 24rem; }

.rcell--past { opacity: 0.5; }
/* まだ人手が足りない日(2026-08-17)。確定したあとでも足りない日はあるので、
   表を見る側にも分かるようにする（助けを申し出ようがない、を防ぐ） */
.rcell--short { border-color: var(--color-state-danger-border); background: var(--color-state-danger-bg); }
.rcell__warn {
  margin-left: var(--space-1); color: var(--color-state-danger);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
}
/* 自分が入っている日を、色だけで分かるようにする（探して読む手間をなくす） */
.rcell--mine { border-color: var(--color-accent-default); background: var(--color-accent-subtle); }
.rcell__none { color: var(--color-fg-muted); font-size: var(--font-size-xs); }
.rcell__row {
  display: flex; flex-direction: column; line-height: var(--font-leading-tight);
  /* 【1マスに何人も入る表なので、本文より小さくする】(2026-08-17)
     本文と同じ大きさだと、月末の混んだ日でマスからあふれて読めなくなる。
     スケールのいちばん小さい段(xs)がその役目 */
  font-size: var(--font-size-xs);
}
.rcell__row + .rcell__row { margin-top: var(--space-05); }
.rcell__row--me { font-weight: var(--font-weight-semibold); color: var(--color-accent-active); }
.rcell__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcell__time { color: var(--color-fg-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.rcell__row--me .rcell__time { color: var(--color-accent-default); }
/* スマホでは1マスが50px前後になるので、時間は省いて名前だけにする。
   全部入れようとすると、どちらも読めない大きさになる */
@media (max-width: 599px) {
  .rcell { min-height: var(--space-12); }
  .rcell__time { display: none; }
  .rcell__name { font-size: var(--font-size-xs); }
}

.rosterday {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.rosterday + .rosterday { margin-top: var(--space-2); }
.rosterday--past { background: var(--color-bg-sunken); color: var(--color-fg-muted); }
.rosterday__date { flex: none; width: var(--space-16); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.rosterday__wd { margin-left: var(--space-05); font-size: var(--font-size-sm); color: var(--color-fg-muted); font-weight: var(--font-weight-normal); }
.rosterday__people { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--space-1); }
.rosterperson { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--font-size-sm); }
.rosterperson--me {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-default);
}
.rosterperson__name { min-width: 0; overflow-wrap: anywhere; }

/* ---------- 希望の一覧表(スタッフ×日) ---------- */
.mx { margin-bottom: var(--space-6); }
.mx__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.mx__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mx__table th, .mx__table td {
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  padding: var(--space-1) 0;
  text-align: center;
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-tight);
  vertical-align: middle;
  height: var(--space-12);
  overflow: hidden;
}
.mx__namecol {
  /* 名前は6文字くらいまで入るようにする。4.5remだと「朝比奈晃太郎」が切れた(2026-08-16)。
     残りの7列は等分されるので、少し広げても日付は読める */
  width: 6.5rem;
  text-align: left;
  font-weight: var(--font-weight-medium);
  background: var(--color-bg-surface);
  padding: var(--space-1) var(--space-2);
  /* 【切らずに折り返す】列は狭く固定してあり、器は overflow:hidden。
     長い名前やバッジがはみ出すと**黙って切れる**(2026-08-16に「締切後に提出」が見切れた)。
     行が少し高くなっても、読めなくなるより良い */
  white-space: normal;
  word-break: break-word;
}
.mx__namecol .badge {
  display: inline-block;
  margin-top: var(--space-05);
  max-width: 100%;
}
.mx__dayhead { background: var(--color-bg-sunken); padding: 0; }
.mx__dayhead a {
  display: block;
  padding: var(--space-1) 0;
  color: var(--color-fg-primary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.mx__dayhead a:hover { background: var(--color-bg-hover); }
.mx__wd { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-fg-muted); }
.mx__weekend { background: var(--color-bg-sunken); }
/* 期間の外にあたるマス。列を月〜日で固定するために置く空き */
.mx__empty { background: var(--color-bg-canvas); border-color: transparent; color: var(--color-fg-disabled); }
/* 過不足の色は日付の見出しにだけ付ける(マスに付けると希望が読めなくなる) */
.mx__lv-short { background: var(--color-state-danger-bg); }
.mx__lv-ok { background: var(--color-state-success-bg); }
.mx__lv-over { background: var(--color-state-warning-bg); }

/* 「17:00」が「17:0 / 0」に割れないようにする。
   マスが狭いので、body の overflow-wrap: anywhere がここまで効いてしまう(2026-08-15) */
.mx__table td, .mx__table th { overflow-wrap: normal; word-break: keep-all; }
.mx__o, .mx__tri, .mx__planned, .mx__picktime { white-space: nowrap; }

.mx__o { color: var(--color-fg-primary); font-variant-numeric: tabular-nums; }
.mx__tri { color: var(--color-state-warning); font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); }
.mx__x { color: var(--color-fg-disabled); }
.mx__none { color: var(--color-border-default); }
.mx__planned {
  display: block;
  /* 左右に余白を作らない。作ると色の帯がマスからはみ出し、文字の右端が切れる(2026-08-15) */
  margin: calc(-1 * var(--space-1)) 0;
  padding: var(--space-1) 0;
  background: var(--color-accent-default);
  color: var(--color-fg-on-accent);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
/* 固定シフト・希望外の追加。ここでは触れないので色を落として区別する */
.mx__planned--locked { background: var(--color-fg-muted); }

/* 押してシフトに入れるマス。マス全体が押せるようにする(指で押しやすくするため) */
.mx__pick {
  display: block;
  margin: calc(-1 * var(--space-1)) 0;
  padding: var(--space-1) 0;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-secondary);
  border: var(--border-width-thick) solid transparent;
}
.mx__pick input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mx__pick:hover { background: var(--color-bg-hover); }
.mx__pick--on,
.mx__pick:has(input:checked) {
  background: var(--color-accent-default);
  color: var(--color-fg-on-accent);
  font-weight: var(--font-weight-semibold);
}
.mx__pick:has(input:focus-visible) { border-color: var(--color-border-focus); }
.mx__picktime { display: block; }
/* △は時刻と同じ行に置くと、狭いマスで数字がはみ出す。上の行に逃がす(2026-08-15) */
.mx__trimark { display: block; color: var(--color-state-warning); font-weight: var(--font-weight-semibold); line-height: 1; }
/* 承認ボタンのあるマスは上そろえにする。
   真ん中そろえだと、中身の量がちがうマス同士で「承認」の位置が上下してしまう
   (2026-08-15 祐也さんの指摘。原因は△でも希望行でもなく、この縦そろえだった) */
.mx__table td:has(.pcell) { vertical-align: top; }
/* マスの中では時間と同じ行に置く(別の行にすると、△のあるマスだけ背が高くなる) */
.pcell .mx__trimark { display: inline; margin-right: var(--space-05); }
.pcell__time--on .mx__trimark { color: var(--color-fg-on-accent); }
.mx__legend { display: inline-block; margin: 0; padding: 0 var(--space-2); border-radius: var(--radius-sm); }
.mx__hr { border: 0; border-top: var(--border-width-hairline) solid var(--color-border-subtle); margin: var(--space-05) 0; }

/* ---------- 入れた人の時間を変える(週ごとに .weekextra の中に置く) ---------- */
.adjustrow {
  padding: var(--space-3) 0;
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
}
.weekextra .adjustrow:first-of-type { border-top: none; padding-top: 0; }
.adjustrow__who { font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
.adjustrow__date { font-weight: var(--font-weight-semibold); margin-right: var(--space-2); font-variant-numeric: tabular-nums; }
.adjustrow__wish { margin-left: var(--space-2); color: var(--color-fg-muted); font-size: var(--font-size-xs); }

/* ---------- 印刷(A4横・1週間1枚) ---------- */
/* この表は画面でいちばん見やすいと言われる画面(2026-08-15)。
   紙の幅ならA4横に収まるが、スマホの幅では「1(火)」や「17:00」が途中で折れて読めない。
   画面のときだけ横に送れるようにして、折り返しを止める(紙では効かない)。 */
.printarea { overflow-x: auto; }
.psheet { margin-bottom: var(--space-8); }
.psheet__table th, .psheet__table td { white-space: nowrap; }
.psheet__head { font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
.psheet__draft { margin-left: var(--space-3); color: var(--color-state-danger); font-weight: var(--font-weight-semibold); }
.psheet__table {
  /* 画面では中身に合わせて広がり、はみ出したぶんは .printarea が横に送る。
     紙では下の @media print で「A4いっぱいに広げる」に戻す */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}
.psheet__table th, .psheet__table td {
  border: var(--border-width-hairline) solid var(--color-border-default);
  padding: var(--space-1);
  text-align: center;
  font-size: var(--font-size-xs);
  vertical-align: top;
  height: var(--space-10);
}
.psheet__table thead th { background: var(--color-bg-sunken); font-weight: var(--font-weight-medium); }
.psheet__table tbody th { text-align: left; white-space: nowrap; font-weight: var(--font-weight-medium); }
.psheet__namecol { width: var(--space-20); }
.psheet__wd { margin-left: var(--space-05); color: var(--color-fg-muted); font-weight: var(--font-weight-normal); }
.psheet__weekend { background: var(--color-bg-sunken); }
.psheet__empty { background: var(--color-bg-canvas); color: var(--color-fg-disabled); }
/* 紙の上で役割の切れ目を作る見出し行 */
.psheet__grouphead th {
  background: var(--color-bg-sunken); text-align: left;
  font-weight: var(--font-weight-semibold); padding: var(--space-1) var(--space-2);
}
.psheet__time { font-variant-numeric: tabular-nums; line-height: var(--font-leading-tight); }

/* ---------- 紙に出すとき(2026-08-18に「1か月をそのまま印刷」へ作り替え) ----------
   以前は1週間ずつの表を5枚に分けて刷っていたが、画面のカレンダーと形が違ううえ、
   ⚠️（人手が足りない日）と貸切などのメモが**紙にだけ出ない**という食い違いがあった。
   画面で見ているものを、そのまま1枚に出す。 */
@media print {
  /* 紙では操作するものを全部消す。ヘッダ・フッタ・ボタン・戻るリンクも要らない */
  .noprint, .appbar, .sitefoot, .staffactions, .backlink, .pngopt, #pngBox, .field__hint,
  .notice { display: none !important; }
  /* 【余白は中身に持たせる】(2026-08-18 実機の印刷プレビューで発覚)
     @page の margin は**ブラウザの印刷設定に上書きされる**。
     Chromeの「余白: なし」だと、紙のふちギリギリから始まってしまう。
     さらにプリンタには物理的に刷れないふち(5mmほど)があり、そこは切れる。
     用紙まかせにせず、中身の側に余白を持たせて、設定に関わらず白を確保する */
  .page { max-width: none; padding: 6mm 8mm; }
  body { background: #fff; }

  /* 【色を落とさせない】既定では背景色を省くブラウザが多い。
     ⚠️の赤とメモの色は「意味を持つ色」なので、省かれると情報が消える */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* 【1か月をA4横1枚に収める】(2026-08-22 実測でやり方を入れ替えた)
     以前は紙にだけ効く小さい字(7〜8pt)で詰めていた。文字をスケールの下限(xs)に戻すと
     1日2人の店でも2枚に割れたので、**縮めるのは文字ではなく行間と余白**に変えた。
     行間はトークンのいちばん詰まった段(leading-none)。
     A4横で実測: 1日2人=1枚 / 1日3人=1枚（以前の7ptでも3人では2枚に割れていた）。
     文字は9pt相当あって以前より読みやすい。 */
  .pagehead { margin-bottom: 2mm; }
  .pagehead__title { font-size: var(--font-size-lg); }
  .pagehead__sub { font-size: var(--font-size-xs); }
  .section__title { font-size: var(--font-size-xs); margin-bottom: 1mm; }
  .cal { margin-bottom: 0; }
  .cal__head, .cal__grid { gap: 0.3mm; }
  .cal__wd { font-size: var(--font-size-xs); padding: 0; }
  .rcell { min-height: 0; padding: 0.4mm; break-inside: avoid; page-break-inside: avoid; }
  .rcell .cal__date { font-size: var(--font-size-xs); line-height: var(--font-leading-none); }
  .rcell__row { line-height: var(--font-leading-none); }
  .daytag { padding: 0 0.8mm; }
  /* 過ぎた日を薄くするのは画面の話。紙では読めなくなるだけ */
  .rcell--past { opacity: 1; }

  /* 中身の側で余白を確保しているので、用紙側は最小限でよい(足すと二重になる) */
  @page { size: A4 landscape; margin: 4mm; }
}

/* ---------- 法務ページの本文 ---------- */
.legal h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}
.legal p { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); line-height: var(--font-leading-relaxed); }
.legal ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); font-size: var(--font-size-sm); line-height: var(--font-leading-normal); }
.legal li { margin-bottom: var(--space-1); }

/* ---------- 見出し・区切り ---------- */
.pagehead { margin-bottom: var(--space-5); }
.pagehead__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.pagehead__sub { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.section + .section { margin-top: var(--space-6); }
.section__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-3);
}
/* 畳んだ既定値（人の追加の「この人の扱い」、承認の「お店のID」）。
   閉じていても開いていても、前後と summary の下に息継ぎを入れる */
/* ---------- 提出画面の区分け・時間の型・まとめて入れる(2026-09-19 お店のFB・§6-2c) ----------
   「殺風景で、どのボタンか分かりづらい」への答え。見た目の土台(白・線1px・影なし)は変えず、
   ①〜④の段と、印の意味の色で区分けする。強いボタン(塗り)は各画面で「提出」の1つだけ */
.steptitle {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);
  color: var(--color-fg-primary);
}
.stepno {
  display: inline-grid; place-items: center; flex: none;
  width: var(--space-6); height: var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-accent-default); color: var(--color-fg-on-accent);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
}

/* 印に意味の色を付ける。押した瞬間に「何を選んだか」が色で分かるように(◯=緑・△=黄・休み=赤) */
.mark--o:has(input:checked) { background: var(--color-state-success-bg); border-color: var(--color-state-success-border); color: var(--color-state-success); }
.mark--tri:has(input:checked) { background: var(--color-state-warning-bg); border-color: var(--color-state-warning-border); color: var(--color-state-warning); }
.mark--off:has(input:checked) { background: var(--color-state-danger-bg); border-color: var(--color-state-danger-border); color: var(--color-state-danger); }
.mark--off { font-size: var(--font-size-sm); padding: 0 var(--space-2); }

.legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm); color: var(--color-fg-secondary);
}
.legend > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.legend__mark {
  display: inline-grid; place-items: center;
  min-width: var(--space-6); height: var(--space-6); padding: 0 var(--space-1);
  border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); color: var(--color-fg-muted);
}
.legend__mark--o { background: var(--color-state-success-bg); border-color: var(--color-state-success-border); color: var(--color-state-success); }
.legend__mark--tri { background: var(--color-state-warning-bg); border-color: var(--color-state-warning-border); color: var(--color-state-warning); }
.legend__mark--off { background: var(--color-state-danger-bg); border-color: var(--color-state-danger-border); color: var(--color-state-danger); }

/* 選べる小さなボタン(曜日・入れるもの)。中の input は見えなくして、枠ぜんぶを押せるようにする */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--density-control_height_lg); min-height: var(--density-control_height_lg);
  padding: 0 var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-md);
  background: var(--color-bg-surface); color: var(--color-fg-primary);
  font-size: var(--font-size-base); font-weight: var(--font-weight-medium); cursor: pointer;
}
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--color-accent-subtle); border-color: var(--color-accent-default); color: var(--color-accent-default); }
.chip:has(input:focus-visible) { outline: var(--density-focus_ring) solid var(--color-border-focus); outline-offset: var(--space-05); }
.chip--o:has(input:checked) { background: var(--color-state-success-bg); border-color: var(--color-state-success-border); color: var(--color-state-success); }
.chip--tri:has(input:checked) { background: var(--color-state-warning-bg); border-color: var(--color-state-warning-border); color: var(--color-state-warning); }
.chip--off:has(input:checked) { background: var(--color-state-danger-bg); border-color: var(--color-state-danger-border); color: var(--color-state-danger); }
/* 見せるだけの札(登録ずみの型の一覧)。押せないので、押せるものと見た目を分ける */
.chip--static {
  min-width: 0; min-height: 0; padding: var(--space-1) var(--space-3);
  background: var(--color-bg-sunken); font-size: var(--font-size-sm); cursor: default;
}
.chip--mine { border-style: dashed; }
.chip__sub { margin-left: var(--space-1); color: var(--color-fg-muted); font-weight: var(--font-weight-normal); }

.bulk__label {
  display: block; margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-fg-secondary);
}
.bulk .btn { margin-top: var(--space-4); }
.presetlist {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
}
.presetlist__title { margin-bottom: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.presetlist .btn { margin-top: var(--space-3); }
.presetpick { margin-top: var(--space-2); }
.presetcard { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.presetcard__main { display: grid; gap: var(--space-1); }
.list__meta { color: var(--color-fg-muted); font-size: var(--font-size-sm); }
/* みんなの希望：本人が休みたいと押した日。何も押さなかった✕(薄い灰)と見分ける */
.mx__off { color: var(--color-state-danger); font-weight: var(--font-weight-semibold); }
/* 入っている日に本人が休みを出した。見落とすと、休みたい人を出勤させてしまう */
.mx__offwish {
  display: block; margin-top: var(--space-05);
  color: var(--color-state-danger); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
}

.foldfields { margin: var(--space-4) 0; }
.foldfields > summary { cursor: pointer; margin-bottom: var(--space-4); }
.stack { display: grid; gap: var(--space-3); }
.muted { color: var(--color-fg-muted); }
.center { text-align: center; }