/* giko 技工依頼 入力画面（v2-B）
   配色はボード・集荷ページと共通（白基調の明るい管理画面）。
   ベージュ／アイボリー基調と暖色の多用は「くすんで暗い」ため使わない。 */
:root{
  --bg:#F7F9FA; --card:#FFFFFF; --ink:#263238; --sub:#667085; --faint:#98A2B3; --line:#E4E7EC;
  /* ⚠️ 2026-08-01 追加。既に4箇所（.closebtn / .today.wide / .todayrow / .boardlink）で
     使われていたのに定義が無く、背景が透明・行の区切り線が消えていた。値はボード・集荷と同じ */
  --line-soft:#F1F3F5;
  --key:#059669; --key-d:#047857; --key-wash:#ECFDF5;
  --warm:#F79009; --warm-wash:#FFF8EB; --warm-deep:#B54708;
  --err:#D92D20; --err-wash:#FEF3F2; --ok:#059669;
  --r:14px;
  /* 状態のチップ（検索結果）。ボード・集荷ページと同じ値＝3画面で同じ状態は同じ色に見える */
  --st-a-bg:#FEF3C7; --st-a-fg:#92400E;   /* 受付待ち＝黄 */
  --st-r-bg:#E0F2FE; --st-r-fg:#0369A1;   /* 受付済み＝水色（3F技工室が現物を受け取った） */
  --st-m-bg:#DBEAFE; --st-m-fg:#1D4ED8;   /* 製作中  ＝青 */
  --st-o-bg:#EDE9FE; --st-o-fg:#6D28D9;   /* 外注中  ＝紫 */
  --st-d-bg:#D1FAE5; --st-d-fg:#047857;   /* 完成    ＝緑 */
}
*{box-sizing:border-box}
/* ⚠️ 消してはいけない規則。
   HTMLの hidden 属性は UAスタイルの [hidden]{display:none} で効くが、
   .cam{display:flex} のような作者側の指定の方が詳細度で勝つため、hidden が無効化される。
   （2026-07-30 実機不具合：hidden 指定のカメラ画面が常時最前面に出てPIN画面を覆い、
     「やめる」を押しても hidden=true にするだけなので閉じられなかった）
   画面の出し分けは全て hidden 属性で行うので、ここで必ず勝たせる。 */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2{margin:0}
input,textarea,select,button{font:inherit;color:inherit}
input[type=text],input[type=date],input[type=search],input[type=password],textarea{
  width:100%; padding:12px; border:1px solid var(--line); border-radius:10px;
  background:#fff; -webkit-appearance:none;
}
input:focus,textarea:focus{outline:2px solid var(--key); outline-offset:1px; border-color:transparent}
label{display:block; margin:14px 0 6px; font-size:14px; font-weight:600; color:var(--sub)}
label.sm{font-size:13px; font-weight:500}
.hint{margin:8px 0 0; font-size:13px; color:var(--sub)}
.hint.sm{font-size:12px}
.err{color:var(--err); font-size:14px; min-height:1.4em; margin:8px 0 0}
.req{color:var(--err); font-size:12px; font-weight:700; margin-left:6px}
.opt{margin-left:8px; font-size:12px; font-weight:500; color:var(--sub)}

/* ---- 不具合の知らせ（黙って失敗しないため）---- */
.alert{position:fixed; top:0; left:0; right:0; z-index:80; display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--err-wash); color:#912018; border-bottom:2px solid var(--err); font-size:14px; line-height:1.5}
.alert button{flex:0 0 auto; background:none; border:0; font-size:20px; color:#912018; padding:0 4px; line-height:1}
.link{display:block; width:100%; margin-top:10px; padding:10px; background:none; border:0;
  color:var(--key-d); font-size:15px; text-decoration:underline}

/* ---- PIN ---- */
.gate{position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50}
.gate-card{width:100%; max-width:340px; background:#fff; border-radius:var(--r); padding:28px 22px; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.07)}
.gate-icon{font-size:44px}
.gate h1{font-size:20px; margin:6px 0 10px}
.gate-note{font-size:14px; color:var(--sub); margin:0 0 18px}
.gate input{text-align:center; letter-spacing:.5em; font-size:26px; padding:14px}
.gate-hint{font-size:12px; color:var(--sub); margin:14px 0 0}

/* ---- 共通 ---- */
.bar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  background:var(--key); color:#fff; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top))}
.bar-title{font-weight:700}
.floor{background:rgba(255,255,255,.18); color:#fff; border:0; border-radius:999px; padding:6px 14px; font-size:14px}
.card{background:var(--card); margin:12px; padding:16px; border-radius:var(--r); box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card h2{font-size:16px; display:flex; align-items:center; margin-bottom:4px}
.num{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-right:8px;
  background:var(--key); color:#fff; border-radius:50%; font-size:13px}
.sub{margin:14px 0 6px; font-size:13px; font-weight:600; color:var(--sub)}
.row{display:flex; gap:12px}
.row>div{flex:1; min-width:0}

button{cursor:pointer}
.primary{width:100%; padding:16px; border:0; border-radius:12px; background:var(--key); color:#fff; font-size:17px; font-weight:700}
.primary:disabled{background:#b8c2cb}
.submit{margin:4px 12px 8px; width:calc(100% - 24px)}
.ghost{background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 14px}
.blocker{margin:0 16px; color:var(--err); font-size:14px; text-align:center}
.ver{text-align:center; font-size:11px; color:#aab3bc; margin:6px 0 20px}

/* ---- チップ ---- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-block; padding:10px 16px; min-height:44px; line-height:24px;
  border:1px solid var(--line); border-radius:999px; background:#fff; font-size:15px; user-select:none}
.chip.on{background:var(--key); border-color:var(--key); color:#fff; font-weight:700}

/* ---- 撮影 ---- */
.shot{width:100%; padding:18px; border:2px dashed var(--key); border-radius:12px; background:var(--key-wash);
  color:var(--key-d); font-size:17px; font-weight:700}
.ocr-status{margin-top:12px; padding:12px; border-radius:10px; background:var(--key-wash); font-size:14px}
.ocr-status.ng{background:var(--err-wash); color:var(--err)}
.spin{display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px;
  border:2px solid #A7F3D0; border-top-color:var(--key); border-radius:50%; animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.photo{width:100%; padding:14px; border:1px dashed var(--line); border-radius:10px; background:#F9FAFB; color:var(--sub)}
#photoPreview{display:block; width:100%; margin-top:10px; border-radius:10px}

/* ---- 種別 ---- */
.guess{border:2px solid var(--warm); border-radius:12px; padding:14px; margin-bottom:12px; background:var(--warm-wash)}
.guess-lead{margin:0 0 8px; font-size:13px; color:var(--sub)}
.guess-btn{width:100%; padding:16px; border:0; border-radius:10px; background:var(--warm); color:#fff; font-size:19px; font-weight:700}
.guess-alt{display:block; width:100%; margin-top:8px; background:none; border:0; color:var(--sub); font-size:14px; text-decoration:underline}
.chosen{display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:2px solid var(--key); border-radius:12px; padding:14px; background:var(--key-wash)}
.chosen-name{font-size:19px; font-weight:700}
.chosen-meta{font-size:12px; color:var(--sub)}
/* 副題の中の依頼先だけタップできる。文字のまま（下線）にして情報量を増やさない。
   タップ領域は44pxに満たないが、**副題の一部**なので大きくすると種別名より目立つ＝
   誤タップより「押せると気づけない」ほうが害が小さいと判断し、下線＋✏で示す。 */
.vendor-pick{border:0; background:none; padding:0; font:inherit; color:var(--key-d);
  text-decoration:underline; text-underline-offset:2px}
.vendor-pick.changed{color:var(--warm); font-weight:700}
/* 依頼先の選択チップは種別カードのすぐ下に出す（カードとの間を詰めて関係を見せる） */
#vendorPick{margin-top:8px}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.grid button{padding:14px 10px; min-height:52px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:15px}
details{margin-top:14px; border-top:1px solid var(--line); padding-top:10px}
summary{font-size:14px; color:var(--key-d); font-weight:600; padding:6px 0}
#typeSearch{margin:8px 0}
.cat{margin-top:10px}
.cat-name{font-size:13px; font-weight:700; color:var(--sub); margin:10px 0 6px}
.cat .grid button{font-size:14px; min-height:48px}

/* ---- 歯式（十字配置 / Zsigmondy式）----
   上下2段・中央の縦線で左右を分ける、歯科で見慣れた並び。
   1歯の横幅は狭くなるが、高さ(48px)で押しやすさを稼ぎ、選択内容は図の下にテキストでも出す。 */
.teeth{margin-top:10px; border:1px solid var(--line); border-radius:10px; padding:6px 4px; background:#FFFFFF}
.teeth-head,.teeth-foot{display:flex; justify-content:space-between; padding:0 6px; font-size:11px; color:var(--sub)}
.arch{display:flex; align-items:stretch}
/* 上下の境界線。:first-of-type は .teeth-head(div) に取られるので隣接セレクタで指定する */
.arch + .arch{border-top:2px solid #98A2B3}
.side{display:flex; gap:2px; flex:1 1 0; min-width:0; padding:4px 2px}
.side:first-child{border-right:2px solid #98A2B3}
.tooth{flex:1 1 0; min-width:0; height:48px; padding:0; border:1px solid var(--line); border-radius:6px;
  background:#fff; font-size:13px; color:var(--ink)}
.tooth.w8{background:#F2F4F7}
.tooth.on{background:var(--key); border-color:var(--key); color:#fff; font-weight:700}
.tooth.auto{background:#6EE7B7; border-color:#6EE7B7; color:#065F46}
.wisdom{display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:13px; font-weight:500; color:var(--sub)}
.wisdom input{width:20px; height:20px}
/* ===== 直近の依頼から引き継ぐカード（2026-08-01）=====
   診察番号が決まってから静かに出る。出なくても入力は普通にできる（ブロックしない） */
.prevcard{margin:14px 0 0; padding:12px; border:1px solid var(--line); border-left:4px solid var(--key);
  border-radius:10px; background:var(--key-wash)}
.prev-head{font-size:13.5px; font-weight:700; color:#065F46; line-height:1.6}
.prev-lead{margin-top:10px; font-size:12px; color:var(--sub); font-weight:600}
.prev-steps{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap}
.prev-step{flex:1 1 0; min-width:88px; padding:9px 4px; border:1px solid var(--line); border-radius:9px;
  background:#fff; font-size:12.5px; font-weight:700; color:var(--ink); touch-action:manipulation}
.prev-step.rec{background:var(--key); border-color:var(--key); color:#fff}   /* 1つ先＝既定の提案 */
.prev-step.past{opacity:.45}                                                 /* 前の工程。押せる */
.prev-acts{display:flex; gap:6px; margin-top:8px}
.prev-act{flex:1 1 0; padding:9px 4px; border:1px solid var(--line); border-radius:9px; background:#fff;
  font-size:12.5px; font-weight:600; color:var(--sub); touch-action:manipulation}
.prev-note{margin:8px 0 0; font-size:12px; color:var(--warm-deep)}
@media (max-width:430px){ .prev-step{min-width:0; font-size:11px; padding:9px 2px} }

/* ===== 義歯の歯式ブラシ（2026-08-01）=====
   クラスプ4種の色は既存パレットの範囲で作る。ブラシボタン自体が凡例を兼ねる。 */
:root{
  --cl-akers:#1D4ED8;   /* エーカース＝青 */
  --cl-twin:#B54708;    /* 双子鉤    ＝橙（既存 --warm-deep と同値） */
  --cl-combi:#6D28D9;   /* コンビ    ＝紫（ボードの外注中と同値） */
  --cl-wire:#047857;    /* 線鉤      ＝緑（ボードの完成と同値） */
  --cl-other:#98A2B3;   /* 4種に無い値（旧「ローチ」等）＝灰 */
}
.dline{margin:0 0 10px; padding:10px 12px; border-radius:10px; background:var(--key-wash);
  border:1px solid #A7F3D0; font-size:14px; font-weight:700; color:#065F46; line-height:1.6}
.dline.empty{background:var(--line-soft); border-color:var(--line); color:var(--sub); font-weight:500}
.brushrow{display:flex; gap:6px; margin:0 0 8px; flex-wrap:wrap}
.brush-btn{flex:1 1 0; min-width:68px; padding:9px 6px; border:1px solid var(--line); border-radius:10px;
  background:#fff; font-size:13px; font-weight:700; color:var(--sub); touch-action:manipulation}
.brush-btn.on{background:var(--ink); border-color:var(--ink); color:#fff}
.brush-btn.b-akers.on{background:var(--cl-akers); border-color:var(--cl-akers)}
.brush-btn.b-twin.on{background:var(--cl-twin); border-color:var(--cl-twin)}
.brush-btn.b-combi.on{background:var(--cl-combi); border-color:var(--cl-combi)}
.brush-btn.b-wire.on{background:var(--cl-wire); border-color:var(--cl-wire)}
/* 狭い画面では5つを1行に収める（折り返すと最後の1つだけ横いっぱいに伸びて不揃いになる）。
   iPad(768px以上)は上の指定のまま＝1つ112px */
@media (max-width:430px){
  .brush-btn{min-width:0; padding:9px 2px; font-size:11px; letter-spacing:-.02em}
}
.brushhint{margin:0 0 8px; font-size:12px; color:var(--sub); line-height:1.6}
.brushhint span{display:block}
/* ⚠️ なぞって範囲選択するため、歯のグリッドだけスクロールを止める。
   義歯モード（.brushable）のときだけ。他の種別・画面のスクロールには影響させない。 */
.teeth.brushable .arch{touch-action:none}
.tooth.anchor{outline:3px solid var(--warm); outline-offset:-3px}
.tooth.pending{outline:3px solid var(--cl-twin); outline-offset:-3px}
.tooth.dim{opacity:.3}
/* クラスプのマーカー（歯の下辺の太線）。欠損の塗り（.on）と同時に出ても見分けられるようにする */
.tooth.cl-akers,.tooth.cl-twin,.tooth.cl-combi,.tooth.cl-wire,.tooth.cl-other{
  box-shadow:inset 0 -6px 0 0 currentColor}
.tooth.cl-akers{color:var(--cl-akers)}
.tooth.cl-twin{color:var(--cl-twin)}
.tooth.cl-combi{color:var(--cl-combi)}
.tooth.cl-wire{color:var(--cl-wire)}
.tooth.cl-other{color:var(--cl-other)}
.tooth.on.cl-akers,.tooth.on.cl-twin,.tooth.on.cl-combi,.tooth.on.cl-wire,.tooth.on.cl-other{
  box-shadow:inset 0 -6px 0 0 currentColor, inset 0 0 0 2px #fff}
/* 双子鉤は2歯を1個として読ませる。向かい合う角を落として1つの枠に見せる */
.tooth.tw-a{border-top-right-radius:0; border-bottom-right-radius:0; border-right-width:0}
.tooth.tw-b{border-top-left-radius:0; border-bottom-left-radius:0}
.tooth.tw-a,.tooth.tw-b{border-color:var(--cl-twin); border-width:2px}
/* 置いたクラスプの一覧（確認と削除だけ。入力は歯式図で行う） */
.claspsum{display:flex; flex-wrap:wrap; gap:8px}
.claspsum .empty{font-size:13px; color:var(--sub)}
.claspchip{display:inline-flex; align-items:center; gap:6px; padding:6px 6px 6px 10px;
  border:1.5px solid currentColor; border-radius:999px; font-size:13px; font-weight:700; background:#fff}
.claspchip.cl-akers{color:var(--cl-akers)}
.claspchip.cl-twin{color:var(--cl-twin)}
.claspchip.cl-combi{color:var(--cl-combi)}
.claspchip.cl-wire{color:var(--cl-wire)}
.claspchip.cl-other{color:var(--cl-other)}
.claspdel{border:0; background:var(--line-soft); color:var(--sub); border-radius:50%;
  width:22px; height:22px; font-size:14px; line-height:1; font-family:inherit; touch-action:manipulation}
/* バーのセグメント（歯に紐づかない独立項目） */
.segrow{display:flex; gap:6px}
.segment-btn{flex:1 1 0; padding:11px 6px; border:1px solid var(--line); border-radius:10px;
  background:#fff; font-size:14px; font-weight:600; color:var(--sub); touch-action:manipulation}
.segment-btn.on{background:var(--key); border-color:var(--key); color:#fff}

.teeth-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.teeth-actions button{flex:1; min-width:110px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:14px}
.part-out{margin:12px 0 0; padding:10px 12px; background:var(--key-wash); border-radius:10px; font-weight:700}
.part-out.empty{background:#F2F4F7; color:var(--sub); font-weight:400}
.warn{margin:8px 0 0; padding:10px 12px; background:#fdf6ec; border-left:4px solid var(--warm); border-radius:6px; font-size:14px}

/* ---- クラスプ（歯式＋種類の繰り返し）---- */
.pairs{display:flex; flex-direction:column; gap:8px}
.pair{border:1px solid var(--line); border-radius:10px; padding:10px; background:#FFFFFF}
.pair-head{display:flex; align-items:center; gap:8px}
.pair-tooth{flex:1; min-height:44px; border:1px solid var(--key); border-radius:8px; background:#fff;
  color:var(--key-d); font-size:16px; font-weight:700}
.pair-tooth.empty{border-style:dashed; color:var(--sub); font-weight:400}
.pair-del{flex:0 0 auto; width:44px; height:44px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--err); font-size:18px}
.pair-body{margin-top:8px}
.pair .teeth{margin-top:8px}
.pair .tooth{height:38px; font-size:12px}
.pair-add{width:100%; margin-top:10px; padding:12px; border:1px dashed var(--key); border-radius:10px;
  background:var(--key-wash); color:var(--key-d); font-size:15px; font-weight:600}

/* ---- 追加項目 ---- */
.carried{margin-bottom:12px; padding:10px 12px; background:var(--key-wash); border-radius:10px; font-size:13px; color:var(--key-d)}
.field{margin-top:14px}
.field-label{font-size:14px; font-weight:600; color:var(--sub); margin-bottom:6px}
.field-note{font-size:12px; color:var(--sub); margin:4px 0 0}

/* ---- 完了 ---- */
.done{position:fixed; inset:0; background:rgba(28,36,48,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:40}
.done-card{width:100%; max-width:360px; background:#fff; border-radius:18px; padding:24px; text-align:center}
.done-lead{margin:0; font-size:18px; font-weight:700; color:var(--ok)}
.tagwrap{margin:16px 0; padding:14px; border:2px dashed var(--warm); border-radius:14px; background:var(--warm-wash)}
.tag-note{margin:0; font-size:13px; color:var(--sub)}
.tag{font-size:72px; line-height:1.1; font-weight:800; color:var(--warm)}
.done-who{margin:8px 0 0; font-size:15px; font-weight:600}
.done-vendor{margin:4px 0 6px; font-size:14px; color:var(--sub); white-space:pre-line}
.done-time{margin:0 0 16px; font-size:11px; color:#aab3bc}
/* 待っている間は文字タグの位置に読み込み表示を置く（偽の進捗は出さない。値はサーバーが決めた後に入る）*/
.tag-wait{display:inline-block; width:44px; height:44px; margin:12px 0;
  border:5px solid #FEDF89; border-top-color:var(--warm); border-radius:50%; animation:sp .9s linear infinite}

/* ---- カメラ ---- */
.cam{position:fixed; inset:0; background:#000; z-index:60; display:flex; flex-direction:column}
#camVideo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cam-guide{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none}
.cam-frame{width:88%; aspect-ratio:4/3; border:3px solid #fff; border-radius:12px; box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.cam-help{position:absolute; left:0; right:0; bottom:120px; margin:0; text-align:center; color:#fff; font-size:14px; text-shadow:0 1px 3px #000}
.cam-bar{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px calc(24px + env(safe-area-inset-bottom))}
.cam-bar .ghost{background:rgba(255,255,255,.15); border:0; color:#fff}
.cam-spacer{width:86px}
.shutter{width:72px; height:72px; border-radius:50%; background:#fff; border:5px solid rgba(255,255,255,.4)}

/* ---- トースト ---- */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:#1c2430; color:#fff; padding:12px 20px; border-radius:999px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:70; max-width:88vw; text-align:center}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

@media (min-width:640px){
  main{max-width:640px; margin:0 auto}
  .grid{grid-template-columns:repeat(3,1fr)}
}
/* 320px級の狭い端末では、歯式の1歯が30px前後まで痩せるのでカードの余白を削って稼ぐ
   （それでも34px前後。36pxを満たせるのは375px以上） */
@media (max-width:374px){
  .card{margin:12px 8px; padding:14px 8px}
  .quad-row{gap:2px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* 納期の警告（エラーではない。そのまま登録できる）。控えめな注意色にとどめる */
.leadwarn{margin:6px 0 0; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:700;
  background:#FFF8EB; color:#B54708; border:1px solid #FEDF89; line-height:1.6}

/* 押した瞬間の反応（二重送信の防止も兼ねる）。OCRの読み取り中も同じ扱いにする */
button:active:not(:disabled){ transform:scale(.985) }
button.busy, button:disabled{ opacity:.6; cursor:default }
@media (prefers-reduced-motion:reduce){ button:active:not(:disabled){ transform:none } }

/* ===== 本日の登録（閲覧のみ）===== */
.bar .today{background:rgba(255,255,255,.18); border:0; color:#fff; border-radius:9px; padding:8px 12px;
  font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; margin-left:auto; line-height:1.3}
.today.wide{width:100%; margin:0 0 10px; background:var(--line-soft); color:var(--ink); padding:13px}
.sheetmask{position:fixed; inset:0; background:rgba(38,50,56,.45); display:flex; align-items:flex-end;
  justify-content:center; z-index:30}
.sheetbox{background:#fff; width:100%; max-width:560px; max-height:86vh; border-radius:18px 18px 0 0;
  display:flex; flex-direction:column}
.sheethead{display:flex; align-items:center; gap:10px; padding:16px 18px 10px; border-bottom:1px solid var(--line)}
.sheethead b{font-size:17px}
.closebtn{margin-left:auto; border:0; background:var(--line-soft); border-radius:9px; width:36px; height:36px;
  font-size:19px; cursor:pointer; font-family:inherit}
.todaylist{overflow:auto; padding:8px 14px 4px}
.todayrow{display:flex; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line-soft); align-items:baseline}
.todayrow:last-child{border-bottom:0}
.todayrow .at{font-size:13px; color:var(--sub); font-variant-numeric:tabular-nums; flex:none; width:44px}
.todayrow .who{font-size:15px; font-weight:700}
.todayrow .meta{font-size:12.5px; color:var(--sub); margin-top:2px}
.todayrow .tg{font-size:12px; font-weight:800; border:1.5px solid #94A3B8; border-radius:6px; padding:1px 6px;
  margin-left:6px; color:#0F172A}
/* ===== 取消（論理削除。行は消さずに残す）===== */
.todayrow .body{flex:1; min-width:0}
/* 取消ボタンは受付待ちの行だけ。誤タップ防止に控えめな見た目＋確認ダイアログ */
.cxbtn{flex:none; align-self:center; border:1px solid var(--line); background:#fff; color:var(--sub);
  border-radius:9px; padding:8px 12px; font-size:13px; font-weight:700; font-family:inherit;
  cursor:pointer; touch-action:manipulation}
.cxbtn:disabled{opacity:.5}
/* 取り消した行＝打ち消し線で残す（消すと「登録できていないのでは」と不安になるため） */
.todayrow.canceled .who,.todayrow.canceled .meta{text-decoration:line-through; color:var(--faint)}
.todayrow.canceled .tg{border-color:var(--line); color:var(--faint)}
/* 「取消」の札そのものには打ち消し線を掛けない（inline-block にすると親の線が及ばない） */
.todayrow .cx{display:inline-block; margin-left:6px; font-size:12px; font-weight:800; color:var(--faint);
  background:var(--line); border-radius:6px; padding:1px 6px; text-decoration:none}
.todayempty{padding:26px 4px; text-align:center; color:var(--sub); font-size:14px}

/* ===== 診察番号での検索（閲覧のみ。結果は上のモーダルに出す）===== */
/* ヘッダーの「本日の登録」の隣。数字を入れて🔍で実行する */
.searchbox{display:flex; align-items:center; gap:4px; margin-left:8px}
.searchbox input{width:96px; padding:7px 9px; border:0; border-radius:9px; background:rgba(255,255,255,.92);
  font-size:13px; color:var(--ink); text-align:center; font-variant-numeric:tabular-nums}
.searchbox input::placeholder{color:var(--faint); font-size:12px}
.searchbox input:focus{outline:2px solid #fff; outline-offset:1px}
.searchbox button{background:rgba(255,255,255,.18); border:0; color:#fff; border-radius:9px;
  padding:7px 10px; font-size:14px; line-height:1.3; font-family:inherit}
/* 検索欄を足した分、狭い画面ではヘッダーが1行に収まらない。
   潰し合って文字が折り返すより、素直に2段にする（iPad 768px以上は1行のまま） */
@media (max-width:430px){
  .bar{flex-wrap:wrap; row-gap:8px}
  .bar .today{margin-left:0; white-space:nowrap}
  .searchbox{margin-left:auto}
  .searchbox input{width:88px}
}
.hitrow{padding:12px 4px; border-bottom:1px solid var(--line)}
.hitrow:last-of-type{border-bottom:0}
.hithead{display:flex; align-items:center; flex-wrap:wrap; gap:7px}
.hithead b{font-size:15px}
.hitrow .meta{font-size:12.5px; color:var(--sub); margin-top:5px}
.hitrow .dates{font-size:12.5px; color:var(--ink); margin-top:3px; font-variant-numeric:tabular-nums}
.hitrow .tg{font-size:12px; font-weight:800; border:1.5px solid #94A3B8; border-radius:6px; padding:1px 6px;
  color:#0F172A}
/* 完成の行だけに出す納品日。この画面の主目的なので状態の隣で目立たせる */
.hitrow .deliv{font-size:12.5px; font-weight:700; color:var(--st-d-fg); background:var(--st-d-bg);
  border-radius:7px; padding:2px 8px; font-variant-numeric:tabular-nums}
.hitmore{padding:12px 4px 16px; text-align:center; color:var(--sub); font-size:12.5px}
/* 状態のチップ。色はボード・集荷ページと同じ（3画面で同じ状態は同じ色） */
.st{display:inline-block; font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:7px; white-space:nowrap}
.st.a{background:var(--st-a-bg); color:var(--st-a-fg)}
.st.r{background:var(--st-r-bg); color:var(--st-r-fg)}
.st.m{background:var(--st-m-bg); color:var(--st-m-fg)}
.st.o{background:var(--st-o-bg); color:var(--st-o-fg)}
.st.d{background:var(--st-d-bg); color:var(--st-d-fg)}
.st.s{background:var(--line); color:var(--sub)}
.st.x{background:var(--line); color:var(--faint); text-decoration:line-through}
.sheetfoot{padding:10px 18px 18px; border-top:1px solid var(--line)}
.boardlink{display:block; text-align:center; padding:12px; border-radius:10px; background:var(--line-soft);
  color:var(--ink); text-decoration:none; font-weight:700; font-size:14px}