/* バスノート: 上にキャラクターのヘッダー、下に大きなボタンのナビ。日付 → 予定の一本道 */
:root{
  --bg:#FFFDF4; --surface:#FFFFFF; --fg:#333030; --muted:#7A6A62;
  --berry:#9E4A4C; --berry-ink:#FFFFFF; --custard:#F2B93B; --crust:#B9722E;
  --line:#E2D2A0; --soft:#FBE592; --ok:#2E7D4F; --warn:#B4400E; --ink:#1B1B1B; --photo:#FFFFFF; --red:#C8353B; --red-ink:#FFFFFF;
  --font-display:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --font-body:"Zen Maru Gothic","Hiragino Sans","Yu Gothic",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#26211A; --surface:#342D22; --fg:#FFF3D1; --muted:#D6C29A;
  --berry:#E58A8C; --berry-ink:#26211A; --custard:#F2B93B; --crust:#D79A5E;
  --line:#5A4D36; --soft:#4A3F26; --ok:#6FCF97; --warn:#FF9A62; --ink:#FFF3D1; --photo:#FFFFFF; --red:#F0686E; --red-ink:#26211A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#26211A; --surface:#342D22; --fg:#FFF3D1; --muted:#D6C29A;
  --berry:#E58A8C; --berry-ink:#26211A; --custard:#F2B93B; --crust:#D79A5E;
  --line:#5A4D36; --soft:#4A3F26; --ok:#6FCF97; --warn:#FF9A62; --ink:#FFF3D1; --photo:#FFFFFF; --red:#F0686E; --red-ink:#26211A; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font:500 18px/1.6 var(--font-body);
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:0 150px}
.wrap{max-width:760px;margin:0 auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:4px solid var(--custard);outline-offset:2px}

.top{background:var(--soft);border-bottom:2px dotted var(--ink);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));margin-bottom:14px}
header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-block:10px;max-width:760px;margin:0 auto}
header>div:not(.hdr-btns){flex:1 1 110px;min-width:0}
header img{width:112px;max-width:34%;height:auto;flex:none;border-radius:16px;background:var(--photo)}
header h1{font:800 28px/1.2 var(--font-display);margin:0}
header p{margin:0;color:var(--berry);font-size:15px;font-weight:700;letter-spacing:.04em}
header p.who{color:var(--fg);font-size:16px;letter-spacing:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .top{background:#3F3520}}
:root[data-theme="dark"] .top{background:#3F3520}
.demo{background:var(--soft);border:2px dashed var(--crust);border-radius:14px;padding:8px 12px;font-size:15px;margin-bottom:12px}

.nav{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:3px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:8px max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.nav button{border:0;background:none;border-radius:16px;padding:8px 4px;font:800 18px/1.3 var(--font-display);color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;min-height:64px}
.nav button svg{width:28px;height:28px}
.nav button[aria-current="page"]{background:var(--berry);color:var(--berry-ink)}
.badge{background:var(--custard);color:#4A2A1A;border-radius:99px;padding:0 8px;font-size:13px;margin-left:4px}

section[hidden]{display:none}
h2{font:800 24px/1.3 var(--font-display);margin:8px 0 12px}
.card{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:14px}
.empty img{width:min(260px,70%);height:auto;border-radius:16px;background:var(--photo);display:block;margin:0 auto 8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{border:0;border-radius:16px;padding:12px 20px;font:800 18px var(--font-display);min-height:52px;background:var(--berry);color:var(--berry-ink)}
.btn.sub{background:var(--soft);color:var(--fg);border:2px solid var(--line)}
.btn.big{width:100%;font-size:20px;min-height:60px}

/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-head b{font:800 22px var(--font-display)}
.cal-head button{width:52px;height:52px;border-radius:16px;border:2px solid var(--line);background:var(--surface);font-size:22px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dow{text-align:center;font-size:14px;color:var(--muted);font-weight:700}
.dow:first-child,.day.sun{color:var(--berry)}
.day{border:2px solid var(--line);background:var(--surface);border-radius:14px;min-height:58px;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font:800 18px/1.2 var(--font-display)}
.day small{font:700 13px/1.2 var(--font-body)}
.day.blank{border:0;background:none}
.day.has{background:var(--soft)}
.day.full small{color:var(--warn)}
.day.today{border-color:var(--crust)}
.day[aria-pressed="true"]{background:var(--berry);color:var(--berry-ink);border-color:var(--berry)}
.day[aria-pressed="true"] small{color:var(--berry-ink)}

/* day head */
.dayhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:18px 0 8px}
.dayhead h2{margin:0}
.seg{display:inline-flex;border:2px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:10px 18px;font:800 17px var(--font-display);min-height:48px}
.seg button[aria-pressed="true"]{background:var(--crust);color:#fff}
.shift{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.shiftbtn{width:100%;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 12px;text-align:left;min-height:56px;font:inherit;color:inherit}
.shiftbtn{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 8px}
.shiftbtn .lbl{font-weight:700;grid-row:1;grid-column:1}
.shiftbtn .edit{grid-row:1;grid-column:2}
.shiftbtn #shift{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;min-width:0}
.shiftbtn #shift .chip{text-align:center;padding:6px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.shiftbtn #shift .none{grid-column:1/-1}
@media (min-width:600px){.shiftbtn #shift{grid-template-columns:repeat(6,minmax(0,1fr))}}
.shiftbtn .edit{margin-left:auto;color:var(--berry);font:800 16px var(--font-display);white-space:nowrap}
.shiftbtn .none{color:var(--muted)}
.sheet .row.stick{position:sticky;bottom:calc(-1*(18px + env(safe-area-inset-bottom,0px)));background:var(--surface);padding:10px 0 calc(18px + env(safe-area-inset-bottom,0px));margin-bottom:calc(-1*(18px + env(safe-area-inset-bottom,0px)))}
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 14px}
.pick label{display:flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:14px;padding:8px 12px;font:800 20px var(--font-display);min-height:56px;background:var(--bg)}
.pick input{width:28px;min-height:28px;height:28px;padding:0;flex:none;display:inline-block;accent-color:var(--berry)}
.pick label:has(input:checked){background:var(--soft);border-color:var(--berry)}
.chip{background:var(--custard);color:#4A2A1A;border-radius:99px;padding:2px 14px;font-weight:700}
.count{font-weight:800}
.count.over{color:var(--warn)}

/* list view */
.item{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-bottom:10px;border-left:10px solid var(--bus,var(--crust))}
.time{font:800 30px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.item h3{margin:0;font:800 21px/1.3 var(--font-display)}
.meta{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px 16px;font-size:17px}
.meta span{color:var(--muted);font-size:14px;display:block;margin-bottom:-4px}
.meta div{min-width:0;overflow-wrap:anywhere}
.note{grid-column:1/-1;background:var(--soft);border-radius:12px;padding:6px 12px}
.tel{font:800 20px var(--font-display);font-variant-numeric:tabular-nums;color:var(--berry)}

/* table view */
.tbl{overflow-x:auto;border:2px solid var(--line);border-radius:18px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;vertical-align:top;text-align:left}
th{width:78px;font:800 18px var(--font-display);font-variant-numeric:tabular-nums;background:var(--soft)}
tr:last-child th,tr:last-child td{border-bottom:0}
.pill{display:block;border-radius:12px;padding:4px 10px;margin:2px 0;background:var(--bus);color:#fff;font-weight:700;font-size:16px;line-height:1.4}
.pill i{font-style:normal;font-weight:500;font-size:14px;display:block}
.empty{text-align:center;color:var(--muted);padding:26px 10px}

/* forms */
form{display:grid;gap:12px}
label{display:grid;gap:4px;font-weight:700}
.voice{background:var(--soft);border:2px dotted var(--ink);border-radius:16px;padding:10px;display:grid;gap:8px}
.voice .row{flex-wrap:nowrap}
.voice input{flex:1}
.mic{flex:none;width:56px;height:56px;border-radius:50%;border:0;background:var(--berry);color:var(--berry-ink);display:grid;place-items:center}
.mic svg{width:28px;height:28px}
.mic.on{background:var(--warn);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
.hint{font-size:14px;color:var(--muted);font-weight:500;margin:0}
input,select,textarea{border:2px solid var(--line);border-radius:14px;padding:12px;background:var(--bg);min-height:54px;width:100%;max-width:100%;min-width:0;display:block}
input[type=time],input[type=date]{-webkit-appearance:none;appearance:none;text-align:left}
input::-webkit-date-and-time-value{text-align:left;min-height:1.4em}
label,.two>*{min-width:0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:420px){.two{grid-template-columns:1fr}}
.warn{background:var(--soft);border:2px solid var(--warn);border-radius:14px;padding:8px 12px;color:var(--warn);font-weight:700}
.sw{display:flex;gap:8px;flex-wrap:wrap}
.sw label{display:flex;align-items:center;gap:6px;font-weight:500}
.sw input{width:30px;min-height:30px;padding:0}

/* bus master */
.bus{display:flex;align-items:center;gap:12px;margin-bottom:8px;border-left:10px solid var(--bus)}
.bus b{font:800 20px var(--font-display);flex:1;min-width:0;overflow-wrap:anywhere}

/* chat */
.log{display:grid;gap:10px;max-height:46vh;overflow:auto;padding:4px 2px;margin-bottom:10px}
.msg{max-width:86%;background:var(--surface);border:2px solid var(--line);border-radius:18px 18px 18px 4px;padding:8px 14px}
.msg.me{justify-self:end;background:var(--berry);color:var(--berry-ink);border-color:var(--berry);border-radius:18px 18px 4px 18px}
.msg small{display:block;opacity:.8;font-size:13px}
.compose{display:grid;gap:8px}
/* login */
#login{padding-block:18px 40px;display:grid;gap:14px}
#login[hidden],#app[hidden]{display:none}
#login .hero{display:grid;justify-items:center;text-align:center;gap:6px}
#login .hero img{width:min(300px,80%);height:auto;border-radius:20px;background:var(--photo)}
#login h1{font:800 30px/1.2 var(--font-display);margin:0}
.names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.names button{min-height:64px;border:2px solid var(--line);background:var(--surface);border-radius:18px;font:800 22px var(--font-display)}
.names button small{display:block;font:500 13px var(--font-body);color:var(--muted)}
.dots{display:flex;justify-content:center;gap:12px;margin:6px 0}
.dots i{width:22px;height:22px;border-radius:50%;border:3px solid var(--ink,var(--fg));display:block}
.dots i.f{background:var(--berry);border-color:var(--berry)}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:360px;margin:0 auto;width:100%}
.keypad button{min-height:68px;border-radius:20px;border:2px solid var(--line);background:var(--surface);font:800 30px var(--font-display);font-variant-numeric:tabular-nums}
.keypad button.fn{font-size:18px;background:var(--soft)}
.keypad button:disabled{opacity:.4}
.err{color:var(--warn);font-weight:800;text-align:center;min-height:1.6em;margin:0}
.me-btn{margin-left:auto;min-height:44px;padding:6px 12px;font-size:15px;flex:none}
.nav.four{grid-template-columns:repeat(4,1fr)}
.nav.four button{font-size:15px}
.by{grid-column:1/-1;font-size:13px;color:var(--muted)}
.stf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.stf b{font:800 20px var(--font-display);flex:1;min-width:120px}
.stf .btn{min-height:44px;padding:6px 12px;font-size:15px}
.stf.off{opacity:.55}
.pill{width:100%;border:0;text-align:left;font-family:inherit;cursor:pointer;min-height:48px}
.tbl td[data-h]{cursor:pointer}
.sheet{position:fixed;inset:0;background:rgba(30,20,10,.5);display:flex;align-items:flex-end;justify-content:center;z-index:30}
.sheet[hidden]{display:none}
.sheet .card{width:100%;max-width:760px;max-height:88vh;overflow:auto;border-radius:24px 24px 0 0;padding:18px max(16px,env(safe-area-inset-left,0px)) calc(18px + env(safe-area-inset-bottom,0px));border-width:3px 0 0}
.sheet h3{margin:0 0 6px;font:800 24px/1.3 var(--font-display)}
.sheet dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:8px 0 14px}
.sheet dt{color:var(--muted);font-size:15px}
.sheet dd{margin:0;min-width:0;overflow-wrap:anywhere;font-weight:700}
.hdr-btns{display:flex;gap:8px;flex:1 1 100%}
.hdr-btns .me-btn{margin:0;flex:1;min-height:44px;padding:4px 10px;font-size:15px}
.nav[hidden]{display:none}
@media (max-width:360px){header{column-gap:10px}header img{width:72px;max-width:72px}header>div:not(.hdr-btns){flex-basis:100px}header h1{font-size:22px;white-space:nowrap}header p{font-size:13px}}
.menu-btn{flex:none;width:60px;min-height:60px;border:2px solid var(--line);border-radius:16px;background:var(--surface);display:grid;place-items:center;gap:0;font:700 11px/1 var(--font-body);padding:6px 0 4px;color:var(--fg)}
.menu-btn svg{width:28px;height:28px}
.drawer{position:fixed;inset:0;background:rgba(30,20,10,.5);z-index:40;display:flex;justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer-panel{width:min(330px,88vw);height:100%;background:var(--surface);display:grid;align-content:start;gap:10px;overflow:auto;
  padding:calc(18px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) 16px;border-left:3px solid var(--line)}
.drawer-panel h2{margin:0 0 4px}
.dbtn{min-height:68px;border:2px solid var(--line);background:var(--bg);border-radius:18px;font:800 20px var(--font-display);text-align:left;padding:10px 16px;color:var(--fg)}
.dbtn[aria-current="page"]{background:var(--berry);border-color:var(--berry);color:var(--berry-ink)}
.dbtn.close{background:var(--soft)}
.daynav{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:8px;align-items:center;margin-bottom:10px}
.daynav button{height:56px;border-radius:16px;border:2px solid var(--line);background:var(--surface);font-size:22px}
.daynav b{text-align:center;font:800 22px var(--font-display)}
.st-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:8px;border-left:10px solid var(--custard)}
.st-row b{font:800 20px var(--font-display);flex:1 1 130px;min-width:0;overflow-wrap:anywhere}
.stepper{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.step{width:56px;height:56px;border-radius:16px;border:2px solid var(--line);background:var(--soft);font:800 28px var(--font-display);padding:0}
.stn{width:84px;text-align:center;font:800 24px var(--font-display);min-height:56px;padding:4px;-moz-appearance:textfield;appearance:textfield}
.stn::-webkit-outer-spin-button,.stn::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st-total{font:800 22px var(--font-display);margin:6px 0}
.st-head{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.st-head b{flex:none}
.st-acts{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;width:100%}
.st-acts .stepper{margin-left:0}
.st-confirm{min-height:56px;border:0;border-radius:14px;background:var(--red);color:var(--red-ink);font:800 18px var(--font-display);padding:6px 16px;margin-left:auto;flex:none}
.st-status{font-size:14px;font-weight:700;color:var(--warn)}
.st-row.dirty{border-color:var(--warn);border-left-color:var(--warn)}
@media (max-width:360px){.step{width:46px;height:52px}.stn{width:58px}.stepper{gap:4px}.st-acts{gap:6px}.st-confirm{padding:6px 10px;font-size:17px}}
@media (min-width:600px){.st-confirm,.st-status{display:none}.st-acts{width:auto}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:12px 22px;border-radius:99px;font-weight:800;z-index:20}
@media (prefers-reduced-motion:no-preference){.btn:active{transform:scale(.97)}}

/* ---- 本番アプリで追加した部分 ---- */
#boot,#nocfg,#setup{padding-block:28px 40px;display:grid;gap:14px}
#boot[hidden],#nocfg[hidden],#setup[hidden]{display:none}
#boot{justify-items:center;text-align:center;color:var(--muted)}
#boot img{width:min(220px,60%);height:auto;border-radius:20px;background:var(--photo)}
.offline{position:sticky;top:env(safe-area-inset-top,0px);z-index:25;background:var(--warn);color:#fff;font-weight:800;text-align:center;padding:8px 12px;border-radius:0 0 14px 14px}
.offline[hidden]{display:none}
.pinbox{background:var(--soft);border:3px dotted var(--ink);border-radius:18px;padding:12px;text-align:center}
.pinbox b{display:block;font:800 40px/1.2 var(--font-display);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.hist{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:4px;font-size:15px}
.hist li{border-left:4px solid var(--line);padding-left:10px;min-width:0;overflow-wrap:anywhere}
.hist small{color:var(--muted);display:block}
.helpsteps{margin:6px 0 14px;padding-left:1.3em;display:grid;gap:6px}
a.link{color:var(--berry);font-weight:800}