:root {
  color-scheme: light only;
  --paper: #F2F5F5;
  --surface: #FFFFFF;
  --sunken: #E7EDED;
  --raised: #FBFCFC;
  --ink: #16262C;
  --ink-soft: #4C6068;
  --ink-faint: #7C8E94;
  --rule: #CDD9DA;
  --rule-soft: #DEE7E7;
  --accent: #0D6E6B;
  --on-accent: #FFFFFF;
  --accent-soft: #DFEDEC;
  --warn: #A2571F;
  --warn-soft: #F5E8DC;
  --good: #3C7351;
  --good-soft: #E1EDE4;
  --bad: #9A3B34;
  --bad-soft: #F6E3E0;
  --shadow: 0 1px 2px rgba(22, 38, 44, 0.06), 0 8px 24px rgba(22, 38, 44, 0.06);

  --font-body: "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

button, select, input, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.muted { color: var(--ink-faint); }

.nowrap { white-space: nowrap; }

/*
 * 表のセル（`table.list td` / `table.plain td`）には効かない — あちらは自分で
 * font-size を持っており、クラス1つでは強さが足りない。セル側は `.cell--*` を使う
 */
.fs-72 { font-size: 0.72rem; }
.fs-76 { font-size: 0.76rem; }
.fs-78 { font-size: 0.78rem; }

[hidden] { display: none !important; }

/* ---------- app shell ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.25rem;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.seg {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

/* 詳細画面はクリニックの切替を描かない。枠線だけの点をヘッダーに残さない */
.seg:empty { display: none; }

.seg button {
  border: none;
  background: var(--surface);
  color: var(--ink-soft);
  padding: 0.3rem 0.9rem;
  cursor: pointer;
  font-size: 0.86rem;
}

.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

.duty { display: flex; align-items: center; gap: 0.4rem; }

/* 切り替えの側は「稼働中／離席中」としか出ないため、誰の状態かをここで示す
   （見ているだけの役割には『カウンセラー稼働中／離席中』のチップが出るので要らない） */
.duty__label {
  font-size: 0.84rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.topbar__spacer { flex: 1; }

.whoami {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.whoami b { color: var(--ink); font-weight: 700; }

.role {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.1em 0.4em;
}

.menu { position: relative; }

.menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.menu__toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }

.menu__toggle svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.menu__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 30;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 0.3rem 0;
}

.menu__who {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.9rem 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.84rem;
}

.menu__who .mono { font-size: 0.74rem; color: var(--ink-faint); word-break: break-all; }

#manual-link:empty { display: none; }

.menu__item {
  display: block;
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 0.87rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu__item:hover { background: var(--sunken); }

main { padding: 1.25rem 1.25rem 5rem; }

/* ---------- login ---------- */

.signin {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem 1.25rem;
}

.signin h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.signin p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 30rem;
  font-size: 0.9rem;
}

.signin .notice {
  background: var(--bad-soft);
  color: var(--bad);
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  font-size: 0.86rem;
  max-width: 30rem;
}

/* ---------- notices ---------- */

.banner {
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  font-size: 0.82rem;
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.blocked {
  font-size: 0.78rem;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 3px;
  padding: 0.5rem 0.7rem;
  line-height: 1.65;
}

/* ---------- list ---------- */

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.preset {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  color: var(--ink-soft);
}

.preset:hover { border-color: var(--accent); }

.preset[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.preset .n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--ink);
}

.preset[aria-pressed="true"] .n { color: var(--accent); }
.preset .n[data-zero="true"] { color: var(--ink-faint); }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  margin-bottom: 0.75rem;
}

.filter {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.filter > label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.filter select,
.filter input {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.32rem 0.5rem;
  font-size: 0.86rem;
  min-width: 8.5rem;
}

.filter input { min-width: 14rem; }

/* セレクトとテキスト欄は素の高さが違う（29 / 39）。同じ段で並べたときに箱の大きさを揃える */
.filter select,
.filter input { height: 2.2rem; box-sizing: border-box; }

/* 回数は数桁しか入らない */
.filter--count input { min-width: 0; width: 7rem; }

/* 入力と一致方法を1つの欄にして「〔AP13〕を含む」と読ませる */
.filter__pair { display: flex; gap: 0.35rem; }
.filter__pair input { flex: 1 1 auto; min-width: 0; }
.filter__pair select { flex: 0 0 auto; min-width: 0; }

.field--wide { flex: 1 1 20rem; }

.filters__spacer { flex: 1; }

.btn {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--ink);
  white-space: nowrap;
}

.btn:hover { border-color: var(--accent); color: var(--accent); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.btn--primary:hover { opacity: 0.88; color: var(--on-accent); border-color: var(--accent); }
.btn--ghost { background: transparent; }

/* 別タブへ開くリンク（マニュアル）。ボタンと同じ見た目・同じ当たり判定にそろえる */
a.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--end {
  background: var(--bad);
  border-color: var(--bad);
  color: var(--surface);
  font-weight: 700;
}

.btn--end:hover { opacity: 0.88; color: var(--surface); border-color: var(--bad); }

.resultline {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
  padding: 0 0.15rem 0.5rem;
}

.resultline b { color: var(--ink); font-family: var(--font-mono); }

/* 一覧はこのペインの中でスクロールさせる。ヘッダー行を貼り付けたまま保つため */
.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 17rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

table.list {
  width: 100%;
  border-collapse: collapse;
  min-width: 58rem;
}

table.list th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--sunken);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

table.list td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
  font-size: 0.87rem;
}

table.list tbody tr { cursor: pointer; }
/* いま架電すべき行。ホバーより前に置き、ホバー中は通常の行と同じ地色にする */
table.list tbody tr[data-urgent="true"] td { background: var(--warn-soft); }
table.list tbody tr[data-overdue="true"] td { background: var(--bad-soft); }
table.list tbody tr:hover td { background: var(--sunken); }
table.list tbody tr:last-child td { border-bottom: none; }

/* セルの文字サイズ。`table.list td` が font-size を持つので同じ強さで並べる */
table.list td.cell--slot { font-size: 0.8rem; }
table.list td.cell--phone { font-size: 0.82rem; }

table.list td.list__empty {
  padding: 2rem;
  text-align: center;
  color: var(--ink-faint);
}

td.when {
  border-left: 3px solid transparent;
  padding-left: 0.65rem;
}

tr[data-urgent="true"] td.when { border-left-color: var(--warn); }
tr[data-overdue="true"] td.when { border-left-color: var(--bad); }

.when__date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
}

.when__elapsed {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

tr[data-urgent="true"] .when__elapsed { color: var(--warn); font-weight: 700; }
tr[data-overdue="true"] .when__elapsed { color: var(--bad); }

.name { font-weight: 700; }

/* ---------- chips ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 2px;
  padding: 0.1rem 0.45rem;
  font-size: 0.76rem;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}

.chip--type {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  background: var(--sunken);
  color: var(--ink-soft);
  border-color: var(--rule);
}

.chip--type[data-type="immediate"] { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }

.chip[data-tone="idle"] { background: var(--sunken); color: var(--ink-soft); border-color: var(--rule); }
.chip[data-tone="wait"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.chip[data-tone="warn"] { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.chip[data-tone="good"] { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.chip[data-tone="bad"] { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); font-weight: 700; }
.chip[data-tone="end"] { background: transparent; color: var(--ink-faint); border-color: var(--rule); }

/* 詳細のパネル見出しに出す、いまのステータス。一覧のチップより一段大きくして、
   欄を触る前に目に入る大きさにする */
.chip--status { font-size: 0.88rem; font-weight: 700; padding: 0.15rem 0.65rem; }

/* ---------- detail ---------- */

.crumb {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.crumb--bottom {
  margin-top: 1.1rem;
  margin-bottom: 0;
}

.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  margin-bottom: 0.9rem;
}

.detail-head h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}

.detail-head .id {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
}

.detail-head__spacer { flex: 1 1 auto; }

/* 医師の画面。押すと番号をコピーする（電話アプリは起動させない） */
.detail-head__phone {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 0.9rem;
  align-items: start;
}

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

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

/* 医師の画面。1列で、読む幅を本文として無理のない範囲に抑える */
.stack--single { max-width: 44rem; }

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 0.5rem;
}

.panel__title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.panel__note { font-size: 0.76rem; color: var(--ink-faint); }

.kv {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.35rem 1rem;
  font-size: 0.87rem;
}

.kv dt { color: var(--ink-faint); font-size: 0.8rem; }
.kv dd { margin: 0; word-break: break-all; }

.kv--narrow { grid-template-columns: 6rem minmax(0, 1fr); }
.kv--mid { grid-template-columns: 7rem minmax(0, 1fr); }

.band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

.band__cell {
  background: var(--raised);
  padding: 0.6rem 0.8rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.band__cell[data-flag="true"] { background: var(--warn-soft); }

.band__label {
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.band__cell[data-flag="true"] .band__label { color: var(--warn); }

.band__value { font-weight: 700; font-size: 0.9rem; }
.band__detail { font-size: 0.82rem; color: var(--ink-soft); }

.qa {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  font-size: 0.87rem;
}

.qa dt { color: var(--ink-faint); font-size: 0.82rem; }
.qa dd { margin: 0; }

.empty {
  background: var(--sunken);
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 0.87rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.actions__note {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ---------- 対応・処方の入力欄 ---------- */

.rx {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.rx__label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.rx select {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.35rem 0.5rem;
  font-size: 0.87rem;
}

.rx__hint {
  font-size: 0.78rem;
  line-height: 1.6;
}

.rx__fixed {
  font-size: 0.87rem;
  padding: 0.35rem 0;
}

.rx__fixed { display: inline-flex; align-items: center; gap: 0.35rem; }

/* 語は aria-label と title が持つ */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.icon-btn:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.icon-btn[data-cleared="false"]:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.icon-btn:disabled { opacity: 0.5; cursor: default; }

.icon-btn svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.locked {
  background: var(--sunken);
  border-radius: 3px;
  padding: 0.7rem 0.85rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

/* ---------- timeline ---------- */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0 0.7rem;
  padding-bottom: 0.85rem;
  position: relative;
}

.tl:last-child { padding-bottom: 0; }

.tl__mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--surface);
  margin-top: 0.42rem;
}

.tl[data-done="true"] .tl__mark { border-color: var(--accent); background: var(--accent); }
.tl[data-done="warn"] .tl__mark { border-color: var(--warn); background: var(--warn); }

.tl::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1rem;
  bottom: -0.1rem;
  width: 1px;
  background: var(--rule);
}

.tl:last-child::before { display: none; }

.tl__body { display: flex; flex-direction: column; gap: 0.1rem; }
.tl__label { font-size: 0.84rem; }
.tl[data-done="false"] .tl__label { color: var(--ink-faint); }

.tl__time {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.tl__time[data-warn="true"] { color: var(--warn); }

/* ---------- users / masters ---------- */

.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.pagehead h1 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
}

.pagehead__spacer { flex: 1 1 auto; }

table.plain {
  width: 100%;
  border-collapse: collapse;
  /* 8列あるので狭い窓では横スクロールへ逃がす。詰めると「カウン／セラー」のように
     語の途中で折り返り、どの列の値なのか読めなくなる */
  min-width: 62rem;
}

table.plain th {
  text-align: left;
  background: var(--sunken);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

table.plain td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.87rem;
  vertical-align: middle;
}

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

/* セルの文字サイズ。`table.plain td` が font-size を持つので同じ強さで並べる */
table.plain td.cell--mail { font-size: 0.8rem; }
table.plain td.cell--stamp { font-size: 0.78rem; }

/* ---------- 診療歴（詳細のパネルの中） ---------- */

/* ユーザー管理（8列）の最小幅は要らない。パネルの幅に収める */
table.plain.history { min-width: 0; }
table.plain.history td { vertical-align: top; }

/* 日時と購入日は折り返さない（年月日が途中で切れると読めない） */
table.plain.history td.cell--stamp { white-space: nowrap; }

/* 処方は「薬剤 / プラン / 同時処方」が連なって長くなる。ほかの列を潰さずに折り返す */
table.plain.history td.history__rx { font-size: 0.82rem; word-break: break-word; }

table.plain.history a { color: var(--accent); }

/* 狭い画面では4列が収まらずページごと横にはみ出すので、1回の診療を1枚に縦へ積む。
   列の見出しは隠れるため、値だけでは読めない列（処方・購入）は語を前に出す */
@media (max-width: 46rem) {
  table.plain.history thead { display: none; }
  table.plain.history,
  table.plain.history tbody,
  table.plain.history tr,
  table.plain.history td { display: block; }
  table.plain.history tr {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  table.plain.history tbody tr:last-child { border-bottom: none; }
  table.plain.history td { border-bottom: none; padding: 0.1rem 0; }
  table.plain.history td[data-label]::before {
    content: attr(data-label);
    margin-right: 0.6rem;
    font-size: 0.75rem;
    color: var(--ink-faint);
  }
}

/* ---------- modal ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 26, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 40;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow);
  width: min(34rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.2rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.modal h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}

.modal__lede { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }

.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* 内部の識別子は出さない */
table.cart {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

table.cart th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-bottom: 1px solid var(--rule);
}

table.cart td {
  padding: 0.45rem 0.6rem 0.45rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}

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

/* 取り扱えない行・同じ商品を指している行。値そのものは正常に見えるため行の地色で示す。
   重複のほうが取り返しがつかないので、両方に当たるときは重複の色を残す */
table.cart tr[data-unresolved="true"] td { background: var(--warn-soft); }
table.cart tr[data-duplicate="true"] td { background: var(--bad-soft); }

.modal__note { font-size: 0.84rem; color: var(--ink-soft); margin: 0; }

.formgrid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.formgrid .field { width: 100%; }
.formgrid .field select,
/* チェックボックスとラジオは除く。含めるとボックスが欄幅まで伸び、隣のラベルが
   「な／い」のように1〜2文字で折り返る */
.formgrid .field input:not([type="checkbox"]):not([type="radio"]),
.formgrid .field textarea { width: 100%; }

.field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

/* 問診の詳細欄（`.qform__detail`）の見出しも同じ見え方にする。`.field` の直下ではないため
   セレクタを分けて持つ */
.field > label,
.qform__detail > label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field select,
.field textarea,
.field input {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.35rem 0.5rem;
  font-size: 0.87rem;
  max-width: 100%;
}

.field textarea { resize: vertical; }
.field .hint { font-size: 0.76rem; color: var(--ink-faint); }

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.checks label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.87rem;
  white-space: nowrap;
}

/* 問診の選択肢は「12シートおまとめセット（税別30,000円〜）」のように長い。
   横並びのままだと1行に1つしか入らず、どこで選択肢が切れているか読めない */
.checks--stack {
  flex-direction: column;
  gap: 0.3rem;
}

.checks--stack label { white-space: normal; }

/* 「ある」を選んだときだけ出す詳細。親の設問に属していることを罫線で示す */
.qform__detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.35rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--rule);
}

.qform__detail textarea { width: 100%; }

/* ---------- ビデオ診療（video.html） ---------- */

.video-page {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

/* 映像の地は明暗どちらのテーマでも黒。映像そのものの色に合わせる */
.video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0B1214;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video-stage__remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-stage__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  text-align: center;
  pointer-events: none;
}

.video-stage__center > * { pointer-events: auto; }

.video-stage__caption {
  margin: 0;
  color: #C9D6D8;
  font-size: 0.95rem;
}

.video-stage__self {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 22%;
  min-width: 7.5rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #22302F;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
}

.btn--large {
  padding: 0.6rem 1.6rem;
  font-size: 1rem;
}

.video-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
}

.video-controls__spacer { flex: 1 1 auto; }

/* 映像を隠さないよう右端に寄せる。狭い画面では映像の上に重なる */
.video-qa {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  width: min(26rem, 100%);
  overflow-y: auto;
  padding: 1rem;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow);
}

.video-qa__head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.pagehead .btn[aria-pressed="true"],
.video-controls .btn[aria-pressed="true"] {
  background: var(--warn-soft);
  border-color: var(--warn);
  color: var(--warn);
}

/* ---------- toast ---------- */

.toasts {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 50;
}

.toast {
  background: var(--ink);
  color: var(--paper);
  border-radius: 3px;
  padding: 0.6rem 0.9rem;
  font-size: 0.84rem;
  box-shadow: var(--shadow);
  max-width: 26rem;
  animation: rise 0.18s ease-out;
}

.toast[data-tone="bad"] { background: var(--bad); color: #fff; }

@keyframes rise {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- 狭い画面（スマートフォン） ---------- */

/*
 * 医師がスマートフォンで開く。触る画面（一覧・診療の詳細）が指で扱える形になるまでを
 * ここでまとめて上書きする。役割で分けない — 出す情報の差は `hasMinimalView` が決めていて、
 * 幅の話とは別。
 */
@media (max-width: 46rem) {
  main { padding: 0.75rem 0.75rem 4rem; }

  /* ヘッダーは折り返して伸ばす。メールアドレスは指で押す対象が無いので落とす */
  .topbar {
    height: auto;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
  }

  /* 医師のヘッダーは折り返さず1列に収める。名前はメニューの中にもあるので落とす */
  .topbar--single {
    flex-wrap: nowrap;
    height: 52px;
    gap: 0.6rem;
  }

  .topbar--single .whoami { display: none; }

  .topbar--single .wordmark { font-size: 0.95rem; }

  .topbar--single .duty .chip { white-space: nowrap; }

  .menu__toggle { width: 44px; height: 44px; }

  /* iOS は 16px 未満の入力欄で拡大する。拡大されると横位置が戻らない */
  .filter select,
  .filter input,
  .rx select,
  .field select,
  .field input,
  .field textarea {
    font-size: 16px;
  }

  .icon-btn { width: 2.5rem; height: 2.5rem; }
  .icon-btn svg { width: 1rem; height: 1rem; }

  /* 指で押せる高さ。押し間違いは架電の枠を1つ潰す */
  .btn,
  .preset,
  .seg button,
  .filter select,
  .filter input,
  .rx select,
  .field select {
    min-height: 44px;
  }

  .preset { align-items: center; }

  .filter select,
  .filter input,
  .field--wide { flex: 1 1 100%; min-width: 0; width: 100%; }

  .filter__pair select { flex: 0 0 auto; width: auto; }

  /*
   * 一覧は表をやめて1件1枚のカードにする。見出し行を貼り付けたままにできないので、
   * セルが `data-label` で自分の名前を出す。横スクロールの表は指では読めない。
   */
  .table-wrap {
    overflow: visible;
    max-height: none;
    background: none;
    border: none;
    border-radius: 0;
  }

  table.list { min-width: 0; display: block; }
  table.list thead { display: none; }
  table.list tbody { display: block; }

  table.list tbody tr {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 0.6rem 0.75rem;
  }

  table.list tbody tr + tr { margin-top: 0.5rem; }

  /* タップ後もホバーが残るので、カードでは地色を変えない */
  table.list tbody tr:hover td { background: none; }

  /* セルの地色と左線はカードでは見えないので、カードの地色と縁で示す */
  table.list tbody tr[data-urgent="true"] { background: var(--warn-soft); border-color: var(--warn); }
  table.list tbody tr[data-overdue="true"] { background: var(--bad-soft); border-color: var(--bad); }
  table.list tbody tr[data-urgent="true"] td { background: none; }

  table.list td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.6rem;
    padding: 0.15rem 0;
    border-bottom: none;
  }

  table.list td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 5.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
  }

  table.list td.name {
    order: -1;
    font-size: 1.05rem;
    padding-bottom: 0.3rem;
  }

  table.list td.name::before { content: none; }

  table.list td.when { border-left: none; padding-left: 0; }
  .when__elapsed { display: inline; }

  table.list td.list__empty { display: block; padding: 1.5rem; }

  /* 確認と入力は画面いっぱいで受ける。半端な余白は指の外し押しを増やす */
  .backdrop { padding: 0; align-items: flex-end; }

  /* 下端は親指の位置で、ボタンが画面の縁に付くと押しにくい。`100vh` は iOS の
     ツールバーの裏まで含むので、`dvh` で見えている高さに収める */
  .modal {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 1rem 0.9rem calc(2.25rem + env(safe-area-inset-bottom));
  }

  .modal__foot { justify-content: stretch; }
  .modal__foot .btn { flex: 1 1 40%; }

  .detail-head { padding: 0.75rem 0.85rem; gap: 0.5rem 0.75rem; }
  .detail-head h1 { font-size: 1.2rem; }
  /* 電話番号は指で押してコピーする。押せる幅と高さを持たせる */
  .detail-head__phone { font-size: 1.15rem; padding: 0.35rem 0; }
  .panel { padding: 0.85rem 0.9rem 1rem; }
  .actions .btn { flex: 1 1 auto; }

  /* 処方の3欄は1列にする（ラベル・薬剤・プランを横に並べる幅が無い） */
  .rx { grid-template-columns: minmax(0, 1fr); }
  .rx__label { padding-top: 0.4rem; }

  /* 見出しと値を縦に積む。8rem の見出し列を残すと値が2文字ずつ折り返す */
  .kv,
  .kv--narrow,
  .kv--mid { grid-template-columns: minmax(0, 1fr); gap: 0 0.25rem; }
  .kv dd { margin-bottom: 0.4rem; }
  .qa { grid-template-columns: minmax(0, 1fr); gap: 0 0.25rem; }
  .qa dd { margin-bottom: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* ————————————————
   通話枠の運用
   ———————————————— */

.slotbar__date {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ボタンと日付入力は素の高さが違う。前日・翌日の矢印と日付の箱を同じ高さに揃える */
.slotbar__date input,
.slotbar__date .btn { height: 2.4rem; }

/* 対応時間は絞り込み条件とは別の箱。日付を変えるのと同じ気軽さで
   営業時間を触らせない（`.filters` の隣に並べない） */
.hours { margin-bottom: 0.75rem; }

.hours__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.35rem;
}

.hours__row input {
  width: 4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.capacity-input {
  width: 4.5rem;
  padding: 0.3rem 0.4rem;
  font-variant-numeric: tabular-nums;
}

/* まとめて変更は最初から出したままにして、使えないあいだはグレーアウトする
   （選択したときだけ現れる形だと、この操作があること自体に気づけない）。
   画面下に貼り付けて、48行のどこまでスクロールしても同じ場所を押せるようにする */
.slotsel {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding: 0.7rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
}

.slotsel[data-idle="true"] { color: var(--ink-faint); }
.slotsel[data-idle="true"] .slotsel__count b { color: var(--ink-faint); }
.slotsel__count { font-size: 0.9rem; }
.slotsel__label { font-size: 0.86rem; }

table.list--slots { table-layout: auto; }

/* 時刻は的でもある。セル全体を押せる大きさにする
   （チェックボックスの四角だけを48回狙わせない）。
   左は他の列より広く取る — 一番左の要素が窓の縁に貼り付くと窮屈に見える */
table.list--slots td.slot__when,
table.list--slots th.slot__when { padding: 0; width: 9.5rem; }

.slotpick {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.9rem 0.55rem 1.5rem;
  cursor: pointer;
  user-select: none;
}

.slotpick input { width: 1.05rem; height: 1.05rem; cursor: pointer; }

/* 時刻を沈めない。ここが行を探すときの手がかりで、薄くすると読むのに目を凝らす */
.slotpick__time {
  font-variant-numeric: tabular-nums;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}

/* 行のどこを押しても選べる（`toggleRow`）。ホバーと cursor は table.list が既に持つ */

/* 1時間を2行のまとまりに見せる。48行が等間隔でのっぺり並ぶと、いま何時の行を
   見ているのかを毎回数えることになる。`:00` と `:30` のあいだの罫線を消し、
   時間の変わり目にだけ線を残す */
table.list--slots tbody tr[data-hour="true"] td { border-bottom-color: transparent; }
table.list--slots tbody tr[data-hour="false"] td { border-bottom: 1px solid var(--rule); }

/* 閉じた枠（定員0）は行ごと沈める。空きのある枠から目を離させない */
table.list--slots tr[data-closed="true"] td { opacity: 0.55; }

/* 列を内容ぶんに詰め、余りは最後の列に持たせる。
   定員列が伸びると、定員と予約のあいだに視線が飛ぶ幅の空白ができる */
table.list--slots th,
table.list--slots td { white-space: nowrap; }
table.list--slots th:nth-child(2),
table.list--slots td:nth-child(2) { width: 9rem; }
table.list--slots th:nth-child(3),
table.list--slots td:nth-child(3) { width: 5rem; }
table.list--slots th:last-child,
table.list--slots td:last-child { width: 100%; }

/* ---------- 予約日時の変更 ---------- */

/* 1日48枠を指で押せる大きさで並べる。時刻を探すので、横に詰めて縦に短くする */
.timegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: 0.4rem;
  max-height: 45vh;
  overflow-y: auto;
}

.timegrid__slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.3rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--raised);
  cursor: pointer;
  min-height: 44px;
}

.timegrid__slot input { position: absolute; opacity: 0; pointer-events: none; }
.timegrid__slot:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.timegrid__slot:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 埋まった枠・いまの枠は押せない。空いている枠から目を離させない */
.timegrid__slot[data-full="true"] { opacity: 0.45; cursor: not-allowed; }
.timegrid__slot[data-current="true"] { border-style: dashed; }

.timegrid__time {
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 600;
}

.timegrid__room { font-size: 0.72rem; color: var(--ink-faint); }