/* Environment switch (envbar.js): fixed at the very top of every page. Its height is published as
   --envbar-h, which pads the body and offsets the pages' own sticky headers. z-index 35 sits above
   the bottom tabs (30) and sticky headers (<=20) but below sheets and scrims (>=40). */
:root{--envbar-h:0px}
html.has-envbar body{padding-top:var(--envbar-h)}
.envbar{position:fixed;top:0;left:0;right:0;z-index:35;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;
  padding:4px max(12px,env(safe-area-inset-right)) 4px max(12px,env(safe-area-inset-left));
  font:13px/1.5 system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif}
.envbar button,.envbar a{font:inherit;font-weight:700}
.envbar :focus-visible{outline:3px solid #bd8d44;outline-offset:2px}
.envbar-msg{font-size:12px}
.envbar-msg:empty{display:none}
.envbar-msg.error{color:#9c301e;font-weight:700}

/* production: a quiet strip with 「本番 | デモで練習」 on the right */
.envbar-prod{justify-content:flex-end;min-height:36px;background:#e9efec;color:#18313c;border-bottom:1px solid #cbd8d2}
.envbar-seg{display:inline-flex;border:1px solid #8fa79d;border-radius:999px;overflow:hidden;background:#fff}
.envbar-seg button{border:0;background:transparent;color:#18313c;padding:0 14px;min-height:28px;cursor:pointer}
.envbar-seg button:focus-visible{outline-offset:-3px}
.envbar-seg button[aria-pressed=true]{background:#17685f;color:#fff;cursor:default}
.envbar-seg button[data-env=demo]{color:#7a4a00}
.envbar-seg button[data-env=demo]:hover:not(:disabled){background:#fff0cc}
.envbar-seg button:disabled{opacity:.6;cursor:progress}

/* demo: amber, impossible to mistake for the shop's real data */
.envbar-demo{background:#f5b83d;color:#2e1d00;border-bottom:2px solid #8a5a00;padding-top:6px;padding-bottom:6px}
.envbar-title{font-weight:800;white-space:nowrap}
.envbar-note{flex:1 1 280px;min-width:0}
.envbar-actions{display:flex;gap:8px;margin-left:auto;flex:none}
.envbar-demo button,.envbar-demo a.envbar-link{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;
  border:1.5px solid #2e1d00;border-radius:8px;background:#fff8e6;color:#2e1d00;text-decoration:none;cursor:pointer;white-space:nowrap}
.envbar-demo button:hover:not(:disabled),.envbar-demo a.envbar-link:hover{background:#fff}
.envbar-demo button:disabled{opacity:.6;cursor:progress}
.envbar-demo .envbar-msg{flex:1 0 100%;order:9}
.envbar-demo .envbar-msg.error{color:#6b1d10}
.envbar-info{display:none!important}

@media (pointer:coarse),(max-width:700px){
  .envbar-prod{min-height:46px}
  .envbar-seg button{min-height:44px;padding:0 16px}
  .envbar-demo button,.envbar-demo a.envbar-link{min-height:44px;padding:0 10px}
}
@media (max-width:700px){
  .envbar{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));gap:2px 6px}
  .envbar-demo{padding-top:2px;padding-bottom:2px}
  .envbar-long,.envbar-note{display:none}
  .envbar-info{display:inline-flex!important;min-width:44px;padding:0!important}
  .envbar-actions{gap:6px}
  .envbar-demo.open .envbar-note{display:block;order:8;flex:1 0 100%;font-size:12px;line-height:1.5;padding:0 0 6px}
}
@media (max-width:350px){.envbar-demo .envbar-title{flex:1 0 100%}}

@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .envbar-prod{background:#0f1a1e;color:#d8e3e0;border-bottom-color:#27393f}
  :root:not([data-theme=light]) .envbar-seg{background:#16262c;border-color:#3d5258}
  :root:not([data-theme=light]) .envbar-seg button{color:#d8e3e0}
  :root:not([data-theme=light]) .envbar-seg button[aria-pressed=true]{background:#5cc2b0;color:#06201c}
  :root:not([data-theme=light]) .envbar-seg button[data-env=demo]{color:#f0c36a}
  :root:not([data-theme=light]) .envbar-seg button[data-env=demo]:hover:not(:disabled){background:#3a3020}}
.theme-dark .envbar-prod{background:#0f1a1e;color:#d8e3e0;border-bottom-color:#27393f}
.theme-dark .envbar-seg{background:#16262c;border-color:#3d5258}
.theme-dark .envbar-seg button{color:#d8e3e0}
.theme-dark .envbar-seg button[aria-pressed=true]{background:#5cc2b0;color:#06201c}
.theme-dark .envbar-seg button[data-env=demo]{color:#f0c36a}
@media print{.envbar{display:none}html.has-envbar body{padding-top:0}}