/* 提案デモの子画面（見学ハブから開く各画面）の上部＝1 段バー。
   /demo/_hub-template/screen.css を絶対パスで共有し、各デモに複製しない。
   構成: 差出し（小）｜画面名（h1）｜画面タブ（文字・現在地は下線だけ）｜ⓘ（注記の折りたたみ）
   置かないもの: 注記チップの帯・大見出し・リード文・枠付きボタン（2026-09-15 工藤指摘「上部がごちゃごちゃ」）。
   誠実表記（公開の実データ／架空サンプル／送信なし）は ⓘ の中と、データの横（画像の注記・記入例タグ）に置く。
   色変数は各デモの style.css を使い、無ければ括弧内の既定。セレクタは header.bar（各デモの棒グラフ等の .bar と衝突しないため）。 */
header.bar{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:6px 0 8px;border-bottom:1px solid var(--line2,#B4B2A7);margin:0 0 14px}
.bar-brand{font-size:11px;color:var(--muted,#576068);letter-spacing:.12em;white-space:nowrap}
/* 各デモの `.biz h1` 等（0,1,1）に負けないよう要素つきで指定 */
header.bar h1.bar-title{font-size:16px;font-weight:700;line-height:1.4;margin:0;letter-spacing:.02em;color:var(--ink,#14181C)}
.bar-nav{display:flex;align-items:baseline;gap:2px 14px;margin-left:auto;font-size:12.5px;line-height:1.4}
.bar-nav a{color:var(--ink2,#333B43);text-decoration:none;padding:2px 0 3px;border-bottom:2px solid transparent;white-space:nowrap}
.bar-nav a:hover{color:var(--ink,#14181C);border-bottom-color:var(--line2,#B4B2A7)}
.bar-nav a.on{color:var(--ink,#14181C);font-weight:700;border-bottom-color:var(--ink,#14181C)}
/* ⓘ: JS なしの折りたたみ。開くと右寄せの小さな注記が重なる */
.bar-info{position:relative;align-self:center}
.bar-info summary{list-style:none;cursor:pointer;width:18px;height:18px;line-height:16px;text-align:center;border:1px solid var(--line2,#B4B2A7);border-radius:50%;font-size:11px;font-family:var(--mono,ui-monospace,monospace);color:var(--muted,#576068);background:var(--sheet,#fff);user-select:none}
.bar-info summary::-webkit-details-marker{display:none}
.bar-info[open] summary{background:var(--ink,#14181C);color:#fff;border-color:var(--ink,#14181C)}
.bar-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(360px,calc(100vw - 32px));background:var(--sheet,#fff);border:1px solid var(--line2,#B4B2A7);box-shadow:0 6px 18px rgba(0,0,0,.08);padding:10px 14px;font-size:12.5px;line-height:1.8;color:var(--ink2,#333B43)}
.bar-pop b{display:block;color:var(--ink,#14181C);margin-bottom:2px}
.bar-pop p{margin:0}
.bar-pop p+p{margin-top:2px}
/* 見学ハブの iframe（?embed=1）ではバー全体を省く＝同じ事実はハブ側に出ている */
body.embed header.bar{display:none}
/* 700px 以下: 1 行目=差出し・画面名・ⓘ、2 行目=タブ（横スクロール・縦に積まない） */
@media (max-width:700px){
  header.bar{gap:4px 10px}
  header.bar h1.bar-title{font-size:15px}
  .bar-info{order:2;margin-left:auto}
  .bar-nav{order:3;flex-basis:100%;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
  .bar-nav::-webkit-scrollbar{display:none}
}