/* ============================================================
   松田歯科OS 共通UIコンポーネント
   矯正管理システム（インプラント管理システムから移植）

   値は必ず tokens.css の変数を使う。生の色・pxを書かない。
   ============================================================ */

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--color-canvas);
  overflow-x: hidden;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  /* iPadでのタップ遅延をなくし、長押しでの文字選択を防ぐ（Apple HIG） */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* キーボード操作時のみフォーカスリングを出す（タッチ操作の邪魔をしない） */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.u-hidden {
  display: none !important;
}

/* ---------- Icon ---------- */

.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon--sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.icon--lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* ---------- AppHeader（共通ヘッダー / Charter⑩ Header） ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-top: env(safe-area-inset-top);
}

.app-nav {
  display: flex;
  flex: 1;
  max-width: var(--layout-max);
  margin-inline: auto;
}

/* 通知状態と端末モード。主役ではないので端に小さく置く。 */
.app-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline-end: var(--layout-gutter);
}

/* ---------- 通知コントロール（全画面共通ヘッダー） ---------- */

/* パネルを真下に出すための基準 */
.notify-slot {
  position: relative;
  display: flex;
  align-items: center;
}

.notify-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-comfortable);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.notify-chip:active,
.notify-chip[aria-expanded="true"] {
  background: var(--color-surface-sunken);
  border-color: var(--color-border);
}

.notify-chip .icon {
  color: var(--color-primary);
}

/* 状態を示す丸印。文字・アイコンと併せて3点で判別できるようにする。 */
.notify-dot {
  width: 0.625rem;
  height: 0.625rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid;
}

.notify-dot--done {
  background: var(--state-done-border);
  border-color: var(--state-done-fg);
}
.notify-dot--alert {
  background: var(--state-alert-border);
  border-color: var(--state-alert-fg);
}
.notify-dot--ordered {
  background: var(--state-ordered-border);
  border-color: var(--state-ordered-fg);
}
.notify-dot--muted {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

/* 押したときに開く小さな設定パネル */
.notify-pop {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 30;
  width: min(23rem, calc(100vw - var(--space-8)));
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: pop-in var(--duration-normal) var(--ease-standard);
}

.notify-pop__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.notify-pop__head .icon {
  color: var(--color-primary);
}

.notify-pop__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  border: 1px solid;
  border-radius: var(--radius-pill);
}

.notify-pop__state--done {
  color: var(--state-done-fg);
  background: var(--state-done-bg);
  border-color: var(--state-done-border);
}
.notify-pop__state--alert {
  color: var(--state-alert-fg);
  background: var(--state-alert-bg);
  border-color: var(--state-alert-border);
}
.notify-pop__state--ordered {
  color: var(--state-ordered-fg);
  background: var(--state-ordered-bg);
  border-color: var(--state-ordered-border);
}
.notify-pop__state--muted {
  color: var(--color-ink-muted);
  background: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
}

.notify-pop__desc {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

/* ユニット端末向けの案内 */
.notify-pop__note {
  margin-top: var(--space-3);
  padding: var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--state-waiting-fg);
  background: var(--state-waiting-bg);
  border: 1px solid var(--state-waiting-border);
  border-radius: var(--radius-md);
}

.notify-pop__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ---------- 通知の初回案内（受付端末のみ・一度だけ） ---------- */

.notify-hint {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--state-waiting-bg);
  border: 1px solid var(--state-waiting-border);
  border-radius: var(--radius-lg);
}

.notify-hint .icon {
  color: var(--color-primary);
}

.notify-hint__body {
  flex: 1;
  min-width: 0;
}

.notify-hint__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--state-waiting-fg);
}

.notify-hint__desc {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

.app-nav__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-comfortable);
  padding: var(--space-3) var(--space-2);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard);
}

/* 現在地は「色 + 下線 + 背景」の3点で示す（色だけに頼らない） */
.app-nav__item[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-primary-softer);
  border-bottom-color: var(--color-primary);
}

/* ---------- Page / Title（Charter⑩ Title） ---------- */

.page {
  max-width: var(--layout-max);
  margin-inline: auto;
  /* 技工物管理アプリと同じ余白にそろえる。
     下余白を大きく取ると、内容が収まっていても画面が伸びてスクロールが出る。 */
  padding: var(--space-4) var(--layout-gutter) var(--space-6);
  /* 画面切り替え時の演出はフェードのみ。移動や拡大は行わない。 */
  animation: page-enter var(--duration-normal) var(--ease-standard);
}

@keyframes page-enter {
  from {
    opacity: 0;
  }
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}

.page-head__title {
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-ink-strong);
  letter-spacing: 0.01em;
}

.page-head__lead {
  font-size: var(--fs-label);
  color: var(--color-ink-muted);
}

.page-head__actions {
  margin-inline-start: auto;
}

/* ---------- Card（Charter⑩ 共通カード） ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card__body {
  padding: var(--space-5);
}

.section {
  margin-bottom: var(--space-5);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.section__title .icon {
  color: var(--color-primary);
}

.section__note {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

/* ---------- StatTile（今日の状況） ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}

.stat {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid;
  border-radius: var(--radius-md);
}

.stat__icon {
  display: grid;
  place-items: center;
}

.stat__icon .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.stat__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

.stat__value {
  font-size: var(--fs-stat);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.stat__unit {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  margin-inline-start: var(--space-1);
}

/* 状態別の配色。対応が必要なものだけ色を付け、視線をそこへ集める。 */
.stat--waiting {
  color: var(--state-waiting-fg);
  background: var(--state-waiting-bg);
  border-color: var(--state-waiting-border);
}
.stat--ordered {
  color: var(--state-ordered-fg);
  background: var(--state-ordered-bg);
  border-color: var(--state-ordered-border);
}
.stat--alert {
  color: var(--state-alert-fg);
  background: var(--state-alert-bg);
  border-color: var(--state-alert-border);
}

/* 0件＝対応不要。薄いグレーまで落として、色付きのカードだけが目に入るようにする。 */
.stat.is-zero {
  color: var(--color-ink-subtle);
  background: var(--color-surface-sunken);
  border-color: var(--color-border);
}

.stat.is-zero .stat__value {
  color: var(--color-ink-subtle);
}

/* 件数があるカードは数字を強調する */
.stat:not(.is-zero) .stat__value {
  color: inherit;
}

/* 待つだけでよいものは色を主張させず、今日対応すべきカードを目立たせる */
.stat--muted {
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

/* ---------- 今日の確認ダッシュボード ---------- */

/* 総件数・空状態・タイル群を縦に積む器。タイルの並びは内側の .stat-grid が持つ。 */
.dashboard {
  display: flex;
  flex-direction: column;
}

/* 押せるカード。タップで該当案件だけに絞り込む。 */
.stat--pressable {
  font: inherit;
  text-align: start;
  cursor: pointer;
  /* 見出し用のdivと同じ見え方を保つ */
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.stat--pressable:active {
  background: var(--color-surface-sunken);
}

/* 選択中は「太い枠線＋影」で示す。色だけに頼らない。 */
.stat--pressable.is-active {
  border-width: 2px;
  border-color: currentColor;
  box-shadow: var(--shadow-sm);
}

.stat__body {
  min-width: 0;
}

/* 現在管理中の総件数。見出しの補助情報として控えめに置く。 */
.dashboard__total {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-ink-muted);
}

.dashboard__total .icon {
  align-self: center;
}

.dashboard__total-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
}

.dashboard__total-value {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
}

.dashboard__total-unit {
  font-size: var(--fs-caption);
}

/* 絞り込み中に、今なにを見ているかと戻る手段を示す */
.dashboard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.dashboard__filter-note {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

/* 問題ではない案件の理由文。警告色にせず、読める濃さにとどめる。 */
.order__reason {
  color: var(--color-ink-muted);
}


/* ---------- Button（Charter⑩ Button） ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-comfortable);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 押した瞬間の手応え。hoverには依存しない（Charter⑫） */
.btn:not(:disabled):active {
  transform: translateY(1px);
}

/* 主要操作：これから行う操作は常にこの青 */
.btn--primary {
  color: var(--color-ink-inverse);
  background: var(--color-primary);
}
.btn--primary:not(:disabled):active {
  background: var(--color-primary-active);
}

/* 副次操作 */
.btn--secondary {
  color: var(--color-ink);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}
.btn--secondary:not(:disabled):active {
  background: var(--color-surface-sunken);
}

/* 取り消し等、慎重に扱う操作 */
.btn--quiet-danger {
  color: var(--state-alert-fg);
  background: var(--color-surface);
  border-color: var(--state-alert-border);
}
.btn--quiet-danger:not(:disabled):active {
  background: var(--state-alert-bg);
}

.btn--lg {
  min-height: var(--tap-primary);
  font-size: var(--fs-body-lg);
  padding-inline: var(--space-6);
}

.btn--block {
  width: 100%;
}

/* ---------- StatusBadge（状態表示 / spec §18） ----------
   色・アイコン・文字の3つで状態を示す。色だけに依存しない。 */

.status {
  display: inline-flex;
  /* 文字数ぶんだけの幅にする（列幅いっぱいに伸ばさない） */
  align-self: start;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  border: 1px solid;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.status--waiting {
  color: var(--state-waiting-fg);
  background: var(--state-waiting-bg);
  border-color: var(--state-waiting-border);
}
.status--ordered {
  color: var(--state-ordered-fg);
  background: var(--state-ordered-bg);
  border-color: var(--state-ordered-border);
}
.status--alert {
  color: var(--state-alert-fg);
  background: var(--state-alert-bg);
  border-color: var(--state-alert-border);
}
.status--done {
  color: var(--state-done-fg);
  background: var(--state-done-bg);
  border-color: var(--state-done-border);
}

/* ---------- OrderCard（技工物1件） ----------
   「情報」「状態」「操作」を3つの列に完全分離する。 */

/* ---------- Progress（進行状況 / 症例詳細のみ） ----------

   工程が何個あっても画面内に収める。横スクロールする帯は作らない。
   現在位置さえ分かればよいので、目盛りは押せない表示専用にする。
   将来デザインを変えるときは、この節と .step-chip だけを差し替えれば済む。 */

.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.progress__title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink-subtle);
  letter-spacing: 0.04em;
}

.progress__count {
  font-size: var(--fs-label);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.progress__count-now {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

/* 目盛りは等分。工程数が変わっても幅の指定を直さなくてよい。 */
.progress__bar {
  display: flex;
  gap: 0.1875rem;
}

.progress__seg {
  flex: 1 1 0;
  min-width: 0;
  height: 0.5rem;
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.progress__seg.is-done {
  background: var(--color-primary);
}

.progress__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.progress__now {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.progress__now-label {
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
}

.progress__now-value {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.progress__rest {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* 保留は工程が止まっている状態。進んでいないことが分かるようにする。 */
.progress__rest--hold {
  font-weight: var(--fw-bold);
  color: var(--state-ordered-fg);
}

/* 症例カードの中では全幅で最上段に置く */
.order > .progress {
  grid-column: 1 / -1;
}

/* 本番以外の環境であることを、見落とさない強さで示す。
   実機テスト中に本番と取り違えると本番データを触ってしまうため。 */
.app-footer__env {
  padding: 0.125rem var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--state-ordered-fg);
  background: var(--state-ordered-bg);
  border: 1px solid var(--state-ordered-border);
  border-radius: var(--radius-pill);
}

/* ---------- Step chips（工程チップ / V1.2） ----------

   進捗表示・入力ボタン・期限表示を兼ねる。
   6つ並んでも横スクロールさせない。幅が足りなければ折り返し、
   さらに狭ければ clamp() で文字を縮める。工程名は省略しない。

   将来デザインを差し替えるときは、この節と .steps--* の色だけを置き換えればよい。 */

/* 7工程を均等グリッドで並べる。
   flexの伸縮に任せると、文字数の違いで最後の「手術予定日」だけ細くなったり
   半端に2段目へ落ちたりするため、列幅を等分に固定する。
   狭い画面では列数を減らして自然に折り返す。横スクロールは作らない。 */
.steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

@media (max-width: 68rem) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.step {
  display: grid;
  /* 工程名は2行を前提にする。「レポート・ガイド到着」「患者説明・ガイド試適」は
     1行に収めようとすると文字が小さくなりすぎるため、
     無理に1行へ詰めず、全チップを同じ大きさにそろえることを優先する。
     工程名2行 / 日付 / 状態 の3段で高さを固定する。 */
  grid-template-rows: 2.6em 1.2em 1.2em;
  align-content: start;
  justify-items: start;
  gap: 0.125rem;
  min-width: 0;
  padding: var(--space-2);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: start;
  font-family: inherit;
}

.step__name {
  font-size: clamp(0.75rem, 0.9vw + 0.55rem, 0.9375rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-ink);
  /* 折り返してでも全文を見せる。省略記号にしない */
  overflow-wrap: anywhere;
  align-self: start;
}

.step__state {
  font-size: clamp(0.625rem, 0.4vw + 0.5rem, 0.75rem);
  color: var(--color-ink-subtle);
}

.step--warn .step__state,
.step--alert .step__state {
  font-weight: var(--fw-bold);
}

.step__sub {
  font-size: clamp(0.6875rem, 0.5vw + 0.55rem, 0.8125rem);
  color: var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- 色（グレー／青／黄／赤） --- */

/* グレー：未実施 */
/* 通常：白。完了(青)・注意(黄)・要対応(赤)の3色だけを使い、
   未実施は色を足さず境界線だけで示す。色数を増やさないための方針。 */
.step--todo {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* 青：期限内に完了 */
.step--done {
  background: var(--color-primary-soft);
  border-color: var(--state-waiting-border);
}
.step--done .step__name {
  color: var(--state-waiting-fg);
}

/* 黄：本日期限、または外部要因で遅れている工程 */
.step--warn {
  background: var(--state-ordered-bg);
  border-color: var(--state-ordered-border);
}
.step--warn .step__name,
.step--warn .step__sub {
  color: var(--state-ordered-fg);
}

/* 赤：医院側の対応が遅れている工程だけ */
.step--alert {
  background: var(--state-alert-bg);
  border-color: var(--state-alert-border);
}
.step--alert .step__name,
.step--alert .step__sub {
  color: var(--state-alert-fg);
}

/* いま押せる工程。押せることが分かるよう境界を強める */
/* いま押せる工程。青枠＋太字＋淡い青で、どこを操作すればよいか一目で分かるようにする。 */
.step.is-current {
  border-width: 2px;
  border-color: var(--color-primary);
  background: var(--color-primary-softer);
}

.step.is-current .step__name {
  font-weight: var(--fw-bold);
  color: var(--color-primary-active);
}

button.step {
  cursor: pointer;
  /* タップ領域を確保する（Apple HIGの44pxを下回らない） */
  min-height: 2.75rem;
  transition: background var(--duration-fast) var(--ease-standard);
}

button.step:hover {
  background: var(--color-primary-softer);
}

button.step:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---------- 手術カレンダー（V2） ----------

   月全体の予定を1画面で読み取れるようにする。
   青は「手術がある日」「患者IDのラベル」「本日」だけに使い、
   セル全体は白のままにする。全部青くすると日付を探せなくなる。 */

.calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calendar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.calendar__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.calendar__head .btn {
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-caption);
}

/* 7列は崩さない。列がずれると曜日が読めなくなるため、
   狭い画面でも列数は変えず、1マスの中身を減らす。 */
/* 週の数（5〜6週）で全体の高さが変わり、ページがはみ出してスクロールが出る。
   ヘッダーと見出しの分を引いた残りへ収め、週セルの高さを均等に配分する。 */
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(3.5rem, 1fr);
  max-height: calc(100vh - 20rem);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calendar__weekday {
  padding: var(--space-1) var(--space-2);
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink-muted);
  background: var(--color-surface-sunken);
}

.calendar__cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  background: var(--color-surface);
}

/* 前後の月のマスは、日付があることだけ分かれば十分 */
.calendar__cell.is-outside {
  background: var(--color-surface-sunken);
}

.calendar__cell.is-outside .calendar__day {
  color: var(--color-ink-subtle);
}

.calendar__cell.is-today .calendar__day {
  color: var(--color-ink-inverse);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.calendar__day {
  align-self: flex-start;
  min-width: 1.5rem;
  padding: 0 0.25rem;
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* 1件ぶん。押すと担当Drと手術予定日を編集できる。 */
.calendar__case {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 0.125rem var(--space-1);
  background: var(--color-primary-soft);
  border: 1px solid var(--state-waiting-border);
  border-radius: var(--radius-sm);
  text-align: start;
  font-family: inherit;
  cursor: pointer;
}

.calendar__case:hover {
  background: var(--color-primary-softer);
}

.calendar__case:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.calendar__case-id {
  font-size: clamp(0.6875rem, 0.4vw + 0.55rem, 0.8125rem);
  font-weight: var(--fw-bold);
  color: var(--state-waiting-fg);
  font-variant-numeric: tabular-nums;
}

.calendar__case-site {
  font-size: clamp(0.625rem, 0.35vw + 0.5rem, 0.75rem);
  color: var(--color-ink-muted);
  overflow-wrap: anywhere;
}

.calendar__more {
  align-self: flex-start;
  padding: 0 var(--space-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.calendar__more:hover {
  text-decoration: underline;
}

/* 狭い画面では部位を省き、患者IDだけにする */
@media (max-width: 48rem) {
  .calendar__cell {
    min-height: 4rem;
  }

  .calendar__case-site {
    display: none;
  }
}

/* ---------- Doctor chip（担当ドクター） ----------/* 一覧上部・絞り込みの操作は高さをそろえる。
   ばらばらだと行がガタつき、押せる場所が読み取りにくくなる。
   技工物管理アプリと同じく、主要ボタンは56px・補助操作は40pxにする。 */
.list-controls .filter-chip,
.list-controls .input,
.today-toolbar .filter-chip,
.today-toolbar .input {
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-caption);
}

.list-controls .search-option {
  font-size: var(--fs-caption);
}

/* 一覧上部の操作を1行にまとめる。
   タブ・検索・担当Drの絞り込み・チェックボックスを横に並べ、
   右側に余白が残らないようにする。狭い画面だけ自然に折り返す。 */
.list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.list-controls .today-search {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 22rem;
}

.list-controls .search-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

/* 登録画面：左列（患者ID・担当Dr）と右列（部位・日付・確認）の2列。
   iPad横向きで縦スクロールを最小にするため、空白を詰める。 */
/* ---------- 症例登録画面（歯科医院で毎日使う業務アプリの密度） ----------

   ノートPC・iPad横向きのどちらでも、登録ボタんまでスクロールせずに届かせる。
   装飾は増やさず、フラット・高密度・視線移動の少なさを優先する。 */

/* この画面だけ左右の余白を狭める。装飾のための余白を持たず、
   画面幅を入力領域として使う。 */
.register-page {
  padding-inline: clamp(var(--space-3), 1.5vw, var(--space-5));
}

/* 見出しから最初のカードまでの間隔を詰める（技工物管理アプリと同程度に） */
.register-page .page-head {
  margin-bottom: var(--space-3);
}

.register-layout {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--space-3) var(--space-5);
  align-items: start;
}

@media (max-width: 60rem) {
  .register-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.register-col {
  display: flex;
  flex-direction: column;
  /* セクション間の縦余白を詰める（元は space-3=12px → space-2=8px、約30%減） */
  gap: var(--space-2);
  min-width: 0;
}

.register-card .card__body {
  padding: var(--space-3) var(--space-4);
}

/* 担当Drと登録ボタンの高さを、他画面の補助操作・主要操作にそろえる */
.register-layout .choice-grid .choice {
  border-radius: var(--radius-md);
}

/* 見出し下の余白を詰める */
.register-card {
  margin-top: 0;
}

/* テンキーを約15%小さくする。タップ領域は44pxを下回らせない。 */
.register-layout .keypad__key {
  min-height: 3rem;
}

/* 担当Drは横1列。縦を使わない。右側に空白を残さず、ボタンの幅で埋める。 */
.register-layout #doctor-slot {
  display: flex;
  gap: var(--space-2);
}

.register-layout #doctor-slot .choice {
  /* 2つのボタンで幅を均等に分け合う。サイズをそろえ、右側の余白を作らない。 */
  flex: 1 1 0;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  /* 横・縦とも完全中央にする。line-heightをフォントに任せると
     文字が中心から浮いて見えるため、button側の指定に統一する。 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

/* 歯列と日付の間隔を詰める（右側に余白を残さない） */
.register-layout .tooth-chart {
  --tooth-min: 2.5rem;
  gap: var(--space-2);
  margin-bottom: 0;
}

#submit-today-row {
  margin-top: var(--space-1);
}

/* 登録内容の確認：可能な限り1行で読ませる。
   「患者ID：0101　部位：17　担当Dr：江　…」のように項目を横に並べ、
   高さをラベル1行ぶんまで縮める。折り返しても2行までに収まる密度にする。 */
.register-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.125rem;
  column-gap: var(--space-4);
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.register-summary__label {
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
  white-space: nowrap;
}

.register-summary__label::after {
  content: "：";
}

.register-summary__value {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  white-space: nowrap;
}

/* 登録ボタンは初期表示に必ず入れる。確認欄との間隔だけ少し詰める。 */
#submit-slot {
  margin-top: var(--space-1);
}

#submit-slot .btn {
  min-height: 3rem;
}

/* 余白を詰める。既定の field は縦に間延びするため上書きする */
.field--tight {
  margin-bottom: 0;
}

/* 番号付き見出し（症例登録）。
   番号円24px・間隔8px・行高32px を固定し、左右の列で開始位置をそろえる。
   文字サイズに任せると clamp() で行高が変わり、列ごとにずれるため。
   入力欄の開始位置もこの見出しの高さでそろう（見出しが浮いて見えないようにする）。 */
.register-layout .field__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 2rem;
  margin-bottom: var(--space-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-ink-strong);
}

.register-step {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-ink-inverse);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

/* 「この端末で通知を受ける」の切り替え。
   通知を受けるかどうかは端末ごとの設定だけで決める。端末の種類では判定しない。 */
.notify-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-comfortable);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.notify-toggle input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-primary);
}

/* ---------- 通知の診断情報（技工物管理アプリと同じ見せ方） ----------
   既定では閉じておく。通常操作の導線から外すため、控えめな文字リンクにする。
   矯正管理は複数端末を扱うため、技工物にはない
   「再登録」「テスト送信」の操作をこの中に追加している。 */

.notify-pop__diag {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.notify-pop__diag-toggle {
  padding: var(--space-2) 0;
  font-family: inherit;
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.notify-pop__diag-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.notify-pop__diag-body {
  display: flex;
  flex-direction: column;
}

.notify-pop__diag-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--fs-caption);
}

.notify-pop__diag-list dt {
  color: var(--color-ink-muted);
}

.notify-pop__diag-list dd {
  margin: 0;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.notify-pop__diag-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- 設定画面 ----------

   どこを直せばよいかを一目で分かるようにする。
   1項目1行にして、工程名 → 日数 → 起点 の順に読めるようにし、
   縦を詰めて全体を1画面に収める。 */

.setting-list {
  display: flex;
  flex-direction: column;
}

.setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row__main {
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}

.setting-row__name {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

/* 起点や状態の補足。読めればよいので小さく淡く。 */
.setting-row__hint {
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
}

/* 入力するのは数字だけ。欄を広く取ると、どこに何を入れるのか分かりにくくなる。 */
.setting-row__days {
  flex: 0 0 auto;
  width: 5.5rem;
  border-radius: var(--radius-sm);
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.setting-row__unit {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

.setting-row__name-input {
  flex: 1 1 10rem;
  min-height: 2.5rem;
}

.setting-row__actions {
  display: flex;
  gap: var(--space-1);
}

.setting-row__actions .btn {
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-caption);
}

/* 保存はまとめて1回。項目ごとに置くと、どこまで保存したか分からなくなる。 */
.setting-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.setting-foot__note {
  flex: 1 1 auto;
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

.setting-add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.setting-add .input {
  flex: 1 1 10rem;
  min-height: 2.5rem;
}

/* 設定画面のカードは詰める。項目が少ないので余白で伸ばさない。 */
.settings-page .card {
  margin-bottom: var(--space-4);
}

.settings-page .card__body {
  padding: var(--space-4);
}

/* ---------- 手術スケジュール（+n件の一覧で使う） ----------

   手術タブは日程の一覧。全案件のカードを流用すると過去の7工程が主役になり、
   いつ誰の手術かが読み取りにくいため、月→日でまとめた専用の並びにする。
   青くするのは手術予定日だけ。カード全体を青くすると、
   どの症例も同じ強さに見えて日付が探しにくくなる。 */

.surgery-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.surgery-month__label {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  border-bottom: 2px solid var(--color-border-strong);
}

.surgery-day {
  margin-bottom: var(--space-4);
}

.surgery-day__label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.surgery-day__cases {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 1件ぶん。押すと担当Drと手術予定日を編集できる。 */
.surgery-case {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  width: 100%;
  min-height: var(--tap-comfortable);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: start;
  font-family: inherit;
  cursor: pointer;
}

.surgery-case:hover {
  background: var(--color-surface-sunken);
}

.surgery-case:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.surgery-case__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.surgery-case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

/* 患者IDは常に出す。押さないと見えない作りにはしない。 */
.surgery-case__patient {
  font-size: var(--fs-key);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
}

.surgery-case__site {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.surgery-case__doctor {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

/* 手術予定日だけを青で強調する */
.surgery-case__date {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-soft);
  border: 1px solid var(--state-waiting-border);
  border-radius: var(--radius-md);
}

.surgery-case__date-label {
  font-size: var(--fs-caption);
  color: var(--state-waiting-fg);
}

.surgery-case__date-value {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--state-waiting-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Doctor chip（担当ドクター） ----------

   江・松を色で描き分けない。色だけで判別させると、色が分かりにくい環境や
   印刷では区別できなくなるため、必ず文字で示す。
   医師が増えても見た目は変わらない（表示は共有定義の文字をそのまま出す）。 */

.doctor-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 0.0625rem var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.doctor-chip__label {
  font-weight: normal;
  color: var(--color-ink-subtle);
}

/* 一覧表の工程列。6つのチップが1〜2行で読める幅を確保する。 */
/* 6つのチップが1〜2行で読める幅を確保する。
   確保しないと列が潰れ、チップが縦一列になって一覧性が失われる。 */
.table__steps,
.table th:nth-child(5) {
  width: 30rem;
  min-width: 30rem;
}



/* 一覧表の担当列。1文字しか入らないため詰めて置く。 */
.table__doctor {
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* ---------- Step chip（一覧に添える工程番号） ----------

   一覧に出す進行状況はこの数字だけに留める。
   工程バーや全体工程は一覧に出さない（見たいのは「次に何をする症例か」）。 */

.step-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.125rem;
  padding: 0.0625rem var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.step-chip__now {
  font-weight: var(--fw-bold);
  color: var(--color-ink-muted);
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 情報（左）→ 状態（左下）→ 操作（右下）の順に視線が流れるよう2列で構成する。
   操作列は区切り線で独立させ、「見るところ」と「押すところ」を分ける。 */
.order {
  display: grid;
  /* 工程チップを主役にする。編集はボタンの幅ぶんだけ。
     余白は技工物管理アプリと同じ 16/20px にそろえる。 */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* 工程ごとに色帯を変えると一覧が多色になるため、通常は無彩色に留める。
     状態は statusBadge の「色＋アイコン＋文字」で読み取る。 */
  border-inline-start: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* 左：患者ID・技工物・日付、その下に状態 */
.order__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* 状態と補足は横並びにして、1行で状況を読み取れるようにする */
.order__state-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* 右：操作エリア。区切り線で独立させ、ボタンは右下に置く */
/* 編集は毎回押すものではないため、幅も存在感も最小にする。
   空いた横幅はすべて工程チップ（ワークフロー）へ回す。
   カードの縦中央に置き、視線が工程から外れにくいようにする。 */
.order__action {
  display: flex;
  align-items: center;
  align-self: center;
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--color-border);
}

.order__action .btn {
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-caption);
}

/* 左端に色を付けるのは「要確認」のときだけにする（.order.is-problem）。
   通常の工程で色帯を出し分けると、一覧全体が多色になって
   本当に急ぐ症例が埋もれるため。状態そのものは statusBadge が示す。 */

/* 「操作」など、領域の役割を示す見出し */
.order__col-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink-subtle);
  letter-spacing: 0.02em;
}

.order__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.order__patient {
  font-size: var(--fs-key);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
}

.order__item {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.order__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

.order__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.order__meta-value {
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* 状態の補足説明（例：到着予定日まであと3日） */
.order__hint {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

/* ---------- Field（入力欄 / Charter⑩） ---------- */

.field {
  margin-bottom: var(--space-5);
}

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.field__hint {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

.input {
  width: 100%;
  min-height: var(--tap-comfortable);
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--fs-body-lg);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.input--numeric {
  font-size: var(--fs-key);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.input--inline {
  width: auto;
  min-width: 11rem;
  /* 列幅に合わせて伸びるが、必要以上には広げない */
  flex: 1 1 11rem;
  max-width: 20rem;
  font-size: var(--fs-body);
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* 印象日は通常「今日」のまま変更しないため、まずは文字だけを見せる。
   カレンダーは「日付を変更」を押したときだけ出す。 */
.date-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.date-summary__value {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
}

/* ---------- ChoiceGrid（技工物の選択 / Charter⑪ SelectionCard） ---------- */

.choice-grid {
  display: grid;
  /* 8分類を4列×2段で並べる。1つあたりを大きく取り、文言を折り返させない。 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-primary);
  padding: var(--space-3);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

/* 選択中は「青背景 + 白文字 + チェック + わずかな拡大」で示す。
   未選択との差を大きくし、選んだことを確実に伝える。 */
.choice[aria-pressed="true"] {
  color: var(--color-ink-inverse);
  background: var(--color-primary);
  border-color: var(--color-primary-active);
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}

.choice__check {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  opacity: 0;
  transform: scale(0.6);
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.choice[aria-pressed="true"] .choice__check {
  opacity: 1;
  transform: scale(1);
}

/* ダイアログの中など、幅の狭い場所で選択肢を並べるとき。
   固定列数にすると1つあたりが細くなりすぎるため、内容に合わせて折り返す。 */
.choice-grid--inline {
  grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
  justify-content: start;
}

/* ---------- 並列トラック（インプラント体・ガイド／アバットメント） ----------
   1症例が同時に2つの状態を持つため、症例カードの中に入れ子で並べる。
   どちらのトラックの操作かを取り違えないよう、名前と状態を必ず併記する。 */

.track-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* 要確認のトラックは、症例カードの中でも一目で分かるようにする */
.track.is-problem {
  background: var(--state-alert-bg);
  border-color: var(--state-alert-border);
  border-left-color: var(--state-alert-fg);
}

.track__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.track__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.track__name {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.track__reason {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

.track.is-problem .track__reason {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--state-alert-fg);
  font-weight: var(--fw-bold);
}

.track__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* 到着予定日は任意入力。分かったときにその場で入れられるよう常に出しておく。 */
.track__eta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  grid-column: 1 / -1;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

.track__eta-label {
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
}

.track__eta .input {
  width: auto;
  min-width: 10rem;
  min-height: var(--tap-comfortable);
  font-size: var(--fs-body);
}

@media (max-width: 48rem) {
  .track {
    grid-template-columns: minmax(0, 1fr);
  }
  .track__action {
    justify-content: flex-start;
  }
}

/* 発注品の残り件数。1行だけの簡潔な表示に留める。 */
.track-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.track-progress__rest {
  font-weight: var(--fw-medium);
  color: var(--color-ink-muted);
}

/* ---------- PWA（Version表示・更新案内・オフライン画面） ---------- */

.app-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4) var(--space-8);
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
}

.app-footer__name {
  font-weight: var(--fw-bold);
}

.app-footer__version {
  font-variant-numeric: tabular-nums;
}

/* 更新の案内。勝手に再読み込みせず、押されたときだけ切り替える。 */
.update-bar {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink-strong);
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}

.update-bar__text {
  flex: 1 1 14rem;
  font-size: var(--fs-label);
}

/* オフライン画面。データ編集ができないことを明示する。 */
.offline-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-9) var(--space-4);
  text-align: center;
}

.offline-page__art {
  width: 7rem;
  height: 7rem;
  background: var(--state-alert-bg);
  border: 1px solid var(--state-alert-border);
  border-radius: var(--radius-pill);
}

.offline-page__title {
  margin: 0;
  font-size: var(--fs-page);
  color: var(--color-ink-strong);
}

.offline-page__lead {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--color-ink);
}

.offline-page__note {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
}

/* ---------- 症例の「…」メニュー（日付修正・アーカイブ・削除） ----------
   主操作から離した位置に置き、誤って押さないようにする。 */

.order__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.case-menu {
  position: relative;
}

.case-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-ink-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.case-menu__trigger:hover {
  color: var(--color-ink-strong);
  background: var(--color-surface-sunken);
  border-color: var(--color-border);
}

.case-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.case-menu__list {
  position: absolute;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  margin-top: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.case-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-comfortable);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--fs-label);
  color: var(--color-ink);
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.case-menu__item:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

.case-menu__item:disabled {
  color: var(--color-ink-subtle);
  cursor: not-allowed;
}

/* 削除は取り返しがつきにくいため、色でも区別する */
.case-menu__item--danger {
  color: var(--state-alert-fg);
}

.case-menu__item--danger:hover:not(:disabled) {
  background: var(--state-alert-bg);
}

.case-menu__note {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
}

/* ---------- 詳細検索と削除済み一覧 ---------- */

.search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.search-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.search-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-comfortable);
  font-size: var(--fs-label);
  color: var(--color-ink);
  cursor: pointer;
}

.search-option input {
  width: 1.25rem;
  height: 1.25rem;
}

.admin-entry {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/* ---------- 今日やること画面 ----------
   受付が朝一番に開く画面。タスク単位で並べ、その場で処理できるようにする。 */

/* PCは左にタスク一覧、右に症例詳細。iPadは1カラム。 */
.today-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

/* 症例詳細の右ペインはV1.2で廃止した（工程チップで完結するため） */
.today-detail {
  display: none;
}

/* V1.2で右側の詳細パネルを廃止したため、2カラムにしない。
   グリッドのまま残すと右半分が空いたままになる。
   PCでは横幅を活かして症例カードを2列に並べる。 */
@media (min-width: 78rem) {
  .task-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }
}

.today-detail__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  color: var(--color-ink-subtle);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

/* --- 絞り込みバー --- */

.today-toolbar {
  margin-bottom: var(--space-4);
}

.today-toolbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  min-height: var(--tap-comfortable);
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

/* 選択中は色と文字色の両方を変え、枠だけに頼らない */
.filter-chip[aria-pressed="true"] {
  color: var(--color-ink-inverse);
  background: var(--color-primary);
  border-color: var(--color-primary-active);
}

.filter-chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.today-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink-subtle);
}

/* --- タスクカード --- */

.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* 症例カードと同じ考え方で、色帯は要確認のときだけ出す。 */
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.task.is-problem {
  border-color: var(--state-alert-border);
  border-left-color: var(--state-alert-fg);
}

.task__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.task__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.task__patient {
  font-size: var(--fs-key);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
}

.task__site {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.task__track {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink-muted);
}

/* 項目名と値を2列で並べる。読む順を固定して視線を迷わせない。 */
.task__rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.task__label {
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
}

.task__value {
  margin: 0;
  font-size: var(--fs-label);
  color: var(--color-ink);
}

.task__value--problem {
  font-weight: var(--fw-bold);
  color: var(--state-alert-fg);
}

.task__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  min-width: 12rem;
}

/* iPadは片手で押せるよう、操作を下段へ回して横幅いっぱいにする */
@media (max-width: 60rem) {
  .task {
    grid-template-columns: minmax(0, 1fr);
  }
  .task__actions {
    min-width: 0;
  }
}

/* --- 0件のとき --- */

.today-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-9) var(--space-4);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

/* イラストを入れるための枠。画像はまだ置かない。 */
.today-empty__art {
  width: 8rem;
  height: 8rem;
  background: var(--state-done-bg);
  border: 1px solid var(--state-done-border);
  border-radius: var(--radius-pill);
}

.today-empty__text {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

/* --- 工程別の件数（表示専用・押せない） --- */

.phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-2);
}

.phase-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.phase-cell__label {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

.phase-cell__value {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
}

/* ---------- 手術準備（ガイド試適・試適・手術予約・手術実施） ----------
   工程に応じて、いま必要な操作だけを出す。先の工程の操作は見せない。 */

.prep {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.prep__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.prep__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-caption);
}

.prep__label {
  min-width: 8rem;
  color: var(--color-ink-subtle);
}

.prep__value {
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.prep__note {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

.prep__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}

.prep__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.prep__field .input {
  width: auto;
  min-width: 11rem;
  font-size: var(--fs-body);
}

/* PC一覧表の中でトラックを2行に分けて出す */
.table__tracks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 16rem;
}

.table__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
}

.table__track-name {
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

/* ---------- SitePicker（部位の選択 / 2タップ方式） ----------
   象限を選んでから歯番を押す。キーボードを使わせない。
   部位は表示専用情報のため、未選択のままでもよい。 */

.site-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 象限は口腔内の位置関係のまま2×2で並べる。
   左右を入れ替えると直感に反するため、渡された順序をそのまま使う。 */
.site-picker__quadrants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  max-width: 26rem;
}

.site-picker__teeth {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-2);
}

/* 歯番は数字のみのため、象限より一回り小さくてよい */
.site-picker__teeth .choice {
  min-height: var(--tap-comfortable);
  padding: var(--space-2);
}

.site-picker__teeth .choice:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.site-picker__hint {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

.site-picker__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-comfortable);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.site-picker__empty {
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
}

.site-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--state-waiting-fg);
  background: var(--state-waiting-bg);
  border: 1px solid var(--state-waiting-border);
  border-radius: var(--radius-pill);
}

.site-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.site-chip__remove:hover {
  background: rgba(13, 71, 161, 0.12);
}

.site-chip__remove:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

@media (max-width: 40rem) {
  .site-picker__teeth {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Keypad（テンキー） ----------
   iPadのソフトキーボードを出さずに患者IDを入力するための電卓配列。 */

.keypad {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 24rem;
}

.keypad__display {
  display: flex;
  align-items: center;
  min-height: var(--tap-primary);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-sunken);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

/* 上限まで入力できたことを枠の色でも知らせる */
.keypad__display.is-full {
  border-color: var(--color-primary);
  background: var(--color-primary-softer);
}

/* 入力済みの数字は離れていても読めるよう大きく表示する */
.keypad__value {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

/* 1文字入力するたびに、ごく短い拡大で反応を返す */
.keypad__value.is-typed {
  animation: keypad-typed var(--duration-fast) var(--ease-standard);
}

@keyframes keypad-typed {
  from {
    transform: scale(1.08);
  }
}

.keypad__placeholder {
  font-size: var(--fs-body);
  color: var(--color-ink-subtle);
}

.keypad__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.keypad__key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-primary);
  font-family: inherit;
  font-size: var(--fs-key);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

/* 押した瞬間にへこむ手応えを返す（押せたかどうかを迷わせない） */
.keypad__key:not(:disabled):active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  transform: scale(0.96);
}

.keypad__key:disabled {
  opacity: 0.35;
  cursor: default;
}

/* クリア・削除は数字より控えめにして、押し間違いを減らす */
.keypad__key--sub {
  font-size: var(--fs-label);
  color: var(--color-ink-muted);
  background: var(--color-surface-sunken);
}

/* ---------- Notice / HelpMessage（Charter⑩） ---------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-label);
  border: 1px solid;
  border-radius: var(--radius-md);
}

.notice__icon {
  margin-top: 0.1em;
}

.notice--info {
  color: var(--state-waiting-fg);
  background: var(--state-waiting-bg);
  border-color: var(--state-waiting-border);
}
.notice--success {
  color: var(--state-done-fg);
  background: var(--state-done-bg);
  border-color: var(--state-done-border);
}
.notice--error {
  color: var(--state-alert-fg);
  background: var(--state-alert-bg);
  border-color: var(--state-alert-border);
}
.notice--warning {
  color: var(--state-ordered-fg);
  background: var(--state-ordered-bg);
  border-color: var(--state-ordered-border);
}

.notice--strong {
  font-weight: var(--fw-bold);
}

/* ---------- EmptyState ---------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.empty__icon {
  color: var(--state-done-border);
}

.empty__icon .icon {
  width: 2.5em;
  height: 2.5em;
}

.empty__text {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.empty__sub {
  font-size: var(--fs-caption);
}

/* ---------- 問題案件の共通表現（全カテゴリ共通） ----------
   期限超過・入力漏れ・未実施は、カテゴリが増えても同じ見え方にする。 */

/* 要確認だけは一覧を眺めていて気づけるよう、左端に色を残す。
   面で塗ると赤の面積が増えて落ち着かないため、背景はごく淡くする。 */
.order.is-problem {
  background: var(--color-surface);
  border-color: var(--state-alert-border);
  border-inline-start-color: var(--state-alert-fg);
}

.order__problem {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--state-alert-fg);
}

/* ---------- Table（受付PC向けの一覧） ---------- */

.table-wrap {
  overflow-x: auto;
  /* 列を潰さないため、狭い画面では横スクロールで見せる */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.table {
  width: 100%;
  min-width: 72rem;
  border-collapse: collapse;
  font-size: var(--fs-label);
  /* 列幅を内容任せにすると分類名などが1文字ずつ折り返すため、明示的に配分する */
  table-layout: fixed;
}

/* 優先度・患者ID・分類・印象日・予定日・状態・問題理由・次にすること・操作 */
.table th:nth-child(1) { width: 4.5rem; }
.table th:nth-child(2) { width: 7rem; }
.table th:nth-child(3) { width: 9.5rem; }
.table th:nth-child(4),
.table th:nth-child(5) { width: 5.5rem; }
.table th:nth-child(6) { width: 10.5rem; }
.table th:nth-child(7) { width: 13rem; }
.table th:nth-child(8) { width: auto; }
.table th:nth-child(9) { width: 15rem; }

.table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink-subtle);
  text-align: start;
  white-space: nowrap;
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
}

.table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* 問題がある行は背景と左ラインで示す（色だけでなく理由も列で出す） */
.table tbody tr.is-problem {
  background: var(--state-alert-bg);
  box-shadow: inset 4px 0 0 var(--state-alert-fg);
}

.table__rank {
  width: 4rem;
}

.rank-badge {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  min-height: 2rem;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink-muted);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.rank-badge--problem {
  color: var(--color-ink-inverse);
  background: var(--state-alert-fg);
  border-color: var(--state-alert-fg);
}

.table__item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table__id {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table__date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table__reason {
  color: var(--state-alert-fg);
  font-weight: var(--fw-bold);
}

.table__reason .icon {
  vertical-align: -0.15em;
  margin-inline-end: var(--space-1);
}

/* 問題ではない理由は警告色にせず、要確認の赤だけが目立つようにする */
.table__reason--calm {
  color: var(--color-ink-muted);
  font-weight: var(--fw-medium);
}

/* 操作列は幅が限られるため、入力欄とボタンを縦に積む */
.table__action .input-row {
  flex-direction: column;
  align-items: stretch;
}

.table__action .input {
  flex: none;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.table__none {
  color: var(--color-ink-subtle);
  font-weight: var(--fw-medium);
}

.table__next {
  color: var(--color-ink-muted);
  min-width: 14rem;
}

/* 推奨担当。権限管理はせず、誰が動くべきかを示すだけ。 */
.table__assignee {
  width: 1%;
  white-space: nowrap;
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.table__action {
  width: 1%;
  white-space: nowrap;
}

.table__action .btn {
  min-height: var(--tap-comfortable);
}

.table__action .input-row {
  flex-wrap: nowrap;
}

/* ---------- 端末モードの選択 ---------- */

.mode-picker {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: rgba(15, 32, 44, 0.6);
  animation: fade-in var(--duration-normal) var(--ease-standard);
}

.mode-picker__panel {
  width: min(46rem, 100%);
  padding: var(--space-7);
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: pop-in var(--duration-normal) var(--ease-standard);
}

.mode-picker__title {
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.mode-picker__lead {
  margin-top: var(--space-2);
  font-size: var(--fs-label);
  color: var(--color-ink-muted);
}

.mode-picker__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.mode-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.mode-option:active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  transform: scale(0.98);
}

.mode-option .icon {
  color: var(--color-primary);
}

.mode-option__label {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.mode-option__desc {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

/* ヘッダーの端末モード表示（押すと選び直せる） */
.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-comfortable);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ink-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.mode-switch .icon {
  color: var(--color-primary);
}

/* ---------- 日付の変更前後（保存前の確認） ---------- */

.diff-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.diff-row {
  display: grid;
  grid-template-columns: 7rem 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-label);
}

.diff-row__label {
  font-weight: var(--fw-bold);
  color: var(--color-ink-muted);
}

/* 変更前は控えめに、変更後を強調して差分を分かりやすくする */
.diff-row__before {
  color: var(--color-ink-subtle);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.diff-row__arrow {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

.diff-row__after {
  font-weight: var(--fw-bold);
  color: var(--color-primary-active);
  font-variant-numeric: tabular-nums;
}

/* ---------- 日付の編集フォーム ---------- */

.edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.edit-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.edit-form__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.edit-form__locked {
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
}

/* ---------- 削除・復元 ---------- */

/* 削除は副操作。塗りつぶしにせず、主操作より弱い見た目にする。 */
.btn--subtle {
  color: var(--color-ink-muted);
  background: transparent;
  border-color: transparent;
  font-weight: var(--fw-medium);
}

.btn--subtle:not(:disabled):active {
  color: var(--state-alert-fg);
  background: var(--state-alert-bg);
}

/* 主操作から離して置き、誤タップを防ぐ。編集と削除は横に並べる。 */
.order__secondary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.order__secondary .btn {
  flex: 1 1 auto;
  white-space: nowrap;
  padding-inline: var(--space-3);
}

/* 理由の選択肢（自由記載は設けない） */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.choice-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-comfortable);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-align: start;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.choice-list__item[aria-checked="true"] {
  color: var(--color-primary-active);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.choice-list__check {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  opacity: 0;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.choice-list__item[aria-checked="true"] .choice-list__check {
  opacity: 1;
}

/* 削除済み一覧（管理用の控えめな入口から開く） */
.modal__panel--wide {
  width: min(48rem, 100%);
}

.deleted-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 24rem;
  overflow-y: auto;
}

.deleted-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.deleted-item__main {
  flex: 1 1 16rem;
  min-width: 0;
}

.deleted-item__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
}

.deleted-item__meta {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

/* 補助メニューへの入口。主導線より弱く見せる。 */

/* ---------- Skeleton（読み込み中） ----------
   一覧に近い形を先に出し、画面が真っ白になる時間をなくす。 */

.skeleton {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.4s var(--ease-standard) infinite;
}

.skeleton-card {
  border-inline-start-color: var(--color-border);
}

.skeleton--title {
  width: 40%;
  height: 1.75rem;
}
.skeleton--meta {
  width: 60%;
  height: 1rem;
}
.skeleton--badge {
  width: 30%;
  height: 1.75rem;
  border-radius: var(--radius-pill);
}
.skeleton--button {
  width: 100%;
  height: var(--tap-primary);
  border-radius: var(--radius-md);
  margin-top: auto;
}

/* 主張しすぎない程度の明滅にとどめる */
@keyframes skeleton-pulse {
  50% {
    opacity: 0.55;
  }
}

/* ---------- SuccessOverlay（登録完了の確信を与える） ---------- */

.success-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: rgba(15, 32, 44, 0.45);
  animation: fade-in var(--duration-normal) var(--ease-standard);
}

.success-overlay.is-leaving {
  animation: fade-out var(--duration-normal) var(--ease-standard) forwards;
}

.success-overlay__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: min(24rem, 100%);
  padding: var(--space-7) var(--space-8);
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: pop-in var(--duration-normal) var(--ease-standard);
}

.success-overlay__mark {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--space-2);
  color: var(--color-ink-inverse);
  background: var(--state-done-border);
  border-radius: 50%;
}

.success-overlay__mark .icon {
  width: 2.5rem;
  height: 2.5rem;
  stroke-width: 2.5;
}

.success-overlay__title {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--state-done-fg);
}

.success-overlay__line {
  font-size: var(--fs-key);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* ---------- Modal（Charter⑩ Modal） ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: rgba(15, 32, 44, 0.55);
  animation: fade-in var(--duration-normal) var(--ease-standard);
}

.modal__panel {
  width: min(34rem, 100%);
  max-height: 85vh;
  padding: var(--space-6);
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: pop-in var(--duration-normal) var(--ease-standard);
}

/* 編集画面など、横幅を使って縦を抑えたいモーダル。
   ヘッダーとフッターは固定し、中央だけがスクロールする。 */
.modal__panel--full {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1200px, 90vw);
  max-height: 85vh;
  padding: 0;
  overflow: hidden;
}

.modal__panel--full .modal__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.modal__panel--full .modal__title {
  margin: 0;
  margin-inline-end: auto;
}

.modal__panel--full .modal__scroll {
  min-height: 0;
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  /* iPadでモーダル内を端まで振り切っても背面へ伝わらないようにする */
  overscroll-behavior: contain;
}

.modal__panel--full .modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.modal__panel--full .modal__footer .btn:last-child {
  margin-inline-start: auto;
}

/* 上段：誰の症例かと担当Dr */
.modal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.modal__meta-id {
  font-size: var(--fs-key);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
  font-variant-numeric: tabular-nums;
}

.modal__meta-site {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.modal__doctor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal__doctor-label {
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
}

.modal__doctor-current {
  font-size: var(--fs-caption);
  color: var(--state-ordered-fg);
}

/* 担当Drのボタン。文字を必ず中央にそろえる。 */
.doctor-choice {
  display: flex;
  gap: var(--space-2);
}

.doctor-choice .choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  line-height: 1;
  text-align: center;
}

.modal__foot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.modal__foot-note {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.modal__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-ink-strong);
}

.modal__body {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--color-ink);
}

.modal__note {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.modal__actions .btn {
  min-width: 9.5rem;
  flex: 1 1 auto;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
}

/* ---------- OfflineBar ---------- */

.offline-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--state-ordered-fg);
  background: var(--state-ordered-bg);
  border-bottom: 1px solid var(--state-ordered-border);
}

/* ---------- Toast（操作結果の通知） ---------- */

.toast-area {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(38rem, calc(100% - var(--space-8)));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  border: 1px solid;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: toast-in var(--duration-normal) var(--ease-standard);
}

.toast--success {
  color: var(--state-done-fg);
  background: var(--state-done-bg);
  border-color: var(--state-done-border);
}
.toast--error {
  color: var(--state-alert-fg);
  background: var(--state-alert-bg);
  border-color: var(--state-alert-border);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

/* ============================================================
   レスポンシブ
   基準：iPad横向き（1180×820 / 1366×1024）
   ============================================================ */

/* iPad縦向き・分割表示：操作エリアを下段へ回し、押しやすさを保つ */
@media (max-width: 60rem) {
  .order {
    grid-template-columns: minmax(0, 1fr);
  }
  .order__action {
    padding-inline-start: 0;
    padding-top: var(--space-4);
    border-inline-start: none;
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 40rem) {
  .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-nav__item {
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--fs-label);
  }
}