/* ホーム（2026-10-08 phase 2 A・卓馬「根底から完成度を上げる」）。部品は components.css の ds-*、値は tokens.css だけ。
 * 見本：scratchpad/ds/mockups/home_pc.png・home_sp.png（白い道具の面、差し色は青1つ）。
 * 2026-10-10：一番上の世界の帯（おかえりなさい・顔・合言葉）は外した。紺と金はヘッダー（flow-header.css）が受け持つ
 * 古い style.css に .flow-home（以前のホーム）があるので、ここは .fhub / .fh-* だけを使う */

/* ── 見ている場所だけを出す（flow-header.js が body[data-flow-view] を付ける） ──
 * ホーム：ホームの節・AI社員・オフィス・外周のライバル・地図・旅・レベルをいつも出す（2026-10-09 卓馬指示。「もっと見る」はやめた）。
 * 並びは app.js の orderTopSections。この一覧は home-dash.js の HOME_SECTIONS と同じ（テストで突き合わせる）。成果物：制作物フォルダだけ */
body[data-flow-view="home"] main>*:not(#flow-hub):not(.studio-specialists):not(#my-office):not(.office-rival-frontier):not(#strategy-map):not(#journey-band):not(.flow-team-training){display:none!important}
body[data-flow-view="outputs"] main>*:not(#creation-feed){display:none!important}
body:not([data-flow-view="home"]) #flow-hub{display:none!important}
/* カレンダー（ほかの機能から）：会議の予定と、その会議の仕事場だけ */
body[data-flow-view="calendar"] main>*:not(#calendar-section):not(.workspace-intro):not(#utility-panel):not(#event-detail):not(#workspace){display:none!important}
body[data-flow-view] .work-launcher{display:none!important}

.fhub{display:grid;gap:var(--ds-sp-6);max-width:var(--ds-content-max);margin:0 auto;padding:var(--ds-sp-6) 0 var(--ds-sp-8);font-family:var(--ds-font);color:var(--ds-text)}
.fhub :is(h1,h2,h3,p){margin:0}

/* ── 2列（左：次にやること／右：最近の成果物・今月の費用）。AI社員の一覧はホームの節の下（.studio-specialists） ── */
.fh-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--ds-sp-6);align-items:start}
.fh-col{display:grid;gap:var(--ds-sp-6);min-width:0}

/* ── 次にやること ── */
.fhub .fh-next{justify-items:center;text-align:center;padding:var(--ds-sp-6) var(--ds-sp-8) var(--ds-sp-8)}
.fhub .fh-next .ds-next__eyebrow{justify-self:start}
.fh-next__art{position:absolute;top:var(--ds-sp-5);right:var(--ds-sp-6);width:88px;height:88px;background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none}
.fh-next__art[hidden]{display:none}
/* 見出しは中央のまま、絵と重ならないよう左右を同じだけ空ける */
.fhub .fh-next[data-art] .ds-next__title{padding:0 96px}
.fhub .fh-next .ds-next__title{font-size:var(--ds-fs-2xl);max-width:26em}
.fhub .fh-next .ds-next__text{margin:0 auto}
.fhub .fh-next .ds-next__action{flex-direction:column;justify-content:center;gap:var(--ds-sp-2)}
.fhub .fh-next__go{min-width:320px}
.fhub .fh-next__go::after{content:"›";font-size:22px;line-height:1;margin-left:var(--ds-sp-2)}
/* 3つの手順（PC は横） */
.fhub .fh-steps{width:100%;max-width:640px;margin-top:var(--ds-sp-3)}
.fhub .fh-step{color:var(--ds-text-3)}
.fh-step__body{display:grid;gap:2px}
.fhub .fh-step__name{font-size:var(--ds-fs-sm)}
.fhub .fh-step__desc{display:none;font-size:var(--ds-fs-xs);font-weight:var(--ds-fw-regular);color:var(--ds-text-3)}
.fhub .fh-step__tag{display:none}
.fhub .fh-step.is-done .fh-step__name{color:var(--ds-success)}

/* ── 最近の成果物 ── */
.fhub .fh-link{font-size:var(--ds-fs-sm);color:var(--ds-text-3);text-decoration:none;white-space:nowrap}
.fhub .fh-link::after{content:" ›"}
.fhub .fh-link:hover{color:var(--ds-accent)}
.fh-recent__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-sp-3)}
.fh-thumb{display:grid;gap:var(--ds-sp-2);text-decoration:none;color:var(--ds-text);min-width:0}
.fh-thumb img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--ds-r-md);border:1px solid var(--ds-border);background:var(--ds-surface-2)}
.fh-thumb:hover img{border-color:var(--ds-accent-border);box-shadow:var(--ds-shadow-1)}
.fh-thumb__missing{display:grid;place-items:center;width:100%;aspect-ratio:3/4;border-radius:var(--ds-r-md);border:1px dashed var(--ds-border);background:var(--ds-surface-2);color:var(--ds-text-3);font-size:var(--ds-fs-sm)}
.fh-thumb__cap{display:grid;gap:2px}
.fh-thumb__cap b{font-size:var(--ds-fs-sm)}
.fh-thumb__cap small{font-size:var(--ds-fs-xs);color:var(--ds-text-3)}
.fhub .fh-recent__empty{grid-column:1/-1;display:grid;justify-items:center;gap:var(--ds-sp-2);padding:var(--ds-sp-4);border:1.5px dashed var(--ds-border-strong);border-radius:var(--ds-r-md);text-align:center}
.fh-recent__art{width:96px;height:72px;background-size:contain;background-repeat:no-repeat;background-position:center}
.fhub .fh-recent__emptytext{font-size:var(--ds-fs-sm);color:var(--ds-text-2);line-height:var(--ds-lh)}

/* ── 今月の費用 ── */
.fhub .fh-cost__num{display:flex;align-items:baseline;gap:var(--ds-sp-1);padding:var(--ds-sp-2) 0 var(--ds-sp-3)}
.fhub .fh-cost__num::before{content:"";align-self:center;width:56px;height:56px;margin-right:var(--ds-sp-3);border-radius:50%;flex:none;
 background:radial-gradient(circle at 50% 50%,var(--ds-world-gold) 0 34%,var(--ds-world-gold-soft) 35% 46%,var(--ds-surface-2) 47%)}
.fh-cost__value{font:var(--ds-fw-bold) 40px/1 var(--ds-font-num);letter-spacing:-.01em}
.fh-cost__unit{font:var(--ds-fw-bold) var(--ds-fs-xl)/1 var(--ds-font)}
.fhub .fh-cost__num{width:100%;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:var(--ds-r-md)}
.fhub .fh-cost__num:disabled{cursor:default}
.fhub .fh-cost__num:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.fhub .fh-cost__more{margin-left:auto;align-self:center;font-size:var(--ds-fs-xs);color:var(--ds-text-3)}
.fhub .fh-cost__more::after{content:" ▾"}
.fhub .fh-cost.is-open .fh-cost__more::after{content:" ▴"}
.fhub .fh-cost__num:disabled .fh-cost__more{display:none}
/* 内訳は、押したとき（.is-open）か、指を置いたとき（マウスのある画面）だけ出す。ふだんは大きな数字1つ */
.fhub .fh-cost__parts{display:none;margin:0;padding:var(--ds-sp-3) var(--ds-sp-4);list-style:none;gap:var(--ds-sp-1);background:var(--ds-surface-2);border-radius:var(--ds-r-md);font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.fhub .fh-cost.is-open .fh-cost__parts{display:grid}
@media (hover:hover){.fhub .fh-cost:has(.fh-cost__num:not(:disabled)):hover .fh-cost__parts{display:grid}}
.fhub .fh-cost__parts li{display:flex;justify-content:space-between;gap:var(--ds-sp-3)}
.fhub .fh-cost__parts b{font-weight:var(--ds-fw-bold);color:var(--ds-text);text-align:right}
.fhub .fh-cost__note{margin-top:var(--ds-sp-2);font-size:var(--ds-fs-xs);line-height:1.6;color:var(--ds-text-3)}

/* ── はじめての案内（onboarding.js）：Google をつなぐ節は「あとで」の小さなカード ── */
.onboarding-dialog .onb-later{display:grid;gap:var(--ds-sp-2);margin:var(--ds-sp-5) var(--ds-sp-4) 0;padding:var(--ds-sp-4) var(--ds-sp-5)}
.onboarding-dialog .onb-later h2.onb-sub{margin:0;font:var(--ds-fw-bold) var(--ds-fs-md)/1.4 var(--ds-font);color:var(--ds-text-2)}
.onboarding-dialog .onb-later p{margin:0;font-size:var(--ds-fs-sm);line-height:var(--ds-lh);color:var(--ds-text-2)}
.onboarding-dialog .onb-later p:last-child{font-size:var(--ds-fs-xs);color:var(--ds-text-3)}
.onboarding-dialog .onb-later .onboarding-actions{display:flex;flex-wrap:wrap;gap:var(--ds-sp-2);margin:var(--ds-sp-1) 0 0}
.onboarding-dialog .onboarding-intro .onboarding-start{justify-self:start}

/* ── 幅が狭いとき ── */
@media (max-width:1180px){
 .fh-grid{grid-template-columns:1fr}
 .fh-col--side{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media (max-width:760px){
 .fhub{gap:var(--ds-sp-4);padding:var(--ds-sp-3) 0 var(--ds-sp-6)}
 .fh-col,.fh-col--side{grid-template-columns:1fr;gap:var(--ds-sp-4)}
 /* 次にやること：左寄せ・ボタンは全幅 */
 .fhub .fh-next{justify-items:stretch;text-align:left;padding:var(--ds-sp-5) var(--ds-sp-4)}
 .fhub .fh-next .ds-next__title{font-size:var(--ds-fs-xl)}
 .fh-next__art{top:var(--ds-sp-4);right:var(--ds-sp-4);width:64px;height:64px}
 .fhub .fh-next[data-art] .ds-next__title{padding:0 68px 0 0}
 .fhub .fh-next .ds-next__action{align-items:stretch}
 .fhub .fh-next__go{min-width:0;width:100%}
 .fhub .fh-next .ds-cost{justify-content:center}
 /* 手順は縦（説明と札つき） */
 .fhub .fh-steps{flex-direction:column;gap:var(--ds-sp-4);margin-top:var(--ds-sp-2);padding-top:var(--ds-sp-4);border-top:1px solid var(--ds-border)}
 .fhub .fh-step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;justify-items:start;align-items:center;text-align:left;column-gap:var(--ds-sp-3);width:100%}
 .fhub .fh-step+.fh-step::after{top:-16px;left:13px;right:auto;width:2px;height:16px}
 .fhub .fh-step__desc{display:block}
 .fhub .fh-step__tag:not([hidden]){display:inline-flex}
 .fhub .fh-step__name{font-size:var(--ds-fs-md);color:var(--ds-text)}
 .fh-recent__list{gap:var(--ds-sp-2)}
 .fh-cost__value{font-size:var(--ds-fs-3xl)}
 .fhub .fh-cost__num::before{width:44px;height:44px}
}

/* ════ 仕上げ（2026-10-09 全画面の監査：scratchpad/pl/shots の before_home_*） ════
 * 並び・世界の見た目（キャラ・鍵・オフィス・地図・旅・レベル）は変えない。12px 未満の文字と、出さないはずの帯だけを直す。
 * style.css が !important で 10〜11px にしているので、ここも !important */
/* AI社員の札：名前（ライル等）が 10px、説明が 10〜11px だった */
.studio-specialists .specialist-card-copy small{font-size:var(--ds-fs-sm)!important}
.studio-specialists .specialist-card-copy>span,.studio-specialists .specialist-card-copy>b,.studio-specialists .specialist-card-copy>em,
.studio-specialists-heading small{font-size:var(--ds-fs-xs)!important}
/* 鍵の文（見た目は同じ・大きさだけ）。390px で「そろいました」の「た」が1文字だけ次の行に落ちていた */
.studio-specialists .agent-lock-title,.studio-specialists .agent-lock-say{font-size:var(--ds-fs-xs)!important;text-wrap:balance;word-break:auto-phrase}
.studio-specialists .agent-lock-title{font-size:var(--ds-fs-sm)!important}
/* オフィスの施策の帯・外周のライバル・旅の表の小さな文字 */
#office-board-count,.office-rival-frontier :is(.rival-status,.rival-stats-wait),.office-rival-frontier header button,.office-rival-frontier footer a{font-size:var(--ds-fs-xs)!important}
#journey-band :is(.jm-phase-no,.jm-header-add,.jm-add-go,.jm-phase-moment,.jm-add-say,.jm-bar-done,.jm-map-hint,.jm-phase-count,.jm-row-count,.journey-band-note){font-size:var(--ds-fs-xs)!important}
#journey-band :is(.jm-cell,.jm-card) :is(em,span){font-size:var(--ds-fs-xs)}
/* 「依頼・ラフを確認」の帯は出さない約束（2026-09-26 卓馬指示）。hidden を付けても display の指定で出ていた */
.office-work-access[hidden]{display:none!important}
/* 今月の費用：長い注意書きは内訳と一緒に出す（いつも7行の灰色の文が並んでいた） */
.fhub .fh-cost__note--more{display:none}
.fhub .fh-cost.is-open .fh-cost__note--more{display:block}
@media (hover:hover){.fhub .fh-cost:has(.fh-cost__num:not(:disabled)):hover .fh-cost__note--more{display:block}}
.fhub .fh-cost__more{font-size:var(--ds-fs-sm)}
@media (max-width:600px){.fhub .fh-link,.office-rival-frontier header button,.office-rival-frontier footer a{display:inline-flex;align-items:center;min-height:var(--ds-touch)}}
.fhub .fh-cost__note--more[hidden]{display:none!important}
/* 残った 12px 未満（2026-10-09 監査の2回目）。見た目は同じで大きさだけ */
.studio-specialists .studio-specialists-heading small{font-size:var(--ds-fs-xs)!important}
#office-roster-open,#office-team .office-list-agent small,.tmap-how small{font-size:var(--ds-fs-xs)!important}
#journey-band :is(.jm-row-label small,.jm-key-item span,.jm-header-cell em,.jm-header-cell span,.jm-have span){font-size:var(--ds-fs-xs)!important}
#office-team :is(.agent-lock-title,.agent-lock-say){font-size:var(--ds-fs-xs)!important}