/* 共通ヘッダーと「戻る」（2026-10-03）。
 * 2026-10-08 phase 2 A（卓馬「根底から完成度を上げる」・監査 7）：ヘッダーは「ホーム／成果物／設定」＋会社の切り替え＋「ほかの機能」。
 * スマホは上を1段にして、下に4つのタブ。値は tokens.css の変数だけ（直書きしない）。
 * style.css に古いヘッダーの規則（!important つき）が多く残っているため、ここでは .flow-hdr を付けて強く上書きする */

/* 2026-10-10 卓馬「トップのヘッダーのデザインが微妙。デザイン性を上げて」：
 * ヘッダーは「世界」の側（キャラ・オフィス・部屋の帯と同じ紺と金）。白い道具の面の上に、紺の細い帯を1本。
 * 金は細い線・紋章・選んでいるタブの下線だけに使う（使いすぎると安っぽくなる）。開いたメニューは道具なので白のまま */

/* ── 戻る（別ページと部屋の中だけ。ホームの一番上では出さない） ── */
.flow-back{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;margin-right:4px;border:1px solid var(--ds-world-line);border-radius:var(--ds-r-pill);
 background:var(--ds-world-glass);color:var(--ds-world-ink-2);font:var(--ds-fw-medium) var(--ds-fs-sm)/1 var(--ds-font);cursor:pointer;white-space:nowrap;flex:none;
 transition:background var(--ds-dur-fast) var(--ds-ease),border-color var(--ds-dur-fast) var(--ds-ease),color var(--ds-dur-fast) var(--ds-ease)}
.flow-back:hover:not(:disabled){background:var(--ds-world-glass-2);border-color:var(--ds-world-gold-soft);color:var(--ds-world-ink)}
.flow-back:disabled,header.app-header.flow-hdr .flow-back:disabled{display:none!important}
.flow-back-arrow{font-size:16px}
.flow-shared-header>.flow-back{margin:0 4px 0 0!important}

/* ── ヘッダー（本体・別ページ共通） ── */
body>header.app-header.flow-hdr,header.app-header.flow-hdr{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:var(--ds-sp-3)!important;
 min-height:64px!important;height:64px;padding:0 var(--ds-sp-6)!important;margin:0;color:var(--ds-world-ink)!important;
 background:radial-gradient(120% 180% at 0% 0%,var(--ds-world-navy-3) 0%,transparent 55%),linear-gradient(180deg,var(--ds-world-navy-2) 0%,var(--ds-world-navy) 100%)!important;
 border:0!important;border-bottom:0!important;box-shadow:0 4px 14px rgba(12,24,43,.14)!important;position:sticky;top:0;z-index:var(--ds-z-header);box-sizing:border-box;font-family:var(--ds-font);
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important}
/* ↑ 古い規則の backdrop-filter は、中の position:fixed（スマホの設定・ほかの機能のメニュー）の基準をヘッダーに変えてしまうので外す */
/* 下の縁の金の細い線（真ん中が濃く、両端は消える） */
header.app-header.flow-hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
 background:linear-gradient(90deg,transparent 0%,var(--ds-world-line) 12%,var(--ds-world-gold) 50%,var(--ds-world-line) 88%,transparent 100%)}

/* ロゴ：金の紋章＋「EXTAGE FLOW」。FLOW だけ金 */
header.app-header.flow-hdr .flow-hdr-brand{display:inline-flex!important;align-items:center!important;gap:10px!important;margin:0!important;flex:none!important;width:auto!important;min-width:0!important;height:auto!important;text-decoration:none;color:var(--ds-world-ink)}
header.app-header.flow-hdr .flow-hdr-brand::before{content:none!important;display:none!important}
header .flow-emblem,.flow-emblem{position:relative;display:inline-grid!important;place-items:center;width:34px;height:34px;flex:none;padding:0!important;margin:0!important;border-radius:10px;box-sizing:border-box;
 background:radial-gradient(circle at 50% 35%,var(--ds-world-navy-3) 0%,var(--ds-world-navy) 75%);border:1px solid var(--ds-world-line);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.25)}
.flow-emblem::before{content:"";width:20px;height:20px;background:linear-gradient(160deg,var(--ds-world-gold-soft) 0%,var(--ds-world-gold) 55%,var(--ds-world-gold-2) 100%);
 clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);filter:drop-shadow(0 0 3px rgba(226,193,90,.6))}
.flow-emblem::after{content:"";position:absolute;top:7px;right:7px;width:3px;height:3px;border-radius:50%;background:var(--ds-world-gold-soft);opacity:.85}
header.app-header.flow-hdr .flow-brand-name{order:0;display:inline!important;border:0!important;padding:0!important;font:var(--ds-fw-bold) 17px/1 var(--ds-font)!important;letter-spacing:.16em!important;color:var(--ds-world-ink)!important}
header.app-header.flow-hdr .product-wordmark{order:1;display:inline!important;margin-left:-4px!important;font:var(--ds-fw-bold) 17px/1 var(--ds-font)!important;letter-spacing:.16em!important;color:var(--ds-world-gold-2)!important;opacity:1!important;border:0!important;padding:0!important}
header.app-header.flow-hdr .flow-hdr-brand>.flow-emblem{order:-1}
header.app-header.flow-hdr .brand-logo,header.app-header.flow-hdr .brand-monogram{display:none!important}
header.app-header.flow-hdr a.flow-hdr-brand{min-height:44px!important;min-width:44px!important}
a.flow-hdr-brand:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ds-world-gold-soft);border-radius:var(--ds-r-md)}

/* 会社の切り替え：紺の上のうすいガラスの丸い札（頭文字・名前・▾）。押せると分かる形に */
body header.app-header.flow-hdr button.brand-company{display:inline-flex!important;align-items:center!important;gap:var(--ds-sp-2)!important;max-width:300px!important;min-width:0;height:40px!important;
 margin:0 0 0 var(--ds-sp-4)!important;padding:0 var(--ds-sp-3) 0 5px!important;border:1px solid var(--ds-world-line)!important;border-radius:var(--ds-r-pill)!important;background:var(--ds-world-glass)!important;
 color:var(--ds-world-ink)!important;font:var(--ds-fw-medium) var(--ds-fs-sm)/1.2 var(--ds-font)!important;letter-spacing:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;cursor:pointer;flex:0 1 auto;
 transition:background var(--ds-dur-fast) var(--ds-ease),border-color var(--ds-dur-fast) var(--ds-ease)}
body header.app-header.flow-hdr button.brand-company>span{font:inherit!important;color:inherit!important;letter-spacing:0!important;opacity:1!important;margin:0!important;padding:0!important;border:0!important}
body header.app-header.flow-hdr button.brand-company>span.flow-company-name{display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
body header.app-header.flow-hdr button.brand-company>span.flow-company-chip{display:grid!important;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;
 background:linear-gradient(160deg,var(--ds-world-gold-soft),var(--ds-world-gold))!important;color:var(--ds-world-navy)!important;font:var(--ds-fw-bold) var(--ds-fs-sm)/1 var(--ds-font)!important}
body header.app-header.flow-hdr button.brand-company>span.flow-company-chip>img{width:100%;height:100%;object-fit:contain;background:var(--ds-surface)}
body header.app-header.flow-hdr button.brand-company>.brand-company-caret{font-size:12px!important;color:var(--ds-world-gold-soft)!important;opacity:.9!important;flex:none;margin-left:2px!important;transition:transform var(--ds-dur) var(--ds-ease)}
body header.app-header.flow-hdr button.brand-company:hover,body header.app-header.flow-hdr button.brand-company[aria-expanded="true"]{background:var(--ds-world-glass-2)!important;border-color:var(--ds-world-gold-soft)!important}
body header.app-header.flow-hdr button.brand-company[aria-expanded="true"]>.brand-company-caret{transform:rotate(180deg)}
body header.app-header.flow-hdr button.brand-company:focus-visible{outline:none!important;box-shadow:0 0 0 2px var(--ds-world-gold-soft)!important}
/* 本体では会社の切り替えは <strong> の中にできる（app.js）。並びを ロゴ → 会社 にそろえる */
header.app-header.flow-hdr .flow-hdr-brand>button.brand-company{order:5}

/* 主なメニュー（ホーム・成果物・設定・ほかの機能）。選んでいるタブは白い文字と金の下線（光る） */
header.app-header.flow-hdr .app-navigation{display:flex!important;align-items:stretch!important;align-self:stretch!important;gap:var(--ds-sp-1)!important;margin:0 0 0 var(--ds-sp-6)!important;padding:0!important;
 min-width:0;width:auto!important;height:auto!important;overflow:visible!important;order:0!important;flex:0 1 auto}
header.app-header.flow-hdr .app-navigation>a,header.app-header.flow-hdr .app-navigation>details>summary{position:relative;display:inline-flex!important;align-items:center!important;justify-content:center;gap:6px;height:64px!important;min-height:0!important;
 padding:0 var(--ds-sp-4)!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
 font:var(--ds-fw-medium) var(--ds-fs-md)/1 var(--ds-font)!important;letter-spacing:.04em;color:var(--ds-world-ink-2)!important;text-decoration:none;white-space:nowrap;cursor:pointer;list-style:none;box-sizing:border-box;
 transition:color var(--ds-dur-fast) var(--ds-ease)}
header.app-header.flow-hdr .app-navigation>details>summary::-webkit-details-marker{display:none}
/* 指を置いたとき：うすいガラスの面。選んでいるタブ：金の下線 */
header.app-header.flow-hdr .app-navigation>a::before,header.app-header.flow-hdr .app-navigation>details>summary::before{content:"";position:absolute;inset:12px 4px;border-radius:var(--ds-r-md);background:var(--ds-world-glass-2);opacity:0;transition:opacity var(--ds-dur-fast) var(--ds-ease);pointer-events:none}
header.app-header.flow-hdr .app-navigation>a:hover::before,header.app-header.flow-hdr .app-navigation>details>summary:hover::before,header.app-header.flow-hdr .app-navigation>details[open]>summary::before{opacity:1}
header.app-header.flow-hdr .app-navigation>a:hover,header.app-header.flow-hdr .app-navigation>details>summary:hover,header.app-header.flow-hdr .app-navigation>details[open]>summary{color:var(--ds-world-ink)!important;background:transparent!important}
header.app-header.flow-hdr .app-navigation>a[aria-current]{color:var(--ds-world-ink)!important;font-weight:var(--ds-fw-bold)!important;box-shadow:none!important;background:transparent!important;border:0!important}
header.app-header.flow-hdr .app-navigation>a[aria-current]::after{content:"";position:absolute;left:var(--ds-sp-4);right:var(--ds-sp-4);bottom:0;height:3px;border-radius:3px 3px 0 0;
 background:linear-gradient(90deg,var(--ds-world-gold),var(--ds-world-gold-soft),var(--ds-world-gold));box-shadow:var(--ds-world-glow)}
header.app-header.flow-hdr .app-navigation :is(a,summary):focus-visible{outline:none!important}
header.app-header.flow-hdr .app-navigation :is(a,summary):focus-visible::before{opacity:1;box-shadow:inset 0 0 0 2px var(--ds-world-gold-soft)}
/* ⌄ の向き：開いたら上へ */
header.app-header.flow-hdr .app-navigation>details>summary>span[aria-hidden],header.app-header.flow-hdr .flow-more-caret{display:inline-block;font-size:13px;color:var(--ds-world-gold-soft);transform:translateY(-2px);transition:transform var(--ds-dur) var(--ds-ease)}
header.app-header.flow-hdr .app-navigation>details[open]>summary>span[aria-hidden],header.app-header.flow-hdr .flow-more-menu[open] .flow-more-caret{transform:translateY(2px) rotate(180deg)}
header.app-header.flow-hdr .app-navigation>details{position:relative;margin:0;padding:0;border:0;background:transparent;display:flex}
header.app-header.flow-hdr .app-navigation .fold-count{display:none}
/* 開いたメニュー（設定・ほかの機能）。道具なので白。上の縁だけ金の細い線でヘッダーとつなぐ */
header.app-header.flow-hdr :is(.workspace-menu-panel,.flow-more-panel){position:absolute;top:calc(100% + 6px);left:0;right:auto;width:280px;padding:var(--ds-sp-2);display:grid;gap:2px;
 background:var(--ds-surface)!important;border:1px solid var(--ds-border)!important;border-top:2px solid var(--ds-world-gold)!important;border-radius:var(--ds-r-lg)!important;box-shadow:var(--ds-shadow-3)!important;z-index:var(--ds-z-header);box-sizing:border-box;color:var(--ds-text)}
header.app-header.flow-hdr :is(.workspace-menu-panel,.flow-more-panel)>p{margin:var(--ds-sp-1) var(--ds-sp-3) var(--ds-sp-1)!important;padding:0!important;font-size:var(--ds-fs-xs)!important;color:var(--ds-text-3)!important}
header.app-header.flow-hdr :is(.workspace-menu-panel,.flow-more-panel) :is(a,button){display:flex!important;align-items:center;width:100%;min-height:var(--ds-touch);padding:0 var(--ds-sp-3)!important;margin:0!important;border:0!important;border-radius:var(--ds-r-md)!important;
 background:transparent!important;color:var(--ds-text)!important;font:var(--ds-fw-regular) var(--ds-fs-md)/1.3 var(--ds-font)!important;text-align:left;text-decoration:none;box-shadow:none!important;cursor:pointer;box-sizing:border-box;justify-content:flex-start!important;height:auto!important}
header.app-header.flow-hdr :is(.workspace-menu-panel,.flow-more-panel) :is(a,button):hover{background:var(--ds-surface-2)!important}
header.app-header.flow-hdr :is(.workspace-menu-panel,.flow-more-panel) :is(a,button)[hidden]{display:none!important}
header.app-header.flow-hdr .flow-more-panel a[aria-current]{color:var(--ds-accent)!important;font-weight:var(--ds-fw-bold)!important}
/* 設定の中の「オフィス」のまとまり（オフィス設定・メンバー・社内チャット・共有）。箱の枠を外し、ほかの行と同じ形に */
header.app-header.flow-hdr .workspace-menu-office{display:grid;gap:2px;margin:0;padding:0;border:0!important;background:transparent!important}
header.app-header.flow-hdr .workspace-menu-panel details{margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
header.app-header.flow-hdr .workspace-menu-panel details>summary{display:flex!important;align-items:center;min-height:var(--ds-touch);padding:0 var(--ds-sp-3)!important;margin:0!important;border:0!important;border-radius:var(--ds-r-md)!important;
 background:transparent!important;color:var(--ds-text)!important;font:var(--ds-fw-regular) var(--ds-fs-md)/1.3 var(--ds-font)!important;cursor:pointer;list-style:none;box-shadow:none!important;width:100%;box-sizing:border-box}
header.app-header.flow-hdr .workspace-menu-panel details>summary:hover{background:var(--ds-surface-2)!important}
header.app-header.flow-hdr .workspace-menu-panel details>:not(summary){padding-left:var(--ds-sp-3)}
header.app-header.flow-hdr .workspace-menu-panel .fold-count{display:none!important}
header.app-header.flow-hdr .workspace-menu-panel #connections{display:flex;flex-wrap:wrap;gap:var(--ds-sp-1);border-top:1px solid var(--ds-border);margin:var(--ds-sp-2) 0 0;padding:var(--ds-sp-3) var(--ds-sp-2) var(--ds-sp-1)}
header.app-header.flow-hdr .workspace-menu-panel .connection{font-size:var(--ds-fs-xs)!important;padding:2px var(--ds-sp-2)!important}
header.app-header.flow-hdr .workspace-menu-panel :is(select,input){font-size:var(--ds-fs-sm)}
header.app-header.flow-hdr .header-actions{display:flex!important;align-items:center;gap:var(--ds-sp-2);margin-left:auto!important;width:auto!important;flex:none!important;padding:0!important;border:0!important}
header.app-header.flow-hdr .header-actions:empty{display:none!important}
/* 別ページの右側のボタン（市場の「＋ 調査・会議情報を追加」など）も紺の上で読める形に */
header.app-header.flow-hdr .header-actions>button{height:40px;padding:0 var(--ds-sp-4)!important;border:1px solid var(--ds-world-line)!important;border-radius:var(--ds-r-pill)!important;background:var(--ds-world-glass)!important;color:var(--ds-world-ink)!important;font:var(--ds-fw-medium) var(--ds-fs-sm)/1 var(--ds-font)!important;box-shadow:none!important;cursor:pointer}
header.app-header.flow-hdr .header-actions>button:hover{background:var(--ds-world-glass-2)!important;border-color:var(--ds-world-gold-soft)!important}
/* 別ページで、会社の箱をロゴのすぐ右に（並びは 戻る・ロゴ・会社・メニュー） */
.flow-page-header.flow-hdr .flow-company{order:0}
.flow-page-header.flow-hdr .app-navigation{order:0}

/* 会社の一覧（別ページ用。本体は style.css の .brand-company-menu） */
.flow-company-menu{position:fixed;top:var(--menu-top,64px);left:var(--menu-left,16px);z-index:var(--ds-z-toast);min-width:260px;max-width:min(360px,calc(100vw - 2 * var(--ds-gutter)));max-height:60vh;overflow:auto;
 background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-3);padding:var(--ds-sp-2);display:grid;gap:2px;font-family:var(--ds-font)}
.flow-company-menu[hidden]{display:none}
.flow-company-menu>p{margin:var(--ds-sp-1) var(--ds-sp-3);font-size:var(--ds-fs-xs);color:var(--ds-text-3)}
.flow-company-menu button{display:grid;grid-template-columns:32px 1fr 16px;gap:var(--ds-sp-3);align-items:center;min-height:var(--ds-touch);text-align:left;background:var(--ds-surface);border:0;border-radius:var(--ds-r-md);padding:var(--ds-sp-2) var(--ds-sp-3);font:var(--ds-fs-md)/1.3 var(--ds-font);color:var(--ds-text);cursor:pointer}
.flow-company-menu button:hover{background:var(--ds-surface-2)}
.flow-company-menu button[aria-selected="true"]{background:var(--ds-accent-soft);color:var(--ds-accent);font-weight:var(--ds-fw-bold)}
.flow-company-menu .brand-company-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ds-surface-3);color:var(--ds-text-2);font-size:var(--ds-fs-xs);font-weight:var(--ds-fw-bold)}
/* 会社の一覧（本体・別ページ）も、上の縁を金の細い線にしてヘッダーとつなぐ */
:is(.brand-company-menu,.flow-company-menu){border-top:2px solid var(--ds-world-gold)!important}

/* /seo・/youtube のページの中の「会社」の欄は、ヘッダーの会社の切り替えに寄せた（2026-10-08 監査 10）。欄は動きのため残して隠す */
.ds-page-youtube label:has(>#client){display:none!important}

/* ── ホームの知らせ（#notice）：いつも出ている灰色の帯はやめ、必要なときだけ小さな札で出す（2026-10-10）。
 * 出し方・消し方は flow-header.js。ふつうの知らせは数秒で消え、まちがい・注意は「×」で閉じるまで残る ── */
.flow-notice-box{position:fixed;bottom:var(--ds-sp-6);left:50%;transform:translateX(-50%);z-index:var(--ds-z-toast);box-sizing:border-box;
 display:flex;align-items:flex-start;gap:var(--ds-sp-1);width:max-content;max-width:min(560px,calc(100vw - 2 * var(--ds-gutter)));padding:6px 4px 6px 16px;
 background:var(--ds-surface);color:var(--ds-text);border:1px solid var(--ds-border);border-left:4px solid var(--ds-info);border-radius:var(--ds-r-md);box-shadow:var(--ds-shadow-3);font-family:var(--ds-font)}
.flow-notice-box[hidden]{display:none!important}
.flow-notice-box.is-warn{border-left-color:var(--ds-warning)}
.flow-notice-box.is-error{border-left-color:var(--ds-danger)}
.flow-notice-box>#notice{flex:1 1 auto;min-width:0;min-height:0!important;margin:0!important;padding:4px 0!important;border:0!important;background:transparent!important;color:inherit!important;font:var(--ds-fw-medium) var(--ds-fs-sm)/1.55 var(--ds-font)!important}
.flow-notice-box.is-error>#notice{color:var(--ds-danger)!important}
.flow-notice-close{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:-4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ds-text-3);font:20px/1 var(--ds-font);cursor:pointer}
.flow-notice-close:hover{background:var(--ds-surface-2);color:var(--ds-text)}
.flow-notice-close:focus-visible{outline:none;box-shadow:var(--ds-focus)}

/* ── 下のタブ（スマホだけ） ── */
.flow-tabbar{display:none}
@media (max-width:760px){
 body>header.app-header.flow-hdr,header.app-header.flow-hdr{gap:var(--ds-sp-2)!important;min-height:56px!important;height:56px;padding:0 var(--ds-sp-3)!important}
 header.app-header.flow-hdr .flow-back{width:40px;height:40px;padding:0;justify-content:center}
 header.app-header.flow-hdr .flow-back-label{display:none}
 /* スマホは 紋章・会社・…（ほかの機能）の1段。文字のロゴは紋章だけにして、会社の名前の幅に回す */
 header.app-header.flow-hdr :is(.flow-brand-name,.product-wordmark){display:none!important}
 header .flow-emblem{width:36px;height:36px}
 header.app-header.flow-hdr .flow-hdr-brand{flex:1 1 auto!important;min-width:0!important;overflow:visible;gap:0!important}
 header.app-header.flow-page-header.flow-hdr .flow-hdr-brand{flex:none!important}
 body header.app-header.flow-hdr button.brand-company{margin-left:var(--ds-sp-2)!important;max-width:none!important;flex:1 1 0!important;height:40px!important;justify-content:flex-start}
 body header.app-header.flow-hdr button.brand-company>.brand-company-caret{margin-left:auto!important}
 header.app-header.flow-hdr .flow-hdr-brand>button.brand-company{margin-left:var(--ds-sp-2)!important}
 /* ホーム・成果物・設定は下のタブへ。上には「ほかの機能」だけ（…）を残す */
 header.app-header.flow-hdr .app-navigation{margin:0!important;order:9!important;flex:none;align-self:center!important}
 header.app-header.flow-hdr .app-navigation>a,header.app-header.flow-hdr .app-navigation>details.flow-settings-menu>summary{display:none!important}
 header.app-header.flow-hdr .app-navigation>details.flow-more-menu>summary{width:40px;height:40px!important;padding:0!important;border-radius:var(--ds-r-pill)!important;align-self:center;border:1px solid var(--ds-world-line)!important;background:var(--ds-world-glass)!important}
 header.app-header.flow-hdr .flow-more-menu>summary::before{display:none}
 header.app-header.flow-hdr .flow-more-menu>summary :is(.flow-more-label,.flow-more-caret),header.app-header.flow-hdr .flow-more-menu>summary>span{display:none!important}
 header.app-header.flow-hdr .flow-more-menu>summary::after{content:"⋯";font-size:20px;line-height:1;color:var(--ds-world-ink)}
 header.app-header.flow-hdr .app-navigation>details.flow-more-menu>summary:hover,header.app-header.flow-hdr .app-navigation>details.flow-more-menu[open]>summary{border-color:var(--ds-world-gold-soft)!important;background:var(--ds-world-glass-2)!important}
 header.app-header.flow-hdr .flow-more-panel{position:fixed!important;top:62px!important;left:auto!important;right:var(--ds-gutter)!important;width:min(300px,calc(100vw - 2 * var(--ds-gutter)))!important}
 /* 設定（下のタブで開く）は画面の下から出す */
 header.app-header.flow-hdr .flow-settings-menu[open]>.workspace-menu-panel{position:fixed!important;top:auto!important;bottom:76px!important;left:var(--ds-gutter)!important;right:var(--ds-gutter)!important;width:auto!important;max-height:70vh;overflow:auto}
 header.app-header.flow-hdr .header-actions{display:none!important}
 .flow-notice-box{width:auto;left:var(--ds-gutter);right:var(--ds-gutter);bottom:calc(80px + env(safe-area-inset-bottom));transform:none;max-width:none}
 .flow-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--ds-z-header);display:grid;grid-template-columns:repeat(4,1fr);
  padding:var(--ds-sp-1) var(--ds-sp-2) calc(var(--ds-sp-1) + env(safe-area-inset-bottom));background:var(--ds-actionbar-bg);border-top:1px solid var(--ds-border);box-shadow:var(--ds-shadow-up);box-sizing:border-box}
 .flow-tab{display:grid;justify-items:center;align-content:center;gap:2px;min-height:56px;color:var(--ds-text-3);text-decoration:none;font:var(--ds-fw-medium) var(--ds-fs-xs)/1.2 var(--ds-font);border-radius:var(--ds-r-md)}
 .flow-tab[aria-current]{color:var(--ds-accent);font-weight:var(--ds-fw-bold)}
 .flow-tab-icon{width:24px;height:24px}
 .flow-tab[aria-current] .flow-tab-icon path{fill:var(--ds-accent-soft)}
 body.has-flow-tabbar{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
 body.flow-room-open .flow-tabbar{display:none}
}

/* 別ページ用（本体と同じ見た目）。古い規則（2026-10-03）は .flow-hdr の規則が上書きする */
.flow-page-header .flow-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}

/* 部屋（画面いっぱいの窓）を開いているとき：ヘッダーを上に固定し、窓はその下に出す */
dialog.flow-room>.flow-shared-header{position:fixed!important;top:0;left:0;right:0;z-index:2147483000;margin:0;width:auto}
dialog.flow-room{margin-top:calc(var(--flow-header-h,68px) + 10px)!important;max-height:calc(100dvh - var(--flow-header-h,68px) - 20px)!important}
dialog.flow-room::backdrop{top:var(--flow-header-h,68px)}
/* 部屋の中では、右側の操作を隠してメニューを1行に収める（重なって押せなかった。2026-10-03） */
dialog.flow-room>.flow-shared-header .header-actions{display:none!important}
dialog.flow-room>.flow-shared-header{flex-wrap:nowrap}
dialog.flow-room>.flow-shared-header .app-navigation{min-width:0}

/* 開発モードの札（2026-10-12・EXTAGE_DEV_MODE）。本番では出ない。目立つ赤で、ヘッダーの左に置く */
.flow-dev-badge{display:inline-flex;align-items:center;flex:0 0 auto;margin:0 8px;padding:4px 10px;border-radius:999px;
 background:#b42318;color:#fff;font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap;letter-spacing:.02em}
@media (max-width:640px){.flow-dev-badge{font-size:11px;padding:3px 8px;margin:0 4px;white-space:normal;max-width:9em;text-align:center}}