/* Hoppin シフト: 絵本の部品を既存画面へ当てる。動作とDOMの操作要素は変えない。 */
:root{
  --hs-panel:#fffdf4;--hs-panel-line:rgba(57,96,64,.17);
  --hs-title:#173b28;--hs-soft-shadow:0 1px 2px rgba(10,30,30,.07),0 10px 28px rgba(10,30,30,.10);
}
:root[data-theme="dark"]{
  --hs-panel:#20342e;--hs-panel-line:rgba(235,249,232,.14);
  --hs-title:#f3f7ee;--hs-soft-shadow:0 1px 2px rgba(0,0,0,.18),0 12px 30px rgba(0,0,0,.24);
}
[hidden]{display:none!important}
body{--h-hair:.5px;--h-safe-b:var(--sab)}
body>.hs-scene{display:none;position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body.staffpage,body.managerpage:has(#main>.login),body.managerpage:has(#main>.menu){
  min-height:100vh;min-height:100dvh;
  background:linear-gradient(180deg,var(--hs-sky-1) 0%,var(--hs-sky-2) 42%,var(--hs-sky-3) 78%,var(--hs-sky-3) 100%);
}
body.staffpage>.hs-scene-mobile,body.managerpage:has(#main>.login)>.hs-scene-mobile,body.managerpage:has(#main>.menu)>.hs-scene-mobile{display:block}
@media(min-width:768px){
  body.staffpage>.hs-scene-mobile,body.managerpage:has(#main>.login)>.hs-scene-mobile,body.managerpage:has(#main>.menu)>.hs-scene-mobile{display:none}
  body.staffpage>.hs-scene-wide,body.managerpage:has(#main>.login)>.hs-scene-wide,body.managerpage:has(#main>.menu)>.hs-scene-wide{display:block}
}
body.staffpage>#app,body.staffpage>#login,body.staffpage>#gate,body.staffpage>#boot,body.managerpage>#app{position:relative;z-index:1}
:root[data-theme="dark"] .hs-scene .cloud{opacity:.06}
:root[data-theme="dark"] .hs-scene .star{fill:var(--hs-star)}
:root:not([data-theme="dark"]) .hs-scene .stars{display:none}
/* 文字は読みやすい無地の面へ。見出しだけ丸ゴシック。 */
:is(.login,.menuhd,.panel h2,.barsp,.st-brand,.st-tabs button,.sh-cychd,.sh-pd,.st-exhd,.st-exday,.mcard .mn){font-family:var(--hs-round);letter-spacing:.025em}
:is(.panel,.bar,.empty,.mcard,.modal .box,.st-gate){
  border-radius:20px;border-color:var(--hs-panel-line);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.35),0 0 0 .5px var(--hs-panel-line),var(--hs-soft-shadow)
}
:is(.panel,.bar,.empty,.modal .box,.st-gate){background:var(--hs-panel)}
:is(.grid,.matrix,.skill,select,input,textarea){font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;font-variant-numeric:tabular-nums}
:is(select,input,textarea){background:var(--hs-panel);border-color:var(--hs-panel-line);border-radius:12px}
/* 店長と管理者の表・カレンダー・設定は必ず無地のカードの中。 */
.managerpage :is(.panel,.bar,.matrix,.grid,.skill){--card:var(--hs-panel);--bg:var(--hs-panel)}
.managerpage :is(.grid,.matrix){background:var(--hs-panel)}
.managerpage :is(.scrollx,.daycard,.helppanel){background:var(--hs-panel)}
.managerpage .hdr,.staffpage .hdr{
  background:linear-gradient(180deg,var(--hs-sky-1),var(--hs-sky-2) 62%,var(--hs-sky-3));
  border-bottom:.5px solid var(--hs-panel-line);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.35),0 4px 18px rgba(10,30,30,.09)
}
:root[data-theme="dark"] :is(.managerpage .hdr,.staffpage .hdr){color:#f3f7ee}
/* ログインとメニューだけは世界の絵の上にガラスを重ねる。 */
.login,.managerpage .mcard{
  background:var(--hs-glass);color:var(--hs-glass-text);
  border:.5px solid var(--hs-glass-line);border-radius:28px;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 .5px 0 var(--hs-glass-line),inset 0 1px 0 rgba(255,255,255,.28),0 10px 30px rgba(10,30,30,.14)
}
.managerpage .menuhd{color:var(--hs-title);font-size:17px;letter-spacing:.08em}
.managerpage .mcard .mn,.managerpage .mcard .ms{color:var(--hs-glass-text)}
.managerpage .mcard .ms{opacity:.84}
/* 主役の操作を山吹に。文字は濃緑固定で昼夜とも読める。 */
:is(button.primary,.staffpage .btn:not(.ghost),.staffpage .ombtns .pri,.managerpage .bar .fix,.managerpage .bar .chatgo,.staffpage .st-link){
  background:linear-gradient(180deg,var(--hs-amber-a),var(--hs-amber-b) 55%,var(--hs-amber-c));
  color:var(--hs-amber-text);border:.5px solid rgba(160,100,10,.35);border-radius:999px;
  font-family:var(--hs-round);font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(170,100,0,.18),0 8px 24px rgba(249,189,54,.25)
}
:is(button.primary,.staffpage .btn:not(.ghost),.staffpage .ombtns .pri,.managerpage .bar .fix,.managerpage .bar .chatgo):disabled{box-shadow:none}
/* スタッフはガラスのカードと浮いたピルのタブ。並びは既存のまま。 */
.staffpage :is(.sh-pcard,.sh-cyc,.sh-list,.sh-empty,.st-extra){
  background:var(--hs-glass);color:var(--hs-glass-text);border:.5px solid var(--hs-glass-line);border-radius:20px;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 .5px 0 var(--hs-glass-line),inset 0 1px 0 rgba(255,255,255,.3),var(--hs-soft-shadow)
}
/* 日付と依頼の内容は絵を透かさない。 */
.staffpage :is(.sh-pcard,.sh-cyc,.sh-list,.st-extra){
  background:var(--hs-panel);color:var(--ink);
  -webkit-backdrop-filter:none;backdrop-filter:none
}
.staffpage :is(.shw-body,.shd-body){background:var(--hs-panel)}
.staffpage .sh-pcard.on{border:2px solid var(--accent);background:var(--hs-panel)}
.staffpage .st-tabs{border-radius:999px;background:var(--hs-tab);padding:6px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 .5px var(--hs-glass-line),0 10px 30px rgba(10,30,30,.18)}
.staffpage .st-tabs button{border-radius:999px;color:var(--hs-glass-text);min-width:0}
.staffpage .st-tabs button.on{background:var(--hs-tab-on);color:var(--hs-glass-text);box-shadow:inset 0 0 0 .5px var(--hs-glass-line)}
.staffpage .sh-pickhd,.staffpage .sh-foot{color:var(--hs-title)}
/* 既存の説明文だけをクリームの吹き出しにする。 */
.staffpage .sh-empty{background:var(--hs-bubble);color:var(--hs-bubble-text)}
.staffpage :is(.sh-empty,.st-gate){-webkit-backdrop-filter:none;backdrop-filter:none}
.staffpage .st-exmsg{background:var(--hs-bubble);color:var(--hs-bubble-text);border-radius:20px}
/* ロゴと「シフト」の輪郭を保つ。 */
.shift-mark{isolation:isolate}
@media(max-width:640px){
  .managerpage .menu{padding-top:24px}
  .staffpage .st-tabs{margin-left:10px;margin-right:10px;gap:2px}
  .staffpage .st-tabs button{font-size:12px;padding:9px 2px}
}
/* 表の薄い記号も操作の目印なので AA に合わせる。 */
.managerpage .grid .sumrow td i,.managerpage .grid td.surpcell .surpzero,.managerpage .cell .addhint{color:var(--sub);opacity:1}
.managerpage .cell.ng .addhint,.managerpage .grid .memorow td.dmemo .addhint{opacity:1}
:root[data-theme="dark"] .managerpage .rk.rB{color:#a9dfb6}
:root[data-theme="dark"] .managerpage .rk.rC,:root[data-theme="dark"] .managerpage .grid thead th.sat{color:#a8d5ff}
:root[data-theme="dark"] .managerpage .rk.rD{color:#c6d4c2}
:root[data-theme="dark"] .managerpage .gbar{color:#173b28}
:root[data-theme="dark"] .managerpage .rk.rA{color:#ffce81}
:root[data-theme="dark"] .managerpage .rk.rS{color:#ffb9a0}
:root:not([data-theme="dark"]){
  --kit:#a84909;--kitInk:#85400d;--kitSoft:#fff0df;--kitGlow:rgba(168,73,9,.22);
  --hal:#147850;--halInk:#17633f;--halSoft:#e2f3e8;--halGlow:rgba(20,120,80,.2);
  --ei:#966212;--eiSoft:#fff3da;--ok:#236b43;--okSoft:#e4f1e5;
}
:root:not([data-theme="dark"]) .managerpage .rk.rD{color:#66706a}
:root:not([data-theme="dark"]) .managerpage .rk.rA{color:#87520d}
:root:not([data-theme="dark"]) .managerpage .grid tr.surplushd th{color:#236b43}
.staffpage .sh-list.closed{opacity:1}
:root[data-theme="dark"] .staffpage :is(.sh-overmsg,.sh-day.sun,.sh-day.sun span){color:#ffa5a5}
:root:not([data-theme="dark"]) .staffpage{--warn:#875000}
/* ログインの上余白が body の外へ折り畳まれ、全画面画像の下に帯が出るのを防ぐ。 */
body.managerpage:has(.login),body.staffpage:has(.login:not([hidden])){display:flow-root}
@media(max-width:640px){
  .managerpage .grow{flex-wrap:wrap}
  .managerpage .glabel{flex-basis:64px}
  .managerpage .gtrack{min-width:0;flex:1 1 160px}
  .managerpage .gset{flex:1 1 100%;width:100%;min-width:0}
}