/* 色と型は在宅薬歴の「ソラミチ寄せテーマ」に合わせる（明るい画面のみ・ダークモードの上書きはしない）。
   赤は「止まれ」・誤り・緊急のときだけ。スマホ作業用のレイアウト（スキャン欄・カメラ・数量・薬カード）はそのまま。 */
:root { color-scheme:light;
  --acc:#0E9BAA; --acc-x:#0A7A86; --pale:#E9F6F8; --pale-2:#DFF1F4; --bd:#BFE0E5; --rule:#D8E6E9; --wk:#5B6B70; --alert-bg:#FBE3E3; --alert-ink:#A32020;
  --bg:#F3F7F8; --surface:#fff; --ink:#1C1C1E; --muted:var(--wk); --line:var(--rule); --brand:var(--acc); --brand-x:var(--acc-x); --on-brand:#fff;
  --green:#1C7A38; --green-bg:#E9F7EE; --green-bd:#B7DFC5; --yellow:#8A4B00; --yellow-bg:#FFF3E4; --yellow-bd:#E7C79E;
  --red:var(--alert-ink); --red-bg:var(--alert-bg); --red-bd:#E5A9A9; --blue:var(--acc-x); --blue-bg:var(--pale);
  --r:4px; --r-s:3px; --tap:44px;
  --font:"Yu Gothic UI","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--font); }
a { color:var(--acc-x); }
.top { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; padding:8px 16px; background:#fff; border-bottom:1px solid var(--bd); }
.brand { display:flex; align-items:center; gap:6px; font-weight:700; font-size:15px; text-decoration:none; color:var(--ink); white-space:nowrap; flex:none; }
.brand .logo { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:var(--r-s); background:var(--acc); color:#fff; font-size:13px; }
.top nav { display:flex; gap:16px; flex-wrap:wrap; }
.who { margin-left:auto; display:flex; align-items:center; gap:12px; }
main { max-width:1040px; margin:0 auto; padding:16px; }
h1 { font-size:24px; margin:8px 0; } h2 { font-size:18px; margin:24px 0 8px; } h3 { font-size:17px; margin:0; }
button { font:inherit; min-height:44px; padding:8px 16px; border:1px solid var(--bd); border-radius:var(--r-s); background:#fff; color:var(--acc-x); font-weight:600; cursor:pointer; }
button:hover { background:var(--pale); }
button:focus-visible,a.button:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
button.primary { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:700; }
button.primary:hover { background:var(--acc-x); border-color:var(--acc-x); }
button.big { width:100%; font-size:18px; min-height:56px; }
button.plain { background:transparent; }
button:disabled:hover { background:#fff; } button.primary:disabled:hover { background:var(--acc); }
button:disabled { opacity:.45; cursor:not-allowed; }
input,select,textarea { font:inherit; font-size:16px; max-width:100%; min-height:44px; padding:8px; border:1px solid var(--bd); border-radius:var(--r-s); background:#fff; color:var(--ink); }
input:focus,select:focus,textarea:focus { outline:2px solid var(--acc); outline-offset:-1px; border-color:var(--acc); }
label { display:block; margin:8px 0; } label input,label select { display:block; width:100%; margin-top:4px; }
label.check input { display:inline; width:auto; min-height:0; }
.card { background:#fff; border:1px solid var(--bd); border-radius:var(--r); padding:16px; margin:12px 0; }
.narrow { max-width:400px; margin:48px auto; }
.qr { display:flex; justify-content:center; margin:8px 0; }
.qr svg { width:220px; height:220px; background:#fff; padding:6px; border:1px solid var(--bd); border-radius:var(--r-s); }
.secret { font-family:monospace; word-break:break-all; background:var(--pale); border:1px solid var(--bd); border-radius:var(--r-s); padding:8px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; } .row input { flex:1 1 200px; } .row label { flex:1 1 160px; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.flash { padding:12px 16px; border-radius:var(--r-s); margin:8px 0; font-weight:700; font-size:18px; border:1px solid; border-left-width:4px; }
.flash.green { background:var(--green-bg); color:var(--green); border-color:var(--green-bd); border-left-color:var(--green); }
.flash.yellow { background:var(--yellow-bg); color:var(--yellow); border-color:var(--yellow-bd); border-left-color:var(--yellow); }
.flash.red { background:var(--red-bg); color:var(--red); border-color:var(--red-bd); border-left-color:var(--red); }
.urgent { background:var(--red-bg); color:var(--red); border:1px solid var(--red-bd); border-left:4px solid var(--red); border-radius:var(--r-s); padding:12px 16px; margin:12px 0; } .urgent h2 { margin:0 0 4px; color:var(--red); }
.notice { background:var(--yellow-bg); border:1px solid var(--yellow-bd); border-left:4px solid var(--yellow); border-radius:var(--r-s); padding:12px 16px; margin:12px 0; } .notice h2 { margin:0 0 4px; color:var(--yellow); }
.urgent ul { margin:4px 0; padding-left:1.2em; } .urgent a { color:var(--red); }
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--bd); margin:12px 0; flex-wrap:wrap; }
.tabs a { display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; text-decoration:none; border-radius:var(--r-s) var(--r-s) 0 0; color:var(--wk); font-weight:600; }
.tabs a:hover { background:var(--pale); }
.tabs a.on { background:var(--pale-2); color:var(--acc-x); font-weight:700; box-shadow:inset 0 -2px var(--acc); }
.filters { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:8px; } .filters label { margin:0; }
table.list { width:100%; border-collapse:collapse; background:#fff; } table.list th,table.list td { padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
table.list th.mark,table.list td.mark { width:36px; text-align:center; color:var(--green); font-size:22px; font-weight:700; line-height:1.2; }
table.list th { background:var(--pale); color:var(--acc-x); font-size:13px; font-weight:700; border-bottom:1px solid var(--bd); }
table.list tr.checked td { background:var(--green-bg); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.badge { display:inline-block; padding:2px 10px; border-radius:var(--r-s); font-size:14px; font-weight:600; white-space:nowrap; background:#fff; color:var(--acc-x); border:1px solid var(--bd); } .badge.large { font-size:16px; padding:4px 14px; }
.s-ready,.d-checked,.p-active { background:var(--pale); color:var(--acc-x); border-color:var(--bd); } .s-done,.d-green { background:var(--green-bg); color:var(--green); border-color:var(--green-bd); }
.s-recheck,.s-cancelled { background:var(--red-bg); color:var(--red); border-color:var(--red-bd); } .d-yellow,.p-pending { background:var(--yellow-bg); color:var(--yellow); border-color:var(--yellow-bd); }
.rxhead { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; } .rxhead p { margin:0; color:var(--muted); }
.drugs { display:grid; gap:12px; }
.drug { background:#fff; border:1px solid var(--line); border-left:8px solid var(--line); border-radius:var(--r); padding:12px 16px; }
.drug header { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; align-items:center; }
.state-green { border-left-color:var(--green); } .state-yellow { border-left-color:#D99A00; } .state-checked { border-left-color:var(--acc); } .state-excluded { opacity:.65; }
.qty { font-size:30px; font-weight:700; margin:4px 0; } .read { color:var(--green); font-weight:700; margin:2px 0; } .hint { color:var(--muted); margin:4px 0; }
.breakdown { margin:4px 0; padding-left:1.2em; color:var(--muted); }
.alert { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; background:var(--red-bg); color:var(--red); font-weight:700; border-radius:var(--r-s); padding:8px 12px; margin:8px 0; }
.alert.acked { background:#F2F4F5; color:var(--muted); font-weight:400; }
form.inline { display:inline-block; } .choice { margin-top:8px; }
.photos { display:flex; gap:8px; flex-wrap:wrap; } .photos img { width:160px; height:120px; object-fit:cover; border-radius:var(--r-s); border:1px solid var(--bd); }
#camera { width:100%; max-height:280px; background:#000; border-radius:var(--r); margin-top:8px; }
.empty { color:var(--muted); } details { margin-top:8px; } summary { cursor:pointer; min-height:32px; }
.finalize ul { padding-left:1.2em; color:var(--red); }
[hidden] { display:none !important; }

/* ---- スマホで使う前提の詰めた表示。1 画面に多くの薬を出す ---- */
body { font-size:15px; line-height:1.4; }
.top { gap:4px 12px; padding:0 10px; flex-wrap:nowrap; min-height:46px; }
.top nav { display:flex; gap:2px; flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; min-width:0; }
.top nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 10px; border-radius:var(--r-s); color:var(--wk); font-size:14px; font-weight:600; text-decoration:none; }
.top nav a:hover { background:var(--pale); }
.top nav a.on { background:var(--pale-2); color:var(--acc-x); font-weight:700; box-shadow:inset 0 -2px var(--acc); }
.who { gap:8px; }
.who-name { display:none; color:var(--wk); font-size:13px; }
main { padding:8px 10px; }
button.mini { min-height:36px; padding:4px 10px; font-size:14px; white-space:nowrap; }
h1 { font-size:18px; margin:2px 0; } h2 { font-size:15px; margin:12px 0 4px; }
.flash { padding:6px 10px; font-size:15px; margin:4px 0; border-width:1px; border-left-width:4px; }
.urgent,.notice { padding:6px 10px; margin:4px 0; } .urgent h2,.notice h2 { margin:0 0 2px; font-size:15px; } .urgent p,.notice p { margin:2px 0; font-size:14px; }
.red-row { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:14px; color:var(--red); font-weight:700; }
.sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.rx-page main { padding-bottom:72px; }
.rxhead { display:block; } .rxhead h1 { display:inline; } .rxhead p { display:inline; margin-left:8px; font-size:13px; }
.scan { position:sticky; top:0; z-index:5; background:var(--bg); padding:4px 0; }
.scan form { display:flex; gap:4px; }
.scan input { flex:1 1 auto; min-width:0; min-height:44px; padding:4px 8px; font-size:16px; }
.scan button { min-height:44px; padding:4px 12px; white-space:nowrap; }
#camera { display:block; width:100%; height:120px; object-fit:cover; max-height:none; margin-top:4px; border-radius:var(--r); }
#camera-msg:empty { display:none; }
.progress { display:flex; justify-content:space-between; align-items:center; margin:4px 0; font-size:13px; color:var(--muted); }
.drugs { display:block; }
.d { background:#fff; border-bottom:1px solid var(--line); border-left:5px solid var(--line); padding:3px 8px; }
.d:first-child { border-top:1px solid var(--line); }
.d-main { display:flex; align-items:baseline; gap:6px; }
.d-main h3 { flex:1 1 auto; min-width:0; margin:0; font-size:14px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.ic { flex:0 0 14px; font-weight:700; text-align:center; color:var(--muted); }
.q { flex:0 0 auto; font-size:18px; font-weight:700; white-space:nowrap; }
.st-green { border-left-color:var(--green); } .st-green .ic { color:var(--green); }
.st-checked { border-left-color:var(--acc); } .st-checked .ic { color:var(--acc-x); }
.st-yellow { border-left-color:#D99A00; background:var(--yellow-bg); } .st-yellow .ic,.st-yellow .q { color:var(--yellow); }
.st-green .d-main h3,.st-checked .d-main h3,.st-green .q,.st-checked .q { font-weight:400; color:var(--muted); }
.st-excluded { opacity:.6; } .st-excluded .q { font-size:13px; font-weight:400; }
.more { margin:0; } .more summary { min-height:0; font-size:12px; color:var(--muted); padding-left:20px; overflow-wrap:anywhere; }
.more summary b { color:var(--green); } .more p,.more ul { margin:2px 0 2px 20px; padding:0; font-size:13px; color:var(--muted); list-style:none; }
.more form { margin:2px 0 4px 20px; }
.alert { padding:3px 8px; margin:2px 0 2px 20px; font-size:13px; border-radius:var(--r-s); gap:4px; }
.d .act { display:block; margin:2px 0 2px 20px; }
.ai-read,.blockers { font-size:13px; margin:8px 0; } .blockers ul { margin:4px 0; padding-left:1.2em; color:var(--red); }
.ai-read form { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:4px; } .ai-read input { min-height:44px; flex:1 1 180px; font-size:16px; }
.photos img { width:88px; height:66px; }
.bottom { position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex; gap:8px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--bd); box-shadow:0 -2px 8px rgba(10,122,134,.08); }
.bottom form { margin:0; } .done-form { flex:1 1 auto; } .done-form button { width:100%; min-height:48px; font-size:16px; }
.file-btn { display:flex; align-items:center; justify-content:center; margin:0; min-height:48px; padding:4px 14px; border:1px solid var(--bd); border-radius:var(--r-s); background:#fff; color:var(--acc-x); font-weight:700; white-space:nowrap; cursor:pointer; }
.js .file-btn input { position:absolute; width:1px; height:1px; opacity:0; }
.js .nojs { display:none; }
html:not(.js) .file-btn input { display:block; max-width:140px; }
.photo-form { display:flex; gap:4px; align-items:center; }
table.rxlist td { padding:7px 4px; font-size:14px; } table.rxlist td.mark { width:22px; font-size:18px; } table.rxlist .badge { font-size:12px; padding:1px 7px; }
.tabs { margin:4px 0; } .tabs a { padding:0 16px; } .filters { gap:6px; margin-bottom:4px; } .filters label { font-size:13px; } .filters label { color:var(--wk); } .filters input,.filters select { min-height:44px; padding:4px 8px; margin-top:0; font-size:16px; } .filters button { min-height:44px; padding:4px 14px; }
.card { padding:10px; margin:8px 0; }
@media (min-width:720px) { .who-name { display:inline; } .drugs { display:grid; grid-template-columns:1fr 1fr; column-gap:8px; } }
.d .alert { flex-wrap:nowrap; padding:2px 4px 2px 8px; } .d .alert span { flex:1 1 auto; min-width:0; } .d .alert form { flex:0 0 auto; }
.d .alert button.mini { min-height:32px; padding:2px 8px; font-size:13px; }
/* Gmail ログインと職員の画面（2026-11-07） */
a.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid var(--bd); border-radius:var(--r-s); text-decoration:none; color:var(--acc-x); background:#fff; font-weight:600; }
a.button:hover { background:var(--pale); }
a.button.primary { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:700; }
a.button.primary:hover { background:var(--acc-x); border-color:var(--acc-x); }
.muted { color:var(--muted); }
/* 在宅薬歴の型：カードの見出しは淡いティール帯＋左のティール線（2026-11-08） */
.card > h1:first-of-type,.card > h2:first-of-type { margin:-10px -10px 10px; padding:6px 10px; background:var(--pale-2); border-bottom:1px solid var(--bd); border-left:3px solid var(--acc); border-radius:var(--r-s) var(--r-s) 0 0; color:var(--acc-x); font-size:15px; font-weight:700; }
.card.narrow > h1:first-of-type { font-size:17px; }
@media (max-width:420px) { .brand b { display:none; } }
.card.narrow { margin:24px auto; }
.top .brand { margin-right:4px; }
