/* アプリ風の画面（作業者のマイページ・作業のページ・お客様の「ご依頼の進み具合」）で共通に使う
   上に固定の見出し（.appbar）・下に固定のタブ（appshell.js が作る .tabbar）・ホーム画面に追加の案内（.inst）
   色は4色（#2FA35A・#E3F4E8・#2B2B2B・白）と、文字の薄い灰色 #5F6B64・ボタンの青だけ */
:root{--as-green:#2FA35A;--as-pale:#E3F4E8;--as-ink:#2B2B2B;--as-muted:#5F6B64;--as-line:#E1E8E3;--as-blue:#1E6FD9;--as-warn:#b1440e;
  --as-top:env(safe-area-inset-top,0px);--as-bottom:env(safe-area-inset-bottom,0px)}
html{-webkit-tap-highlight-color:transparent}
body.app{background:#F4F7F5;padding-bottom:calc(78px + var(--as-bottom));-webkit-text-size-adjust:100%}
body.app.notabs{padding-bottom:calc(24px + var(--as-bottom))}

/* 上の見出し：スクロールしても残る */
.appbar{position:sticky;top:0;z-index:1050;display:flex;align-items:center;gap:8px;padding:calc(10px + var(--as-top)) 16px 10px;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--as-line);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;font-weight:900;font-size:18px;color:var(--as-green)}
.appbar img{width:28px;height:28px;flex:none}
.appbar .ttl{margin-left:auto;font-size:13.5px;color:var(--as-ink);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}

/* 下のタブ */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1100;background:#fff;border-top:1px solid var(--as-line);padding:6px 6px calc(6px + var(--as-bottom));box-shadow:0 -2px 12px rgba(0,0,0,.05)}
.tabbar .in{max-width:560px;margin:0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px}
.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;padding:2px 0 0;font:inherit;font-size:11.5px;font-weight:700;color:var(--as-muted);cursor:pointer;min-height:52px}
.tabbar button .ic{display:flex;align-items:center;justify-content:center;width:56px;height:30px;border-radius:99px;transition:background .15s}
.tabbar button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-selected=true]{color:var(--as-ink);font-weight:900}
.tabbar button[aria-selected=true] .ic{background:var(--as-pale);color:var(--as-green)}
.tabbar .bd{position:absolute;top:0;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--as-green);color:#fff;font-size:11px;font-weight:900;line-height:18px;text-align:center;border:2px solid #fff;box-sizing:content-box}
.tabbar .bd.warn{background:var(--as-warn)}
.tabbar .bd.dot{min-width:0;width:9px;height:9px;padding:0;top:3px;left:calc(50% + 12px)}
body.notabs .tabbar{display:none}

/* 画面の上の切り替え（下のタブと連動。JikkaApp.tabs(…, { top: 要素 })） */
.apsegwrap{position:sticky;top:calc(49px + var(--as-top));z-index:1000;background:#F4F7F5;margin:-6px -6px 8px;padding:6px 6px 0}
.apseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:#E3F4E8;border-radius:99px;padding:4px;margin:0 0 6px}
.apseg button{position:relative;border:0;background:none;border-radius:99px;padding:10px 4px;font:inherit;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;font-size:14px;font-weight:900;color:var(--as-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.apseg button[aria-selected=true]{background:#fff;color:var(--as-ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.apseg .bd{position:static;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--as-green);color:#fff;font-size:11px;font-weight:900;line-height:18px;border:0}
.apseg .bd.warn{background:var(--as-warn)}
.apseg .bd.dot{min-width:0;width:8px;height:8px;padding:0}
body.notabs .apsegwrap{display:none}
/* 下線の形（JikkaApp.tabs(…, { top: 要素, line: true })） */
.apseg.line{background:none;border-radius:0;padding:0;gap:0;border-bottom:2px solid var(--as-line);margin:0}
.apsegwrap:has(.apseg.line){padding-bottom:8px}
.apseg.line button{border-radius:0;padding:11px 4px 12px;font-size:14.5px}
.apseg.line button::after{content:"";position:absolute;left:10%;right:10%;bottom:-2px;height:3px;border-radius:3px 3px 0 0;background:transparent}
.apseg.line button[aria-selected=true]{background:none;box-shadow:none;color:var(--as-ink)}
.apseg.line button[aria-selected=true]::after{background:var(--as-green)}

/* 押したときに少し沈む（アプリの手ざわり） */
body.app button:not(:disabled):active,body.app .tile:active,body.app a.btn:active{transform:scale(.98)}

/* タブの切り替え（appshell.js が data-pane に .on をつける） */
body.app:not(.notabs) [data-pane]{display:none}
body.app:not(.notabs) [data-pane].on{display:block;animation:asIn .18s ease-out}
@keyframes asIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.app [data-pane].on{animation:none}}

/* ホーム画面に追加の案内 */
.inst{display:flex;gap:12px;align-items:center;background:#fff;border:2px solid var(--as-green);border-radius:16px;padding:12px 12px 12px 14px;margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--as-ink)}
.inst img{width:44px;height:44px;border-radius:11px;flex:none;border:1px solid var(--as-line)}
.inst b{display:block;font-size:14.5px}
.inst .go{flex:none;border:0;border-radius:99px;background:var(--as-blue);color:#fff;font:inherit;font-weight:900;font-size:14px;padding:9px 14px;cursor:pointer}
.inst .x{flex:none;border:0;background:none;color:var(--as-muted);font-size:22px;line-height:1;padding:4px 2px;cursor:pointer}
.inst .ios{display:inline-flex;vertical-align:-4px;width:18px;height:18px;margin:0 1px}
.inst .ios svg{width:18px;height:18px;fill:none;stroke:var(--as-blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ホームの大きなボタン（2列） */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.tile{display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:16px;padding:14px;box-shadow:0 1px 6px rgba(0,0,0,.05);color:var(--as-ink);text-decoration:none;font-size:13px;line-height:1.45;min-height:96px;border:0;font:inherit;text-align:left;cursor:pointer}
.tile svg{width:26px;height:26px;fill:none;stroke:var(--as-green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile b{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;font-weight:900;font-size:15px}
.tile small{font-size:12px;color:var(--as-muted)}
.tile small.warn{color:var(--as-warn);font-weight:800}
.tile small.ok{color:var(--as-green);font-weight:800}