/* Sukekan — P62 のデザインシステム(既定はライト、OS がダークのときだけダーク)。
   面は温かみのある無彩色、操作の色は青 1 色(--c-primary)。色帯(カードの左右の太い線)は使わない。
   状態色(--st-*)は xlsx 出力の STATUS_STYLE(src/workbook/export/sheets/style.ts)と同値。 */

:root {
  color-scheme: light;
  /* 色(役割)。コントラストは check-desktop で計算して確かめる */
  --c-bg: #F7F6F3;
  --c-surface: #FFFFFF;
  --c-surface-2: #F0EFEB;
  --c-hover: #E9E7E2;
  --c-active: #E0DED8;
  --c-border: #DCDAD4;
  --c-control: #8A857C;
  --c-text: #1F1D1A;
  --c-muted: #57534D;
  --c-faint: #6F6A63;
  --c-primary: #1F5FD1;
  --c-primary-hover: #1A52B5;
  --c-on-primary: #FFFFFF;
  --c-primary-ink: #1A52B5;
  --c-primary-soft: #E6EEFC;
  --c-danger: #C62828;
  --c-on-danger: #FFFFFF;
  --c-danger-soft: #FCE8E6;
  --c-success: #1E7B3C;
  --c-warning: #9A5B00;
  --c-warning-soft: #FDF0D9;
  --c-sat: #1D5FB8;
  --c-sun: #C62828;
  --c-weekend: rgba(31, 29, 26, 0.03);
  --c-backdrop: rgba(31, 29, 26, 0.4);

  /* 文字・余白・角丸・影・動き */
  --font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", "Yu Gothic UI", Meiryo, sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
  --dur: 160ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --bar-text: #1a1b1e;

  /* 状態色(STATUS_STYLE と同値: text / fill / bar / barDark) */
  --st-todo-text: #495057; --st-todo-fill: #F8F9FA; --st-todo-bar: #CED4DA; --st-todo-barDark: #ADB5BD;
  --st-doing-text: #E8590C; --st-doing-fill: #FFF4E6; --st-doing-bar: #FFA94D; --st-doing-barDark: #F76707;
  --st-spec_check-text: #0B7285; --st-spec_check-fill: #E3FAFC; --st-spec_check-bar: #66D9E8; --st-spec_check-barDark: #1098AD;
  --st-review-text: #6741D9; --st-review-fill: #F3F0FF; --st-review-bar: #B197FC; --st-review-barDark: #7048E8;
  --st-done-text: #2B8A3E; --st-done-fill: #EBFBEE; --st-done-bar: #69DB7C; --st-done-barDark: #37B24D;
  --st-blocked-text: #C92A2A; --st-blocked-fill: #FFF5F5; --st-blocked-bar: #FF8787; --st-blocked-barDark: #F03E3E;
  /* バー上の文字色(既定の6色はどれも暗色が読める)。状態色を変えたプロジェクトでは theme.ts が導出値で上書きする(P46) */
  --st-todo-on: #1a1b1e; --st-doing-on: #1a1b1e; --st-spec_check-on: #1a1b1e; --st-review-on: #1a1b1e; --st-done-on: #1a1b1e; --st-blocked-on: #1a1b1e;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --c-bg: #151413;
    --c-surface: #1D1C1A;
    --c-surface-2: #272523;
    --c-hover: #302E2B;
    --c-active: #3A3734;
    --c-border: #3A3734;
    --c-control: #7A746C;
    --c-text: #EDEBE7;
    --c-muted: #B8B3AB;
    --c-faint: #9A948B;
    --c-primary: #78A9FF;
    --c-primary-hover: #8DB6FF;
    --c-on-primary: #0D1B33;
    --c-primary-ink: #8DB6FF;
    --c-primary-soft: #1D2A44;
    --c-danger: #FF8A80;
    --c-on-danger: #2A0B08;
    --c-danger-soft: #3A1F1D;
    --c-success: #6BD48A;
    --c-warning: #F2B550;
    --c-warning-soft: #3A2E17;
    --c-sat: #8DB6FF;
    --c-sun: #FF8A80;
    --c-weekend: rgba(237, 235, 231, 0.03);
    --c-backdrop: rgba(0, 0, 0, 0.6);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.08);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.16);
  }
}

/* 状態クラス → 共通変数 */
.st-todo { --st: var(--st-todo-bar); --st-dark: var(--st-todo-barDark); --st-text: var(--st-todo-text); --st-fill: var(--st-todo-fill); --st-on: var(--st-todo-on); }
.st-doing { --st: var(--st-doing-bar); --st-dark: var(--st-doing-barDark); --st-text: var(--st-doing-text); --st-fill: var(--st-doing-fill); --st-on: var(--st-doing-on); }
.st-spec_check { --st: var(--st-spec_check-bar); --st-dark: var(--st-spec_check-barDark); --st-text: var(--st-spec_check-text); --st-fill: var(--st-spec_check-fill); --st-on: var(--st-spec_check-on); }
.st-review { --st: var(--st-review-bar); --st-dark: var(--st-review-barDark); --st-text: var(--st-review-text); --st-fill: var(--st-review-fill); --st-on: var(--st-review-on); }
.st-done { --st: var(--st-done-bar); --st-dark: var(--st-done-barDark); --st-text: var(--st-done-text); --st-fill: var(--st-done-fill); --st-on: var(--st-done-on); }
.st-blocked { --st: var(--st-blocked-bar); --st-dark: var(--st-blocked-barDark); --st-text: var(--st-blocked-text); --st-fill: var(--st-blocked-fill); --st-on: var(--st-blocked-on); }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
#app { height: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; color: var(--c-text); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
::selection { background: var(--c-primary-soft); color: var(--c-text); }
.spacer { flex: 1 1 auto; }
.muted { color: var(--c-muted); }
.small { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }
.text-danger { color: var(--c-danger); }
.selectable { user-select: text; word-break: break-all; }
.pre-wrap { white-space: pre-wrap; }
.grow { flex: 1 1 auto; }

/* スクロールバー */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--c-active); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- ボタン・入力 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; font-weight: 500; white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s;
}
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 14px; }
.btn-xs { height: 24px; padding: 0 8px; font-size: 14px; }
.btn-lg { height: 44px; padding: 0 24px; font-size: 15px; }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--c-primary-hover); }
.btn-discord { background: #5865f2; color: #fff; width: 100%; }
.btn-discord:hover:not(:disabled) { background: #4752c4; }
.btn-secondary { background: var(--c-surface); border-color: var(--c-control); color: var(--c-text); }
.btn-secondary:hover:not(:disabled) { background: var(--c-hover); }
.btn-ghost { background: transparent; color: var(--c-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--c-hover); color: var(--c-text); }
.btn-danger { background: var(--c-danger); color: var(--c-on-danger); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); }
.btn-danger-ghost { background: transparent; color: var(--c-danger); border-color: var(--c-danger); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--c-danger-soft); }
.btn-group { display: inline-flex; gap: 4px; }
.icon-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: none; background: transparent;
  color: var(--c-muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.icon-btn:hover { background: var(--c-hover); color: var(--c-text); }

.input {
  width: 100%; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--c-control); background: var(--c-surface); color: var(--c-text); font: inherit;
}
.input::placeholder { color: var(--c-faint); }
textarea.input { height: auto; padding: 8px 10px; resize: vertical; }
.input:focus { outline: 2px solid var(--c-primary); outline-offset: 2px; border-color: var(--c-primary); }
.input-sm { height: 30px; font-size: 14px; width: auto; }
input[type="search"].input-sm { width: 240px; }
select.input { padding-right: 6px; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; color: var(--c-text); font-size: 14px; }
.check input { accent-color: var(--c-primary); width: 16px; height: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label { font-size: 14px; font-weight: 600; color: var(--c-muted); letter-spacing: 0.02em; }
.field-hint { font-size: 14px; color: var(--c-faint); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid .span-2 { grid-column: span 2; }
.form-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.form-inline { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.form-inline .input { width: auto; }
.form-inline .grow .input { width: 100%; }

/* ---------- チップ・バッジ・アバター ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px;
  background: var(--c-hover); color: var(--c-text); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.chip-xs { height: 18px; padding: 0 6px; font-size: 11px; border-radius: 9px; }
.chip-accent { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.chip-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.chip-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.status-chip { background: color-mix(in srgb, var(--st) 22%, transparent); color: var(--st-text); border: 1px solid color-mix(in srgb, var(--st) 60%, transparent); }
.st-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--st, var(--c-faint)); flex: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-dark, #000) 45%, transparent); }
.badge-need {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px;
  background: var(--c-danger); color: var(--c-on-danger); font-size: 11px; font-weight: 700;
}
.avatar {
  --avatar-hue: 230;
  display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
  background: hsl(var(--avatar-hue) 45% 42%); color: #fff; font-weight: 700; overflow: hidden; object-fit: cover;
}
.avatar-sm { width: 20px; height: 20px; font-size: 11px; }
.avatar-md { width: 32px; height: 32px; font-size: 14px; }
.avatar-lg { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; }
.avatar-empty { background: var(--c-active); color: var(--c-muted); }
.inline-user { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.progress { height: 6px; border-radius: 3px; background: var(--c-active); overflow: hidden; flex: 1; min-width: 40px; }
.progress-fill { height: 100%; background: var(--st-dark, var(--c-primary)); border-radius: 3px; }
.inline-progress { display: inline-flex; align-items: center; gap: 8px; width: 220px; }

/* ---------- 読み込み・空 ---------- */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px; color: var(--c-muted); }
.spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-active); border-top-color: var(--c-primary);
  animation: spin 0.8s linear infinite; display: inline-block; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--c-muted); }
.empty-title { font-size: 16px; font-weight: 600; color: var(--c-text); }
.empty-error .empty-title { color: var(--c-danger); }

/* ---------- 中央寄せ画面(ログイン・プロジェクト選択) ---------- */
.centered { height: 100%; overflow: auto; background: var(--c-bg); display: flex; flex-direction: column; }
.view-center { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 14px; background: var(--c-primary); color: var(--c-on-primary);
  display: grid; place-items: center; font-size: 26px; font-weight: 800;
}
.brand-name { font-size: 22px; font-weight: 700; color: var(--c-text); }
.brand-sub { font-size: 14px; color: var(--c-muted); }
.login-card {
  width: 440px; max-width: 100%; background: var(--c-surface); border-radius: 12px; padding: 32px;
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 18px;
}
.login-lead { color: var(--c-muted); }
.login-status { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 14px; }
.login-notes { margin: 0; padding-left: 18px; color: var(--c-muted); font-size: 14px; display: grid; gap: 4px; }
.login-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; border-top: 1px solid var(--c-border); padding-top: 12px; }
.outdated-title { font-size: 18px; }
.projects-panel { width: 880px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.projects-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.projects-user { display: flex; align-items: center; gap: 8px; color: var(--c-text); }
.page-title { font-size: 22px; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.project-card {
  display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 18px; border-radius: 10px;
  border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer; transition: border-color 0.12s, transform 0.12s;
}
.project-card:hover { border-color: var(--c-primary); transform: translateY(-1px); }
.project-card.is-busy { opacity: 0.7; }
.project-card-head { display: flex; align-items: center; gap: 12px; }
.project-card-name { font-size: 16px; font-weight: 700; color: var(--c-text); }

/* ---------- 枠(左ナビ + 上部バー) ---------- */
.shell { display: grid; grid-template-columns: 216px 1fr; height: 100%; }
.sidebar { background: var(--c-surface-2); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--c-border); }
.sb-project-box { padding: 10px 10px 8px; border-bottom: 1px solid var(--c-border); display: grid; gap: 8px; }
.sb-project {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: var(--r-md);
  background: transparent; border: none; cursor: pointer; text-align: left;
}
.sb-project:hover { background: var(--c-hover); }
.sb-project-text { min-width: 0; flex: 1; }
.sb-project-name { font-weight: 700; color: var(--c-text); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sb-guild { font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sb-switch { color: var(--c-faint); display: inline-flex; }
.sb-roles { padding: 0 8px; }
/* P47: 項目が増えても 980x640 で全項目に届くよう、ナビだけをスクロールさせる(プロジェクト欄・ユーザー欄は固定) */
.sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; flex: 0 1 auto; min-height: 0; overflow-y: auto; }
/* 縮めずにスクロールさせる(項目の高さ 38px を保つ) */
.sb-nav > .sb-nav-item { flex-shrink: 0; }
.sb-nav-item {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--r-sm);
  border: none; background: transparent; color: var(--c-muted); cursor: pointer; font-size: 15px; font-weight: 500; text-align: left;
}
.sb-nav-item:hover { background: var(--c-hover); color: var(--c-text); }
.sb-nav-item.is-active { background: var(--c-active); color: var(--c-text); }
.sb-icon { width: 20px; text-align: center; font-size: 15px; opacity: 0.9; display: inline-flex; align-items: center; justify-content: center; }
/* SVG のアイコン(components/icons.ts)。大きさは親の文字サイズに追従 */
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em; }
.sb-spacer { flex: 1; }
.sb-user { padding: 8px; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; }
.sb-logout { width: 100%; }
.topbar-user { display: flex; align-items: center; gap: 8px; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--c-border); min-width: 0; }
.topbar-user:empty { display: none; }
.topbar-user-text { min-width: 0; line-height: 1.2; }
.topbar-user-name { font-weight: 600; color: var(--c-text); font-size: 14px; max-width: 16em; overflow-wrap: anywhere; }
.topbar-user-sub { font-size: 14px; color: var(--c-muted); white-space: nowrap; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px; flex: none;
  border-bottom: 1px solid var(--c-border); background: var(--c-surface);
}
.topbar-title { font-size: 17px; }
.banners:empty { display: none; }
.banner { display: flex; align-items: center; gap: 12px; padding: 8px 20px; font-size: 14px; }
.banner-info { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.banner-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; flex: none; flex-wrap: wrap; }
.toolbar-title { font-size: 15px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--c-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-status { background: var(--st); border: 1px solid var(--st-dark); }
.sw-event { background: var(--c-primary); }
.sw-due { background: var(--st-doing-bar); }
.sw-shift { background: var(--c-success); }
.legend-diamond { width: 9px; height: 9px; transform: rotate(45deg); background: var(--c-muted); display: inline-block; margin: 0 2px; }
.panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 12px 14px; }
.panel-title { font-size: 14px; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }

/* ---------- ボード ---------- */
.kanban {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(172px, 1fr)); gap: 8px;
  padding: 0 16px 16px; overflow-x: auto;
}
.kanban > .loading, .kanban > .empty { grid-column: 1 / -1; }
.kanban-col {
  display: flex; flex-direction: column; min-height: 0; background: var(--c-surface-2); border-radius: var(--r-md);
  border: 1px solid var(--c-border); transition: background-color 0.1s, border-color 0.1s;
}
.kanban-col.is-drop-target { background: var(--c-primary-soft); border-color: var(--c-primary); }
.kanban-col-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px; }
.kanban-col-title { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { font-size: 12px; color: var(--c-muted); font-weight: 600; background: var(--c-hover); border-radius: 9px; padding: 0 7px; }
.kanban-col-body { flex: 1; min-height: 60px; overflow-y: auto; padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.kanban-empty { color: var(--c-faint); font-size: 14px; text-align: center; padding: 18px 4px; border: 1px dashed var(--c-border); border-radius: var(--r-sm); }
.kanban-add { margin: 0 8px 8px; height: 32px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--c-muted); cursor: pointer; text-align: left; padding: 0 8px; }
.kanban-add:hover { background: var(--c-hover); color: var(--c-text); }
.task-card {
  background: var(--c-surface); border-radius: var(--r-sm); padding: 8px 10px; cursor: grab; flex: none;
  border: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.08s, box-shadow 0.08s;
}
.task-card:hover { border-color: var(--c-control); }
.task-card.is-dragging { opacity: 0.45; }
.task-card.is-overdue { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-danger) 55%, transparent); }
.card-top { display: flex; align-items: center; gap: 6px; }
.card-seq { font-size: 14px; font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.card-prereq { font-size: 14px; cursor: help; }
.card-menu {
  width: 24px; height: 22px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--c-muted);
  cursor: pointer; font-weight: 700; line-height: 1; letter-spacing: 1px;
}
.card-menu:hover, .card-menu:focus-visible { background: var(--c-hover); color: var(--c-text); }
.card-title { font-weight: 600; color: var(--c-text); line-height: 1.4; word-break: break-word; }
.card-blocker { font-size: 14px; color: var(--c-danger); background: var(--c-danger-soft); border-radius: var(--r-sm); padding: 3px 6px; }
.card-progress { display: flex; align-items: center; gap: 8px; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; }
.card-user { display: inline-flex; align-items: flex-start; gap: 5px; flex: 1 1 auto; min-width: 0; color: var(--c-muted); }
.card-user-name { min-width: 0; overflow-wrap: anywhere; }
.card-due { white-space: nowrap; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.card-due.due-soon { color: var(--c-warning); font-weight: 600; }
.card-due.due-over { color: var(--c-danger); font-weight: 700; }

/* メニュー(カードの「…」) */
.menu {
  position: fixed; z-index: 50; min-width: 200px; padding: 6px; border-radius: var(--r-md);
  background: var(--c-bg); border: 1px solid var(--c-border); box-shadow: var(--shadow-2); display: flex; flex-direction: column;
}
.menu-item {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--c-text); cursor: pointer; text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--c-primary); color: var(--c-on-primary); outline: none; }

/* ---------- カレンダー ---------- */
.calendar { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 20px 16px; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 4px; }
.cal-wd { text-align: center; font-size: 14px; font-weight: 700; color: var(--c-muted); padding: 4px 0; }
.cal-wd.sat { color: var(--c-sat); }
.cal-wd.sun { color: var(--c-sun); }
.cal-grid {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, minmax(96px, 1fr));
  gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden;
}
.cal-cell { background: var(--c-surface); padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; }
.cal-cell.is-out { background: var(--c-surface-2); }
.cal-cell.is-out .cal-day { color: var(--c-faint); }
.cal-cell.is-today { background-color: var(--c-surface); background-image: linear-gradient(var(--c-primary-soft), var(--c-primary-soft)); box-shadow: inset 0 0 0 2px var(--c-primary); }
.cal-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.cal-day { font-size: 14px; font-weight: 700; color: var(--c-text); min-width: 22px; }
.cal-cell.sat .cal-day { color: var(--c-sat); }
.cal-cell.sun .cal-day { color: var(--c-sun); }
.cal-cell.is-today .cal-day { background: var(--c-primary); color: var(--c-on-primary); border-radius: 10px; padding: 0 6px; }
.cal-shift { font-size: 11px; color: var(--c-success); font-weight: 600; white-space: nowrap; cursor: help; }
.cal-items { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; }
.cal-item {
  display: flex; align-items: center; gap: 4px; width: 100%; min-height: 20px; padding: 1px 5px; border-radius: 3px;
  border: none; font-size: 14px; text-align: left; cursor: pointer; overflow: hidden;
}
.cal-event { background: var(--c-primary-soft); color: var(--c-text); }
.cal-event:hover { background: var(--c-primary); color: var(--c-on-primary); }
.cal-due { background: color-mix(in srgb, var(--st) 18%, transparent); color: var(--st-text); }
.cal-due:hover { background: color-mix(in srgb, var(--st) 35%, transparent); }
.cal-due.is-overdue { color: var(--c-danger); font-weight: 600; }
.cal-due .st-dot { width: 8px; height: 8px; }
.cal-time { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.cal-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 11px; color: var(--c-muted); padding-left: 5px; }

/* ---------- タイムライン ---------- */
.view-timeline { --tl-label-w: 280px; }
.tl-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 20px 16px; }
.tl-scroll { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.tl-inner { position: relative; }
.tl-header { position: sticky; top: 0; z-index: 4; display: flex; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.tl-corner {
  position: sticky; left: 0; z-index: 5; width: var(--tl-label-w); flex: none; display: flex; align-items: flex-end; justify-content: space-between;
  padding: 6px 10px; background: var(--c-surface-2); border-right: 1px solid var(--c-border); font-weight: 700; color: var(--c-text); font-size: 14px;
}
.tl-days { display: flex; }
.tl-day {
  width: 28px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 2px 0 4px; font-size: 11px;
  color: var(--c-muted); border-left: 1px solid transparent;
}
.tl-day.month-start { border-left-color: var(--c-control); }
.tl-month { height: 16px; font-weight: 700; color: var(--c-text); white-space: nowrap; align-self: flex-start; padding-left: 3px; }
.tl-dnum { font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.tl-day.sat .tl-dnum, .tl-day.sat .tl-wd { color: var(--c-sat); }
.tl-day.sun .tl-dnum, .tl-day.sun .tl-wd { color: var(--c-sun); }
.tl-day.is-today .tl-dnum { background: var(--c-danger); color: var(--c-on-danger); border-radius: 9px; padding: 0 5px; }
.tl-body { position: relative; }
.tl-overlay { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 0; }
.tl-weekend { position: absolute; top: 0; bottom: 0; background: var(--c-weekend); }
.tl-month-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--c-control); }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--c-danger); opacity: 0.8; }
.tl-row { position: relative; z-index: 1; display: flex; height: 34px; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); }
.tl-row:hover { background: color-mix(in srgb, var(--c-hover) 45%, transparent); }
.tl-row.is-done .tl-title { color: var(--c-muted); }
.tl-label {
  position: sticky; left: 0; z-index: 2; width: var(--tl-label-w); flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--c-surface); border: none; border-right: 1px solid var(--c-border); cursor: pointer; text-align: left; min-width: 0;
}
.tl-row:hover .tl-label { background: var(--c-hover); }
.tl-seq { font-size: 14px; font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; flex: none; }
.tl-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text); font-weight: 500; }
.tl-track { position: relative; flex: none; }
.tl-bar {
  position: absolute; top: 6px; height: 22px; border-radius: 6px; border: 1px solid var(--st-dark); background: var(--st);
  color: var(--st-on, var(--bar-text)); font-size: 14px; font-weight: 600; padding: 0 6px; text-align: left; cursor: pointer; overflow: hidden;
  display: flex; align-items: center;
}
.tl-bar:hover { filter: brightness(1.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.tl-bar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
.tl-bar.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; }
.tl-bar.is-overdue { box-shadow: 0 0 0 2px var(--c-danger); }
.tl-bar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-diamond {
  position: absolute; top: 11px; width: 13px; height: 13px; margin-left: -6.5px; transform: rotate(45deg);
  background: var(--st); border: 1px solid var(--st-dark); border-radius: 2px; cursor: pointer; padding: 0;
}
.tl-mark-label { position: absolute; top: 8px; font-size: 11px; color: var(--c-muted); white-space: nowrap; pointer-events: none; }
.tl-outside {
  position: absolute; top: 8px; height: 18px; font-size: 11px; color: var(--c-muted); background: var(--c-hover);
  border: none; border-radius: 9px; padding: 0 8px; cursor: pointer; white-space: nowrap;
}
.tl-outside.is-before { left: 4px; }
.tl-outside.is-after { right: 4px; }
.tl-empty { padding: 32px; color: var(--c-muted); position: sticky; left: 0; }

/* ---------- シフト ---------- */
.view-shifts { overflow: auto; }
.shift-wrap { padding: 0 20px 20px; }
.shift-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.shift-table th, .shift-table td { border-bottom: 1px solid var(--c-border); border-right: 1px solid var(--c-border); padding: 6px; vertical-align: top; }
.shift-table tr > :last-child { border-right: none; }
.shift-table thead th { background: var(--c-surface-2); font-size: 14px; font-weight: 700; color: var(--c-text); text-align: center; }
.shift-table thead th.sat { color: var(--c-sat); }
.shift-table thead th.sun { color: var(--c-sun); }
.shift-table .is-today { background: var(--c-primary-soft); }
.shift-name-col { width: 200px; text-align: left !important; font-weight: 600; color: var(--c-text); }
.shift-table tbody th { background: var(--c-surface-2); font-size: 14px; }
.shift-table tr.is-me th { background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface-2)); }
.shift-chip {
  display: flex; align-items: center; gap: 4px; margin-bottom: 3px; padding: 2px 6px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-success) 18%, transparent); color: var(--c-text); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; border: 1px solid color-mix(in srgb, var(--c-success) 40%, transparent);
}
.shift-chip.is-mine { background: color-mix(in srgb, var(--c-primary) 22%, transparent); border-color: color-mix(in srgb, var(--c-primary) 55%, transparent); }
.shift-note { font-size: 11px; cursor: help; }
.shift-cancel { margin-left: auto; width: 18px; height: 18px; border: none; border-radius: 50%; background: transparent; color: var(--c-muted); cursor: pointer; line-height: 1; padding: 0; }
.shift-cancel:hover { background: var(--c-danger); color: var(--c-on-danger); }
.shift-total th, .shift-total td { background: var(--c-surface-2); font-weight: 700; text-align: center; color: var(--c-muted); border-bottom: none; }

/* ---------- 予定 ---------- */
.view-events { overflow: auto; }
.event-list { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.event-day { display: flex; flex-direction: column; gap: 8px; }
.event-day-head { display: flex; align-items: baseline; gap: 10px; font-size: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--c-border); }
.event-day.is-today .event-day-head { color: var(--c-primary-ink); }
.event-card { display: flex; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); }
.event-card { position: relative; padding-left: 30px; }
.event-card::before { content: ""; position: absolute; left: 12px; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--tone, var(--c-primary)); }
.event-card.ev-deadline, .event-card.ev-emergency { --tone: var(--c-danger); }
.event-card.ev-milestone { --tone: var(--c-warning); }
.event-card.ev-playtest { --tone: var(--c-success); }
.event-time { width: 64px; flex: none; font-variant-numeric: tabular-nums; }
.event-start { font-size: 16px; font-weight: 700; color: var(--c-text); }
.event-end { font-size: 14px; color: var(--c-muted); }
.event-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.event-head { display: flex; align-items: center; gap: 8px; }
.event-title { border: none; background: transparent; padding: 0; font-size: 15px; font-weight: 700; color: var(--c-text); cursor: pointer; text-align: left; }
.event-title:hover { text-decoration: underline; }
.event-admin { display: flex; gap: 4px; }
.att-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.confirmed-badge { font-size: 14px; font-weight: 700; color: var(--c-success); }

/* セグメントボタン(状態・出欠) */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 15px;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer; font-size: 14px;
}
.seg-sm .seg-btn { height: 26px; padding: 0 10px; font-size: 14px; }
.seg-btn:hover { border-color: var(--c-control); background: var(--c-hover); }
.seg-btn.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); font-weight: 600; }
.seg-btn[class*="st-"].is-active { background: color-mix(in srgb, var(--st) 30%, var(--c-surface)); border-color: var(--st-dark); color: var(--c-text); }
.seg-btn.att-absent.is-active { background: var(--c-danger); border-color: var(--c-danger); }
.seg-btn.att-late.is-active, .seg-btn.att-maybe.is-active { background: var(--c-warning); border-color: var(--c-warning); color: var(--c-surface); }
.seg-btn.att-join.is-active { background: var(--c-success); border-color: var(--c-success); }

/* ---------- 共通: お知らせ枠・状態チップ・左ナビのバッジ ---------- */
.sb-label { flex: 1; min-width: 0; }
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--c-danger); color: var(--c-on-danger); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.notice {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--r-md); font-size: 14px;
  background: var(--c-primary-soft);
}
.notice-title { font-weight: 700; color: var(--c-text); }
.notice-detail { color: var(--c-text); }
.notice .btn { align-self: flex-start; margin-top: 6px; }
.notice-info { background: var(--c-primary-soft); }
.notice-warn { background: var(--c-warning-soft); }
.notice-error { background: var(--c-danger-soft); }
.notice-ok { background: color-mix(in srgb, var(--c-success) 14%, transparent); }
.notice-muted { background: var(--c-surface-2); }
.tone-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px;
  font-size: 14px; font-weight: 600; white-space: nowrap; background: var(--c-hover); color: var(--c-text);
}
.tone-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.tone-chip.tone-ok { background: color-mix(in srgb, var(--c-success) 16%, transparent); color: var(--c-success); }
.tone-chip.tone-info { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.tone-chip.tone-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.tone-chip.tone-error { background: var(--c-danger-soft); color: var(--c-danger); }
.tone-chip.tone-muted { background: var(--c-hover); color: var(--c-muted); }
.btn-success { background: var(--c-success); color: var(--c-surface); }
.btn-success:hover:not(:disabled) { filter: brightness(0.92); }
.btn-danger-outline { background: transparent; color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 55%, transparent); }
.btn-danger-outline:hover:not(:disabled) { background: var(--c-danger-soft); }
.nowrap { white-space: nowrap; }

/* ---------- 役職 ---------- */
.view-roles { overflow: auto; }
.roles-wrap { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 16px; max-width: 1240px; }
.roles-head { display: flex; align-items: flex-start; gap: 16px; }
.roles-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.roles-title { font-size: 18px; }
.roles-section { display: flex; flex-direction: column; gap: 10px; }
.section-head { display: flex; align-items: center; gap: 8px; }
.section-title { font-size: 15px; }

/* 承認待ち(画面の最上部で一番目立たせる) */
.pending-panel {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c-warning) 60%, transparent);
  background: color-mix(in srgb, var(--c-warning) 8%, var(--c-surface-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-warning) 12%, transparent);
}
.pending-panel.is-empty { border-color: var(--c-border); background: var(--c-surface-2); box-shadow: none; padding: 12px 16px; }
.pending-head { display: flex; align-items: center; gap: 10px; }
.pending-icon {
  width: 28px; height: 28px; border-radius: 50%; background: var(--c-warning); color: var(--c-surface); font-weight: 900;
  display: grid; place-items: center; flex: none;
}
.pending-title { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.pending-count {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px;
  background: var(--c-danger); color: var(--c-on-danger); font-size: 12px; font-weight: 800;
}
.pending-lead { font-size: 14px; color: var(--c-text); }
.pending-list { display: flex; flex-direction: column; gap: 8px; }
.pending-empty { display: flex; align-items: center; gap: 12px; }
.pending-ok {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 900;
  background: color-mix(in srgb, var(--c-success) 20%, transparent); color: var(--c-success);
}
.pending-empty-title { font-weight: 700; color: var(--c-text); }
.role-change-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border);
}
.role-change-row.is-busy { opacity: 0.6; }
.rc-icon {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 900;
  background: var(--c-primary-soft); color: var(--c-primary-ink);
}
.rc-member_add .rc-icon { background: color-mix(in srgb, var(--c-success) 18%, transparent); color: var(--c-success); }
.rc-member_remove .rc-icon, .rc-role_delete .rc-icon { background: var(--c-danger-soft); color: var(--c-danger); }
.rc-role_update .rc-icon { background: var(--c-warning-soft); color: var(--c-warning); }
.rc-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-title { font-size: 15px; font-weight: 700; color: var(--c-text); word-break: break-word; }
.rc-detail { font-size: 14px; color: var(--c-text); }
.rc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 2px; font-size: 14px; color: var(--c-muted); }
.rc-expire.is-soon { color: var(--c-warning); font-weight: 700; }
.rc-note { font-size: 14px; font-weight: 600; color: var(--c-warning); }
.rc-actions { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }

/* 役職カード */
.position-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.position-card {
  --pos-color: var(--c-faint);
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--c-surface); border: 1px solid var(--c-border);
}
.position-card.has-pending { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-warning) 60%, transparent); }
.pos-head { display: flex; align-items: center; gap: 8px; }
.pos-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pos-color, var(--c-faint)); flex: none; }
.pos-dot-lg { width: 14px; height: 14px; }
.pos-name { font-size: 15px; min-width: 0; word-break: break-word; }
.pos-tag { --pos-color: var(--c-faint); display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--c-text); }
.pos-purpose { font-size: 14px; color: var(--c-muted); }
.pos-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.role-mention {
  display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 4px; font-size: 14px; font-weight: 600;
  color: color-mix(in srgb, var(--pos-color, var(--c-primary)) 75%, var(--c-text));
  background: color-mix(in srgb, var(--pos-color, var(--c-primary)) 16%, transparent);
}
.role-mention-lg { height: 28px; padding: 0 8px; font-size: 14px; }
.pos-hint {
  font-size: 14px; padding: 6px 10px; border-radius: var(--r-sm); color: var(--c-text);
  background: var(--c-hover);
}
.pos-hint.tone-error { background: var(--c-danger-soft); }
.pos-hint.tone-warn { background: var(--c-warning-soft); }
.pos-members-head { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--c-muted); }
.pos-members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.member-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px; border-radius: 14px; max-width: 100%;
  background: var(--c-surface); border: 1px solid var(--c-border); font-size: 14px; color: var(--c-text);
}
.member-pill-name { min-width: 0; overflow-wrap: anywhere; padding-right: 6px; }
.member-pill.is-away .member-pill-name { color: var(--c-faint); }
.member-pill-away { margin-left: -4px; padding-right: 4px; font-size: 11px; color: var(--c-faint); }
.pill-remove {
  width: 20px; height: 20px; margin-left: -4px; padding: 0; border: none; border-radius: 50%; flex: none;
  background: transparent; color: var(--c-muted); cursor: pointer; line-height: 1;
}
.pill-remove:hover { background: var(--c-danger); color: var(--c-on-danger); }
.pos-empty { padding: 4px 0; font-size: 14px; color: var(--c-faint); }
.pos-actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--c-border); }

/* 変更履歴 */
.role-history {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; overflow: hidden;
  background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.role-history th { padding: 8px 10px; text-align: left; font-size: 14px; font-weight: 700; color: var(--c-muted); border-bottom: 1px solid var(--c-border); }
.role-history td { padding: 8px 10px; vertical-align: middle; color: var(--c-text); border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); }
.role-history tr:last-child td { border-bottom: none; }
.history-empty { padding: 8px 2px; }

/* 役職ダイアログ・メンバー追加 */
.color-row { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.color-input { width: 48px; height: 32px; padding: 2px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); cursor: pointer; }
.color-input:disabled { opacity: 0.35; cursor: default; }
.check-block { min-height: 36px; }
.preview-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--c-surface-2); }
.dlg-group { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--c-border); }
.dlg-notes { display: flex; flex-direction: column; gap: 8px; }
.dlg-notes:empty, .role-link-box:empty { display: none; }
.picker { display: flex; flex-direction: column; gap: 10px; }
.picker-list { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; }
.picker-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--c-text); cursor: pointer; text-align: left;
}
.picker-item:hover:not(:disabled), .picker-item:focus-visible { background: var(--c-hover); }
.picker-name { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.picker-add { font-size: 14px; font-weight: 600; color: var(--c-primary-ink); opacity: 0; }
.picker-item:hover .picker-add, .picker-item:focus-visible .picker-add { opacity: 1; }
.picker-empty { padding: 16px 4px; font-size: 14px; }

/* ---------- 議事録 ---------- */
.minutes-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.minutes-side { display: flex; flex-direction: column; min-height: 0; background: var(--c-surface-2); border-right: 1px solid var(--c-border); }
.minutes-search { flex: none; padding: 12px; }
.minutes-search input[type="search"].input { width: 100%; }
.minutes-list { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.minutes-row {
  display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 9px 10px; flex: none;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--c-text); text-align: left; cursor: pointer;
}
.minutes-row:hover { background: var(--c-hover); }
.minutes-row.is-selected { background: var(--c-active); border-color: color-mix(in srgb, var(--c-primary) 55%, transparent); }
.minutes-row-head { display: flex; align-items: center; gap: 8px; }
.minutes-row-title { flex: 1; min-width: 0; font-weight: 700; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minutes-row .tone-chip { height: 18px; padding: 0 7px; font-size: 11px; }
.minutes-row-meta { font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.minutes-row-summary, .minutes-row-error { font-size: 14px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minutes-row-error { color: var(--c-danger); }
.minutes-more { align-self: center; margin-top: 6px; }
.minutes-empty, .minutes-nohit { display: flex; flex-direction: column; gap: 6px; padding: 24px 8px; text-align: center; }
.minutes-detail { min-width: 0; min-height: 0; overflow: auto; padding: 20px 28px 32px; }
/* 「‹ 一覧へ」はスマホ幅だけ(一覧と詳細が別のページになる) */
.minutes-back { display: none; }
.minutes-doc { max-width: 900px; display: flex; flex-direction: column; gap: 16px; }
.minutes-doc-head { display: flex; align-items: center; gap: 12px; }
.minutes-doc-title { flex: 1; min-width: 0; font-size: 20px; word-break: break-word; }
.minutes-kv { max-width: 560px; }
.minutes-section { display: flex; flex-direction: column; gap: 8px; }
.minutes-section-title { padding-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--c-muted); border-bottom: 1px solid var(--c-border); }
.minutes-text { white-space: pre-wrap; color: var(--c-text); line-height: 1.7; user-select: text; word-break: break-word; }
.minutes-body { padding: 12px 16px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.transcript-open { display: flex; align-items: center; gap: 10px; }
.transcript-box { display: flex; flex-direction: column; gap: 8px; }
.transcript-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.transcript-tools input[type="search"].input { width: 320px; max-width: 100%; }
.transcript {
  max-height: 460px; overflow: auto; padding: 6px 14px; font-family: var(--font); font-size: 14px; line-height: 1.65; user-select: text;
  background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.transcript-line { padding: 4px 0; white-space: pre-wrap; word-break: break-word; color: var(--c-text); border-bottom: 1px solid color-mix(in srgb, var(--c-border) 50%, transparent); }
.transcript-line:last-child { border-bottom: none; }

/* ---------- ダイアログ ---------- */
.modal {
  border: none; padding: 0; border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-2);
  max-height: calc(100vh - 48px); display: flex; flex-direction: column;
}
.modal:not([open]) { display: none; }
.modal::backdrop { background: var(--c-backdrop); }
.modal-sm { width: 440px; }
.modal-md { width: 620px; }
.modal-lg { width: 900px; }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; }
.modal-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.modal-title { font-size: 18px; line-height: 1.35; word-break: break-word; }
.modal-body { padding: 4px 20px 16px; overflow: auto; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: var(--c-surface); border-top: 1px solid var(--c-border); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.confirm-message { color: var(--c-text); white-space: pre-wrap; }
.confirm-details { margin: 10px 0 0; padding-left: 18px; color: var(--c-muted); }
.kv { margin: 0; display: grid; gap: 2px; }
.kv-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); align-items: center; }
.kv-row dt { font-size: 14px; font-weight: 700; color: var(--c-muted); }
.kv-row dd { margin: 0; color: var(--c-text); min-width: 0; }
.prereq-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.prereq-open { color: var(--c-danger); }
.task-dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.task-dialog-side { display: flex; flex-direction: column; gap: 16px; }
.dlg-section h3 { font-size: 14px; color: var(--c-muted); margin-bottom: 8px; }
.note { font-size: 14px; background: var(--c-surface-2); padding: 10px 12px; border-radius: var(--r-sm); }
.range-row { display: flex; align-items: center; gap: 10px; }
.range { flex: 1; accent-color: var(--c-primary); }
.range-value { width: 44px; text-align: right; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.event-dialog { display: flex; flex-direction: column; gap: 16px; }

/* ---------- セットアップ(プロジェクト選択の候補・ウィザード) ---------- */
.setup-section-wrap:empty { display: none; }
.setup-section { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; border-top: 1px solid var(--c-border); }
.setup-candidate {
  display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 10px;
  border: 1px dashed var(--c-control); background: var(--c-surface);
}
.setup-candidate-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-panel {
  width: 820px; max-width: 100%; background: var(--c-surface); border-radius: 12px; padding: 24px 28px;
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 18px;
}
.setup-head { display: flex; align-items: center; gap: 14px; }
.setup-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setup-body { min-height: 240px; }
.setup-actions { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--c-border); }
.setup-check { display: flex; flex-direction: column; gap: 2px; }
.setup-checks { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 10px; }
.setup-step4 { display: flex; flex-direction: column; gap: 8px; }
.setup-panel-target { padding: 8px 12px; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-muted); }
.setup-confirm { display: flex; flex-direction: column; gap: 12px; }
.setup-kv .kv-row { grid-template-columns: 180px 1fr; }
.setup-warnings, .setup-notes { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.setup-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 0; }
.setup-done-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: var(--c-surface); background: var(--c-success); }
.setup-done-title { font-size: 18px; }
.setup-done .setup-notes { text-align: left; }
.setup-error { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

/* ---------- 設定 ---------- */
.view-settings { overflow: auto; }
.settings-wrap { padding: 12px 20px 32px; display: flex; flex-direction: column; gap: 14px; max-width: 1080px; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--c-border); }
.settings-tab {
  height: 36px; padding: 0 14px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--c-muted);
  cursor: pointer; font-weight: 600; margin-bottom: -1px;
}
.settings-tab:hover { color: var(--c-text); background: var(--c-hover); }
.settings-tab.is-active { color: var(--c-text); border-bottom-color: var(--c-primary); }
.settings-member-note { margin-top: -4px; }
.settings-panel { display: flex; flex-direction: column; gap: 16px; }
.settings-section { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.settings-section-head { display: flex; flex-direction: column; gap: 2px; }
.settings-update .update-version { font-size: 14px; }
.settings-update .update-status { margin: 0; font-size: 14px; }
.settings-update .update-status.tone-ok { color: var(--c-success); }
.settings-update .update-status.tone-info { color: var(--c-primary-ink); }
.settings-update .update-status.tone-warn { color: var(--c-warning); }
.settings-update .update-status.tone-muted { color: var(--c-muted); }
.settings-update .update-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; max-width: 760px; }
.settings-grid .span-2 { grid-column: span 2; }
.settings-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.settings-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
@media (max-width: 1100px) { .settings-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.settings-num { width: 120px; }
.input-unit { display: flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: 14px; }
.input-unit .input { width: 120px; }
.settings-switches { display: flex; flex-wrap: wrap; gap: 20px; }
.settings-lock { font-size: 14px; color: var(--c-faint); }
.settings-lock::before { content: "🔒 "; }
.settings-errors { color: var(--c-danger); font-size: 14px; display: grid; gap: 2px; }
.settings-rows { display: flex; flex-direction: column; }
.settings-row {
  display: grid; grid-template-columns: 220px minmax(0, 360px) 1fr; gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-weight: 600; color: var(--c-text); font-size: 14px; }
.settings-row-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.settings-row-control select.input { min-width: 0; }
.settings-row-note { font-size: 14px; color: var(--c-muted); }
.ai-state-row, .ai-level-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.settings-level { width: 180px; }
.ai-channel-row .settings-row-control select.input { width: 190px; }
.ai-channel-add .input { width: 260px; }
.settings-table-wrap { overflow-x: auto; }
.settings-logs td { font-size: 14px; }
.settings-log-detail { word-break: break-word; color: var(--c-text); }
.mono { font-family: Consolas, "Cascadia Mono", monospace; }

/* ---------- AI チャット ---------- */
.view-ai { overflow: hidden; }
.ai-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 12px 20px; flex: none; border-bottom: 1px solid var(--c-border); }
.ai-title { font-size: 16px; }
.ai-usage { font-variant-numeric: tabular-nums; }
/* P76: 会話の題名(押すと名前を変える)・会話の一覧のシート */
.ai-head { flex-wrap: wrap; }
.ai-session-title { flex: 0 1 auto; min-width: 0; max-width: 360px; border: none; background: transparent; padding: 4px 8px; border-radius: var(--r-sm); font: inherit; font-size: 16px; font-weight: 700; color: var(--c-text); cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-session-title:hover { background: var(--c-hover); }
.ai-session-list { display: flex; flex-direction: column; gap: 2px; }
.ai-session-row { display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 0; border-radius: var(--r-md); }
.ai-session-row.is-current { background: var(--c-primary-soft); }
.ai-session-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: none; background: transparent; font: inherit; color: var(--c-text); text-align: left; cursor: pointer; border-radius: var(--r-md); min-height: 48px; justify-content: center; }
.ai-session-main:hover { background: var(--c-hover); }
.ai-session-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-session-meta { font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.ai-session-empty { padding: 16px 12px; }
/* P77: 「覚えました」の行 */
.ai-msg.ai-memory-notice { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: min(100%, 620px); padding: 2px 6px 2px 12px; }
.ai-memory-notice.is-undone .ai-notice-text { text-decoration: line-through; }
.ai-memory-notice .ai-notice-text { min-width: 0; word-break: break-word; }
/* P75・P77: 設定の「AI のパーソナライズ」「メモリ」 */
.ai-prefs-body, .ai-memory-body { display: flex; flex-direction: column; gap: 12px; }
.ai-prefs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
.ai-prefs-grid .span-2 { grid-column: 1 / -1; }
.ai-prefs-text { max-width: 760px; }
.ai-prefs-text .span-2 { grid-column: 1 / -1; }
.ai-prefs-text .input { width: 100%; }
.ai-prefs-text textarea.input { resize: vertical; }
.ai-memory-list { display: flex; flex-direction: column; max-width: 760px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.ai-memory-list.is-off { opacity: 0.6; }
.ai-memory-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 6px 10px 12px; border-bottom: 1px solid var(--c-border); }
.ai-memory-row:last-child { border-bottom: none; }
.ai-memory-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-memory-text { white-space: pre-wrap; word-break: break-word; color: var(--c-text); }
.ai-memory-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-memory-actions { margin-top: 0; flex-wrap: wrap; }
.ai-memory-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.ai-memory-clear { color: var(--c-danger); }
.ai-banners { display: flex; flex-direction: column; gap: 6px; padding: 8px 20px 0; flex: none; }
.ai-banners:empty { display: none; }
.ai-banner { flex-direction: row; align-items: center; gap: 12px; }
.ai-banner .btn { margin-top: 0; }
.ai-info-chip { display: flex; }
.ai-transcript { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ai-older { display: flex; justify-content: center; }
.ai-msg { display: flex; flex-direction: column; gap: 4px; max-width: 820px; }
.ai-bubble { padding: 10px 14px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; user-select: text; line-height: 1.6; color: var(--c-text); }
.ai-meta { font-size: 14px; color: var(--c-faint); }
.ai-msg-user { align-self: flex-end; align-items: flex-end; max-width: 72%; }
.ai-msg-user .ai-bubble { background: var(--c-primary); color: var(--c-on-primary); border-bottom-right-radius: 4px; }
.ai-msg-assistant { align-self: flex-start; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; max-width: 86%; }
.ai-msg-assistant .ai-meta { grid-column: 2; }
.ai-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary-ink); font-size: 14px; }
.ai-msg-assistant .ai-bubble { background: var(--c-surface-2); border: 1px solid var(--c-border); border-top-left-radius: 4px; }
.ai-text { white-space: pre-wrap; word-break: break-word; }
.ai-ask .ai-bubble { border: 1px solid var(--c-warning); background: var(--c-warning-soft); }
.ai-ask-label { font-size: 14px; font-weight: 700; color: var(--c-warning); margin-bottom: 4px; }
.ai-msg-error { align-self: flex-start; max-width: 86%; }
.ai-msg-error .ai-bubble { border: 1px solid var(--c-danger); background: var(--c-danger-soft); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ai-notice { align-self: center; font-size: 14px; color: var(--c-muted); background: var(--c-surface-2); padding: 4px 12px; border-radius: 12px; white-space: pre-wrap; text-align: center; }
.ai-result { align-self: flex-start; width: min(620px, 86%); padding: 10px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--c-success) 45%, var(--c-border)); background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface-2)); }
.ai-result-title { font-size: 14px; font-weight: 700; color: var(--c-success); }
.ai-steps { margin-top: 8px; font-size: 14px; }
.ai-steps summary { cursor: pointer; color: var(--c-muted); font-size: 14px; }
.ai-step-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; white-space: normal; }
.ai-step-list .is-ng { color: var(--c-danger); }
/* P57: 文中のタスク番号(#22)。文の一部なので行の高さのまま(折り返しを崩さない) */
.ai-text .link-btn, .ai-step-list .link-btn { display: inline; font-weight: 600; }
.ai-confirm {
  align-self: flex-start; width: min(620px, 86%); padding: 12px 14px; border-radius: 10px; gap: 8px;
  border: 1px solid var(--c-control); background: var(--c-surface-2);
}
.ai-confirm.is-pending { border-color: color-mix(in srgb, var(--c-danger) 60%, transparent); background: color-mix(in srgb, var(--c-danger) 6%, var(--c-surface-2)); }
.ai-confirm.is-busy { opacity: 0.8; }
.ai-confirm-head { display: flex; align-items: center; gap: 8px; }
.ai-confirm-icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--c-surface); background: var(--c-faint); flex: none; }
.ai-confirm.is-pending .ai-confirm-icon { background: var(--c-danger); }
.ai-confirm.is-approved .ai-confirm-icon { background: var(--c-success); }
.ai-confirm-title { flex: 1; min-width: 0; font-size: 14px; }
.ai-confirm-remaining { font-size: 14px; color: var(--c-warning); font-weight: 600; font-variant-numeric: tabular-nums; }
.ai-confirm-text { color: var(--c-text); font-size: 14px; white-space: pre-wrap; }
.ai-confirm-preview { white-space: pre-wrap; word-break: break-word; padding: 8px 12px; border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); user-select: text; }
.ai-confirm-actions { display: flex; align-items: center; gap: 8px; }
.ai-confirm-state { font-size: 14px; color: var(--c-muted); }
.ai-running {
  align-self: flex-start; width: min(620px, 86%); padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--c-control);
  background: var(--c-surface-2); display: flex; flex-direction: column; gap: 6px;
}
.ai-running-head { display: flex; align-items: center; gap: 8px; }
.ai-running-label { color: var(--c-text); font-size: 14px; font-variant-numeric: tabular-nums; }
.ai-think summary { cursor: pointer; font-size: 14px; color: var(--c-muted); }
.ai-think-text { margin: 6px 0 0; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 14px; color: var(--c-muted); font-family: Consolas, "Cascadia Mono", monospace; }
.ai-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 520px; padding: 24px; }
.ai-empty-mark { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary-ink); font-size: 24px; }
.ai-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.ai-composer { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 12px 20px 16px; border-top: 1px solid var(--c-border); }
.ai-input { min-height: 64px; max-height: 240px; line-height: 1.5; }
.ai-composer-foot { display: flex; align-items: center; gap: 12px; }
.ai-count { font-variant-numeric: tabular-nums; }
.ai-count.is-over { color: var(--c-danger); }

/* ---------- タスクの語彙(P46: カテゴリ・状態の表示名と色)。色は CSS 変数(CSSOM で設定)だけで受け取る ---------- */
.cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cat-color, var(--c-faint)); box-shadow: 0 0 0 1px var(--c-control); }
.legend-item-btn { border: none; background: transparent; color: inherit; font: inherit; padding: 2px 5px; margin: -2px -5px; border-radius: var(--r-sm); cursor: pointer; }
.legend-item-btn:hover { background: var(--c-hover); color: var(--c-text); }
.legend-edit { margin: -4px 0; }
.vocab-dialog { display: flex; flex-direction: column; gap: 14px; min-height: 420px; }
.vocab-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--c-border); }
.vocab-tab {
  height: 34px; padding: 0 14px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--c-muted);
  cursor: pointer; font-weight: 600; margin-bottom: -1px;
}
.vocab-tab:hover { color: var(--c-text); background: var(--c-hover); }
.vocab-tab.is-active { color: var(--c-text); border-bottom-color: var(--c-primary); }
.vocab-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vocab-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vocab-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.vocab-note { font-size: 14px; color: var(--c-muted); }
.vocab-rows { display: flex; flex-direction: column; }
.vocab-row {
  display: grid; align-items: center; gap: 6px 10px; padding: 6px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent);
}
.vocab-row:last-child { border-bottom: none; }
.vocab-cat-row { grid-template-columns: auto auto minmax(120px, 1fr) 52px 64px auto auto; }
.vocab-status-row { grid-template-columns: minmax(200px, 250px) minmax(120px, 1fr) auto auto; }
.vocab-row.is-focus { background: var(--c-primary-soft); border-radius: var(--r-sm); }
.vocab-order { display: inline-flex; gap: 2px; }
.vocab-order .btn { width: 26px; padding: 0; }
.vocab-color { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vocab-color input[type="color"] {
  width: 34px; height: 28px; padding: 0 2px; border: 1px solid var(--c-control); border-radius: var(--r-sm); background: var(--c-surface); cursor: pointer;
}
.vocab-color input[type="color"]:disabled { opacity: 0.45; cursor: default; }
.vocab-save:disabled { visibility: hidden; }
.vocab-count { font-size: 12px; color: var(--c-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vocab-row-msg { grid-column: 1 / -1; font-size: 14px; }
.vocab-row-slot { grid-column: 1 / -1; }
.vocab-row-slot:empty { display: none; }
.vocab-row-error { color: var(--c-danger); }
.vocab-warn { color: var(--c-warning); }
.vocab-warn::before { content: "⚠ "; }
.vocab-preview { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vocab-sample {
  display: inline-flex; align-items: center; height: 22px; min-width: 88px; max-width: 132px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--st-dark); background: var(--st); color: var(--st-on, var(--bar-text)); font-size: 14px; font-weight: 600;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: none;
}
.vocab-preview .status-chip { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.vocab-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 4px 0; border-top: 1px solid var(--c-border); }
.vocab-add .input { width: 240px; }
.vocab-actions { display: flex; align-items: center; gap: 8px; padding-top: 6px; }

/* ---------- トースト ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-surface);
  color: var(--c-text); box-shadow: var(--shadow-2); border: 1px solid var(--c-border); animation: toast-in var(--dur) var(--ease);
}
.toast-icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--c-on-primary); background: var(--c-primary); flex: none; }
.toast-success .toast-icon { background: var(--c-success); }
.toast-error .toast-icon { background: var(--c-danger); }
.toast-text { flex: 1; font-size: 14px; }
.toast-close { border: none; background: transparent; color: var(--c-muted); cursor: pointer; font-size: 16px; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-color-scheme: dark) {
  .status-chip, .cal-due { color: var(--c-text); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- 通知センター・通知設定(P48) ---------- */
.view-notifications { overflow: auto; }
.view-notifications .toolbar .btn.is-active { background: var(--c-active); color: var(--c-text); }
.notification-wrap { padding: 0 20px 28px; display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.notification-prefs-wrap:empty, .notification-approvals:empty { display: none; }
.notification-approvals { display: flex; flex-direction: column; gap: 6px; }
.notification-approval { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--c-warning-soft); border: 1px solid color-mix(in srgb, var(--c-warning) 35%, transparent); }
.notification-approval-text { flex: 1; min-width: 0; font-size: 14px; color: var(--c-text); }
.notification-list { display: flex; flex-direction: column; gap: 14px; }
.notification-day { display: flex; flex-direction: column; gap: 4px; }
.notification-day-head { margin: 0 0 2px; padding-left: 4px; font-size: 14px; font-weight: 700; color: var(--c-muted); }
.notification-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px 10px 12px; border-radius: var(--r-md);
  background: var(--c-surface-2); border: 1px solid var(--c-border); cursor: pointer;
}
.notification-row:hover { background: var(--c-hover); }
.notification-row:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.notification-row.is-unread { background: var(--c-primary-soft); }
.notification-row.is-focused { border-color: var(--c-primary); background: var(--c-primary-soft); }
.notification-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex: none; background: transparent; }
.notification-row.is-unread .notification-dot { background: var(--c-primary); }
.notification-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notification-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.notification-cat { flex: none; }
.notification-title { flex: 1; min-width: 0; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notification-row.is-unread .notification-title { font-weight: 700; color: var(--c-text); }
.notification-time { flex: none; font-size: 14px; color: var(--c-faint); font-variant-numeric: tabular-nums; }
.notification-body { font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.notification-more { align-self: center; }
.notification-prefs { display: flex; flex-direction: column; gap: 12px; }
.notification-prefs-local { display: flex; flex-direction: column; gap: 8px; }
.notification-snooze { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notification-snooze-label { min-width: 64px; font-size: 14px; color: var(--c-muted); }
.switch-rows { display: flex; flex-direction: column; }
.switch-row { display: flex; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); cursor: pointer; max-width: 760px; }
.switch-rows .switch-row:last-child, .notification-prefs-local .switch-row { border-bottom: none; }
.switch-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.switch-row-label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--c-text); }
.switch-row-desc { font-size: 14px; color: var(--c-muted); }
.switch-input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0;
  border-radius: 10px; border: 1px solid var(--c-control); background: var(--c-active); cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.switch-input::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s;
}
.switch-input:checked { background: var(--c-primary); border-color: var(--c-primary); }
.switch-input:checked::before { transform: translateX(16px); }
.switch-input:disabled { opacity: 0.5; cursor: default; }
.switch-input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.notification-prefs > .settings-section-head:not(:first-child) { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--c-border); }

/* ---------- 報告・運用(P49) ---------- */
.topbar-report:empty { display: none; }
.topbar-report-btn { color: var(--c-text); }
.field-error { font-size: 14px; color: var(--c-danger); min-height: 0; }
.field-error:empty { display: none; }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter.is-over { color: var(--c-danger); font-weight: 700; }
.seg-btn-sm { height: 26px; padding: 0 10px; font-size: 14px; }
.seg-btn.sev-high.is-active { background: var(--c-warning); border-color: var(--c-warning); color: var(--c-surface); }
.seg-btn.sev-critical.is-active { background: var(--c-danger); border-color: var(--c-danger); }
.tone-chip-xs { height: 18px; padding: 0 7px; font-size: 11px; gap: 4px; }
.link-btn { border: none; background: transparent; padding: 0; color: var(--c-primary-ink); cursor: pointer; text-align: left; font: inherit; }
.link-btn:hover { text-decoration: underline; }
.copy-buffer { position: fixed; left: -9999px; top: 0; opacity: 0; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); flex: none; }

/* 報告ダイアログ(撮影中はダイアログと背景を隠す) */
.report-dialog.is-capturing, .report-dialog.is-capturing::backdrop { visibility: hidden; background: transparent; }
.report-form { display: flex; flex-direction: column; gap: 14px; }
.report-bug-box { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.report-bug-box:empty { display: none; }
.report-context { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--c-surface-2); border: 1px dashed var(--c-control); }
.report-context-line { font-size: 14px; color: var(--c-text); font-variant-numeric: tabular-nums; }
.report-server-error:empty { display: none; }
.capture-panel { display: flex; flex-direction: column; gap: 6px; }
.capture-empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.capture-preview { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 12px; align-items: start; }
.capture-img { width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--c-control); background: var(--c-bg); }
.capture-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.capture-consent { font-weight: 600; color: var(--c-text); }
.capture-note { font-size: 14px; }

/* 「報告」画面・運用の報告タブ(左: 一覧 / 右: 詳細) */
.view-reports, .view-ops { min-height: 0; }
.reports-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); }
.reports-side { display: flex; flex-direction: column; min-height: 0; background: var(--c-surface-2); border-right: 1px solid var(--c-border); }
.reports-side-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px; flex-wrap: wrap; }
.ops-report-filters .input-sm { width: auto; }
.report-list { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.report-row {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 9px 10px; flex: none;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--c-text); text-align: left; cursor: pointer;
}
.report-row:hover { background: var(--c-hover); }
.report-row.is-selected { background: var(--c-active); border-color: color-mix(in srgb, var(--c-primary) 55%, transparent); }
.report-row.is-unread { background: var(--c-primary-soft); }
.report-row-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.report-no { font-size: 14px; font-weight: 800; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.report-no-lg { font-size: 15px; }
.report-row-title { font-weight: 700; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-row-meta { font-size: 14px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-more { align-self: center; margin-top: 6px; }
.report-empty { display: flex; flex-direction: column; gap: 6px; padding: 24px 8px; text-align: center; }
.report-detail { min-width: 0; min-height: 0; overflow: auto; padding: 20px 28px 32px; }
.report-doc { max-width: 900px; display: flex; flex-direction: column; gap: 14px; }
.report-doc-head { display: flex; align-items: center; gap: 10px; }
.report-doc-title { flex: 1; min-width: 0; font-size: 19px; word-break: break-word; }
.report-kv { max-width: 640px; }
.report-section { display: flex; flex-direction: column; gap: 8px; }
.report-section-title { padding-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--c-muted); border-bottom: 1px solid var(--c-border); }
.report-text { white-space: pre-wrap; word-break: break-word; color: var(--c-text); line-height: 1.7; user-select: text; padding: 10px 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.report-attachment { display: flex; flex-direction: column; gap: 8px; }
.report-attachment-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-muted); }
.report-img { max-width: 100%; max-height: 480px; object-fit: contain; align-self: flex-start; border-radius: var(--r-sm); border: 1px solid var(--c-control); background: var(--c-bg); }
.report-add-image { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.report-events { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.report-event { padding: 8px 12px; border-radius: var(--r-sm); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.report-event.actor-operator { background: var(--c-primary-soft); }
.report-event.actor-operator.is-comment { background: var(--c-primary-soft); }
.report-event.is-internal { background: var(--c-warning-soft); }
.report-event-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.report-event-actor { font-size: 14px; font-weight: 700; color: var(--c-text); }
.report-event-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; color: var(--c-text); user-select: text; }
.report-withdraw { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--c-border); }

/* 運用画面 */
.view-ops { display: flex; flex-direction: column; }
.ops-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--c-border); flex-wrap: wrap; }
.ops-tabs { display: flex; gap: 2px; }
.ops-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: none; border-bottom: 2px solid transparent;
  background: transparent; color: var(--c-muted); cursor: pointer; font-weight: 600;
}
.ops-tab:hover { color: var(--c-text); background: var(--c-hover); }
.ops-tab.is-active { color: var(--c-text); border-bottom-color: var(--c-primary); }
.ops-elevation { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 16px; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.ops-elev-label { font-size: 14px; font-weight: 600; color: var(--c-muted); }
.ops-elev-label.is-elevated { color: var(--c-success); }
.ops-head-tools { display: flex; align-items: center; gap: 8px; }
.ops-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.ops-body > .ops-overview, .ops-body > .ops-logs, .ops-body > .ops-actions, .ops-body > .ops-audit { padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.ops-body > .ops-reports { flex: 1; min-height: 0; }
.ops-alerts { display: flex; flex-direction: column; gap: 4px; }
.ops-alert { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--r-sm); font-size: 14px; border: 1px solid currentColor; }
.ops-alert.tone-error { background: var(--c-danger-soft); color: var(--c-danger); }
.ops-alert.tone-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.ops-alert.tone-ok { background: color-mix(in srgb, var(--c-success) 14%, transparent); color: var(--c-success); }
.ops-alert-level { font-weight: 800; flex: none; }
.ops-alert-key { font-family: Consolas, "Cascadia Mono", monospace; font-size: 14px; opacity: 0.85; flex: none; }
.ops-alert-msg { color: var(--c-text); min-width: 0; }
.ops-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1199px) { .ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ops-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); min-width: 0; }
.ops-card.level-ok { border-color: color-mix(in srgb, var(--c-success) 55%, var(--c-border)); }
.ops-card.level-warn { border-color: color-mix(in srgb, var(--c-warning) 55%, var(--c-border)); }
.ops-card.level-error { border-color: var(--c-danger); }
.ops-card-head { display: flex; align-items: center; gap: 8px; }
.ops-card-title { font-size: 14px; }
.ops-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c-faint); }
.ops-dot.tone-ok { background: var(--c-success); }
.ops-dot.tone-warn { background: var(--c-warning); }
.ops-dot.tone-error { background: var(--c-danger); }
.ops-kv { margin: 0; display: flex; flex-direction: column; }
.ops-kv-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 50%, transparent); font-size: 14px; }
.ops-kv-row:last-child { border-bottom: none; }
.ops-kv-row dt { color: var(--c-muted); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ops-kv-row dd { margin: 0; color: var(--c-text); min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ops-kv-value.tone-ok { color: var(--c-success); }
.ops-kv-value.tone-warn { color: var(--c-warning); font-weight: 700; }
.ops-kv-value.tone-error { color: var(--c-danger); font-weight: 700; }
.ops-sizes { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 6px; }
.ops-latest, .ops-errors { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ops-errors li { overflow-wrap: anywhere; font-family: Consolas, "Cascadia Mono", monospace; font-size: 14px; }
.ops-errors li.tone-error { color: var(--c-danger); }
.ops-errors li.tone-warn { color: var(--c-warning); }
.ops-summary-line { margin: 0; }
.ops-reporter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ops-reporter-name { font-weight: 700; color: var(--c-text); }
.ops-reporter-id { font-size: 14px; padding: 1px 6px; border-radius: var(--r-sm); background: var(--c-bg); }
.ops-triage .field { flex: none; }
.ops-log-tools .input-sm { width: auto; }
.ops-log {
  max-height: calc(100vh - 260px); overflow: auto; padding: 8px 12px; border-radius: var(--r-md); background: var(--c-bg); border: 1px solid var(--c-border);
  font-family: Consolas, "Cascadia Mono", "MS Gothic", monospace; font-size: 14px; line-height: 1.6; user-select: text;
}
.ops-log-line { display: flex; gap: 10px; white-space: pre-wrap; word-break: break-all; }
.ops-log-at { flex: none; color: var(--c-faint); }
.ops-log-text { color: var(--c-text); }
.ops-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (min-width: 1400px) { .ops-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ops-action-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); min-width: 0; }
.ops-action-card.is-danger { border-color: var(--c-danger); }
.ops-action-card.is-unavailable { opacity: 0.8; }
.ops-action-card .form-inline .input-sm { width: auto; min-width: 0; }
.ops-action-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ops-action-card .form-actions { margin-top: 2px; }
.ops-action-confirm { display: flex; flex-direction: column; gap: 10px; }
.ops-action-summary { margin: 0; padding-left: 18px; color: var(--c-text); display: grid; gap: 2px; }
.ops-action-error:empty { display: none; }
.ops-restart:empty { display: none; }
.ops-restart .notice-detail { display: flex; align-items: center; gap: 8px; }
.ops-audit-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ops-audit-table th { text-align: left; font-size: 14px; color: var(--c-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--c-control); white-space: nowrap; }
.ops-audit-table td { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); vertical-align: top; color: var(--c-text); }
.ops-audit-table td.nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ops-audit-table code { font-size: 14px; }
.ops-audit-detail { max-width: 360px; overflow-wrap: anywhere; color: var(--c-muted); }

/* ---------- P50 運用 → ファイル・データベース(本文・値はすべて textContent。等幅・折り返しは CSS だけ) ---------- */
.ops-body > .ops-files, .ops-body > .ops-db { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ops-stepup-panel { padding: 24px 20px; max-width: 720px; }
.ops-stepup-panel .notice { gap: 6px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.ops-files-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 12px; }
.ops-files-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ops-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.ops-crumb { border: none; background: transparent; color: var(--c-primary-ink); cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm); font: inherit; font-size: 14px; }
.ops-crumb:hover { background: var(--c-hover); }
.ops-crumb.is-current { color: var(--c-text); font-weight: 700; }
.ops-crumb-sep { color: var(--c-faint); }
.ops-path-form { align-items: center; }
.ops-path-form .ops-path-input { width: 340px; font-family: Consolas, "Cascadia Mono", monospace; }
.ops-bookmarks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ops-bookmark { border: 1px solid var(--c-border); cursor: pointer; font-family: Consolas, "Cascadia Mono", monospace; }
.ops-bookmark:hover { background: var(--c-active); color: var(--c-text); }
.ops-write-band:empty { display: none; }
.ops-band { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--c-success) 12%, transparent); font-size: 14px; }
.ops-band.is-release { background: var(--c-warning-soft); }
.ops-band-label { color: var(--c-text); font-weight: 600; }
.ops-files-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.ops-file-list { min-height: 0; overflow: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); padding: 4px 6px 8px; }
.ops-file-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ops-file-table th { position: sticky; top: 0; z-index: 1; background: var(--c-surface); text-align: left; font-size: 14px; color: var(--c-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--c-control); white-space: nowrap; }
.ops-file-table td { padding: 3px 8px; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 55%, transparent); vertical-align: top; color: var(--c-text); }
.ops-file-row.is-selected td { background: var(--c-primary-soft); }
.ops-file-row.is-hidden .ops-file-label, .ops-file-row.is-unreadable .ops-file-label { color: var(--c-faint); }
.ops-file-name { min-width: 0; overflow-wrap: anywhere; }
.ops-file-open { display: inline-flex; align-items: baseline; gap: 6px; border: none; background: transparent; color: var(--c-text); font: inherit; padding: 2px 0; cursor: pointer; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.ops-file-open:hover:not(:disabled) .ops-file-label { text-decoration: underline; }
.ops-file-open:disabled { cursor: default; }
.ops-file-icon { flex: none; width: 1.3em; text-align: center; }
.ops-file-link { font-family: Consolas, "Cascadia Mono", monospace; }
.ops-file-lock { color: var(--c-warning); padding-left: 1.6em; }
.ops-file-actions { text-align: right; }
.ops-file-up td { border-bottom: none; }
.ops-realpath { padding: 4px 8px; font-family: Consolas, "Cascadia Mono", monospace; }
.ops-empty-dir { padding: 8px; }
.ops-more { margin: 6px 0 0 4px; }
.ops-file-preview { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); padding: 10px 12px; }
.ops-preview-head { display: flex; flex-direction: column; gap: 2px; }
.ops-preview-path { font-family: Consolas, "Cascadia Mono", monospace; font-size: 14px; color: var(--c-text); font-weight: 600; }
.ops-preview-hint { margin: auto; }
.ops-preview-body { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.ops-preview-text, .ops-preview-hex, .ops-db-sql, .ops-diff-lines {
  margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-text);
  font-family: Consolas, "Cascadia Mono", "MS Gothic", monospace; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; max-height: calc(100vh - 360px);
}
.ops-preview-hex { white-space: pre; }
.ops-preview-image { display: flex; align-items: flex-start; justify-content: center; padding: 8px; border-radius: var(--r-sm); background: var(--c-bg); }
.ops-preview-image img { max-width: 100%; max-height: calc(100vh - 380px); }
.ops-preview-actions { margin-top: 0; flex-wrap: wrap; }
.ops-transfer:empty { display: none; }
.ops-transfer-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.ops-transfer-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--c-active); overflow: hidden; }
.ops-transfer-fill { height: 100%; background: var(--c-primary); transition: width 0.2s ease; }
.ops-dialog-body { display: flex; flex-direction: column; gap: 10px; }
.ops-dialog-error:empty { display: none; }
.ops-signature-line { color: var(--c-success); font-weight: 600; }
.ops-signature-input { font-size: 14px; resize: vertical; }
.ops-diff { display: flex; flex-direction: column; gap: 4px; }
.ops-diff-head { color: var(--c-text); font-weight: 600; }
.ops-diff-lines { max-height: 260px; }
.ops-diff-line { display: block; }
.ops-diff-line.is-add { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 10%, transparent); }
.ops-diff-line.is-del { color: var(--c-danger); background: var(--c-danger-soft); }
.ops-editor { font-size: 14px; line-height: 1.55; min-height: 420px; resize: vertical; white-space: pre; }
.ops-db-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; padding: 12px 20px; }
.ops-db-aside { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ops-db-aside .input-sm { width: 100%; }
.ops-db-table-list { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); padding: 4px; }
.ops-db-table-row { display: flex; align-items: center; gap: 6px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--c-text); padding: 5px 8px; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.ops-db-table-row:hover { background: var(--c-hover); }
.ops-db-table-row.is-active { background: var(--c-active); color: var(--c-text); }
.ops-db-table-row.is-protected .ops-db-table-name { color: var(--c-muted); }
.ops-db-badges { flex: none; min-width: 1.2em; font-size: 12px; }
.ops-db-table-name { flex: 1; min-width: 0; font-family: Consolas, "Cascadia Mono", monospace; font-size: 14px; overflow-wrap: anywhere; }
.ops-db-table-count { flex: none; font-variant-numeric: tabular-nums; }
.ops-db-main { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ops-db-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ops-db-title { font-size: 15px; font-family: Consolas, "Cascadia Mono", monospace; }
.ops-db-subtabs { display: flex; gap: 2px; }
.ops-db-content { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.ops-db-hint { margin: 24px auto; }
.ops-db-tools { display: flex; flex-direction: column; gap: 6px; }
.ops-db-tools .input-sm { width: auto; }
.ops-db-grid-wrap { overflow: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); max-height: calc(100vh - 330px); }
.ops-db-grid { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.ops-db-grid th { position: sticky; top: 0; z-index: 1; background: var(--c-surface-2); text-align: left; font-size: 14px; color: var(--c-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--c-control); white-space: nowrap; font-family: Consolas, "Cascadia Mono", monospace; }
.ops-db-grid td { padding: 4px 8px; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 55%, transparent); vertical-align: top; color: var(--c-text); }
.ops-db-rowid { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.ops-db-actions-col { white-space: nowrap; }
.ops-db-cell { max-width: 360px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: Consolas, "Cascadia Mono", monospace; font-size: 14px; }
.ops-db-cell.is-short { white-space: nowrap; }
.ops-db-cell.is-null { color: var(--c-faint); font-style: italic; }
.ops-db-cell.is-masked { color: var(--c-warning); letter-spacing: 0.15em; }
.ops-db-cell.is-truncated { cursor: pointer; text-decoration: underline dotted var(--c-muted); }
.ops-db-empty { padding: 8px; }
.ops-db-paging { align-items: center; }
.ops-db-fullrow { margin: 0; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 12px; }
.ops-db-fullrow dt { font-family: Consolas, "Cascadia Mono", monospace; color: var(--c-muted); font-size: 14px; padding-top: 4px; }
.ops-db-fullrow dd { margin: 0; }
.ops-db-fullrow pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: Consolas, "Cascadia Mono", monospace; font-size: 14px; background: var(--c-bg); padding: 4px 8px; border-radius: var(--r-sm); }
.ops-db-schema { display: flex; flex-direction: column; gap: 8px; }
.ops-db-subhead { font-size: 14px; margin: 6px 0 0; color: var(--c-text); }
.ops-db-list { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 2px; }
.ops-sql-input { font-size: 14px; line-height: 1.5; resize: vertical; min-height: 96px; }
.ops-sql-tools { align-items: center; }
.ops-sql-tools .input-sm { max-width: 320px; }
.ops-snapshot-label { font-weight: 600; }
.ops-sql-meta { display: flex; align-items: center; gap: 8px; color: var(--c-muted); }
.ops-row-form { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow: auto; padding-right: 4px; }
.ops-row-field { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px; align-items: start; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 45%, transparent); }
.ops-row-field.is-readonly { opacity: 0.8; }
.ops-row-label { overflow-wrap: anywhere; padding-top: 5px; }
.ops-row-static { font-family: Consolas, "Cascadia Mono", monospace; font-size: 14px; padding-top: 5px; overflow-wrap: anywhere; }
.ops-row-inputs { flex-wrap: nowrap; align-items: flex-start; }
.ops-row-inputs .input-sm { flex: none; }
.ops-row-value { flex: 1; min-width: 0; font-size: 14px; resize: vertical; min-height: 30px; }
.ops-row-preview:empty { display: none; }
.ops-row-preview-inner { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--c-border); padding-top: 8px; }
.ops-row-diff tr.is-changed td { background: var(--c-warning-soft); }
.ops-row-diff tr.is-changed td { background: var(--c-warning-soft); }
@media (max-width: 1199px) { .ops-files-split { grid-template-columns: minmax(0, 1fr); } .ops-db-body { grid-template-columns: 200px minmax(0, 1fr); } }

/* ---------- P47-1 Excel(出力・取込・差分プレビュー) ---------- */
.view-workbook { overflow: auto; }
.wb-scroll { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 28px; max-width: 1180px; width: 100%; }
.wb-card { display: flex; flex-direction: column; gap: 8px; }
.wb-card-title { font-size: 15px; margin: 0; color: var(--c-text); }
.wb-desc { margin: 0; color: var(--c-muted); font-size: 14px; line-height: 1.6; }
.wb-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wb-note { margin: 0; font-size: 14px; color: var(--c-success); }
.wb-status:empty, .wb-result:empty, .wb-preview-box:empty { display: none; }
.wb-progress-row { display: flex; align-items: center; gap: 10px; }
.wb-state { font-size: 14px; color: var(--c-text); white-space: nowrap; }
.wb-progress { height: 8px; max-width: 420px; }
.wb-progress-fill { background: var(--c-primary); transition: width 0.2s ease; }
.wb-progress-text { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wb-processing { justify-content: flex-start; padding: 6px 0; }
.wb-error { font-size: 14px; color: var(--c-danger); background: var(--c-danger-soft); border-radius: var(--r-sm); padding: 8px 10px; }
.wb-preview { display: flex; flex-direction: column; gap: 12px; }
.wb-preview[data-status="applied"] { border-color: color-mix(in srgb, var(--c-success) 55%, var(--c-border)); }
.wb-preview-head { display: flex; align-items: flex-start; gap: 10px; }
.wb-preview-titles { min-width: 0; }
.wb-preview-titles .wb-card-title { overflow-wrap: anywhere; }
.wb-summary { background: var(--c-bg); border-radius: var(--r-sm); padding: 8px 10px; }
.wb-summary-label { margin-bottom: 2px; }
.wb-summary-text { margin: 0; color: var(--c-text); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.wb-chip { font-variant-numeric: tabular-nums; }
.wb-tone-accent { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.wb-tone-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.wb-tone-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.wb-tone-muted { color: var(--c-faint); }
.wb-block-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.wb-warnings { background: var(--c-warning-soft); border-radius: var(--r-sm); padding: 8px 10px; color: var(--c-text); }
.wb-warnings ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.wb-warnings p { margin: 4px 0 0; }
.wb-skipped summary, .wb-more summary { cursor: pointer; font-size: 14px; color: var(--c-muted); }
.wb-skipped ul { margin: 6px 0 0; padding-left: 18px; }
.wb-table-tools { display: flex; align-items: center; gap: 10px; }
.wb-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-sm); }
.wb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wb-table th { text-align: left; font-size: 14px; color: var(--c-muted); font-weight: 700; padding: 7px 10px; border-bottom: 1px solid var(--c-control); background: var(--c-bg); white-space: nowrap; }
.wb-table td { padding: 8px 10px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.wb-table tr:last-child td { border-bottom: none; }
.wb-col-op { width: 1%; white-space: nowrap; }
.wb-col-target { min-width: 180px; }
.wb-col-where { width: 1%; white-space: nowrap; }
.wb-label { color: var(--c-text); font-weight: 600; overflow-wrap: anywhere; }
.wb-row-warn { color: var(--c-warning); margin-top: 2px; }
.wb-op-delete .wb-label { color: var(--c-danger); }
.wb-fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.wb-field { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wb-field-name { color: var(--c-muted); font-size: 14px; min-width: 64px; }
.wb-before { color: var(--c-muted); text-decoration: line-through; overflow-wrap: anywhere; }
.wb-arrow { color: var(--c-faint); }
.wb-after { color: var(--c-text); font-weight: 600; overflow-wrap: anywhere; }
.wb-more { margin-top: 4px; }
.wb-more .wb-fields { margin-top: 4px; }
.wb-preview-actions { display: flex; align-items: center; gap: 10px; padding-top: 4px; border-top: 1px solid var(--c-border); flex-wrap: wrap; }

/* ---- P47-2〜4 「今日」画面(勤怠・AI チェックイン・デイリーのカード)と「デイリー」画面 ---- */
.view-today, .view-daily { overflow: auto; }
.today-scroll, .daily-scroll { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 28px; max-width: 1080px; width: 100%; }
.today-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.today-title { margin: 0; font-size: 20px; color: var(--c-text); }
.today-banner { border-radius: var(--r-md); padding: 10px 14px; line-height: 1.6; }
.today-banner-box:empty { display: none; }
.today-cards { display: flex; flex-direction: column; gap: 14px; }
.today-card { display: flex; flex-direction: column; gap: 10px; transition: border-color 0.2s ease, box-shadow 0.2s ease; scroll-margin-top: 12px; }
.today-card.is-focused, .checkin-card.is-focused { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-soft); }
.today-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.today-card-title { margin: 0; font-size: 15px; color: var(--c-text); }
.today-notes { display: flex; flex-direction: column; gap: 2px; }
.today-note { margin: 0; font-size: 14px; line-height: 1.6; }
.today-note[data-note="deadline"] { color: var(--c-text); }
.today-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.today-empty { margin: 0; font-size: 14px; line-height: 1.6; }
.daily-content { display: flex; flex-direction: column; gap: 8px; }
.daily-field { display: grid; grid-template-columns: 9em 1fr; gap: 10px; align-items: baseline; }
.daily-field-label { font-size: 14px; font-weight: 600; color: var(--c-muted); }
.daily-field-text { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; line-height: 1.6; }
.daily-kind { margin: 0; }
.daily-form { display: flex; flex-direction: column; gap: 12px; }
.daily-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.field-hint.is-over { color: var(--c-danger); }
/* AI チェックイン・締切前の進捗確認 */
.checkin-list { display: flex; flex-direction: column; gap: 10px; }
.checkin-card, .progress-check-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); scroll-margin-top: 12px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.checkin-card.is-responded { border-color: color-mix(in srgb, var(--c-success) 55%, var(--c-border)); }
.progress-check-card { border-color: color-mix(in srgb, var(--c-warning) 55%, var(--c-border)); }
.progress-check-card.is-overdue { border-color: var(--c-danger); }
.checkin-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.checkin-title { font-weight: 700; color: var(--c-text); overflow-wrap: anywhere; }
.checkin-state { font-size: 14px; color: var(--c-warning); white-space: nowrap; }
.checkin-state.is-done { color: var(--c-success); }
.checkin-message { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.checkin-summary { line-height: 1.5; }
.checkin-result { font-size: 14px; color: var(--c-success); background: var(--c-surface-2); border-radius: var(--r-sm); padding: 6px 10px; overflow-wrap: anywhere; }
.checkin-sub { font-size: 14px; font-weight: 600; color: var(--c-muted); margin-bottom: 4px; }
.checkin-tasks, .checkin-events { display: flex; flex-direction: column; gap: 6px; }
.checkin-task { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* P58: チェック項目のタスクは、パーセントのボタンの代わりに「チェック項目 3/5」と開くボタン */
.checkin-checklist { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.checkin-task-title { min-width: 0; overflow-wrap: anywhere; display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.checkin-event { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.checkin-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--c-surface-2); border-radius: var(--r-sm); }
.checkin-form .form-inline .input { width: auto; }
.checkin-form .form-inline .grow .input { width: 100%; }
.checkin-running { padding: 0; justify-content: flex-start; }
.pc-choices { align-items: center; }
.seg-btn.pc-blocked { border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-border)); }
.view-today .btn.is-active, .view-daily .btn.is-active { background: var(--c-active); color: var(--c-text); }
/* 勤怠 */
.timeclock-note { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--r-sm); background: var(--c-warning-soft); }
.timeclock-note-title { font-size: 14px; font-weight: 600; color: var(--c-warning); }
.timeclock-records, .timeclock-onduty-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.timeclock-record { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.timeclock-record-note { white-space: pre-wrap; }
.timeclock-onduty-list li { gap: 8px; }
/* 「デイリー」画面 */
.daily-tabs { margin-bottom: 2px; }
.daily-tabs:empty { display: none; }
/* 日程調整のカードの操作(0.13.1): 入口をボタンで並べる。作成した人・manager 以上の操作は右寄せ */
.poll-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.poll-dialog [hidden], .poll-form [hidden] { display: none !important; }
/* 更新内容(チェンジログ) */
.changelog { display: flex; flex-direction: column; gap: 16px; }
.changelog-version { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 15px; color: var(--c-text); }
.changelog-items { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.6; }
.daily-list { display: flex; flex-direction: column; gap: 10px; }
.daily-row { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.daily-row-head { display: flex; align-items: center; gap: 8px; }
.daily-row-date { font-weight: 700; color: var(--c-text); }
.daily-dl { display: grid; grid-template-columns: 9em 1fr; gap: 4px 10px; margin: 0; }
.daily-dl dt { font-size: 14px; font-weight: 600; color: var(--c-muted); }
.daily-dl dd { margin: 0; min-width: 0; }
.daily-cell-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; user-select: text; }
.daily-url { overflow-wrap: anywhere; user-select: text; font-size: 14px; }
.daily-toolbar { padding: 0; }
.daily-members { display: flex; flex-direction: column; gap: 12px; }
.daily-missing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.daily-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.daily-table th, .daily-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--c-border); }
.daily-table th { font-size: 14px; color: var(--c-muted); font-weight: 600; background: var(--c-surface-2); position: sticky; top: 0; }
.daily-table td:nth-child(n+3) { min-width: 12em; }
.today-card-title.is-missing { color: var(--c-warning); }
.today-card-title.is-done, .today-card-title.is-on { color: var(--c-success); }

/* ---- P47-5〜8 「監視」画面・催促ダイアログ・シフトの絞り込み・予定の投稿先 ---- */
.view-monitoring { overflow: auto; }
.monitor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; align-items: start; }
.monitor-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.monitor-section-head { display: flex; align-items: center; gap: 8px; }
.monitor-section-title { margin: 0; }
.monitor-overdue { border-color: var(--c-danger); }
.monitor-blocked { border-color: color-mix(in srgb, var(--c-warning) 55%, var(--c-border)); }
.monitor-summary { margin: 0; }
.monitor-empty { margin: 0; }
.monitor-rows { display: flex; flex-direction: column; gap: 4px; }
.monitor-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid var(--c-border); }
.monitor-task-open { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 14em; padding: 0; border: none; background: none; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.monitor-task-open:hover .monitor-task-title, .monitor-task-open:focus-visible .monitor-task-title { text-decoration: underline; }
.monitor-seq { font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.monitor-task-title { min-width: 0; overflow-wrap: anywhere; color: var(--c-text); }
.monitor-member { flex: 1 1 10em; min-width: 0; overflow-wrap: anywhere; }
.monitor-meta { font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.monitor-meta.text-danger { color: var(--c-danger); }
.monitor-allclear { grid-column: 1 / -1; }
.reminder-to { font-weight: 700; color: var(--c-text); padding: 4px 0; }
.reminder-note { margin: 0; }
.task-remind { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.shift-filter { width: auto; min-width: 11em; }
.shift-empty-row td { text-align: center; padding: 14px; }
.daily-missing-row { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- P51: 予定の対象・場所・「会議」 ---------- */
:root { --ev-meeting: #7c3aed; }
@media (prefers-color-scheme: dark) { :root { --ev-meeting: #a78bfa; } }
.event-card.ev-meeting, .event-card.ev-daily_meeting { --tone: var(--ev-meeting); }
.cal-event.ev-meeting, .cal-event.ev-daily_meeting { background: color-mix(in srgb, var(--ev-meeting) 16%, var(--c-surface-2)); }
.event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--c-muted); }
.event-meta-item { min-width: 0; overflow-wrap: anywhere; }
.chip-muted { background: var(--c-bg); color: var(--c-muted); }
.kv-row-top { align-items: start; }
.form-section { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--c-border); }
.audience-box, .location-box { display: flex; flex-direction: column; gap: 8px; }
.audience-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; }
.audience-label { font-size: 14px; font-weight: 600; color: var(--c-muted); }
.target-chip { gap: 4px; padding-right: 4px; }
.chip-x { border: none; background: transparent; color: inherit; cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; opacity: 0.7; }
.chip-x:hover, .chip-x:focus-visible { opacity: 1; }
.location-grid { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 8px 12px; }
.location-grid .span-3 { grid-column: span 3; }
.location-grid[hidden], .location-discord[hidden] { display: none; }
.loc-url { user-select: text; word-break: break-all; }
.location-lines { display: flex; flex-direction: column; gap: 2px; }
.location-line { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.location-label { padding-top: 1px; }
.location-text { min-width: 0; overflow-wrap: anywhere; }
.target-picker .picker-count { display: inline-block; }
.target-item.is-selected { background: var(--c-primary-soft); }
.target-item.is-selected .picker-add { opacity: 1; }
.target-role-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-bg); color: var(--c-muted); font-weight: 700; flex: none; }
.target-sub { display: block; font-weight: 400; }
.picker-limit { padding: 4px; }

/* ---------- P51 追加要件: 終日・時刻のプリセット・重要度・カラー・並び替えと絞り込み・カレンダーから作成 ---------- */
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.time-grid[hidden], .time-presets[hidden] { display: none; }
.time-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.check-line { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; font-size: 14px; }
.seg-btn.imp-critical.is-active { background: var(--c-danger); border-color: var(--c-danger); }
.seg-btn.imp-high.is-active { background: var(--c-warning); border-color: var(--c-warning); color: var(--c-surface); }
.color-box { display: flex; flex-direction: column; gap: 6px; }
.color-choices { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.color-choice { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--c-border); background: var(--swatch, var(--c-hover)); cursor: pointer; padding: 0; }
.color-choice.is-default { width: auto; padding: 0 9px; border-radius: 12px; font-size: 11px; color: var(--c-text); background: var(--c-hover); }
.color-choice.is-active { outline: 2px solid var(--c-text); outline-offset: 2px; }
.color-custom { width: 34px; height: 26px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: transparent; padding: 1px; cursor: pointer; }
.color-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--swatch); vertical-align: -1px; }
.event-card.has-color { --tone: var(--ev-bar); }
.ev-type-chip.has-color { background: color-mix(in srgb, var(--ev-bar) 24%, transparent); color: var(--c-text); }
.importance-badge { font-size: 12px; font-weight: 700; }
.importance-badge.imp-critical { color: var(--c-danger); }
.importance-badge.imp-high { color: var(--c-warning); }
.event-sorted { gap: 10px; }
.cal-event.has-color { background: color-mix(in srgb, var(--ev-bar) 26%, var(--c-surface-2)); color: var(--c-text); }
.cal-event.has-color:hover { background: var(--ev-bar-dark); color: #fff; }
.cal-allday { font-weight: 600; }
.cal-allday .cal-time { font-weight: 700; }
.cal-badge { margin-right: 2px; }
.cal-cell.can-create { cursor: pointer; }
.cal-cell.can-create:hover { box-shadow: inset 0 0 0 1px var(--c-control); }
.cal-cell.can-create:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.cal-add-hint { margin-left: auto; color: var(--c-muted); font-weight: 700; font-size: 14px; line-height: 1; opacity: 0; transition: opacity 0.1s; }
.cal-cell.can-create:hover .cal-add-hint, .cal-cell.can-create:focus-visible .cal-add-hint { opacity: 1; }
.event-filter { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 10px; flex: none; }
.event-filter [hidden] { display: none !important; }
.filter-keyword { min-width: 16em; }
.filter-range { display: inline-flex; gap: 4px; align-items: center; }
.filter-panel { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); max-width: 980px; }
.filter-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; }
.filter-label { font-size: 14px; font-weight: 600; color: var(--c-muted); }
.filter-chip { height: 24px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font-size: 14px; cursor: pointer; }
.filter-chip:hover { border-color: var(--c-control); }
.filter-chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); font-weight: 600; }
.shift-dialog .input { width: 100%; }

/* ---- 依存関係(P52: ノードグラフとクリティカルパス) ---- */
.view-task-graph {
  --tg-critical: var(--c-danger);
  --tg-chain: var(--c-primary);
  --tg-edge: var(--c-faint);
  --tg-canvas: var(--c-surface-2);
  --tg-node: var(--c-surface);
}
@media (prefers-color-scheme: dark) {
  .view-task-graph { --tg-canvas: var(--c-bg); }
}
.tg-toolbar { row-gap: 8px; }
.tg-zoom { display: inline-flex; align-items: center; gap: 4px; }
.tg-zoom-btn { width: 30px; padding: 0; font-size: 16px; }
.tg-zoom-label { min-width: 44px; text-align: center; font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; }

.tg-summary { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 0 20px 10px; }
.tg-summary[hidden] { display: none; }
.tg-warn { padding: 6px 10px; border-radius: var(--r-sm); background: var(--c-warning-soft); color: var(--c-warning); font-size: 14px; }
.tg-summary-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tg-critical-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 6px 12px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; color: var(--c-text);
  background: color-mix(in srgb, var(--tg-critical) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tg-critical) 45%, transparent);
}
.tg-critical-line.is-empty { font-weight: 500; color: var(--c-muted); background: var(--c-surface-2); border-color: var(--c-border); }
.tg-critical-label { color: var(--tg-critical); margin-right: 4px; }
.tg-seq-btn {
  border: none; background: transparent; color: var(--c-text); font: inherit; font-weight: 700; padding: 0 3px; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;
}
.tg-seq-btn:hover { background: var(--c-hover); }
.tg-sep { color: var(--c-muted); font-weight: 400; }
.tg-critical-rest { font-weight: 500; color: var(--c-text); margin-left: 2px; }
.tg-deadline { font-size: 14px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-sm); }
.tg-deadline.is-ok { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 12%, transparent); }
.tg-deadline.is-short { color: var(--c-danger); background: var(--c-danger-soft); }
.tg-notes { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; color: var(--c-muted); }
.tg-link { border: none; background: transparent; padding: 0; color: var(--c-primary-ink); font: inherit; cursor: pointer; text-decoration: underline; }
.tg-legend { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 14px; color: var(--c-muted); }
.tg-lg-item { display: inline-flex; align-items: center; gap: 6px; }
.tg-lg-line { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--tg-edge); }
.tg-lg-line.is-critical { border-top: 3px solid var(--tg-critical); }
.tg-lg-line.is-indirect { border-top-style: dashed; }

.tg-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 20px 16px; }
.tg-canvas {
  position: relative; flex: 1; min-height: 240px; overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--tg-canvas); cursor: grab; touch-action: none; user-select: none;
}
.tg-canvas.is-panning { cursor: grabbing; }
.tg-svg { display: block; width: 100%; height: 100%; }

/* 辺 */
.tg-edge { fill: none; stroke: var(--tg-edge); stroke-width: 1.6; transition: opacity 0.12s, stroke 0.12s; }
.tg-edge.is-indirect { stroke-dasharray: 5 4; }
.tg-edge.is-critical { stroke: var(--tg-critical); stroke-width: 3.2; }
.tg-arrowhead { fill: var(--tg-edge); }
.tg-arrowhead.is-critical { fill: var(--tg-critical); }
.tg-arrowhead.is-chain { fill: var(--tg-chain); }

/* ノード */
.tg-node { cursor: pointer; outline: none; transition: opacity 0.12s; }
.tg-canvas.is-panning .tg-node { cursor: grabbing; }
.tg-node-bg { fill: var(--tg-node); stroke: var(--c-control); stroke-width: 1; }
.tg-node:hover .tg-node-bg { stroke: var(--c-muted); }
.tg-node.is-critical .tg-node-bg { stroke: var(--tg-critical); stroke-width: 2.5; }
.tg-node.is-done { opacity: 0.7; }
.tg-node-stripe { fill: var(--st, var(--c-faint)); }
.tg-node text { fill: var(--c-text); font-size: 11px; }
.tg-node .tg-node-title { fill: var(--c-text); font-size: 13px; font-weight: 600; }
.tg-node .tg-node-seq { fill: var(--c-muted); font-weight: 700; }
.tg-node .tg-node-rem { fill: var(--c-muted); }
.tg-node .tg-node-noest { fill: var(--c-warning); font-weight: 600; }
.tg-node .tg-node-due { fill: var(--c-muted); }
.tg-node .tg-node-due.is-overdue { fill: var(--c-danger); font-weight: 700; }
.tg-node .tg-node-float { fill: var(--c-muted); }
.tg-node .tg-node-float.is-critical { fill: var(--tg-critical); font-weight: 700; }
.tg-prog-bg { fill: var(--c-active); }
.tg-prog-fill { fill: var(--st-dark, var(--c-primary)); }
.tg-avatar circle { fill: hsl(var(--avatar-hue, 230) 45% 42%); }
.tg-node .tg-avatar text { fill: #fff; font-size: 10px; font-weight: 700; }
.tg-avatar.is-empty circle { fill: var(--c-active); }
.tg-node .tg-avatar.is-empty text { fill: var(--c-muted); }
.tg-grid-label { fill: var(--c-muted); font-size: 12px; font-weight: 600; }

/* 強調: ホバー・フォーカスしたタスクと、その上流(前提)・下流(後続)以外を薄くする */
.tg-node:focus-visible .tg-node-bg, .tg-node.is-active .tg-node-bg { stroke: var(--tg-chain); stroke-width: 3; }
.tg-node.is-up .tg-node-bg, .tg-node.is-down .tg-node-bg { stroke: var(--tg-chain); stroke-width: 1.8; }
.tg-node.is-critical.is-up .tg-node-bg, .tg-node.is-critical.is-down .tg-node-bg { stroke: var(--tg-critical); stroke-width: 2.5; }
.tg-svg.has-active .tg-node:not(.is-active):not(.is-up):not(.is-down) { opacity: 0.28; }
.tg-svg.has-active .tg-edge:not(.is-chain) { opacity: 0.15; }
.tg-edge.is-chain:not(.is-critical) { stroke: var(--tg-chain); stroke-width: 2.4; }

/* 検索(P52 追補): 検索欄・候補・「前後だけ表示」・パンくず/注記・入力中の薄い表示・選んだときの一瞬の強調 */
.tg-search { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.tg-search .tg-search-input { width: 240px; }
.tg-search-count { min-width: 28px; font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tg-results {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: 380px; max-width: calc(100vw - 40px); max-height: 360px; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.tg-results[hidden] { display: none; }
.tg-result { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border-radius: var(--r-sm); font-size: 14px; color: var(--c-text); cursor: pointer; }
.tg-result:hover, .tg-result.is-active { background: var(--c-hover); color: var(--c-text); }
.tg-result.is-active { background: var(--c-primary-soft); }
.tg-result-seq { flex: none; color: var(--c-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.tg-result-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-result-hint { flex: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--c-muted); }
.tg-result-empty, .tg-result-more { padding: 6px 8px; font-size: 14px; color: var(--c-muted); }
.tg-badge { flex: none; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 18px; }
.tg-badge.is-critical { color: var(--tg-critical); background: color-mix(in srgb, var(--tg-critical) 14%, transparent); }
.tg-badge.is-hidden { color: var(--c-muted); background: var(--c-active); }
.tg-context { flex: none; display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 0 20px 8px; }
.tg-context[hidden] { display: none; }
.tg-chip {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 4px 3px 12px; border-radius: 14px; font-size: 14px;
  background: var(--c-primary-soft); color: var(--c-primary-ink); border: 1px solid color-mix(in srgb, var(--c-primary) 40%, transparent);
}
.tg-chip-text { font-weight: 700; }
.tg-chip.is-note { background: var(--c-warning-soft); color: var(--c-warning); border-color: color-mix(in srgb, var(--c-warning) 45%, transparent); }
.tg-chip.is-note .tg-chip-text { font-weight: 600; }
.tg-chip .tg-link { color: inherit; font-weight: 700; }
.tg-chip-x { flex: none; width: 22px; height: 22px; border: none; border-radius: 50%; background: transparent; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.tg-chip-x:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.tg-svg.has-search .tg-node:not(.is-match) { opacity: 0.22; }
.tg-svg.has-search .tg-edge { opacity: 0.3; }
.tg-svg.has-search .tg-node.is-match .tg-node-bg { stroke: var(--tg-chain); stroke-width: 2.5; }
@keyframes tg-pulse {
  0% { stroke-width: 3; }
  40% { stroke-width: 9; }
  100% { stroke-width: 3; }
}
@keyframes tg-halo {
  0% { filter: drop-shadow(0 0 0 transparent); }
  40% { filter: drop-shadow(0 0 12px var(--tg-chain)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}
.tg-node.is-pulse { animation: tg-halo 0.6s ease-out 2; }
.tg-node.is-pulse .tg-node-bg { stroke: var(--tg-chain); animation: tg-pulse 0.6s ease-out 2; }

@media (prefers-reduced-motion: reduce) {
  .tg-edge, .tg-node { transition: none; }
  .tg-node.is-pulse, .tg-node.is-pulse .tg-node-bg { animation: none; }
}

/* ---- P53: 予定の出欠の集計と一覧 / タスクのレビュー担当 ---- */
.att-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 6px; font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.att-count { white-space: nowrap; }
.att-count.att-join { color: var(--c-success); }
.att-count.att-late, .att-count.att-maybe { color: var(--c-warning); }
.att-count.att-absent { color: var(--c-danger); }
.att-count.att-none.has-unanswered { color: var(--c-text); font-weight: 600; }
.att-detail { display: grid; gap: 8px; }
.att-detail .att-summary { margin-top: 0; font-size: 14px; }
.att-list { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.att-list > summary { cursor: pointer; padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--c-text); }
.att-list[open] > summary { border-bottom: 1px solid var(--c-border); }
.att-group { padding: 8px 10px; }
.att-group + .att-group { border-top: 1px solid var(--c-border); }
.att-group-head { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--c-muted); }
.att-group-join .att-group-head { color: var(--c-success); }
.att-group-late .att-group-head, .att-group-maybe .att-group-head { color: var(--c-warning); }
.att-group-absent .att-group-head { color: var(--c-danger); }
.att-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.att-member { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; }
.att-member-name { min-width: 0; overflow-wrap: anywhere; }
.att-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.att-member .btn { margin-left: auto; }
.confirmed-mark { color: var(--c-success); font-size: 14px; font-weight: 700; }

/* ---- P54: ブラウザ版のスマホ表示(幅 768px 以下)。デスクトップ版のウィンドウは最小 980px なのでこの節は効かない ---- */
.sb-overlay { display: none; }
@media (max-width: 768px) {
  /* 枠: 左ナビは下部タブの「その他」で開く引き出し(閉じている間は visibility で Tab 移動からも外す) */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(300px, 86vw);
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
    transform: translateX(-105%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; box-shadow: var(--shadow-2);
  }
  /* 開くときはすぐ見える状態にする(すぐに中へフォーカスを移せるように)。閉じるときは滑り終えてから隠す */
  .shell.is-drawer-open .sidebar { transform: none; visibility: visible; transition: transform 0.2s ease, visibility 0s; }
  .shell.is-drawer-open .sb-overlay { display: block; position: fixed; inset: 0; z-index: 55; background: var(--c-backdrop); }
  .sb-nav-item { min-height: 44px; }
  .topbar {
    gap: 6px; height: auto; min-height: 52px;
    padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  }
  .topbar-title { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-sync, .topbar-user-text, .btn-label { display: none; }
  .topbar .btn { min-width: 44px; padding: 0 8px; }
  .topbar-user { padding-left: 4px; margin-left: 0; border-left: 0; }
  .banner { padding: 8px 12px; flex-wrap: wrap; }
  .toolbar { padding: 10px 12px; gap: 8px; }

  /* 押しやすさ(44px。主要は 48px)・iOS の入力時ズーム防止(16px) */
  .btn, .btn-sm { height: auto; min-height: 44px; }
  .btn-xs { height: auto; min-height: 44px; padding: 0 10px; }
  .btn-lg, .modal-actions .btn-primary { min-height: 48px; }
  .seg-btn, .seg-btn-sm, .settings-tab, .filter-chip { height: auto; min-height: 44px; }
  .color-choice { width: 40px; height: 40px; }
  .color-choice.is-default { height: 40px; border-radius: 20px; }
  .color-custom { width: 44px; height: 40px; }
  .icon-btn { width: 44px; height: 44px; }
  .input, .input-sm, select.input, textarea.input { font-size: 16px; min-height: 44px; }
  .input-sm { height: auto; }
  input[type="search"].input-sm { width: 100%; }
  .check { min-height: 44px; font-size: 16px; }
  .check input { width: 20px; height: 20px; }

  /* 中央寄せ画面 */
  .view-center { padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
  .login-card { padding: 24px 20px; }
  .projects-head { flex-wrap: wrap; align-items: flex-start; }

  /* ダイアログは全画面のシート(ボタンは下に固定) */
  .modal, .modal-sm, .modal-md, .modal-lg {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  .modal-head { padding: 14px 14px 10px; }
  .modal-body { flex: 1; padding: 4px 14px 16px; overscroll-behavior: contain; }
  .modal-actions {
    position: sticky; bottom: 0; flex-wrap: wrap; border-radius: 0;
    padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .kv-row { grid-template-columns: 84px minmax(0, 1fr); }
}
.cal-day-panel[hidden] { display: none; }
@media (max-width: 768px) {
  /* カレンダー: 画面ごと縦にスクロール。セルは小さく(チップは時刻と色だけ)、日付のタップで下に一覧 */
  .view-calendar { overflow-y: auto; }
  .calendar { flex: none; padding: 0 8px 8px; }
  .cal-grid { flex: none; grid-template-rows: none; grid-auto-rows: minmax(64px, auto); }
  .cal-cell { padding: 3px 2px; gap: 2px; }
  .cal-day { font-size: 11px; min-width: 0; }
  .cal-add-hint, .cal-shift { display: none; }
  .cal-cell .cal-item { min-height: 14px; padding: 0 2px; font-size: 10px; gap: 2px; }
  .cal-cell .cal-text, .cal-cell .cal-badge { display: none; }
  .cal-cell .cal-due { justify-content: center; }
  .cal-more { font-size: 10px; padding-left: 2px; }
  .cal-cell.is-selected { box-shadow: inset 0 0 0 2px var(--c-primary-ink); }
  .cal-day-panel { display: flex; flex-direction: column; gap: 8px; margin: 0 8px 12px; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
  .cal-day-panel-head { display: flex; align-items: center; gap: 8px; }
  .cal-day-items { display: flex; flex-direction: column; gap: 6px; }
  .cal-day-items .cal-item { min-height: 40px; font-size: 14px; padding: 4px 10px; }
  .cal-day-shifts { margin: 0; padding-left: 18px; font-size: 14px; color: var(--c-success); }
  .event-filter { padding: 0 12px 8px; }
}
@media (max-width: 768px) {
  /* タイムライン: 左のタスク名の列を狭く(横スクロールは従来どおり) */
  .view-timeline { --tl-label-w: 132px; }
  .tl-wrap { padding: 0 8px 8px; }
  .tl-label { padding: 0 6px; gap: 4px; }
  .tl-label .avatar { display: none; }
  .tl-row { height: 40px; }
  .tl-bar { top: 7px; height: 26px; }
  .tl-diamond { top: 13px; }
  /* 予定の一覧: 時刻を上に */
  .event-list { padding: 0 12px 16px; }
  .event-card { flex-direction: column; gap: 6px; padding: 10px 12px 10px 28px; }
  .event-card::before { left: 11px; top: 17px; }
  .event-time { width: auto; display: flex; align-items: baseline; gap: 6px; }
  .event-head { flex-wrap: wrap; }
  /* シフト: 表は横スクロール(名前の列は狭く) */
  .shift-wrap { padding: 0 12px 16px; overflow-x: auto; }
  .shift-table { min-width: 640px; }
  .shift-name-col { width: 120px; }
}
@media (max-width: 768px) {
  /* 2段組み・複数列は1列に */
  .task-dialog-grid, .settings-grid, .settings-grid-3, .settings-grid-4, .location-grid, .time-grid, .monitor-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .setup-kv .kv-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .daily-field, .daily-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vocab-cat-row, .vocab-status-row { grid-template-columns: minmax(0, 1fr) auto; }
  /* 一覧 + 詳細(議事録・報告)は上下に(一覧は画面の4割まで) */
  .minutes-layout, .reports-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .minutes-side, .reports-side { max-height: 40dvh; border-right: 0; border-bottom: 1px solid var(--c-border); }
  .minutes-detail, .report-detail { padding: 14px 12px 24px; }
  /* 議事録は画面を分けない: 一覧のページ(検索 + 一覧が画面いっぱい)と詳細のページ(「‹ 一覧へ」で戻る)を切り替える */
  .minutes-layout { grid-template-rows: minmax(0, 1fr); }
  .minutes-layout .minutes-side { max-height: none; border-bottom: 0; }
  .minutes-layout.is-detail .minutes-side, .minutes-layout:not(.is-detail) .minutes-detail { display: none; }
  .minutes-back { display: inline-flex; align-self: flex-start; min-height: 40px; margin: -4px 0 8px -8px; font-size: 15px; }
  .minutes-row { min-height: 56px; padding: 10px 12px; }
  .minutes-row-title { font-size: 15px; }
  /* 表は横スクロール */
  .settings-table-wrap { overflow-x: auto; }
  .ai-msg-assistant { max-width: 100%; }
}
@media (max-width: 768px) {
  /* 役職: 承認待ちの見出しと行は折り返す(操作ボタンは下に) */
  .pending-head { flex-wrap: wrap; }
  .pending-title { white-space: nowrap; }
  .role-change-row { grid-template-columns: 36px minmax(0, 1fr); }
  .rc-actions { grid-column: 1 / -1; min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .rc-actions .btn { flex: 1 1 140px; }
}
@media (max-width: 768px) {
  /* 表: 列をつぶさず横にスクロール */
  .settings-table-wrap > table, .wb-table-wrap > table { min-width: 600px; }
}

/* ---- スマホ表示の見直し(2026-10。幅 768px 以下)----
   根拠: 主な画面は下部タブに常に出す(引き出しだけだと使われにくい: NN/g)。操作欄を何段も積んで本体を押し下げない。
   タッチ対象は 24px 以上(WCAG 2.5.8)で主な操作は 40〜48px。状態の変更をドラッグだけにしない(WCAG 2.5.7。カードの「…」で変更)。
   長い題名は 1 行で切らず折り返す。入力欄は 16px(iOS の自動拡大を防ぐ)。高さは dvh(ブラウザのツールバーの出入りに追随) */
.bottom-nav, .kanban-nav { display: none; }
@media (max-width: 768px) {
  html, body, #app { height: 100dvh; }
  body { font-size: 16px; line-height: 1.6; }
  .small, .field-hint, .muted.small, .field-label { font-size: 14px; }

  /* 下部タブ(主な 4 画面 + その他) */
  .bottom-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex: none;
    background: var(--c-surface-2); border-top: 1px solid var(--c-border);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .bn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 56px; padding: 6px 2px;
    border: none; background: transparent; color: var(--c-muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .bn-item.is-active { color: var(--c-primary-ink); }
  .bn-item:active { background: var(--c-hover); }
  .bn-icon { position: relative; font-size: 20px; line-height: 1; }
  .bn-icon .nav-badge { position: absolute; top: -7px; left: 12px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .nav-dot { position: absolute; top: -3px; right: -8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-danger); }
  .bn-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-nav { overscroll-behavior: contain; }
  .toasts { left: 12px; right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); max-width: none; }

  /* ボード: 状態ごとに縦に積む(見出しは上に張り付く)。上のチップで 1 つの状態だけに絞れる */
  .view-board .toolbar > select { flex: 1 1 120px; min-width: 0; }
  .view-board .toolbar > input[type="search"].input-sm { flex: 1 1 160px; min-width: 0; width: auto; }
  .view-board .toolbar > .spacer { display: none; }
  .kanban-nav { display: flex; gap: 8px; flex: none; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .kanban-nav::-webkit-scrollbar { display: none; }
  .kanban-chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px;
    border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .kanban-chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
  .kanban-chip-count { font-variant-numeric: tabular-nums; opacity: 0.75; }
  .kanban { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 16px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .kanban-col { flex: none; min-height: auto; }
  .kanban-col.is-other-status { display: none; }
  .kanban-col-head { position: sticky; top: 0; z-index: 2; padding: 10px 12px; background: var(--c-surface-2); border-radius: var(--r-md) var(--r-md) 0 0; }
  .kanban-col-title { font-size: 14px; }
  .kanban-col-body { flex: none; min-height: 0; overflow: visible; padding: 0 10px 10px; }
  .kanban-empty { padding: 10px 4px; }
  .kanban-add { min-height: 40px; }
  .task-card { padding: 10px 12px; gap: 8px; cursor: pointer; }
  .card-title { font-size: 15px; }
  .card-seq, .card-bottom { font-size: 14px; }
  .card-menu { width: 40px; height: 36px; margin: -8px -8px -6px 0; font-size: 18px; }

  /* カレンダー: 操作欄は「‹ 今月 › 年月 ＋」の 1 行と凡例の 1 行 */
  .view-calendar .toolbar { padding: 8px 12px; gap: 6px 8px; }
  .view-calendar .toolbar .btn-group .btn { min-width: 40px; padding: 0 10px; }
  .view-calendar .toolbar .toolbar-title { font-size: 16px; white-space: nowrap; }
  .view-calendar .toolbar .legend { order: 5; flex-basis: 100%; }
  .cal-cell .cal-item, .cal-more { font-size: 11px; }

  /* 予定の絞り込み: 横スクロールの 1 行(右端が見切れて続きが分かる) */
  .event-filter { padding: 0 0 8px; }
  .filter-panel { margin: 0 12px; }
  .filter-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .filter-chip { height: auto; min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 14px; }

  /* タイムライン: 凡例は横スクロールの 1 行 */
  .view-timeline .toolbar { padding: 8px 12px; gap: 6px 10px; }
  .view-timeline .toolbar .legend { flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
  .view-timeline .toolbar .legend::-webkit-scrollbar { display: none; }
  .view-timeline .toolbar .legend > * { flex: none; }
  .legend-item-btn { min-height: 32px; }

  /* 依存関係: 検索と拡大縮小で 1 行、表示条件は横スクロールの 1 行 */
  .tg-toolbar { padding: 8px 12px; gap: 8px; }
  .tg-search { flex: 1 1 100px; min-width: 0; }
  .tg-search .tg-search-input { flex: 1; width: auto; min-width: 0; }
  .tg-results { width: auto; right: 0; max-width: none; }
  .tg-toolbar > .spacer { display: none; }
  .tg-summary, .tg-context { padding-left: 12px; padding-right: 12px; }
  .tg-body { padding: 0 8px 8px; }
  .tg-seq-btn { min-width: 32px; min-height: 32px; }
  .tg-notes, .tg-legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .tg-notes::-webkit-scrollbar, .tg-legend::-webkit-scrollbar { display: none; }
  .tg-notes > *, .tg-legend > * { flex: none; }

  /* シフト: 名前の列を左に固定(横にスクロールしても誰の行か分かる) */
  .shift-table { overflow: visible; }
  .shift-table thead th:first-child, .shift-table tbody th, .shift-table tfoot th { position: sticky; left: 0; z-index: 1; }
  .shift-table thead th:first-child { z-index: 2; }
  .shift-cancel { width: 28px; height: 28px; }

  /* AI チャット: 見出しは上部バーにあるので省く(1 行に収める) */
  .ai-head { padding: 8px 12px; gap: 8px; }
  .ai-title { display: none; }
  /* 題名は残りの幅いっぱい。権限の印・利用回数は 2 行目へ */
  .ai-session-title { flex: 1 1 0; max-width: none; }
  .ai-head .spacer { display: none; }
  .ai-head.has-sessions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 8px; }
  .ai-head.has-sessions .ai-sessions-btn { grid-column: 1; grid-row: 1; }
  .ai-head.has-sessions .ai-session-title, .ai-head.has-sessions .ai-title { grid-column: 2; grid-row: 1; }
  .ai-head.has-sessions [data-action=aiNewConversation] { grid-column: 3; grid-row: 1; }
  .ai-head.has-sessions [data-action=aiPersonalize] { grid-column: 4; grid-row: 1; }
  .ai-head.has-sessions .ai-level-chip { grid-column: 1 / span 2; grid-row: 2; justify-self: start; }
  .ai-head.has-sessions .ai-usage { grid-column: 3 / span 2; grid-row: 2; justify-self: end; }
  .ai-session-row .menu-btn { flex: none; }
  .ai-prefs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 通知: 題名は 2 行まで折り返し、「Discordで開く」は本文の下 */
  .notification-row { flex-wrap: wrap; }
  .notification-main { flex: 1 1 calc(100% - 30px); }
  .notification-head { flex-wrap: wrap; }
  .notification-title { order: 3; flex: 1 1 100%; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .notification-time { margin-left: auto; }

  /* 小さすぎた操作 */
  .pill-remove { width: 28px; height: 28px; font-size: 16px; }
  .monitor-task-open { min-height: 32px; }

  /* 記号のアイコンは 18px 以上に(12〜15px では潰れて読めない) */
  .sb-nav-item { min-height: 48px; font-size: 16px; }
  .sb-icon { width: 26px; font-size: 18px; }
  .sb-switch { font-size: 18px; }
  .bn-icon { font-size: 20px; display: inline-flex; }
  .topbar .btn { font-size: 18px; }
  .view-board .toolbar .btn-ghost { font-size: 18px; }
  .legend-edit { margin: 0; }
  .view-calendar .toolbar .btn-group .btn { font-size: 16px; }
  .tg-zoom-btn { width: 40px; font-size: 20px; }
  .card-prereq { font-size: 15px; }
  .importance-badge { font-size: 14px; }
  .shift-note { font-size: 14px; }
  .shift-cancel { flex: none; font-size: 18px; }
  .icon-btn { font-size: 22px; }
  .chip-x { min-width: 28px; min-height: 28px; font-size: 18px; }
  /* 通知の「閉じる」は 40px(通知はモーダルの手前に出るので、モーダルの中の押せる要素と同じ基準)。通知の高さは変えない */
  .toast-close { min-width: 40px; min-height: 40px; font-size: 18px; margin: -6px -8px -6px 0; }
}

/* ---- P55: 日程調整(一覧・詳細の回答と集計・確定・作成/編集の候補日程)。スマホ幅の分は末尾の @media ---- */
.view-polls { overflow: auto; }
.poll-list { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.poll-group { display: flex; flex-direction: column; gap: 8px; }
.poll-group-head { display: flex; align-items: baseline; gap: 10px; font-size: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--c-border); }
.poll-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); }
.poll-card.is-confirmed { border-color: color-mix(in srgb, var(--c-success) 55%, var(--c-border)); }
.poll-card.is-cancelled .poll-title { color: var(--c-muted); }
.poll-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.poll-head .chip { flex: none; }
.poll-title { border: none; background: transparent; padding: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--c-text); cursor: pointer; text-align: left; min-width: 0; overflow-wrap: anywhere; }
.poll-title:hover { text-decoration: underline; }
.poll-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--c-muted); }
.poll-meta-item { min-width: 0; overflow-wrap: anywhere; }
.poll-result { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.poll-result-text { min-width: 0; overflow-wrap: anywhere; font-size: 14px; color: var(--c-text); font-variant-numeric: tabular-nums; }
/* 詳細: 自分の回答(候補ごとに ○ △ ×) */
.poll-dialog { display: flex; flex-direction: column; gap: 16px; }
.poll-answer { display: flex; flex-direction: column; gap: 8px; }
.poll-answer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.poll-answer-rows { display: flex; flex-direction: column; }
.poll-answer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); }
.poll-opt-label { min-width: 0; overflow-wrap: anywhere; color: var(--c-text); font-variant-numeric: tabular-nums; }
/* ○ △ × は調整さんと同じ丸いボタン。選ぶ前は薄い灰色、選ぶと色で塗る(× は最初から選んだ状態なので、目立たない灰色で塗る) */
.poll-answer-seg { flex: none; flex-wrap: nowrap; gap: 10px; }
.poll-answer-seg .seg-btn { justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border-width: 2px; background: var(--c-bg); color: var(--c-faint); font-size: 20px; font-weight: 700; line-height: 1; }
/* × は ○ △ より字面が小さいので、大きさを揃える */
.poll-answer-seg .seg-btn.ans-no { font-size: 25px; }
.poll-answer-seg .seg-btn.ans-ok:hover { border-color: var(--c-success); }
.poll-answer-seg .seg-btn.ans-maybe:hover { border-color: var(--c-warning); }
.poll-answer-seg .seg-btn.ans-no:hover { border-color: var(--c-muted); }
.poll-answer-seg .seg-btn.ans-no.is-active { background: var(--c-muted); border-color: var(--c-muted); color: var(--c-surface); }
.ans-ok { color: var(--c-success); }
.ans-maybe { color: var(--c-warning); }
.ans-no { color: var(--c-danger); }
.ans-none { color: var(--c-faint); }
.seg-btn.ans-ok.is-active { background: var(--c-success); border-color: var(--c-success); color: var(--c-surface); }
.seg-btn.ans-maybe.is-active { background: var(--c-warning); border-color: var(--c-warning); color: var(--c-surface); }
.seg-btn.ans-no.is-active { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-on-danger); }
.poll-answer-save { display: flex; align-items: center; gap: 8px; }
.poll-answer-save .input { flex: 1; min-width: 0; }
/* 詳細: 集計(行 = 候補、列 = 人)。横に長いので枠の中で横スクロールし、候補の列は左に固定する(固定するセルは不透明な背景にする) */
.poll-tally { display: flex; flex-direction: column; gap: 8px; }
.poll-tally > p { margin: 0; }
.poll-table-wrap { align-self: flex-start; max-width: 100%; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-sm); }
.poll-table { border-collapse: separate; border-spacing: 0; font-size: 14px; }
.poll-table th, .poll-table td { padding: 6px 10px; border-bottom: 1px solid var(--c-border); text-align: center; white-space: nowrap; }
.poll-table tbody tr:last-child th, .poll-table tbody tr:last-child td { border-bottom: none; }
.poll-table thead th { font-size: 14px; font-weight: 700; color: var(--c-muted); background: var(--c-bg); vertical-align: bottom; }
.poll-table thead th:has(.poll-member) { white-space: normal; }
.poll-table .poll-col-opt { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 600; color: var(--c-text); background: var(--c-surface-2); border-right: 1px solid var(--c-border); font-variant-numeric: tabular-nums; }
.poll-table thead .poll-col-opt { z-index: 2; background: var(--c-bg); color: var(--c-muted); }
.poll-table tr.is-best .poll-col-opt { background: color-mix(in srgb, var(--c-warning) 16%, var(--c-surface-2)); }
.poll-table tr.is-confirmed .poll-col-opt { background: color-mix(in srgb, var(--c-success) 18%, var(--c-surface-2)); }
.poll-member { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.poll-member-name { width: 7em; white-space: normal; overflow-wrap: anywhere; color: var(--c-text); }
.poll-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.poll-ans { font-size: 15px; font-weight: 700; line-height: 1; }
.poll-ans.ans-no { font-size: 19px; }
.poll-table td.poll-comment { min-width: 120px; max-width: 220px; white-space: normal; overflow-wrap: anywhere; text-align: left; vertical-align: top; font-size: 14px; }
.poll-unanswered { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.poll-unanswered-text { min-width: 0; overflow-wrap: anywhere; }
/* 確定 */
.poll-confirm { display: flex; flex-direction: column; gap: 10px; }
.poll-confirm > p { margin: 0; }
.poll-confirm-rows { display: flex; flex-direction: column; }
.poll-confirm-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); cursor: pointer; }
.poll-confirm-row.is-past { opacity: 0.55; cursor: default; }
.poll-confirm-row input { flex: none; width: 16px; height: 16px; accent-color: var(--c-primary); }
.poll-confirm-counts { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 作成・編集: 候補日程(時刻の既定・月のカレンダー・候補の一覧) */

.poll-time-chip { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 2px 0 10px; border-radius: 15px; background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.poll-cal { display: flex; flex-direction: column; gap: 6px; }
.poll-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.poll-cal-title { font-weight: 700; color: var(--c-text); }
.poll-cal-week, .poll-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.poll-cal-week { font-size: 11px; font-weight: 700; color: var(--c-muted); text-align: center; }
.poll-cal-cell {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--c-surface-2); color: var(--c-text); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.poll-cal-cell.is-out { background: transparent; color: var(--c-muted); }
.poll-cal-week .sat, .poll-cal-cell.sat { color: var(--c-sat); }
.poll-cal-week .sun, .poll-cal-cell.sun { color: var(--c-sun); }
.poll-cal-cell:hover:not(:disabled) { border-color: var(--c-control); background: var(--c-hover); }
.poll-cal-cell:disabled { opacity: 0.35; cursor: default; }
.poll-cal-cell.is-today { border-color: var(--c-primary); }
.poll-cal-cell.is-selected { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary-ink); font-weight: 700; }
.poll-cal-badge { position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--c-primary); color: var(--c-on-primary); font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; }
.poll-cal-badge:empty { display: none; }
.poll-edit-note { margin: 0; align-self: center; }

/* ---- P56: 日程調整「自由に入力」(回答の方法・期間と所要時間・都合のグラフ・時間帯・確定)。スマホ幅の分は末尾の @media ---- */
.poll-mode .seg-btn { min-width: 132px; justify-content: center; }
.poll-free-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.poll-range { display: flex; align-items: center; gap: 8px; }
.poll-range .input { flex: 1; min-width: 0; }
.poll-unavailable { align-self: flex-start; }
.poll-my-slots { margin: 0; padding-left: 18px; color: var(--c-text); font-variant-numeric: tabular-nums; }
/* 集計: 最適な時間帯の 1 行 → 都合のグラフ → 選んだ時間の詳細 → 時間帯の一覧 → 日ごとの回答 */
.poll-free-tally { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.poll-sub-head { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--c-muted); }
.poll-best { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--c-warning) 14%, var(--c-surface-2)); }
.poll-best-text { min-width: 0; overflow-wrap: anywhere; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
/* 都合のグラフ(列 = 日付、行 = 30 分)。枠の中だけ縦横にスクロールし、日付の行(上)と時刻の列(左)は固定する
   (固定するセルは不透明な背景。表自体に overflow を付けると固定が効かないので、スクロールは外側の枠だけ) */
.poll-heat-box { display: flex; flex-direction: column; align-items: flex-start; }
.poll-heat-box:empty, .poll-windows-box:empty, .poll-days-box:empty, .poll-free-detail:empty { display: none; }
.poll-heat-wrap { max-height: 60vh; overflow: auto; }
.poll-heat { border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.poll-heat th, .poll-heat td { padding: 0; border-bottom: 1px solid var(--c-border); border-right: 1px solid var(--c-border); text-align: center; white-space: nowrap; }
.poll-heat thead th { position: sticky; top: 0; z-index: 2; height: 38px; background: var(--c-bg); color: var(--c-muted); font-weight: 700; line-height: 1.25; }
.poll-heat .poll-heat-time { position: sticky; left: 0; z-index: 2; width: 52px; min-width: 52px; padding: 0 6px; background: var(--c-surface-2); color: var(--c-text); font-weight: 600; text-align: right; }
.poll-heat thead .poll-heat-time { z-index: 3; background: var(--c-bg); }
.poll-heat-day > span { display: block; }
.poll-heat-day.sat { color: var(--c-sat); }
.poll-heat-day.sun { color: var(--c-sun); }
/* コマ: 人数を数字でも出す(色だけに頼らない)。色は 0 人 = なし、1 人以上 = いちばん多いコマを 4 とした 4 段階。文字はどの段階・どちらのテーマでも読める色 */
.heat-cell { position: relative; display: block; width: 44px; height: 28px; padding: 0; border: none; border-radius: 0; background: transparent; font: inherit; cursor: pointer; }
.heat-cell, .heat-swatch { color: var(--c-text); }
.heat-cell:hover { filter: brightness(1.1); }
.heat-cell:focus-visible { outline-offset: -3px; z-index: 1; }
.heat-1 { background-color: color-mix(in srgb, var(--c-primary) 20%, var(--c-surface-2)); }
.heat-2 { background-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-surface-2)); }
.heat-3 { background-color: color-mix(in srgb, var(--c-primary) 64%, var(--c-surface-2)); }
.heat-4 { background-color: var(--c-primary); color: var(--c-on-primary); }
/* 最適な時間帯: 太い枠線 + 太字 + ★(色が同じ段階のコマと見分けられるように、枠線は文字色)。選んだコマは別の色の枠線 */
.heat-cell.is-best { box-shadow: inset 0 0 0 2px var(--c-text); font-weight: 700; }
.heat-cell.is-best::after { content: "★"; position: absolute; top: 1px; right: 3px; font-size: 9px; line-height: 1; }
.heat-cell.is-selected { box-shadow: inset 0 0 0 2px var(--c-warning); }
.heat-cell.is-best.is-selected { box-shadow: inset 0 0 0 2px var(--c-text), inset 0 0 0 4px var(--c-warning); }
.poll-heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.heat-swatch { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 20px; padding: 0 6px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.heat-swatch.heat-4 { color: var(--c-on-primary); }
.poll-free-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--c-surface-2); font-size: 14px; overflow-wrap: anywhere; }
.poll-free-detail-head { font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.poll-windows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.poll-window { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); }
.poll-window-pick { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; border: none; background: transparent; font: inherit; color: var(--c-text); text-align: left; font-variant-numeric: tabular-nums; }
button.poll-window-pick { cursor: pointer; }
button.poll-window-pick:hover { background: var(--c-hover); }
.poll-window-rank { flex: none; min-width: 38px; color: var(--c-muted); }
.poll-window-label { min-width: 0; overflow-wrap: anywhere; }
.poll-window-count { flex: none; margin-left: auto; font-weight: 700; }
.poll-window.is-best .poll-window-label { font-weight: 700; }
.poll-days > summary { cursor: pointer; padding: 4px 0; font-size: 14px; color: var(--c-muted); }
.poll-days[open] > summary { margin-bottom: 6px; }
.poll-table td.poll-day-slots { font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; vertical-align: top; }
/* 確定(自由に入力): 上位の時間帯を押すと、下の日付・開始・終了に入る */
.poll-confirm-pick { width: 100%; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); background: transparent; font: inherit; color: inherit; text-align: left; }
.poll-confirm-pick:hover { background: var(--c-hover); }
.poll-confirm-when { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
/* P58: チェック項目(スマホ幅の分は末尾の @media)。行全体が label = どこを押しても切り替わる。済みは取り消し線 + 薄い文字(色だけに頼らない) */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist-item { display: flex; align-items: flex-start; gap: 8px; min-height: 34px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.checklist-item input { accent-color: var(--c-primary); width: 16px; height: 16px; margin-top: 1px; flex: none; }
.checklist-item:has(input:disabled) { cursor: default; }
.checklist-text { overflow-wrap: anywhere; }
.checklist-item.is-done .checklist-text { text-decoration: line-through; color: var(--c-muted); }
.task-checklist { margin-top: 16px; }
.task-checklist h3 .chip { vertical-align: middle; }
/* P59: 空き時間(シフトを入れられそうな時間。スマホ幅の分は末尾の @media)。破線の枠 + 「空き」の文字で、シフトと見分ける(色だけに頼らない) */
.view-shifts [hidden] { display: none !important; }
.shift-chip.is-avail { background: transparent; border-style: dashed; border-color: var(--c-control); font-weight: 500; flex-wrap: wrap; }
.shift-chip.is-avail.is-mine { border-color: color-mix(in srgb, var(--c-primary) 65%, transparent); }
button.shift-chip { width: 100%; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
button.shift-chip:hover { background: var(--c-hover); }
.avail-tag { flex: none; padding: 0 4px; border-radius: 4px; background: var(--c-bg); color: var(--c-muted); font-size: 10px; font-weight: 700; }
.shift-total:has(+ .avail-total) th, .shift-total:has(+ .avail-total) td { border-bottom: 1px solid var(--c-border); }
.avail-heat-panel { margin: 0 20px 20px; }
.avail-heat-detail { margin-top: 8px; font-size: 14px; }
.avail-heat-detail p { margin: 0; }

/* 0.17.0: シフト・空き時間の入力の作り直し(スマホ幅の分は末尾の @media)。
   主ボタン・自分の行の「＋」・表示する期間(1・2・4 週間。表は枠の中で横にスクロールし、名前の列は左に固定)。 */
.shift-add-bar { padding: 0 20px 12px; flex: none; }
.shift-range { width: auto; }
.range-short { display: none; }
.view-shifts .shift-wrap { flex: none; overflow-x: auto; }
.shift-table.days-14, .shift-table.days-28 { overflow: visible; }
.shift-table.days-14 { min-width: calc(200px + 14 * 120px); }
.shift-table.days-28 { min-width: calc(200px + 28 * 120px); }
.shift-table.days-14 thead th:first-child, .shift-table.days-14 tbody th, .shift-table.days-28 thead th:first-child, .shift-table.days-28 tbody th { position: sticky; left: 0; z-index: 1; }
.shift-table.days-14 thead th:first-child, .shift-table.days-28 thead th:first-child { z-index: 2; }
.shift-table .is-week-start { border-left: 2px solid var(--c-control); }
.shift-add { display: flex; align-items: center; justify-content: center; width: 100%; height: 24px; padding: 0; border: 1px dashed var(--c-control); border-radius: var(--r-sm); background: transparent; color: var(--c-muted); cursor: pointer; }
.shift-add:hover, .shift-add:focus-visible { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-text); }
.shift-add .icon { width: 16px; height: 16px; }
/* 入力のダイアログ: 日付のチップ(1 週間 = 1 行)・時間帯のチップ・30 分刻みの select。選択中は 色 + 太字 + 枠(時間帯はチェックの印も) */
.shift-entry { display: flex; flex-direction: column; gap: 14px; }
.shift-entry [hidden] { display: none !important; }
.shift-entry .field-hint { margin: 0; }
.shift-entry-kind .seg-btn { flex: 1 1 0; justify-content: center; height: 34px; }
.shift-entry-section { display: flex; flex-direction: column; gap: 6px; }
.shift-entry-head { display: flex; align-items: center; gap: 2px; }
.day-grid { display: flex; flex-direction: column; gap: 4px; }
.day-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.day-chip { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 44px; padding: 2px 0 5px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer; }
.day-chip-wd { font-size: 11px; color: var(--c-muted); }
.day-chip.sat .day-chip-wd { color: var(--c-sat); }
.day-chip.sun .day-chip-wd { color: var(--c-sun); }
.day-chip-day { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-chip.is-today::after { content: ""; position: absolute; bottom: 3px; width: 14px; height: 2px; border-radius: 1px; background: var(--c-primary); }
.day-chip:hover:not(:disabled) { border-color: var(--c-control); background: var(--c-hover); }
.day-chip.is-active { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); background: var(--c-primary-soft); color: var(--c-text); font-weight: 700; }
.day-chip:disabled { opacity: 0.4; cursor: default; }
/* 曜日でくり返す: 期間(開始〜終了)・曜日のチップ(7 個を 1 行)・何日になるかの 1 行 */
.shift-entry-pick, .shift-entry-repeat { display: flex; flex-direction: column; gap: 6px; }
.repeat-range { display: flex; align-items: center; gap: 8px; }
.repeat-range .input { flex: 1; min-width: 0; }
.wd-chip { font-size: 14px; }
.wd-chip.sat { color: var(--c-sat); }
.wd-chip.sun { color: var(--c-sun); }
.repeat-info { margin: 0; color: var(--c-text); font-variant-numeric: tabular-nums; }
/* 空き時間を予定から入れる: 1 日の範囲・予定の行(始まり〜終わり・外す)・空き時間になる時間の 1 行 */
.shift-entry-time, .shift-entry-plans { display: flex; flex-direction: column; gap: 6px; }
.plan-rows { display: flex; flex-direction: column; gap: 6px; }
.plan-row { display: flex; align-items: center; gap: 8px; }
.plan-row .time-select { flex: 1; min-width: 0; }
.plan-remove { flex: none; width: 40px; height: 40px; }
.plan-remove .icon { width: 18px; height: 18px; }
.day-failures { margin: 0; padding-left: 18px; font-size: 14px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.pick-chip:hover { border-color: var(--c-control); background: var(--c-hover); }
.pick-chip .icon { display: none; width: 16px; height: 16px; }
.pick-chip.is-active { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-text); font-weight: 700; }
.pick-chip.is-active .icon { display: block; }
.time-range { display: flex; flex-direction: column; gap: 8px; }
.time-range-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: end; }
.time-range-sep { padding-bottom: 8px; color: var(--c-muted); }
.time-select { font-size: 16px; font-variant-numeric: tabular-nums; }
.time-range-foot { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.time-range-info { flex: 1 1 auto; font-size: 14px; color: var(--c-muted); }
.time-range-info.field-error { color: var(--c-danger); font-weight: 600; }

/* P60: セットアップの状況(設定の先頭のカード・ナビのバッジ・ボードの帯)。状態は色だけでなく、アイコンと文字でも伝える */
.setup-card { border: 1px solid var(--c-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.setup-card.is-problem { border-color: var(--c-danger); }
.setup-card.is-missing { border-color: var(--c-warning); }
.setup-card .settings-section-head { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.setup-card .settings-section-head .section-title { flex: 1; }
.setup-group { margin-top: 10px; }
.setup-group.is-problem { background: var(--c-danger-soft); padding: 8px 10px; border-radius: 6px; }
.setup-group-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.setup-item { display: grid; grid-template-columns: 20px 1fr auto; column-gap: 8px; row-gap: 2px; align-items: start; padding: 6px 0; }
.setup-item + .setup-item { border-top: 1px solid var(--c-border); }
.setup-item svg { width: 18px; height: 18px; margin-top: 2px; }
.setup-item-label { font-weight: 600; }
.setup-item-value { color: var(--c-muted); margin-left: 6px; }
.setup-item-effect, .setup-item-perms, .setup-item-fix { grid-column: 2 / 4; margin: 0; font-size: 14px; }
.setup-item-fix { color: var(--c-muted); }
.setup-item .btn { grid-column: 2 / 4; justify-self: start; margin-top: 4px; }
.setup-ai-btn { margin-top: 12px; }
.setup-card .setup-done { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; padding: 0; text-align: left; color: var(--c-muted); }
.setup-more { margin-top: 8px; font-size: 14px; }
.setup-apps { margin-top: 10px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.setup-app-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.setup-app-row > span { white-space: nowrap; }
.setup-app-row code { min-width: 0; overflow-wrap: anywhere; }
.setup-app-row .btn { min-width: 40px; min-height: 40px; }
.is-flash { animation: setup-flash 2s ease-out 1; }
@keyframes setup-flash { 0% { background: var(--c-primary-soft); } 100% { background: transparent; } }
.nav-badge.nav-badge-problem { background: var(--c-danger); color: var(--c-on-danger); font-weight: 800; }
.nav-dot.is-problem { background: var(--c-danger); }
.setup-banner { display: flex; align-items: center; gap: 8px; margin: 8px 20px 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--c-warning-soft); font-size: 14px; }
.setup-banner[hidden] { display: none; }
.setup-banner svg { width: 18px; height: 18px; flex: none; }
.setup-banner > span { flex: 1; min-width: 0; }
.setup-banner-close svg { transform: rotate(45deg); }
.setup-banner.is-problem { border-color: var(--c-danger); background: var(--c-danger-soft); }
.setup-item-effect, .setup-item-fix { white-space: pre-wrap; }
.setup-card .setup-done svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 768px) {
  /* 日程調整: カードは状態のチップの下に題名(長い題名は折り返す)。回答は候補の表示の下に ○ △ × を幅いっぱいに並べる */
  .poll-list { padding: 0 12px 16px; }
  .poll-head { flex-wrap: wrap; }
  .poll-title { order: 5; flex: 1 1 100%; min-height: 40px; font-size: 16px; }
  .poll-answer-tools .spacer { display: none; }
  .poll-answer-tools > .muted { flex: 1 1 100%; }
  /* 回答は調整さんと同じく 1 行: 左に候補、右に丸い ○ △ × */
  .poll-answer-row { padding: 8px 0; }
  .poll-opt-label { font-size: 15px; }
  .poll-answer-seg { gap: 8px; }
  .poll-answer-seg .seg-btn { width: 46px; height: 46px; min-height: 46px; font-size: 21px; }
  .poll-answer-seg .seg-btn.ans-no { font-size: 26px; }
  .poll-answer-save { flex-wrap: wrap; }
  .poll-answer-save .input { flex: 1 1 100%; }
  .poll-answer-save .btn { flex: 1 1 auto; }
  /* 集計: 候補の列は日付と時刻の 2 行に折り返して狭くする(左に固定したまま、人の列を横にスクロール) */
  .poll-table th, .poll-table td { padding: 8px; }
  .poll-table .poll-col-opt { min-width: 104px; max-width: 44vw; white-space: normal; }
  .poll-ans { font-size: 18px; }
  .poll-ans.ans-no { font-size: 23px; }
  .poll-confirm-row { min-height: 44px; }
  .poll-confirm-row input { width: 20px; height: 20px; }
  /* 作成・編集: カレンダーは幅いっぱい(セルは正方形)。 */
  .poll-cal-head .btn { min-width: 44px; font-size: 18px; }
  .poll-cal-cell { font-size: 15px; }
  .poll-time-chip { height: 40px; padding-right: 0; border-radius: 20px; font-size: 15px; }
  .poll-edit-note { align-self: auto; }
  /* P56 自由に入力: 回答の方法は 2 等分。期間の 2 つの日付と所要時間は 1 行ずつ。
     グラフのコマは 44×40(押す対象 40px 以上)・時刻の列は 48px。グラフは枠の中だけ縦横にスクロールする(ページははみ出さない) */
  .poll-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poll-mode .seg-btn { min-width: 0; min-height: 44px; }
  .poll-free-fields { grid-template-columns: minmax(0, 1fr); }
  .poll-range { flex-direction: column; align-items: stretch; }
  .poll-range > span { display: none; }
  .poll-best .btn { flex: 1 1 100%; }
  .poll-heat-wrap { max-height: 55vh; overscroll-behavior: contain; }
  .poll-heat { font-size: 14px; }
  .poll-heat .poll-heat-time { width: 48px; min-width: 48px; padding: 0 4px; font-size: 14px; }
  .heat-cell { height: 40px; }
  .heat-cell.is-best::after { font-size: 14px; }
  .heat-swatch { height: 24px; font-size: 14px; }
  .poll-free-detail { font-size: 14px; }
  .poll-free-detail .btn { align-self: stretch; }
  .poll-window-pick { min-height: 44px; flex-wrap: wrap; align-items: center; }
  .poll-days > summary { padding: 10px 0; font-size: 14px; }
  .poll-confirm-when { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poll-confirm-when > :first-child { grid-column: 1 / -1; }
  /* P58: チェックの行は 40px 以上(行全体が押せる)・checkbox は 20px */
  .checklist-item { min-height: 40px; align-items: center; font-size: 15px; }
  .checklist-item input { width: 20px; height: 20px; margin-top: 0; }
  /* P59: ツールバーは 2 段(前週/今週/翌週 + モード → 期間 + 絞り込み)。段を増やさない。自分の空き時間は押せる大きさに */
  .view-shifts .toolbar .spacer { display: none; }
  .view-shifts .toolbar .shift-mode { order: 1; margin-left: auto; flex-wrap: nowrap; }
  .view-shifts .toolbar .toolbar-title { order: 2; }
  .view-shifts .shift-filter { flex: 1 1 0; min-width: 0; width: 100%; }
  button.shift-chip { min-height: 40px; font-size: 14px; }
  /* 日ごとの一覧(表の代わり): 日付の見出し(人数・＋ 入れる)の下に、入っている人と時間を 1 行ずつ */
  .shift-days { display: flex; flex-direction: column; gap: 8px; }
  .shift-day { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; scroll-margin-top: 8px; }
  .shift-day.is-today { border-color: var(--c-primary); }
  .shift-day.is-past { opacity: 0.72; }
  .shift-day-head { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 6px 4px 12px; background: var(--c-surface-2); }
  .shift-day-date { font-size: 15px; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
  .shift-day-date.sat { color: var(--c-sat); }
  .shift-day-date.sun { color: var(--c-sun); }
  .shift-day-count { font-variant-numeric: tabular-nums; }
  .shift-day-add { min-height: 40px; }
  .shift-day-add .icon { width: 18px; height: 18px; }
  .shift-day-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--c-border); }
  .shift-day-row.is-me { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
  .shift-day-name { flex: 0 0 112px; min-width: 0; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--c-text); }
  .shift-day-name-text { min-width: 0; overflow-wrap: anywhere; }
  .shift-day-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .shift-day-chips .shift-chip { margin-bottom: 0; min-height: 40px; padding: 0 8px; font-size: 14px; }
  .shift-day-chips button.shift-chip { width: auto; min-height: 40px; }
  .shift-day-chips .shift-cancel { width: 40px; height: 40px; margin-right: -8px; font-size: 18px; }
  /* 表は縮めない(下にグラフが続くので、縮むと表が潰れる)。縦は画面全体で、横は表の枠の中でスクロールする */
  .view-shifts .shift-wrap { flex: none; }
  .avail-heat-panel { margin: 0 12px 16px; }
  /* 0.17.0: 主ボタンは幅いっぱいで 1 つ(帯を増やさない)。見出しは短く、期間の select と絞り込みを 2 段目に並べる。押す対象は 40px 以上 */
  .shift-add-bar { padding: 0 12px 10px; }
  .shift-add-main { width: 100%; min-height: 44px; font-size: 15px; }
  .range-long { display: none; }
  .range-short { display: inline; }
  .view-shifts .toolbar .toolbar-title { white-space: nowrap; }
  .view-shifts .toolbar .shift-range { order: 2; flex: none; }
  .shift-table.days-14 { min-width: calc(120px + 14 * 88px); }
  .shift-table.days-28 { min-width: calc(120px + 28 * 88px); }
  .shift-add { min-height: 40px; }
  .shift-add .icon { width: 18px; height: 18px; }
  .shift-entry-kind .seg-btn { min-height: 44px; font-size: 15px; }
  .day-chip { min-height: 48px; }
  .day-chip-day { font-size: 15px; }
  .wd-chip { font-size: 15px; }
  .repeat-range .input { min-height: 44px; }
  .pick-chip { height: auto; min-height: 40px; font-size: 14px; }
  .pick-chip .icon { width: 18px; height: 18px; }
  select.time-select, input.time-select { min-height: 44px; }
  .modal-actions [data-action=saveShift] { flex: 1 1 auto; }
  /* P60: スマホの変更は末尾の media 内。押す対象は 40px 以上 */
  .setup-card { padding: 12px; }
  .setup-card .btn { min-height: 40px; }
  .setup-card .settings-section-head { flex-wrap: wrap; }
  .setup-card .section-title { min-width: 0; }
  .setup-ai-btn { width: 100%; justify-content: center; }
  .setup-item { grid-template-columns: 20px minmax(0, 1fr); }
  .setup-item .tone-chip { grid-column: 2; justify-self: start; }
  .setup-item-effect, .setup-item-perms, .setup-item-fix, .setup-item .btn { grid-column: 2; }
  .setup-item > div, .setup-apps code { min-width: 0; overflow-wrap: anywhere; }
  .setup-more > summary { min-height: 40px; display: flex; align-items: center; }
  .setup-banner { margin: 8px 12px 0; flex-wrap: wrap; }
  .setup-banner .btn { min-height: 40px; }
  /* ボタンの中のアイコン(もう一度確認・AI でセットアップ)は文字の大きさに連動して 18px を下回るので、スマホ幅では固定する */
  .setup-card .icon { width: 18px; height: 18px; }
}

/* ---- P61: 自動化(Discord への自動投稿)。カードは日程調整のカードに合わせる ---- */
.view-automation .automation-intro { margin: 0 20px 12px; max-width: 980px; }
.automation-list { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.automation-group { display: flex; flex-direction: column; gap: 8px; }
.automation-group-head { display: flex; align-items: baseline; gap: 10px; font-size: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--c-border); }
.automation-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); min-width: 0; }
.automation-card[data-state=blocked] { border-color: color-mix(in srgb, var(--c-warning) 55%, var(--c-border)); }
.automation-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.automation-head .chip { flex: none; }
.automation-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-text); min-width: 0; overflow-wrap: anywhere; flex: 1; }
.automation-sub, .automation-note, .automation-last { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.automation-note { color: var(--c-warning); }
.automation-last { color: var(--c-muted); }
.automation-last.is-failed { color: var(--c-danger); }
.automation-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--c-muted); }
.automation-meta-item { min-width: 0; overflow-wrap: anywhere; }
.automation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.automation-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.automation-done > summary { cursor: pointer; font-size: 14px; color: var(--c-muted); padding: 6px 0; }
.automation-done > .automation-card { margin-top: 8px; }
.automation-dialog { display: flex; flex-direction: column; gap: 12px; }
.automation-dialog .form-section > div + div { margin-top: 8px; }
.automation-weekdays .seg-btn { min-width: 36px; justify-content: center; }
.automation-section-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.automation-section-line .input { width: auto; }
.autopost { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.autopost > summary { cursor: pointer; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--c-text); }
.autopost[open] > summary { border-bottom: 1px solid var(--c-border); }
.autopost-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.autopost-rows { display: flex; flex-direction: column; gap: 8px; }
.autopost-row { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) 40px; gap: 8px; align-items: center; }
.autopost-value { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.autopost-value > .input { flex: 1 1 160px; min-width: 0; }
.autopost-reminders { display: flex; flex-direction: column; gap: 8px; }
.autopost-row .icon-btn { width: 40px; height: 40px; }
.autopost-row .icon { width: 18px; height: 18px; }
.automation-dialog [hidden], .autopost [hidden] { display: none !important; }
.autopost .field-hint { margin: 0; }
.task-autopost { margin-top: 12px; }
@media (max-width: 600px) {
  /* 1 行目 = 種類と値、2 行目 = 呼ぶ と ×。押す対象は 40px 以上 */
  .autopost-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .autopost-row .autopost-value { grid-column: 1 / -1; }
  .autopost-row .icon-btn { justify-self: end; }
  .automation-card .btn, .autopost .btn, .autopost select, .autopost input, .automation-dialog .seg-btn, details.autopost > summary { min-height: 40px; }
  details.autopost > summary { display: flex; align-items: center; }
  .automation-weekdays { flex-wrap: nowrap; gap: 4px; }
  .automation-weekdays .seg-btn { min-width: 40px; padding: 0; }
  .automation-list { padding: 0 12px 16px; }
  .view-automation .automation-intro { margin: 0 12px 10px; }
  .automation-head { flex-wrap: wrap; }
  .automation-dialog .input, .automation-dialog select { min-height: 40px; }
  .automation-done > summary { min-height: 40px; display: flex; align-items: center; }
}

/* ---- P62 段 1-B: 共通の部品(シート・操作の一覧・ステップ・設定の行・固定の作成ボタン・名前)とナビ ---- */
.modal-actions [hidden], .time-range [hidden], .step-form [hidden], .hub-tabs[hidden] { display: none !important; }
.modal-close .icon { width: 20px; height: 20px; }

/* 左ナビ: 見出しで 5 群。現在地は淡い主要色の面 + 主要色の文字 + 太字(左の色帯は使わない) */
.sb-nav > .sb-group-title { flex-shrink: 0; }
.sb-group-title { margin: 10px 10px 2px; font-size: 14px; font-weight: 600; color: var(--c-muted); letter-spacing: 0.04em; }
.sb-group-title:first-child { margin-top: 0; }
.sb-nav-item.is-active { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: 700; }

/* 画面の上のタブ(スマホだけ。PC は左ナビに全部見えている) */
.hub-tabs { display: none; }

/* 操作の一覧(「…」)。PC は anchor の下の小さなメニュー、スマホはシートの中の行 */
.action-menu { z-index: 40; min-width: 220px; background: var(--c-surface); box-shadow: var(--shadow-2); }
.menu-item { min-height: 36px; height: auto; padding: 6px 10px; }
.menu-item:hover, .menu-item:focus-visible { background: var(--c-hover); color: var(--c-text); outline: none; }
.menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--c-primary); }
.menu-item:disabled { opacity: 0.55; cursor: default; }
.menu-item.is-danger { color: var(--c-danger); }
.menu-item .icon { color: var(--c-muted); }
.menu-item[class*="st-"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--st); flex: none; }
.card-menu { display: inline-flex; align-items: center; justify-content: center; }
.card-menu .icon { width: 18px; height: 18px; }

/* シート(PC は幅 420px の小さなモーダル) */
.modal-sheet { width: 420px; }
.modal-sheet .action-menu { position: static; min-width: 0; padding: 0; border: none; box-shadow: none; background: transparent; }

/* ステップ(日程調整の作成)。PC は番号つきの一覧、スマホは「2/3 候補の日時」と細い進捗バー */
.steps-wrap { margin-bottom: 12px; }
.steps { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.step-item { flex: 1 1 0; min-width: 0; }
.step-link {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 8px; border: none; border-bottom: 2px solid var(--c-border);
  background: transparent; color: var(--c-muted); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.step-link:disabled { cursor: default; opacity: 0.7; }
.step-link[aria-current="step"] { color: var(--c-primary-ink); border-bottom-color: var(--c-primary); }
.step-item.is-done .step-link { color: var(--c-text); border-bottom-color: var(--c-control); }
.step-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-surface-2); font-size: 14px; font-variant-numeric: tabular-nums; flex: none; }
.step-link[aria-current="step"] .step-num { background: var(--c-primary); color: var(--c-on-primary); }
.steps-compact { display: none; }
.step-bar { display: block; height: 4px; border-radius: 2px; background: var(--c-surface-2); overflow: hidden; }
.step-bar-fill { display: block; height: 100%; background: var(--c-primary); transition: width var(--dur) var(--ease); }
.step-error { margin-bottom: 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--c-danger-soft); color: var(--c-danger); font-weight: 600; }
.step-title { font-size: var(--fs-lg); margin-bottom: 12px; }
.step-title:focus { outline: none; }

/* 任意の設定の行(<details>)。見出しに名前と今の値。開いても自動でスクロールしない */
.setting-row { border-bottom: 1px solid var(--c-border); }
.setting-row > summary { list-style: none; }
.setting-row > summary::-webkit-details-marker { display: none; }
.setting-row-head { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 4px; cursor: pointer; }
.setting-row-label { flex: none; font-weight: 600; color: var(--c-text); }
.setting-row-value { flex: 1 1 auto; min-width: 0; text-align: right; color: var(--c-muted); overflow-wrap: anywhere; }
.setting-row-chevron { display: inline-flex; color: var(--c-faint); transition: transform var(--dur) var(--ease); }
.setting-row[open] .setting-row-chevron { transform: rotate(90deg); }
.setting-row-body { padding: 4px 4px 16px; }

/* 名前: 省略せず、入る幅があれば 1 行・足りないときだけ折り返す(日付は縮めず次の行へ回す) */
.person { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; }
.person-text { display: flex; flex-direction: column; min-width: 0; }
.person-name { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.person-sub { font-size: var(--fs-sm); color: var(--c-muted); }
.card-bottom { flex-wrap: wrap; row-gap: 2px; }
.card-due { margin-left: auto; }
.picker-name, .monitor-member { overflow-wrap: anywhere; }

/* トースト(アイコンは SVG) */
.toast-icon .icon { width: 14px; height: 14px; }
.toast-close { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); }
.toast-close:hover { background: var(--c-hover); color: var(--c-text); }
.toast-close .icon { width: 16px; height: 16px; }

@media (max-width: 768px) {
  /* 上部バー: ユーザーは引き出しの下にあるので隠す */
  .topbar-user { display: none; }
  .sb-group-title { margin: 14px 12px 4px; font-size: 14px; }

  /* 画面の上のタブ(タスク・日程) */
  .hub-tabs { display: flex; flex: none; gap: 4px; padding: 0 8px; overflow-x: auto; background: var(--c-surface); border-bottom: 1px solid var(--c-border); scrollbar-width: none; overscroll-behavior-x: contain; }
  .hub-tabs::-webkit-scrollbar { display: none; }
  .hub-tab {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: none; border-bottom: 2px solid transparent;
    background: transparent; color: var(--c-muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .hub-tab.is-active { color: var(--c-primary-ink); border-bottom-color: var(--c-primary); }

  /* 固定の作成ボタン: 右下(下部タブの上・セーフエリアの内側)。何を作るかを文字で書く */
  .fab, .shift-add-main.fab {
    position: fixed; z-index: 20; right: max(16px, env(safe-area-inset-right)); bottom: calc(56px + env(safe-area-inset-bottom) + 12px);
    width: auto; min-height: 56px; padding: 0 20px; border-radius: var(--r-lg); box-shadow: var(--shadow-1), var(--shadow-2); font-size: 16px; font-weight: 600;
  }
  .fab .icon { width: 22px; height: 22px; }
  .content.has-fab { padding-bottom: 72px; }
  /* 作成のボタンがある画面では、トーストをボタンの上に出す(ボタンを隠さない) */
  body:has(.content.has-fab) > .toasts { bottom: calc(56px + env(safe-area-inset-bottom) + 12px + 56px + 8px); }
  .view-shifts .shift-add-bar { padding: 0; }

  /* シート: 画面の下に固定・幅いっぱい・本文だけスクロール・下から上がる */
  .modal.modal-sheet {
    top: auto; width: 100vw; max-width: 100vw; height: auto; max-height: 85dvh; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); animation: sheet-in var(--dur) var(--ease);
  }
  .modal-sheet .modal-body { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .modal-sheet .menu-item { min-height: 48px; padding: 0 12px; font-size: 16px; border-radius: var(--r-md); }
  .modal-actions .step-next { flex: 1 1 auto; }

  /* ステップ: 「2/3 候補の日時」+ 細い進捗バー */
  .steps { display: none; }
  .steps-compact { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--c-primary-ink); }

  .toast-close { width: 44px; height: 44px; }
  .menu-btn { width: 44px; height: 44px; }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- P62 段 2-A: 日程調整(作成の 3 ステップ・カレンダー × 共通の時刻・日ごとの候補・時刻のシート・設定の行・カード)。スマホ幅の分はこの下の @media ---- */
.poll-step { display: flex; flex-direction: column; gap: 16px; }
.poll-when { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.poll-when-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.poll-cal-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.poll-cal-head .btn { min-width: 40px; }
.poll-cal-cell.is-selected { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.poll-cal-cell.is-selected .poll-cal-badge { background: var(--c-surface); color: var(--c-primary-ink); }
.poll-times-box { display: flex; flex-direction: column; gap: 8px; }
.poll-times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.input-chip { display: inline-flex; align-items: center; min-height: 36px; border-radius: var(--r-full); background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.input-chip-main { min-height: 36px; padding: 0 4px 0 14px; border: none; border-radius: var(--r-full) 0 0 var(--r-full); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.input-chip-x { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.input-chip-main:hover, .input-chip-x:hover { background: color-mix(in srgb, var(--c-primary) 14%, transparent); }
.input-chip-x .icon { width: 16px; height: 16px; }
.poll-plan-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.poll-plan-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.poll-day-list, .poll-existing-list { display: flex; flex-direction: column; }
.poll-day-list:focus { outline: none; }
.poll-day { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--c-border); }
.poll-day-head { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.poll-day-date { font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; }
.poll-day-cands { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.poll-cand {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 36px; padding: 2px 14px;
  border: 1px solid var(--c-control); border-radius: var(--r-full); background: var(--c-surface); color: var(--c-text); font: inherit; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer;
}
.poll-cand:hover { background: var(--c-hover); }
.poll-cand-sub { font-size: 14px; color: var(--c-muted); }
.poll-cand.is-removing .poll-cand-label { text-decoration: line-through; color: var(--c-muted); }
.poll-cand.is-changed { border-color: var(--c-primary); color: var(--c-primary-ink); }
.poll-cand.poll-existing { border-radius: var(--r-md); }
.poll-cand-add { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px dashed var(--c-control); border-radius: 50%; background: transparent; color: var(--c-primary-ink); cursor: pointer; }
.poll-review { gap: 8px; }
.poll-review-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.poll-review-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--c-text); }
.poll-settings-head { margin: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--c-muted); }
.poll-settings { display: flex; flex-direction: column; }
.poll-settings > .autopost { border: none; border-bottom: 1px solid var(--c-border); border-radius: 0; background: transparent; }
.poll-settings > .autopost > summary { display: flex; align-items: center; min-height: 56px; padding: 8px 4px; font-size: inherit; color: var(--c-text); }
.poll-settings > .autopost[open] > summary { border-bottom: none; }
.poll-settings > .autopost > .autopost-body { padding: 4px 4px 16px; }
.poll-edit { display: flex; flex-direction: column; gap: 16px; }
.poll-time-sheet { display: flex; flex-direction: column; gap: 12px; }
.poll-time-sheet [hidden] { display: none !important; }
.poll-bulk-mode { align-self: flex-start; }
.poll-bulk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.poll-sheet-error, .poll-sheet-note { margin: 0; }
.poll-range-quick { margin-top: 6px; }
.poll-meta .icon, .poll-result > .icon, .poll-best-text .icon, .poll-col-opt .icon, .poll-window-rank .icon, .poll-opt-label .icon { width: 16px; height: 16px; margin-right: 2px; vertical-align: -3px; }
.poll-result > .icon, .poll-best-text .icon, .poll-window-rank .icon, .poll-opt-label .icon, .poll-col-opt .icon { color: var(--c-warning); }
.poll-card.is-confirmed .poll-result > .icon, .poll-table tr.is-confirmed .poll-col-opt .icon { color: var(--c-success); }
.poll-head > .poll-title { flex: 1 1 auto; }
.poll-meta .chip { flex: none; }
.poll-actions { flex-wrap: nowrap; }

@media (max-width: 768px) {
  /* 題名は上部バーにあるので、画面のツールバーは作成のボタン(右下に固定)だけ */
  .view-polls > .toolbar { padding: 0; min-height: 0; }
  .poll-title { order: 0; flex: 1 1 auto; }
  .poll-when { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .poll-cal-cell { min-height: 44px; font-size: 16px; }
  .poll-cal-badge { top: 2px; right: 2px; }
  .input-chip, .input-chip-main { min-height: 44px; font-size: 16px; }
  .input-chip-x, .poll-cand-add { width: 44px; height: 44px; }
  .poll-cand { min-height: 44px; font-size: 16px; }
  .poll-time-add { min-height: 44px; }
  .poll-day-head .icon-btn { width: 44px; height: 44px; }
  .poll-bulk-mode .seg-btn { min-height: 44px; }
  .poll-review-row .btn { min-height: 44px; }
  /* ステップの題名は上の「2/3 候補の日時」と同じなので、見た目からは隠す(フォーカスの移り先としては残す) */
  .poll-form .step-title { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* ---- P62 段 3-B: 議事録・報告・AI チャット・デイリー・ログイン・プロジェクト選択・セットアップ。スマホ幅の分は下の @media ---- */
/* 一覧 + 詳細(議事録・報告)の行の型: 題名(2 行まで)・補助の行 14px・状態は右。選んでいる行は淡い主要色の面 */
.list-row { gap: 4px; padding: 10px 12px; border-radius: var(--r-md); }
.list-row.is-selected { background: var(--c-primary-soft); border-color: transparent; }
.list-row-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.list-row-title {
  flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: var(--c-text); white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.list-row-meta, .list-row-sub { font-size: 14px; color: var(--c-muted); }
.list-row .tone-chip, .list-row .chip { height: auto; min-height: 20px; font-size: 14px; }
.page-back { display: none; }
.page-back .icon { width: 20px; height: 20px; }
.view-reports .report-doc .setting-row { border-top: 1px solid var(--c-border); }
.view-reports .report-doc .report-kv { max-width: none; }

/* AI チャット: 折りたたみ(思考ログ・実行した操作)は ›(SVG)が回る見た目にそろえる。記号の文字は使わない */
.ai-fold > summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--c-muted); font-size: 14px; }
.ai-fold > summary::-webkit-details-marker { display: none; }
.ai-fold > summary .icon { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease); }
.ai-fold[open] > summary .icon { transform: rotate(90deg); }
.ai-step-list li { display: flex; align-items: flex-start; gap: 6px; }
.ai-step-mark { display: inline-flex; flex: none; margin-top: 2px; color: var(--c-success); }
.ai-step-list .is-ng .ai-step-mark { color: var(--c-danger); }
.ai-step-mark .icon { width: 16px; height: 16px; }
.ai-mark .icon { width: 16px; height: 16px; }
.ai-empty-mark .icon { width: 28px; height: 28px; }
.ai-confirm-icon .icon { width: 14px; height: 14px; }

/* デイリー(メンバー): 名前を押すとシートで全文。スマホ幅では表を 1 人 1 行にする(下の @media) */
.daily-toolbar [hidden] { display: none; }
.daily-filter .icon { width: 16px; height: 16px; }
.daily-filter.is-active { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-ink); }
.daily-filter-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.daily-member-open { padding: 0; border: none; background: transparent; font: inherit; color: var(--c-text); text-align: left; cursor: pointer; }
.daily-member-open:hover .person-name, .daily-member-open:focus-visible .person-name { text-decoration: underline; }
.daily-member-preview { display: none; }
.daily-sheet-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
.daily-sheet-dl dt { margin-top: 10px; font-size: 14px; }
.daily-sheet-dl dt:first-child { margin-top: 0; }

/* ログイン・プロジェクト選択・セットアップ */
.login-status, .login-notes, .login-foot { font-size: 14px; }
.btn-discord { min-height: 48px; font-size: 16px; font-weight: 600; }
.project-card, .setup-candidate { border-radius: var(--r-lg); }
.projects-user > span { min-width: 0; overflow-wrap: anywhere; }
.setup-steps .step-link:disabled { opacity: 1; }
.setup-steps .step-num .icon { width: 14px; height: 14px; }
.setup-done-mark .icon { width: 30px; height: 30px; }

@media (max-width: 768px) {
  /* 報告も議事録と同じく、一覧のページ(画面いっぱい)と詳細のページ(「‹ 一覧へ」で戻る)を切り替える。空の詳細を一覧の下に出さない */
  .reports-layout { grid-template-rows: minmax(0, 1fr); }
  .reports-layout .reports-side { max-height: none; border-bottom: 0; }
  .reports-layout.is-detail .reports-side, .reports-layout:not(.is-detail) .report-detail { display: none; }
  .minutes-search, .reports-side-head { padding: 12px; }
  .minutes-list, .report-list { padding: 0 8px 16px; gap: 4px; }
  .page-back { display: inline-flex; align-self: flex-start; gap: 4px; min-height: 44px; margin: -4px 0 8px -8px; padding: 0 8px; font-size: 16px; }
  .minutes-detail, .report-detail { padding: 12px 16px 24px; }
  .list-row { min-height: 64px; padding: 12px; }
  .list-row-title { font-size: 16px; }
  .list-row .tone-chip, .list-row .chip { font-size: 14px; min-height: 24px; }
  .minutes-doc-head, .report-doc-head { flex-wrap: wrap; }
  .minutes-doc-title, .report-doc-title { font-size: 18px; }
  .minutes-section-title, .report-section-title { font-size: 14px; }
  .report-event-body, .report-attachment-meta, .report-event-actor { font-size: 14px; }
  .report-withdraw { flex-wrap: wrap; }

  /* AI チャット: Enter の案内は出さない(Enter は改行)。入力欄と送信を 1 段に(文字数は送信の上) */
  .ai-enter-hint { display: none; }
  .ai-transcript { padding: 12px; }
  .ai-banners { padding: 8px 12px 0; }
  .ai-msg-user { max-width: 85%; }
  .ai-fold > summary { min-height: 44px; font-size: 14px; }
  .ai-think-text { font-size: 14px; }
  .ai-steps { font-size: 14px; }
  .ai-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 8px 12px; }
  .ai-input { height: 72px; min-height: 48px; max-height: 160px; }
  .ai-composer-foot { flex-direction: column; align-items: stretch; gap: 2px; }
  .ai-composer-foot .spacer { display: none; }
  .ai-count { text-align: center; font-size: 14px; }
  .ai-composer-foot .btn-primary { min-height: 48px; }

  /* デイリー(メンバー): 1 人 1 行(名前・日付・今日やることの先頭 2 行)。行のどこを押してもシートで全文 */
  .daily-toolbar { flex-wrap: nowrap; padding: 0; }
  .daily-toolbar .daily-date-input { flex: 1 1 auto; min-width: 0; width: auto; }
  .daily-toolbar .btn-group .btn { padding: 0 10px; }
  .daily-toolbar .daily-filter { margin-left: auto; width: 44px; padding: 0; flex: none; }
  .daily-filter-label { display: none; }
  .daily-table, .daily-table tbody { display: block; }
  .settings-table-wrap > table.daily-table { min-width: 0; }
  .daily-table thead { display: none; }
  .daily-table tr.daily-member-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; min-height: 64px; padding: 12px 4px; border-bottom: 1px solid var(--c-border); }
  .daily-table tr.daily-member-row > td { display: none; padding: 0; border: 0; }
  .daily-table tr.daily-member-row > td.daily-member-cell { display: block; grid-column: 1; grid-row: 1; min-width: 0; }
  .daily-table tr.daily-member-row > td.daily-member-date { display: block; grid-column: 2; grid-row: 1; font-size: 14px; color: var(--c-muted); }
  .daily-member-open { font-size: 16px; font-weight: 600; }
  .daily-member-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); }
  .daily-member-open:focus-visible { outline: none; }
  .daily-member-open:focus-visible::after { box-shadow: inset 0 0 0 2px var(--c-primary); }
  .daily-member-preview {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 4px;
    font-size: 14px; color: var(--c-muted); white-space: pre-wrap; overflow-wrap: anywhere;
  }
  .daily-member-preview .chip { margin-right: 4px; }
  .daily-missing-list { gap: 4px 12px; }

  /* ログイン・プロジェクト選択: 影をやめて枠線、カードは 1 列 */
  .login-card { box-shadow: none; border: 1px solid var(--c-border); gap: 16px; }
  .projects-panel { gap: 16px; }
  .projects-head .page-title { font-size: 20px; }
  .projects-user { width: 100%; }
  .projects-user .btn { margin-left: auto; }
  .project-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .project-card, .setup-candidate { padding: 14px 16px; }
  .setup-candidate-actions .btn { flex: 1 1 auto; }

  /* セットアップ: 「2/5 チャンネル」+ 進捗バー。「次へ」「戻る」は画面の下に固定(長い手順でも押しに戻らない) */
  /* 長い画面(セットアップ・プロジェクト選択)は上から並べる(縦の中央寄せだと上がはみ出して見えない) */
  .view-setup.view-center, .view-center:has(> .projects-panel) { justify-content: flex-start; }
  .setup-panel { padding: 16px 16px 0; gap: 14px; box-shadow: none; border: 1px solid var(--c-border); border-radius: var(--r-lg); }
  .setup-head .page-title { font-size: 18px; }
  .setup-body { min-height: 0; }
  .setup-actions {
    position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: var(--c-surface); border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .setup-actions .btn-primary { flex: 1 1 auto; min-height: 48px; }
}

/* ---- P62 段 3-A: 設定・役職・自動化・監視・Excel・通知 ---- */
/* 設定: PC はタブ(直す所のあるタブに印)。スマホは項目の一覧 → 項目のページ(.view-settings.is-index / .is-page) */
.settings-index, .settings-page-head { display: none; }
.settings-tab { display: inline-flex; align-items: center; gap: 6px; }
.settings-lock::before { content: none; }
.settings-switches { flex-direction: column; gap: 10px; }
.settings-feature { align-items: flex-start; }
.settings-feature > input { margin-top: 3px; flex: none; }
.settings-feature > span { display: flex; flex-direction: column; gap: 2px; }
.settings-feature-label { color: var(--c-text); }
.settings-form { display: flex; flex-direction: column; gap: 16px; }
.settings-optional .setting-row:last-child { border-bottom: none; }
.settings-optional .settings-vocab { display: flex; flex-direction: column; gap: 10px; }
.setup-card .settings-section-head .btn { flex: none; }
.setup-item-help { grid-column: 2 / 4; font-size: 14px; }
.setup-item-help > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--c-primary-ink); cursor: pointer; list-style: none; }
.setup-item-help > summary::-webkit-details-marker { display: none; }
.setup-item-help .icon { width: 18px; height: 18px; }
.setup-item-help p { margin: 4px 0 0; }
.setup-card .setup-more > summary { display: flex; align-items: center; gap: 4px; min-height: 32px; color: var(--c-primary-ink); cursor: pointer; list-style: none; }
.setup-card .setup-more > summary::-webkit-details-marker { display: none; }
.setup-more > summary .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.setup-more[open] > summary .icon { transform: rotate(90deg); }

/* 役職: 説明は「?」、役職は一覧の行 + 「メンバー」+「…」、承認待ちは行 + 承認 / 却下 */
.roles-head { align-items: center; }
.roles-head-text { flex-direction: row; align-items: center; gap: 4px; }
.help-btn { display: inline-grid; place-items: center; flex: none; color: var(--c-muted); }
.help-btn .icon { width: 20px; height: 20px; }
.help-text p { margin: 0 0 10px; }
.help-text p:last-child { margin-bottom: 0; }
.pending-panel { background: var(--c-surface); box-shadow: none; }
.pending-panel.is-empty { background: var(--c-surface); }
.pending-icon .icon, .pending-ok .icon { width: 18px; height: 18px; }
.pending-head .pending-title { margin: 0; }
.pending-lead { margin: 0; font-size: 14px; color: var(--c-muted); }
.pending-empty .pending-empty-title { flex: 1; min-width: 0; }
.rc-icon .icon { width: 18px; height: 18px; }
.rc-note { display: flex; align-items: flex-start; gap: 4px; }
.rc-note .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pending-list { gap: 0; }
.pending-list .role-change-row { padding: 12px 0; border: none; border-top: 1px solid var(--c-border); border-radius: 0; background: transparent; }
.position-list { display: flex; flex-direction: column; gap: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.position-list .position-card { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 16px; border: none; border-bottom: 1px solid var(--c-border); border-radius: 0; background: transparent; }
.position-list .position-card:last-child { border-bottom: none; }
.position-list .position-card.has-pending { box-shadow: none; }
.pos-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.position-list .pos-actions { flex: none; margin: 0; padding: 0; border: none; gap: 4px; }
.pos-actions .btn .icon { width: 16px; height: 16px; }
.pill-remove { position: relative; display: inline-grid; place-items: center; }
.pill-remove .icon { width: 14px; height: 14px; }
.roles-section .section-head .btn .icon { width: 16px; height: 16px; }

/* 自動化: 1 件 = 一覧の行(主な操作 1 + 「…」)。状態は文字のチップで(色の枠を使わない) */
.automation-group { gap: 0; }
.automation-group-head { margin: 0 0 4px; }
.automation-card { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 4px; border: none; border-bottom: 1px solid var(--c-border); border-radius: 0; background: transparent; }
.automation-card[data-state=blocked] { border-color: var(--c-border); }
.automation-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.automation-card .automation-actions { flex: none; flex-wrap: nowrap; gap: 4px; margin: 0; }
.automation-done > .automation-card { margin-top: 0; }
.automation-optional .setting-row:last-child { border-bottom: none; }
.automation-optional .automation-sections { display: flex; flex-direction: column; gap: 8px; }

/* 監視: 節は箱にしない(色の枠をやめる)。見出し + 区切り線の行 */
.monitor-grid { gap: 24px 32px; }
.monitor-section { gap: 0; }
.monitor-section-head { padding: 0 4px 8px; border-bottom: 1px solid var(--c-border); }
.monitor-section-title { font-size: 16px; }
.monitor-summary, .monitor-empty { padding: 8px 4px 0; }
.monitor-rows { gap: 0; }
.monitor-row { min-height: 48px; padding: 8px 4px; border: none; border-bottom: 1px solid var(--c-border); border-radius: 0; background: transparent; }

/* 通知: 日ごとの見出し + 区切り線の行。右は「…」だけ */
.notification-day { gap: 0; }
.notification-day-head { padding: 8px 4px 6px; margin: 0; font-size: 14px; border-bottom: 1px solid var(--c-border); }
.notification-row { border: none; border-bottom: 1px solid var(--c-border); border-radius: 0; background: transparent; }
.notification-row:hover { background: var(--c-hover); }
.notification-row.is-unread { background: var(--c-primary-soft); }
.notification-row.is-focused { border-color: var(--c-border); outline: 2px solid var(--c-primary); outline-offset: -2px; }
.notification-row > .menu-btn { flex: none; align-self: center; }
.notification-approval { border: 1px solid var(--c-border); background: var(--c-surface); }

/* Excel: 見た目だけ(注意の見出しのアイコン) */
.wb-block-title { display: flex; align-items: center; gap: 4px; }
.wb-block-title .icon { width: 16px; height: 16px; }

@media (max-width: 768px) {
  /* 設定: 一覧 ↔ 項目のページ。保存はページの足元に固定 */
  .view-settings .settings-tabs { display: none; }
  .view-settings.is-page .setup-card, .view-settings.is-page .settings-index { display: none; }
  .view-settings.is-index .settings-panel, .view-settings.is-index .settings-member-note { display: none; }
  .view-settings.is-index .settings-index { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
  .settings-index-row {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 16px; border: none; border-bottom: 1px solid var(--c-border);
    background: transparent; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .settings-index-row:last-child { border-bottom: none; }
  .settings-index-row:active { background: var(--c-hover); }
  .settings-index-label { flex: none; font-weight: 600; }
  .settings-index-value { flex: 1 1 auto; min-width: 0; text-align: right; color: var(--c-muted); font-size: 14px; overflow-wrap: anywhere; }
  .settings-index-row > .icon { flex: none; width: 20px; height: 20px; color: var(--c-faint); }
  .view-settings.is-page .settings-page-head { display: flex; align-items: center; gap: 4px; }
  .settings-back { min-height: 44px; padding: 0 8px 0 0; color: var(--c-primary-ink); font-size: 16px; }
  .settings-back .icon { width: 22px; height: 22px; }
  .settings-page-title { margin: 0; font-size: 18px; }
  .settings-wrap { padding: 12px 16px 24px; gap: 12px; }
  .settings-section { padding: 12px; }
  .settings-save-bar { position: sticky; bottom: 0; z-index: 10; margin: 0; padding: 12px 0; background: var(--c-bg); border-top: 1px solid var(--c-border); }
  .settings-section .settings-save-bar { background: var(--c-surface-2); }
  .settings-save-bar .btn { width: 100%; min-height: 48px; justify-content: center; font-size: 16px; }
  .settings-row-note:empty { display: none; }
  .settings-feature > input { margin-top: 13px; }
  .setup-item-help { grid-column: 2; }
  .setup-item-help > summary, .setup-card .setup-more > summary { min-height: 44px; }

  /* 役職 */
  .roles-wrap { padding: 12px 16px 24px; }
  .position-list .position-card { flex-wrap: wrap; padding: 12px; }
  .position-list .pos-main { flex-basis: 100%; }
  .pill-remove::after { content: ""; position: absolute; inset: -12px; }
  .pending-panel { padding: 12px; }
  .rc-actions .btn { flex: 1 1 0; }
  .pos-purpose, .pos-empty, .pos-members-head, .rc-meta, .rc-detail, .pending-lead { font-size: 14px; }

  /* 自動化: 題名は上部バーにあるので出さない */
  .view-automation .toolbar-title { display: none; }
  .automation-card { padding: 12px 0; }
  .automation-meta { font-size: 14px; }

  /* 監視: 題名は上部バーにあるので出さない(状態・最終取得・更新を 1 段に) */
  .view-monitoring .monitor-head .today-title { display: none; }
  .monitor-task-open { min-height: 44px; }
  .monitor-meta { font-size: 14px; }

  /* 通知: 題名は上部バーにあるので出さない(ツールバーは 1 段) */
  .view-notifications .toolbar-title { display: none; }
  .notification-wrap { padding: 0 16px 24px; }
  .notification-row { flex-wrap: nowrap; }
  .notification-main { flex: 1 1 auto; }
  .notification-row > .menu-btn { align-self: flex-start; margin: -8px -8px 0 0; }
  .notification-body { font-size: 14px; }
  .notification-time { font-size: 14px; }

  /* Excel */
  .wb-scroll { padding: 12px 16px 24px; }
  .wb-actions .btn { flex: 1 1 100%; justify-content: center; }
  .wb-desc, .wb-table, .wb-field-name { font-size: 14px; }
}

/* ---- P62 段 2-C: 今日・ボード・カレンダー・予定一覧・シフト(ツールバー 1 段・絞り込みのシート・条件のチップ・今日のブロック) ---- */
/* 「絞り込み」「表示の設定」のボタンと件数のバッジ。欄の置き場(閉じている間)は見せない */
.filter-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.filter-btn .icon { width: 18px; height: 18px; }
.filter-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--c-primary); color: var(--c-on-primary); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.filter-badge[hidden], .filter-stash, .active-chips[hidden] { display: none !important; }
.filter-sheet-body { display: flex; flex-direction: column; gap: 14px; }
.filter-sheet-body .input, .filter-sheet-body select { width: 100%; }
.filter-sheet-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.filter-sheet-check input { width: 20px; height: 20px; }
.icon-only { display: inline-grid; place-items: center; min-width: 36px; padding: 0; }
.icon-only .icon { width: 20px; height: 20px; }

/* 掛かっている条件のチップ(押すと外す) */
.active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 20px 10px; flex: none; }
.active-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 12px; border: 1px solid var(--c-primary); border-radius: 16px; background: var(--c-primary-soft); color: var(--c-primary-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.active-chip .icon { width: 16px; height: 16px; }
.active-chip:hover { background: var(--c-hover); }
.event-filter.active-chips { flex-direction: row; }

/* 予定の絞り込みのシートの中(枠なし・行は縦に) */
.event-filter-sheet { padding: 0; }
.event-filter-sheet .filter-panel { padding: 0; border: none; background: transparent; gap: 14px; max-width: none; }
.event-filter-sheet .filter-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.event-filter-sheet .filter-chip { display: inline-flex; align-items: center; gap: 4px; height: auto; min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 14px; }
.event-filter-sheet .filter-chip .icon { width: 14px; height: 14px; }
.event-filter-sheet .filter-range { display: flex; gap: 6px; align-items: center; }
.event-filter-sheet .filter-keyword { min-width: 0; width: 100%; }
.event-filter-sheet .cal-legend { padding-top: 4px; }
.event-sort { width: auto; }

/* ボード: 検索は伸びる。カードの印は SVG */
.board-search { flex: 1 1 200px; max-width: 320px; min-width: 0; }
.card-prereq { display: inline-flex; color: var(--c-danger); }
.card-prereq .icon, .card-due .icon { width: 14px; height: 14px; }
.card-due { display: inline-flex; align-items: center; gap: 3px; }
.cal-add-hint .icon { width: 14px; height: 14px; }

/* カレンダー: PC はセルに予定の行。スマホは点と件数(下の .cal-dots) */
.cal-dots, .cal-key { display: none; }
.cal-month { margin: 0 2px; white-space: nowrap; }

/* 予定の場所・対象のアイコン */
.event-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.event-meta-item .icon { width: 14px; height: 14px; flex: none; color: var(--c-muted); }

/* シフト: 1 段のツールバー */
.shift-toolbar .toolbar-title { margin: 0 2px; }
.shift-note .icon, .shift-cancel .icon { width: 14px; height: 14px; }
.shift-cancel { display: inline-grid; place-items: center; }

/* 今日: 自分のその日のブロック(PC は 2 列)→ 勤怠・チェックイン・デイリーのカード */
.today-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.today-blocks:empty { display: none; }
.today-block { display: flex; flex-direction: column; gap: 4px; padding: 12px 6px 6px; }
.today-block-head { display: flex; align-items: center; gap: 8px; padding: 0 8px 4px; }
.today-block-title { margin: 0; font-size: 15px; color: var(--c-text); }
.today-block-empty { margin: 0; padding: 6px 8px 8px; font-size: 14px; }
.today-block-error { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; padding: 4px 8px; color: var(--c-danger); font-size: 14px; }
.today-block-error .icon { width: 16px; height: 16px; flex: none; }
.today-rows { display: flex; flex-direction: column; }
.today-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px; border: none; border-top: 1px solid var(--c-border);
  border-radius: 0; background: transparent; color: var(--c-text); font: inherit; text-align: left;
}
button.today-row { cursor: pointer; }
button.today-row:hover { background: var(--c-hover); }
button.today-row:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.today-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.today-row-main { font-weight: 600; overflow-wrap: anywhere; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.today-row-sub { font-size: 14px; color: var(--c-muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.today-row-sub .icon { width: 14px; height: 14px; color: var(--c-warning); }
.today-row-warn { color: var(--c-danger); font-weight: 700; }
.today-row-time { font-variant-numeric: tabular-nums; color: var(--c-primary-ink); }
.today-row-chevron { display: inline-flex; color: var(--c-faint); flex: none; }
.today-row-chevron .icon { width: 18px; height: 18px; }
.today-row-split .btn { flex: none; }
.today-more { align-self: flex-start; margin: 4px 4px 0; }

/* 勤怠は 1 行(状態・実働 + 主ボタン)。記録は畳む */
.timeclock-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.timeclock-line-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.timeclock-line .btn { flex: none; }
.timeclock-more > summary { min-height: 36px; display: flex; align-items: center; color: var(--c-muted); font-size: 14px; cursor: pointer; }
.timeclock-more[open] > summary { margin-bottom: 6px; }

/* チェックイン: AI の文は 3 行で畳む */
.checkin-message.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.checkin-more { align-self: flex-start; margin-top: -4px; }

@media (max-width: 768px) {
  /* ツールバーは 1 段(折り返さない)。予定の期間の文は出さない(日付の見出しがある) */
  .view-board .toolbar, .view-calendar .toolbar, .view-events .toolbar, .view-shifts .toolbar { flex-wrap: nowrap; padding: 8px 12px; gap: 6px; }
  .view-events .toolbar .toolbar-title { display: none; }
  .view-events .event-sort { flex: 1 1 auto; min-width: 0; }
  .icon-only { min-width: 44px; }
  .view-calendar .filter-btn-label, .view-shifts .filter-btn-label { display: none; }
  .active-chips { padding: 0 12px 8px; }
  .active-chip { min-height: 40px; font-size: 14px; }
  .event-filter-sheet .filter-chip { min-height: 44px; }

  /* ボード: 状態のタブで 1 列ずつ。列の箱をやめてカードを画面いっぱいに */
  .view-board .board-search { flex: 1 1 auto; max-width: none; }
  .kanban-col { background: transparent; border: none; }
  .kanban-col-head { position: static; background: transparent; padding: 0 2px 8px; }
  .kanban-col-head:not(:has(.badge-need, .small)) { display: none; }
  .kanban-col-head > .st-dot, .kanban-col-title, .kanban-col-head > .count { display: none; }
  .kanban-col-body { padding: 0; }

  /* カレンダー: 1 段(‹ 年月 › 今月 絞り込み)。セルは点と件数、日付を押すと下に一覧(最初は今日) */
  .view-calendar .toolbar .toolbar-title { font-size: 16px; }
  .view-calendar .toolbar .btn-ghost { padding: 0 8px; }
  /* 2026-10-23: 点と件数だけでは何の日か分かりにくかった(ユーザー)→ 0.21.0 と同じく、セルに予定の色と時刻のチップを出す。
     シフトだけはチップが無いので緑の点(下に「シフトがある日」の説明)。日付を押すと下に一覧 */
  .cal-grid { grid-auto-rows: minmax(64px, auto); }
  .cal-dots { display: flex; justify-content: center; margin-top: auto; }
  .cal-dot, .cal-count { display: none; }
  .cal-dot.is-shift, .cal-key .cal-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); }
  .cal-key { display: flex; align-items: center; gap: 6px; margin: 0 8px 8px; }
  .cal-day-items .cal-item { min-height: 48px; font-size: 15px; padding: 4px 12px; }
  .cal-day-panel-head .section-title { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

  /* シフト: ‹ 期間 › ・シフト / 空き時間・表示の設定 を 1 段に(期間は狭ければ 2 行に折り返す) */
  .view-shifts .toolbar > *, .view-shifts .toolbar .toolbar-title, .view-shifts .toolbar .shift-mode, .view-shifts .toolbar .shift-range { order: 0; margin-left: 0; }
  .view-shifts .toolbar .toolbar-title { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.25; white-space: normal; text-align: center; }
  .view-shifts .toolbar .shift-this-week { display: none; }
  .view-shifts .toolbar .shift-mode { flex: none; }
  .view-shifts .toolbar .shift-mode .seg-btn { padding: 0 8px; }

  /* 今日: 1 列 */
  .today-scroll { padding: 12px 12px 24px; gap: 12px; }
  .today-blocks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .today-row-main { font-size: 16px; }
  .today-row-sub { font-size: 14px; }
  .timeclock-line .btn { min-width: 120px; }
}

/* ---- P62 段 3-C: タイムライン・依存関係・運用 ----
   操作の段は 1 段(凡例・絞り込みはシート)。タイムラインと依存関係はパソコン向けの表示で、スマホは「パソコン向けの表示です」と 1 行出し、
   横スクロール(タイムライン)・指 2 本と右下のボタン(依存関係)で見る。運用はスマホではタブを横スクロールにして、はみ出しをなくすだけ */
.desktop-note { display: none; }

/* タイムライン: 左の題名は 2 行まで折り返す(行は 44px) */
.tl-toolbar .check { white-space: nowrap; }
.tl-row { height: 44px; }
.tl-bar { top: 11px; }
.tl-diamond { top: 15px; }
.tl-mark-label, .tl-outside { top: 13px; }
.tl-title {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; line-height: 1.3; font-size: 14px;
}
.tl-legend-body { display: flex; flex-direction: column; gap: 12px; }
.tl-legend-body > p { margin: 0; }
.tl-legend { flex-direction: column; flex-wrap: nowrap; gap: 4px; font-size: 14px; color: var(--c-text); }
.tl-legend .legend-item { min-height: 36px; }
.tl-legend .legend-item-btn { margin: 0; padding: 4px 8px; justify-content: flex-start; text-align: left; }
.tl-legend .legend-swatch { width: 16px; height: 16px; }
.tl-legend .legend-edit { align-self: flex-start; margin: 4px 0 0; }

/* 依存関係: 1 段の操作(検索・表示の設定)・シートの中身・右下の拡大縮小・選んだタスクの行 */
.tg-toolbar { flex-wrap: nowrap; }
.tg-settings-btn { flex: none; }
.tg-settings-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--c-primary); color: var(--c-on-primary); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tg-settings-count[hidden] { display: none; }
.tg-settings { display: flex; flex-direction: column; gap: 8px; }
.tg-settings .input-sm { width: 100%; }
.tg-settings-sub { margin: 16px 0 6px; font-size: 14px; color: var(--c-muted); }
.modal-sheet .tg-legend { --tg-critical: var(--c-danger); --tg-edge: var(--c-faint); flex-direction: column; flex-wrap: nowrap; gap: 6px; font-size: 14px; color: var(--c-text); white-space: normal; overflow: visible; }
.tg-lg-note { margin: 4px 0 0; font-size: 14px; color: var(--c-muted); }
.tg-warn, .tg-deadline { display: inline-flex; align-items: center; gap: 6px; }
.tg-zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-1); cursor: default;
}
.tg-zoom .tg-zoom-btn { width: 36px; height: 36px; padding: 0; font-size: 18px; }
.tg-selected {
  display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; padding: 4px 4px 4px 12px; border-radius: var(--r-md);
  background: var(--c-primary-soft); border: 1px solid var(--c-border);
}
.tg-selected-text {
  flex: 1; min-width: 0; font-weight: 600; color: var(--c-text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.tg-selected-seq { margin-right: 6px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tg-selected-sub { display: block; font-size: 14px; font-weight: 400; color: var(--c-muted); }
.tg-chip-x { display: inline-grid; place-items: center; }
.tg-chip-x .icon { width: 14px; height: 14px; }

/* 運用(PC 向け) */
.ops-tab { white-space: nowrap; }

@media (max-width: 768px) {
  .desktop-note { display: block; flex: none; margin: 0 12px 6px; font-size: 14px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* タイムライン: 「今日へ・完了を表示・凡例」の 1 段。見出しは上部バーにあるので省く */
  .tl-toolbar { flex-wrap: nowrap; }
  .tl-toolbar .toolbar-title { display: none; }
  .view-timeline { --tl-label-w: 150px; }
  .tl-row { height: 48px; }
  .tl-bar { top: 11px; height: 26px; }
  .tl-diamond { top: 17px; }
  .tl-mark-label, .tl-outside { top: 15px; }
  .tl-label .st-dot { display: none; }
  .tl-legend .legend-item, .tl-legend .legend-item-btn { min-height: 44px; }

  /* 依存関係: 検索 + 表示の設定の 1 段。拡大縮小は 44px、倍率の文字は省く */
  .tg-zoom .tg-zoom-btn { width: 44px; height: 44px; }
  .tg-zoom-label { display: none; }
  .tg-chip-x { width: 44px; height: 44px; }
  .tg-context { padding-left: 12px; padding-right: 12px; }

  /* 運用: タブは横スクロールの 1 行。中身は 1 列にして、ページを横にはみ出さない */
  .ops-head { padding: 0 12px 8px; gap: 8px; }
  .ops-tabs {
    order: -1; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px;
    border-bottom: 1px solid var(--c-border); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .ops-tabs::-webkit-scrollbar { display: none; }
  .ops-tab { flex: none; height: auto; min-height: 44px; }
  .ops-head > .spacer { display: none; }
  .ops-elevation, .ops-head-tools { flex-wrap: wrap; }
  .ops-body > .ops-overview, .ops-body > .ops-logs, .ops-body > .ops-actions, .ops-body > .ops-audit { padding: 12px 12px 24px; }
  .ops-files-body, .ops-db-body { padding: 12px; }
  .ops-grid, .ops-action-grid, .ops-files-split, .ops-db-body, .ops-row-field, .ops-db-fullrow { grid-template-columns: minmax(0, 1fr); }
  .ops-kv-row { grid-template-columns: 96px minmax(0, 1fr); }
  .ops-path-form .ops-path-input { width: 100%; min-width: 0; }
}
/* P62 段 3-C 追補: 依存関係の「この画面で分かること」(本文 16px)・図のすぐ上の凡例(14px)・一覧(スマホの既定)・ノードの文字 14px */
.tg-intro {
  flex: none; display: flex; align-items: flex-start; gap: 8px; margin: 0 20px 10px; padding: 10px 6px 10px 14px;
  border-radius: var(--r-md); background: var(--c-primary-soft); color: var(--c-text); font-size: 16px; line-height: 1.6;
}
.tg-intro[hidden] { display: none; }
.tg-intro-text { flex: 1; min-width: 0; }
.tg-intro-text p { margin: 0; }
.tg-intro-close { flex: none; }
.tg-mode { flex: none; flex-wrap: nowrap; }
.tg-mode .seg-btn { min-width: 52px; }
.tg-mode .seg-btn[aria-pressed="true"] { background: var(--c-primary-soft); color: var(--c-primary-ink); border-color: var(--c-primary); font-weight: 700; }
.tg-key { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 0 2px 8px; font-size: 14px; color: var(--c-text); }
.tg-key-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tg-key .st-dot { width: 12px; height: 12px; }
.tg-key .tg-lg-line { --tg-critical: var(--c-danger); }
.tg-key-arrow { position: relative; display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--c-faint); }
.tg-key-arrow::after { content: ""; position: absolute; right: -1px; top: -6px; border: 5px solid transparent; border-left: 7px solid var(--c-faint); border-right: 0; }
.tg-node .tg-node-title { font-size: 14px; }
.tg-node text { font-size: 12px; }
.view-task-graph.is-list .desktop-note { display: none; }
.view-task-graph.is-list .tg-body { overflow-y: auto; }

.tg-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tg-list-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.tg-list-row.is-critical { border-color: var(--c-danger); }
.tg-list-row.is-dim { opacity: 0.4; }
.tg-list-row.is-pulse { animation: tg-row-pulse 1.2s ease-out; }
@keyframes tg-row-pulse { 0% { box-shadow: 0 0 0 4px var(--c-primary); } 100% { box-shadow: 0 0 0 0 transparent; } }
.tg-list-head { display: flex; align-items: flex-start; gap: 8px; }
.tg-list-open {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 0; border: none; background: transparent;
  color: var(--c-text); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.tg-list-open:hover .tg-list-title { text-decoration: underline; }
.tg-list-seq { flex: none; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tg-list-head .chip { flex: none; margin-top: 10px; }
.tg-list-rel, .tg-list-state { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 14px; color: var(--c-text); }
.tg-list-rel-label { color: var(--c-muted); font-weight: 600; }
.tg-list-link {
  min-height: 32px; padding: 0 4px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--c-primary-ink);
  font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere;
}
.tg-list-link:hover { background: var(--c-hover); }
.tg-list-state { font-weight: 600; }
.tg-list-state.is-ready { color: var(--c-success); }
.tg-list-state.is-wait { color: var(--c-warning); }
.tg-list-state.is-critical { color: var(--c-danger); font-weight: 400; }

@media (max-width: 768px) {
  .tg-intro { margin: 0 12px 8px; }
  .tg-intro-close, .tg-help-btn { width: 44px; height: 44px; }
  .tg-settings-label { display: none; }
  .tg-settings-btn { width: 44px; padding: 0; justify-content: center; }
  .tg-search .tg-search-count { display: none; }
  .tg-key { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 8px 8px; overscroll-behavior-x: contain; }
  .tg-key::-webkit-scrollbar { display: none; }
  .tg-list-link { min-height: 44px; }
}
@media (max-width: 768px) { .tg-list-sep { display: none; } .tg-list-rel { column-gap: 12px; } }
/* ---- P62 段 2-B: タスクの作成・詳細と前提タスクのコンボボックス ---- */
.setting-rows { display: flex; flex-direction: column; min-width: 0; }
.setting-rows-title { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--c-muted); }
.setting-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 自動投稿(既存の details)を設定の行と同じ見た目に */
.setting-rows .autopost { border: 0; border-bottom: 1px solid var(--c-border); border-radius: 0; background: transparent; }
.setting-rows .autopost > summary { display: flex; align-items: center; min-height: 56px; padding: 8px 4px; font-size: inherit; color: var(--c-text); }
.setting-rows .autopost[open] > summary { border-bottom: 0; }
.task-autopost:has(> details:not([open])) > .form-actions { display: none; }
/* 詳細の足元: 「…」(削除)と「変更を保存」。管理の欄を見ている間は画面の下に残る */
.task-manage-footer { position: sticky; bottom: 0; z-index: 1; margin-top: 8px; padding: 8px 0; background: var(--c-surface); border-top: 1px solid var(--c-border); }

.task-picker { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.picker-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.picker-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 44px; padding-left: 12px; border-radius: var(--r-lg); background: var(--c-primary-soft); color: var(--c-primary-ink); }
.picker-chip-text { min-width: 0; padding: 6px 0; overflow-wrap: anywhere; }
.picker-chip-remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-lg); background: transparent; color: inherit; cursor: pointer; }
.picker-chip-remove:hover { background: var(--c-hover); }
.picker-input { font-size: 16px; }
.picker-list { list-style: none; margin: 0; padding: 4px; max-height: 280px; overflow: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.picker-option { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; }
.picker-option:hover, .picker-option[aria-selected="true"] { background: var(--c-primary-soft); }
.picker-option-title { color: var(--c-text); overflow-wrap: anywhere; }
.picker-option-sub { font-size: 14px; color: var(--c-muted); }
.picker-option.is-done .picker-option-title { color: var(--c-muted); }
.picker-empty { padding: 10px; color: var(--c-muted); }

@media (max-width: 768px) {
  .setting-pair { grid-template-columns: minmax(0, 1fr); }
  /* 一覧は幅いっぱい・キーボードの上に収まる高さ */
  .picker-list { max-height: 40dvh; }
  /* 詳細の順: 状態の変更 → 進み具合 → チェック項目 → 内容 → 管理 → 催促 */
  .task-dialog-grid { display: flex; flex-direction: column; gap: 16px; }
  .task-dialog-main, .task-dialog-side { display: contents; }
  .task-dialog-grid .task-status { order: 1; }
  .task-dialog-grid .task-progress { order: 2; }
  .task-dialog-grid .task-checklist { order: 3; }
  .task-dialog-grid .task-kv { order: 4; }
  .task-dialog-grid .task-manage { order: 5; }
  .task-dialog-grid .task-remind { order: 6; }
}
.prereq-list li { display: flex; align-items: flex-start; gap: 4px; }
.prereq-list .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }

/* ---- P62 段 2-B: 予定の作成・編集(必須は上・任意は「設定」の行)と予定の詳細(出欠をいちばん上・足元は「…」+「閉じる」) ---- */
.event-settings { display: flex; flex-direction: column; }
.event-settings-head { margin: 8px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.event-settings .setting-row-body > .form-section { padding-top: 0; border-top: none; }
.event-settings .setting-row-body textarea { width: 100%; }
.event-settings > .autopost { border: none; border-bottom: 1px solid var(--c-border); border-radius: 0; background: transparent; }
.event-settings > .autopost > summary { display: flex; align-items: center; min-height: 56px; padding: 8px 4px; font-size: inherit; color: var(--c-text); }
.event-settings > .autopost[open] > summary { border-bottom: none; }
.event-settings > .autopost > .autopost-body { padding: 4px 4px 16px; }
.event-announce-slot:not(:empty) { margin-top: 12px; }
.event-dialog .my-att h3 { font-size: var(--fs-md); color: var(--c-text); }
.my-att-value { font-weight: 700; }
.event-dialog .my-att .seg-btn { height: 44px; padding: 0 16px; font-size: var(--fs-md); }
.confirmed-badge, .confirmed-mark { display: inline-flex; align-items: center; gap: 4px; }
.chip-icon { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 768px) {
  .event-dialog .my-att .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .event-dialog .my-att .seg-btn { justify-content: center; padding: 0 4px; }
  .event-dialog .my-att .att-row > .btn { min-height: 44px; }
}

/* ---- P63 段 4: 役職の画面(一覧 ↔ 役職のページ・人 / 権限のタブ・権限の行・通知の宛先・既定に戻す)・段 4-B: セットアップの役職のひな形 ---- */
.view-roles { display: flex; flex-direction: column; overflow: hidden; }
.view-roles [hidden] { display: none !important; }
.roles-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(360px, 480px) minmax(0, 1fr); }
.roles-list-pane { min-width: 0; min-height: 0; overflow: auto; border-right: 1px solid var(--c-border); }
.roles-list-pane .roles-wrap { max-width: none; }
/* 一覧は細い列なので、承認待ちの承認・却下は本文の下に並べる */
.roles-list-pane .role-change-row { grid-template-columns: 36px minmax(0, 1fr); }
.roles-list-pane .rc-actions { grid-column: 1 / -1; min-width: 0; flex-direction: row; flex-wrap: wrap; }
.roles-list-pane .rc-actions .btn { flex: 1 1 140px; }
.roles-detail-pane { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 24px 0; }
/* 役職の行: 行全体が「開く」(56px 以上)+ 右に「…」か › */
.position-row { --pos-color: var(--c-faint); display: flex; align-items: center; gap: 4px; padding-right: 4px; border-bottom: 1px solid var(--c-border); }
.position-list .position-row:last-child { border-bottom: none; }
.position-row.is-selected { background: var(--c-primary-soft); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 56px; padding: 10px 8px 10px 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.row-main:hover { background: var(--c-hover); }
.position-row.is-selected .row-main:hover { background: transparent; }
.row-main:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.position-row-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.position-row-name { font-weight: 600; color: var(--c-text); overflow-wrap: anywhere; }
.position-row-sub { font-size: 14px; color: var(--c-muted); }
.position-row-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.position-row-chips:empty { display: none; }
.position-row-chips .chip, .position-row-chips .tone-chip { height: auto; min-height: 22px; font-size: 14px; }
.row-chevron { flex: none; display: inline-grid; place-items: center; width: 44px; color: var(--c-faint); }
.row-chevron .icon { width: 20px; height: 20px; }
/* 通知の宛先: 4 行(押すとシートで役職を 1 つ選ぶ) */
.notify-rows { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.notify-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 4px 8px 16px; border: 0; border-bottom: 1px solid var(--c-border); background: transparent; color: inherit; font: inherit; text-align: left; }
.notify-row:last-child { border-bottom: 0; }
div.notify-row { padding-right: 16px; }
button.notify-row { cursor: pointer; }
button.notify-row:hover { background: var(--c-hover); }
.notify-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notify-row-label { font-weight: 600; color: var(--c-text); }
.notify-row-value { color: var(--c-text); overflow-wrap: anywhere; }
.notify-row-desc { font-size: 14px; color: var(--c-muted); }
.choice-list { display: flex; flex-direction: column; }
.choice-lead { margin: 0 0 8px; font-size: 14px; color: var(--c-muted); }
.choice-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--c-border); background: transparent; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.choice-row:hover { background: var(--c-hover); }
.choice-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.choice-row-label { overflow-wrap: anywhere; }
.choice-row-sub { font-size: 14px; color: var(--c-muted); }
.choice-row-mark { display: inline-flex; visibility: hidden; color: var(--c-primary-ink); }
.choice-row[aria-checked="true"] { font-weight: 600; }
.choice-row[aria-checked="true"] .choice-row-mark { visibility: visible; }
/* 役職のページ */
.role-page-head { --pos-color: var(--c-faint); display: flex; flex-direction: column; gap: 8px; }
.role-page-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-xl); overflow-wrap: anywhere; }
.role-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.role-page-lead { margin: 0; color: var(--c-muted); }
.role-tabs { flex-wrap: nowrap; }
.role-panel { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
.role-people-head { display: flex; align-items: center; gap: 8px; }
.role-people-count { font-weight: 600; }
.role-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--c-border); }
.role-member-row { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--c-border); }
.role-member-row .person { flex: 1; min-width: 0; }
.role-member-row.is-away .person-name { color: var(--c-muted); }
/* 権限: 分類ごとの設定の行(今の値「4 個中 2 個」)→ 1 行 = 1 つの権限(名前 16px・説明 14px・スイッチ)。行全体が当たり判定(56px 以上) */
.perm-editor { display: flex; flex-direction: column; gap: 12px; }
.perm-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.perm-count { font-size: var(--fs-md); font-weight: 600; }
.perm-admin-note { margin: 0; font-size: 14px; color: var(--c-muted); }
.perm-groups { display: flex; flex-direction: column; border-top: 1px solid var(--c-border); }
.perm-group .setting-row-label { font-size: var(--fs-md); }
.perm-group .setting-row-body { display: flex; flex-direction: column; padding: 0 0 8px; }
.perm-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 4px 8px 12px; border-radius: var(--r-sm); cursor: pointer; }
.perm-row:hover { background: var(--c-hover); }
.perm-row.is-changed { background: var(--c-primary-soft); }
.perm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.perm-label { font-size: var(--fs-md); color: var(--c-text); overflow-wrap: anywhere; }
.perm-desc { font-size: 14px; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.perm-row .switch-input { width: 44px; height: 26px; border-radius: 13px; }
.perm-row .switch-input::before { width: 20px; height: 20px; }
.perm-row .switch-input:checked::before { transform: translateX(18px); }
.perm-value { flex: none; min-width: 3em; text-align: right; font-weight: 600; color: var(--c-muted); }
.perm-value.is-on { color: var(--c-success); }
.perm-help { align-self: flex-start; margin: 4px 0 0 4px; }
.perm-help .icon { width: 18px; height: 18px; }
.perm-help-list { margin: 0; }
.perm-help-list dt { margin-top: 12px; font-weight: 600; }
.perm-help-list dt:first-child { margin-top: 0; }
.perm-help-list dd { margin: 4px 0 0; color: var(--c-muted); }
.perm-fixed { display: flex; flex-direction: column; }
.perm-fixed .setting-row-label { font-weight: 500; color: var(--c-muted); }
.perm-fixed-list { margin: 0; padding-left: 20px; color: var(--c-muted); }
.perm-save-bar { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; margin: 0 -24px; padding: 12px 24px max(12px, env(safe-area-inset-bottom)); background: var(--c-surface); border-top: 1px solid var(--c-border); }
/* ひな形の 2 枚のカード(既定に戻す・セットアップ) */
.tpl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tpl-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 44px; padding: 14px 16px; border: 1px solid var(--c-control); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.tpl-card:hover { background: var(--c-hover); }
.tpl-card[aria-checked="true"] { padding: 13px 15px; border: 2px solid var(--c-primary); background: var(--c-primary-soft); }
.tpl-card-mark { position: absolute; top: 10px; right: 10px; display: none; color: var(--c-primary-ink); }
.tpl-card[aria-checked="true"] .tpl-card-mark { display: inline-flex; }
.tpl-card-mark .icon { width: 20px; height: 20px; }
.tpl-card-title { padding-right: 24px; font-size: var(--fs-md); font-weight: 600; }
.tpl-card-desc { font-size: 14px; color: var(--c-muted); }
.tpl-card-roles { font-size: 14px; color: var(--c-text); }
.reset-step { display: flex; flex-direction: column; gap: 12px; }
.reset-step > p { margin: 0; }
.reset-delete { max-width: none; min-height: 56px; border-bottom: 0; }
.reset-preview { padding: 12px 16px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); white-space: pre-line; overflow-wrap: anywhere; }
.reset-preview:empty { display: none; }
.setup-template { display: flex; flex-direction: column; gap: 8px; }
.picker-item .picker-add { display: inline-flex; align-items: center; gap: 2px; }
.picker-item .picker-add .icon { width: 16px; height: 16px; }
@media (max-width: 768px) {
  .roles-layout { grid-template-columns: minmax(0, 1fr); }
  .roles-list-pane { border-right: 0; }
  .roles-layout.is-detail .roles-list-pane, .roles-layout:not(.is-detail) .roles-detail-pane { display: none; }
  .roles-detail-pane { padding: 12px 16px 0; }
  .role-tabs .settings-tab { flex: 1; justify-content: center; }
  /* 役職のページでは作成ボタン(一覧の側)が隠れるので、足元の余白を戻す */
  .content.has-fab:has(.roles-layout.is-detail) { padding-bottom: 0; }
  .perm-save-bar { margin: 0 -16px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .perm-save-bar .btn { min-height: 48px; }
  .perm-save-bar .btn-primary { flex: 1; }
  .tpl-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---- P64 段 5: 「自動化」の画面の「AI の自動化」(行は P61 の automation-card と同じ形。押せる所はパソコンでも 44px)・記録のシート ---- */
.ai-automation-head { align-items: center; gap: 8px; }
.ai-automation-heading { margin: 0; font-size: inherit; }
.ai-automation-head .btn { min-height: 44px; }
.ai-automation-intro, .ai-automation-empty { margin: 8px 0 4px; font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.ai-automation-note { margin: 8px 0 4px; }
.ai-automation-card { min-height: 56px; }
.ai-automation-card .automation-actions .btn { min-height: 44px; }
.ai-automation-card .menu-btn { width: 44px; height: 44px; }
.ai-writes-chip .icon { width: 14px; height: 14px; }
/* チップが 2 つ並ぶ行でも題名を細く折らない(狭いときは題名だけ次の行へ) */
.ai-automation-card .automation-head { flex-wrap: wrap; }
.ai-automation-card .automation-title { flex: 1 1 12em; }
.ai-automation-instruction { margin: 0; font-size: 14px; color: var(--c-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ai-automation-writes { margin: 0; font-size: 14px; color: var(--c-text); overflow-wrap: anywhere; }
.ai-runs { display: flex; flex-direction: column; gap: 12px; }
.ai-runs-instruction { margin: 0; font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.ai-run-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ai-run { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.ai-run:last-child { border-bottom: none; }
.ai-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-run-at { font-weight: 600; }
.ai-run-message { margin: 0; font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.ai-run-created { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.ai-run-created-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ai-run-created .btn { flex: none; min-height: 44px; }
.ai-run-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ai-run-steps li { display: flex; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; }
.ai-run-step-mark { flex: none; display: inline-flex; margin-top: 2px; }
.ai-run-step-mark .icon { width: 16px; height: 16px; }
.ai-run-steps .is-ok .ai-run-step-mark { color: var(--c-success); }
.ai-run-steps .is-ng { color: var(--c-danger); }

/* ---- P65 段 4: マイルストーンの一覧と詳細(行は 56px 以上・押せる所は 44px・判定のチップは色 + 文字・図は burnup-*) ---- */
.view-milestones { overflow: auto; }
.ms-list, .ms-detail { padding: 0 20px 24px; max-width: 980px; }
.ms-cards { display: flex; flex-direction: column; gap: 12px; }
.ms-card { position: relative; display: flex; align-items: flex-start; gap: 4px; min-height: 56px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); }
.ms-card.is-closed { background: transparent; }
.ms-card-main { flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: none; background: transparent; text-align: left; cursor: pointer; border-radius: var(--r-md); font-size: 16px; }
.ms-card-main:hover { background: var(--c-hover); }
.ms-card > .menu-btn { flex: none; width: 44px; height: 44px; margin: 6px 6px 0 0; }
.ms-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ms-name { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.ms-verdict { flex: none; font-weight: 600; }
.ms-verdict.tone-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.ms-verdict.tone-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.ms-verdict.tone-success { background: color-mix(in srgb, var(--c-success) 14%, var(--c-surface)); color: var(--c-success); }
.ms-verdict.tone-muted { background: var(--c-surface-2); color: var(--c-muted); }
.ms-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ms-progress { flex: 1; min-width: 80px; height: 10px; appearance: none; border: none; border-radius: var(--r-full); background: var(--c-surface-2); overflow: hidden; }
.ms-progress::-webkit-progress-bar { background: var(--c-surface-2); border-radius: var(--r-full); }
.ms-progress::-webkit-progress-value { background: var(--c-primary); border-radius: var(--r-full); }
.ms-bar-lg .ms-progress { height: 14px; }
.ms-count { flex: none; font-size: 16px; font-weight: 600; }
.ms-line { margin: 0; font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.ms-verdict-text { margin: 0; font-size: 16px; color: var(--c-text); overflow-wrap: anywhere; }
.ms-basis { color: var(--c-muted); font-size: 14px; }
.ms-closed { margin-top: 20px; }
.ms-closed-head { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--c-muted); }
.ms-closed-head::-webkit-details-marker { display: none; }
.ms-closed-head .icon, .ms-gen-chevron .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.ms-closed[open] > .ms-closed-head .icon, .ms-gen[open] .ms-gen-chevron .icon { transform: rotate(90deg); }
.ms-none-open { margin: 8px 0; font-size: 16px; }
.ms-back { min-height: 44px; margin: 8px 0 4px -8px; }
.ms-back .icon { width: 20px; height: 20px; }
.ms-doc { display: flex; flex-direction: column; gap: 14px; }
.ms-doc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ms-doc-head .menu-btn { width: 44px; height: 44px; }
.ms-doc-name { font-size: 22px; overflow-wrap: anywhere; }
.ms-doc-desc { font-size: 16px; color: var(--c-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-summary { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); }
.ms-section { display: flex; flex-direction: column; gap: 8px; }
.ms-section-head { display: flex; align-items: center; gap: 8px; }
.ms-section-head .btn { min-height: 44px; }
.ms-section-title { font-size: 16px; }
.ms-gens { display: flex; flex-direction: column; gap: 8px; }
.ms-gen-row { position: relative; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); }
.ms-gen-row > .menu-btn { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; }
.ms-gen-head { display: flex; align-items: flex-start; gap: 8px; min-height: 56px; padding: 10px 56px 10px 12px; cursor: pointer; list-style: none; border-radius: var(--r-md); }
.ms-gen-head:hover { background: var(--c-hover); }
.ms-gen-head::-webkit-details-marker { display: none; }
.ms-gen-chevron { flex: none; display: inline-flex; margin-top: 3px; color: var(--c-muted); }
.ms-gen-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-gen-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ms-gen-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ms-gen-range { font-size: 14px; color: var(--c-muted); }
.ms-gen-body { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px 38px; }
.ms-gen-verdict { font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.ms-gen-empty { font-size: 14px; }
.ms-assign { align-self: flex-start; min-height: 44px; }
.ms-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ms-tasks > li { display: flex; align-items: center; border-top: 1px solid var(--c-border); min-width: 0; }
.ms-task { flex: 1 1 auto; min-width: 0; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px; border: none; background: transparent; text-align: left; cursor: pointer; }
.ms-task:hover { background: var(--c-hover); }
.ms-task .status-chip { flex: none; }
.ms-task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-task-title { font-size: 16px; overflow-wrap: anywhere; }
.ms-task.is-done .ms-task-title { color: var(--c-muted); }
.ms-task-sub { font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
/* バーンアップの図: 全体(細い実線)・完了(太線)・理想(点線)・予測(破線)・締切(赤の縦線)。文字は 12px 以上 */
.burnup { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); }
.burnup-box { min-width: 0; }
.burnup-svg { display: block; width: 100%; height: auto; overflow: visible; }
.burnup-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--c-muted); }
.burnup-legend li { display: inline-flex; align-items: center; gap: 6px; }
.burnup-swatch { flex: none; overflow: visible; }
.burnup-scope { stroke: var(--c-control); stroke-width: 1.5; fill: none; }
.burnup-done { stroke: var(--c-primary); stroke-width: 3; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.burnup-ideal { stroke: var(--c-muted); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }
.burnup-forecast { stroke: var(--c-warning); stroke-width: 2; stroke-dasharray: 6 4; }
.burnup-due { stroke: var(--c-danger); stroke-width: 1.5; }
.burnup-today { stroke: var(--c-border); stroke-width: 1; }
.burnup-axis-line { stroke: var(--c-control); stroke-width: 1; }
.burnup-grid { stroke: var(--c-border); stroke-width: 1; stroke-dasharray: 2 3; }
.burnup-label { fill: var(--c-muted); font-size: 12px; font-family: var(--font); }
.burnup-label.is-due { fill: var(--c-danger); }
.burnup-caption { display: flex; flex-direction: column; gap: 2px; }
.burnup-summary { font-size: 16px; color: var(--c-text); }
.burnup-note, .burnup-empty { font-size: 14px; color: var(--c-muted); }
.milestone-form { display: flex; flex-direction: column; gap: 14px; }
.milestone-first-gen { margin: 0; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.assign-sheet { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 768px) {
  /* スマホ: 題名は上部バーにあるので、ツールバーは作成のボタン(右下に固定)だけ。行は縦に積む(バー → 数字 → 締切と予測 → 判定の文) */
  .view-milestones > .toolbar { padding: 0; min-height: 0; }
  .ms-list, .ms-detail { padding: 0 12px 16px; }
  .ms-card-main { padding: 12px; }
  .ms-gen-body { padding: 0 8px 12px; }
  .ms-gen-head { padding-left: 8px; }
  .milestone-first-gen .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- P65 段 5: カードの世代の名前・タイムラインの「世代」の絞り込み(ツールバーは 1 段のまま。スマホは残りの幅に縮める)・タスクの詳細の世代 ---- */
.card-generation { font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.tl-toolbar .tl-generation { width: auto; max-width: 240px; min-width: 0; flex: 0 1 auto; }
.task-generation .input { max-width: 360px; }
@media (max-width: 768px) {
  .tl-toolbar .tl-generation { flex: 1 1 0; max-width: none; }
  .tl-toolbar .tl-generation:not([hidden]) ~ .spacer { display: none; }
  .task-generation .input { max-width: none; }
}

/* ---- P66 段 3・4: 文字起こし設定(議事録の一覧の上の入口・設定のページ・候補一覧)。押せる所は 44px・入力と本文 16px・補助 14px ---- */
.minutes-settings-entry { flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 12px 12px 0; padding: 0 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.minutes-settings-entry[hidden] { display: none; }
.minutes-settings-entry:hover { background: var(--c-hover); }
.minutes-settings-entry.is-selected { background: var(--c-primary-soft); border-color: transparent; }
.minutes-settings-entry .icon { flex: none; width: 20px; height: 20px; color: var(--c-muted); }
.minutes-settings-label { flex: 1; min-width: 0; }
.tx-page { max-width: 760px; display: flex; flex-direction: column; gap: 8px; }
.tx-title { font-size: 20px; }
.tx-lead, .tx-words-lead { margin: 0; font-size: 16px; color: var(--c-muted); overflow-wrap: anywhere; }
.tx-recording { margin: 4px 0; }
.tx-recording[hidden], .tx-reset[hidden], .tx-fold[hidden] { display: none; }
.tx-speed, .tx-words-body { display: flex; flex-direction: column; gap: 10px; }
.tx-range-wrap { display: flex; align-items: center; gap: 12px; }
.tx-range-end { flex: none; font-size: 14px; color: var(--c-muted); }
/* スライダーは高さ 44px(溝のどこを押してもつまみが来る・指で動かしやすい) */
.tx-range { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--c-primary); cursor: pointer; }
.tx-step-name { font-size: 16px; }
.tx-step-desc { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.tx-step-detail { margin: 0; font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.tx-reset, .tx-candidates, .tx-add-btn, .tx-restore, .modal-actions [data-action=addCandidates], .modal-actions [data-action=rejectCandidates] { height: auto; min-height: 44px; }
.tx-reset, .tx-candidates { align-self: flex-start; }
.tx-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.tx-add .input, .tx-reading-sheet .input, .tc-tools .input { width: 100%; height: auto; min-height: 44px; font-size: 16px; }
.tx-words, .tx-rejected-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tx-word { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; border-top: 1px solid var(--c-border); }
.tx-word-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.tx-word-name { font-size: 16px; overflow-wrap: anywhere; }
.tx-word-reading { font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.tx-word.is-off .tx-word-name { color: var(--c-muted); }
.tx-word .tone-chip { flex: none; height: auto; min-height: 24px; font-size: 14px; }
.tx-word .icon-btn { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tx-star.is-on { color: var(--c-warning); }
.tx-star.is-on .icon { fill: currentColor; }
.tx-empty { padding: 8px 0; font-size: 14px; color: var(--c-muted); }
.tx-fold { border-top: 1px solid var(--c-border); }
.tx-fold-head { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 16px; color: var(--c-primary-ink); }
.tx-prompt-text { margin: 0 0 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-surface-2); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.tx-prompt-count { margin: 0 0 8px; font-size: 14px; color: var(--c-muted); }
.tx-rejected-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.tx-rejected-row .tx-word-name { flex: 1; min-width: 0; }
.tx-reading-sheet { display: flex; flex-direction: column; gap: 8px; }
.tc-body { display: flex; flex-direction: column; gap: 8px; }
.tc-tools { display: flex; flex-direction: column; gap: 4px; }
.tc-tools-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; }
.tc-all { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.tc-summary { font-size: 14px; color: var(--c-muted); }
.tc-list { display: flex; flex-direction: column; }
.tc-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-top: 1px solid var(--c-border); cursor: pointer; }
.tc-row[hidden] { display: none; }
.tc-row:hover { background: var(--c-hover); }
.tc-row input, .tc-all input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--c-primary); }
.tc-word { flex: 1; min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.tc-counts { flex: 0 1 auto; max-width: 50%; font-size: 14px; color: var(--c-muted); text-align: right; overflow-wrap: anywhere; }
.tc-empty { margin: 8px 0; font-size: 16px; color: var(--c-muted); }
@media (max-width: 768px) {
  .minutes-settings-entry { min-height: 48px; }
  .tx-title { font-size: 18px; }
  .tx-add { grid-template-columns: minmax(0, 1fr) auto; }
  .tx-add > .field:first-child { grid-column: 1 / -1; }
  .modal-actions [data-action=addCandidates] { flex: 1 1 auto; }
}

/* ---------- P68 議事録を直す(me- = minutes edit) ---------- */
.minutes-actions { display: flex; align-items: center; gap: 8px; }
.minutes-ai-edit { min-height: 44px; font-size: 16px; }
.minutes-ai-edit .icon { width: 18px; height: 18px; }
.minutes-rev-link { min-height: 44px; margin-left: -8px; padding: 0 8px; gap: 4px; font-size: 16px; color: var(--c-primary-ink); }
.minutes-rev-link .icon { width: 18px; height: 18px; }
.me-page { max-width: 900px; display: flex; flex-direction: column; gap: 16px; }
.me-page .btn { min-height: 44px; font-size: 16px; }
.me-back { align-self: flex-start; gap: 4px; margin: -4px 0 0 -8px; padding: 0 8px; }
.me-back .icon { width: 20px; height: 20px; }
.me-title { font-size: 20px; word-break: break-word; }
.me-lead { margin: 0; color: var(--c-muted); }
.me-textarea { font-size: 16px; line-height: 1.6; }
.me-examples { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--c-muted); }
.me-examples p { margin: 0; }
.me-prev { padding: 10px 12px; border-radius: var(--r-md); background: var(--c-surface-2); }
.me-prev-list { margin: 4px 0 0; padding-left: 24px; overflow-wrap: anywhere; }
.me-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0; text-align: center; }
.me-note, .me-rev-instruction { white-space: pre-wrap; overflow-wrap: anywhere; }
.me-rev-instruction { font-size: 14px; color: var(--c-text); }
.me-error:empty { display: none; }
.me-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-top: 1px solid var(--c-border); background: var(--c-bg); }
.me-main { min-width: 160px; }
/* 差分: 1 列・折り返す。色だけに頼らず、ラベルと線(del は取り消し線・ins は下線)でも読める */
.me-diff { display: flex; flex-direction: column; gap: 8px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; user-select: text; }
.me-line { min-height: 1.7em; }
.me-same { padding: 0 12px; color: var(--c-muted); }
.me-skip { padding: 2px 12px; font-size: 14px; color: var(--c-muted); border-block: 1px dashed var(--c-border); }
.me-change { display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.me-side { padding: 8px 12px; }
.me-side.is-before { background: var(--c-danger-soft); }
.me-side.is-after { background: color-mix(in srgb, var(--c-success) 14%, transparent); }
.me-side-label { font-size: 14px; font-weight: 700; color: var(--c-text); }
.me-side del { color: var(--c-text); text-decoration: line-through; text-decoration-color: var(--c-danger); }
.me-side ins { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-success); text-underline-offset: 3px; }
.me-side .me-mark { padding: 0 2px; border-radius: 3px; font-weight: 700; }
.me-side del.me-mark { background: color-mix(in srgb, var(--c-danger) 24%, transparent); }
.me-side ins.me-mark { background: color-mix(in srgb, var(--c-success) 28%, transparent); }
.me-full { border-top: 1px solid var(--c-border); }
.me-full-head { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 16px; color: var(--c-primary-ink); }
.me-revs { display: flex; flex-direction: column; gap: 4px; }
.me-rev { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.me-rev:hover { background: var(--c-hover); }
@media (max-width: 768px) {
  .me-title { font-size: 18px; }
  .me-foot .btn { flex: 1 1 0; }
  .me-foot .me-main { flex-basis: 100%; min-height: 48px; }
}

/* ---- P69 入力のお願い: シフト画面の帯・行・作成のステップ・入力状況のシート・入力のダイアログの「この期間は空きなし」・今日のブロックの行 ---- */
.avr-band { display: flex; flex-direction: column; gap: 4px; margin: 0 20px 12px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); flex: none; }
.avr-band-head, .avr-band-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avr-band-title { margin: 0; font-size: 15px; color: var(--c-text); }
.avr-rows { display: flex; flex-direction: column; }
.avr-row { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 0; border-top: 1px solid var(--c-border); }
.avr-band .avr-row:first-child { border-top: none; }
.avr-row-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; min-height: 44px; justify-content: center; padding: 4px 6px; border: none; border-radius: var(--r-md); background: transparent; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.avr-row-body:hover { background: var(--c-hover); }
.avr-row-body:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.avr-row-title { font-weight: 700; overflow-wrap: anywhere; }
.avr-row-sub { font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; }
.avr-row .btn, .avr-row .chip, .avr-row .menu-btn { flex: none; }
.avr-form { display: flex; flex-direction: column; gap: 12px; }
.avr-step { display: flex; flex-direction: column; gap: 14px; }
.avr-kind .seg-btn { flex: 1 1 0; }
.avr-deadline { display: flex; gap: 8px; flex-wrap: wrap; }
.avr-deadline .input { flex: 1 1 140px; min-width: 0; }
.avr-review-rows { display: flex; flex-direction: column; gap: 4px; }
.avr-review-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border: 1px solid var(--c-border); border-radius: var(--r-md); }
.avr-review-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.avr-status { display: flex; flex-direction: column; gap: 12px; }
.avr-status-head { display: flex; flex-direction: column; gap: 4px; }
.avr-status-title { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.avr-status-sub, .avr-status-note { margin: 0; font-size: 14px; color: var(--c-muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.avr-status-count { margin: 0; font-weight: 700; }
.avr-group-title { margin: 0 0 4px; font-size: 14px; color: var(--c-muted); }
.avr-members { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.avr-member { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.avr-member-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.avr-member-count { flex: none; }
.avr-status-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.avr-entry-hint { margin: 0; font-weight: 600; color: var(--c-text); }
.avr-none-row { display: flex; justify-content: center; padding-top: 4px; border-top: 1px solid var(--c-border); }
.today-row-link { padding: 4px 0; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.today-row.is-pending { background: color-mix(in srgb, var(--c-warning) 8%, transparent); }
@media (max-width: 768px) {
  .avr-band { margin: 0 12px 10px; }
  .avr-form .pick-chip { min-height: 44px; }
  .avr-member { min-height: 44px; }
  .avr-status-actions .btn-primary { flex: 1 1 100%; min-height: 48px; }
  .today-row-link { min-height: 44px; }
}

/* ---- P70 書き出し: シフト画面のツールバーの「書き出す」(スマホ幅はアイコンだけ)・シート(内容・期間・形式・メモ・プレビュー) ---- */
.shift-export { flex: none; gap: 4px; }
.shift-export .icon { width: 18px; height: 18px; }
.export-sheet { display: flex; flex-direction: column; gap: 12px; }
.export-seg { display: flex; flex-wrap: wrap; }
.export-seg .seg-btn { flex: 1 1 0; }
.export-format-btn { display: flex; flex-direction: column; align-items: center; gap: 0; height: auto; min-height: 44px; padding: 4px 8px; }
.export-format-hint { font-size: 12px; font-weight: 400; color: var(--c-muted); }
.export-format-btn.is-active .export-format-hint { color: inherit; opacity: 0.9; }
.shift-export-alt { display: none; }
.export-fixed, .export-members { margin: 0; overflow-wrap: anywhere; }
.export-preview { display: flex; flex-direction: column; gap: 6px; }
.export-preview-img { display: block; width: 100%; height: auto; min-height: 120px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #FFFFFF; }
.export-preview-status { margin: 0; }
.modal-actions .export-save { flex: 1 1 auto; height: auto; min-height: 48px; }
@media (max-width: 768px) {
  .shift-export { display: none; }
  .shift-export-alt { display: inline-flex; }
  .export-format-btn { min-height: 52px; }
  .export-format-hint { font-size: 14px; }
  .modal-actions .export-save { flex: 1 1 auto; min-height: 48px; }
}
/* ---- P71: AI チャットの添付(入力欄の上にチップ・下の段に「添付」。押せる所は 44px・記号の文字を使わない) ---- */
.ai-composer [hidden] { display: none !important; }
.ai-composer.is-dragover { outline: 2px dashed var(--c-primary); outline-offset: -4px; background: var(--c-primary-soft); }
.ai-attach-btn { min-height: 44px; }
.ai-attachments { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ai-attach-chip { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 320px; min-height: 48px; padding: 2px 0 2px 8px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text); }
.ai-attach-chip.is-error { border-color: var(--c-danger); background: var(--c-danger-soft); max-width: 100%; }
.ai-attach-thumb { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; background: var(--c-hover); }
.ai-attach-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--c-muted); }
.ai-attach-chip .ai-attach-icon { width: 36px; height: 36px; font-size: 22px; }
.ai-attach-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.ai-attach-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.ai-attach-state { font-size: 14px; color: var(--c-muted); }
.ai-attach-chip.is-ready .ai-attach-state { color: var(--c-success); }
.ai-attach-chip.is-error .ai-attach-state { color: var(--c-danger); overflow-wrap: anywhere; }
.ai-attach-remove { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.ai-attach-note { margin: 0; font-size: 14px; color: var(--c-muted); }
.ai-msg-attachments { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 100%; }
.ai-msg-attach { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 32px; padding: 4px 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); }
.ai-msg-attach .ai-attach-icon { font-size: 18px; }
.ai-attach-kind { flex: none; font-size: 14px; color: var(--c-muted); }
@media (max-width: 768px) {
  .ai-attachments, .ai-attach-note { grid-column: 1 / -1; }
  .ai-attach-chip { max-width: 100%; flex: 1 1 100%; }
  .ai-composer-foot .ai-attach-btn { min-height: 44px; }
}

/* ---- P72: タスクの親子(ツリー)・複数の担当と主担当(押せる所は 44px・ツリーの行は 56px 以上・記号の文字を使わない・字下げは深さのクラス) ---- */
.view-board [hidden], .task-dialog [hidden], .task-create [hidden], .task-picker [hidden], .assignee-primary[hidden] { display: none !important; }
.board-head { display: flex; align-items: center; flex: none; min-width: 0; }
.board-head > .toolbar { flex: 1 1 auto; min-width: 0; }
.board-head > .board-mode { padding-left: 20px; }
.board-mode { flex: none; flex-wrap: nowrap; gap: 4px; }
.board-mode .seg-btn { height: auto; min-height: 44px; padding: 0 14px; border-radius: var(--r-md); }
.board-mode .seg-btn .icon { width: 18px; height: 18px; }
.board-tree { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; }
.task-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.tree-row { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 4px; border-top: 1px solid var(--c-border); min-width: 0; }
.tree-row:first-child { border-top: none; }
.tree-depth-2 { padding-left: 28px; }
.tree-depth-3 { padding-left: 52px; }
.tree-row.is-context { opacity: 0.55; }
.tree-toggle, .tree-toggle-space { flex: none; width: 44px; height: 44px; }
.tree-toggle { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--r-sm); background: transparent; color: var(--c-muted); cursor: pointer; }
.tree-toggle:hover, .tree-toggle:focus-visible { background: var(--c-hover); color: var(--c-text); }
.tree-toggle .icon { width: 20px; height: 20px; }
.tree-main { flex: 1 1 auto; min-width: 0; min-height: 56px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 6px 4px; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tree-main:hover { background: var(--c-hover); }
.tree-title { flex: 1 1 240px; min-width: 0; font-weight: 600; color: var(--c-text); overflow-wrap: anywhere; }
.tree-row.is-done .tree-title { color: var(--c-muted); font-weight: 500; }
.tree-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-width: 0; font-size: 14px; color: var(--c-muted); }
.tree-children { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.tree-progress { width: 64px; height: 8px; accent-color: var(--c-primary); }
.tree-done-note { color: var(--c-success); }
.tree-due { min-width: 64px; font-variant-numeric: tabular-nums; }
.tree-row > .menu-btn { flex: none; width: 44px; height: 44px; }
.task-tree-note { margin: 8px 0 0; }
.task-tree-empty { margin: 0; }
/* 担当: アバターの重なり・チップ・役職の丸い頭文字 */
.assignee-stack { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.assignee-faces { display: inline-flex; flex: none; }
.assignee-faces > .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--c-surface); }
.assignee-name { min-width: 0; overflow-wrap: anywhere; }
.pos-badge { --pos-color: var(--c-muted); background: color-mix(in srgb, var(--pos-color) 28%, var(--c-surface)); color: var(--c-text); }
.assignee-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.assignee-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%; padding: 2px 10px 2px 4px; border-radius: 16px; background: var(--c-bg); border: 1px solid var(--c-border); }
.assignee-chip.is-primary { border-color: var(--c-primary); }
.assignee-chip-name { min-width: 0; overflow-wrap: anywhere; }
.assignee-chip-tag { flex: none; font-size: 12px; font-weight: 700; color: var(--c-primary-ink); }
.assignee-chip-tag.is-muted { font-weight: 400; color: var(--c-muted); }
.assignee-editor { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.assignee-pick { min-height: 44px; }
.assignee-primary .input { width: 100%; }
.task-locked { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; }
.task-locked .btn { min-height: 44px; }
/* カードの「親 #12」「子 3/5」・詳細の親・子タスク・マイルストーンの字下げ */
.card-parent { font-size: 12px; color: var(--c-muted); overflow-wrap: anywhere; }
.card-children .tree-progress { flex: 1 1 auto; width: auto; min-width: 48px; }
.task-parent-link { min-height: 44px; padding: 0; border: none; background: transparent; color: var(--c-primary-ink); font: inherit; text-align: left; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }
.task-children-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; }
.task-child-row { width: 100%; min-height: 56px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 6px 4px; border: none; border-top: 1px solid var(--c-border); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.task-child-row:hover { background: var(--c-hover); }
.task-child-title { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.task-child-row.is-done .task-child-title { color: var(--c-muted); }
.task-child-sub { font-size: 14px; color: var(--c-muted); }
.task-children .btn-ghost { min-height: 44px; }
.ms-tree-depth-2 { padding-left: 24px; }
.ms-tree-depth-3 { padding-left: 48px; }
.tree-bulk { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 8px; }
.tree-bulk .btn { min-height: 44px; }
.ms-section > .tree-bulk { margin: 8px 0 0; }
.ms-task-progress { flex: none; width: 120px; max-width: 100%; height: 8px; margin-top: 4px; }
@media (max-width: 768px) {
  .board-head { flex-direction: column; align-items: stretch; }
  .board-head > .board-mode { order: 1; padding: 0 12px 8px; }
  .board-mode .seg-btn { flex: 1 1 0; justify-content: center; }
  .board-tree { padding: 0 12px 16px; }
  .tree-depth-2 { padding-left: 20px; }
  .tree-depth-3 { padding-left: 36px; }
  .tree-title { flex: 1 1 100%; }
  .tree-due { min-width: 0; }
  .ms-tree-depth-2 { padding-left: 16px; }
  .ms-tree-depth-3 { padding-left: 32px; }
  .assignee-chip { min-height: 36px; }
}