/* =============================================================================
   Agos / NoimosAI — Page blocks layer
   Pages ドキュメント（screens/pages-daily-check.html）に載る **ブロック**の層。
   Master 参照:
     - SEO block            1508:17407（content 1508:17485）
     - GEO block            1508:19356（content 1508:19434）
     - Block settings popover 1508:21176 / 1508:21100 / 1508:20828
   ルール:
     - 色 / 余白 / 角丸 / 字は tokens.css の var(--…) のみ。直書き禁止。
     - 既存クラス（.seo* / .menu--panel / .set-row / .field / .input / .select /
       .toggle / .segmented / .met-chart .chartm / .icon-btn）を最優先で再利用し、
       ここには「既存に無いもの」だけを足す。既存クラスの再定義はしない。
     - チャート色は Master Components 様式（45:11489）の
       --secondary-indigo / --secondary-green のみ。UI クロームに緑は使わない。
   ============================================================================= */


/* =============================================================================
   BLOCK FRAME (.pblock) — Page 上の1ブロックの器とヘッダー行
   Figma のブロックは「名前 + 追跡中の URL ピル … gear / kebab」の1行を持つ。
   ここに **status chip**（今どの頻度で走っているか）を足したのが今回の改善。
   ============================================================================= */
/* 奥行きは1段だけ（2026-08-26）。Figma の mock は page / block / inner panel が
   全部 #FFF〜#FBFBFB + 1px hairline で、3層が同じ高さに見えていた。ここで付ける段は:
     page ground = --surface-subtle → block card = --surface + --shadow-1 → inner panel = --surface-subtle
   新しい影の値は作らず既存トークンのみ。overlay(--shadow-2) は popover 側の既定のまま。
   .pblock はこの画面にしか無いので、page ground の指定も :has(.pblock) で閉じている
   （他の Pages 系画面の地色は変えない）。 */
.page-wrap:has(.pblock) { background: var(--surface-subtle); }

.pblock            { border: 0.5px solid var(--border); border-radius: var(--radius-lg);
                     background: var(--surface); padding: var(--space-7); position: relative;
                     box-shadow: var(--shadow-1); }
.pblock:hover      { border-color: var(--border-strong); }
.pblock + .pblock  { margin-top: var(--space-6); }

/* block card の中のパネルは「白の上のへこみ」= --surface-subtle・罫線なしに揃える。
   GEO 側（.geo__card / .geo__tile / .geo__plist / .geo__group）は元々この地なので、
   SEO 側とチャートカードだけをここで合わせる（components.css は書き換えない）。
   その中のさらに1段（.seo__res / .pblock-url / .geo__prompt）は白のまま = 3層目。 */
.pblock__body .seo__card,
.pblock__body .seo__serp,
.pblock__body .seo__table,
.pblock__body .met-chart { background: var(--surface-subtle); border-color: transparent; }

.pblock__head      { display: flex; align-items: center; gap: var(--space-4);
                     margin-bottom: var(--space-7); }
.pblock__name      { font: var(--type-s2-weight) var(--type-s2-size)/var(--type-s2-lh) var(--font-sans);
                     color: var(--text-primary); }
/* 追跡対象（URL / ブランド）のピル。Figma: N50 塗り・radius full・globe + muted text */
.pblock__src       { display: inline-flex; align-items: center; gap: var(--space-4);
                     height: 28px; padding: 0 var(--space-5); border-radius: var(--radius-full);
                     background: var(--surface-subtle); color: var(--text-muted);
                     font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); }
.pblock__src .ph   { font-size: 14px; color: var(--text-faint); }
.pblock__sp        { flex: 1 1 auto; }

/* status chip — 「今このブロックがどう走っているか」を常時見せる（改善点）。
   走っている間は頻度そのもの（Every day）、止めていれば Paused。装飾色は使わず
   Neutral のまま、時計アイコン + 文言だけで状態を出す。 */
.pblock__status    { display: inline-flex; align-items: center; gap: var(--space-3);
                     height: 24px; padding: 0 var(--space-5); border-radius: var(--radius-full);
                     border: 0.5px solid var(--border); background: var(--surface);
                     color: var(--text-muted);
                     font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); }
.pblock__status .ph { font-size: 14px; color: var(--text-faint); }
.pblock__acts      { display: inline-flex; align-items: center; gap: var(--space-3); }

/* 設定 popover の中身は既存 .menu--panel をそのまま使う。足りないのは
   「トグル行の下に付く説明文」の間隔だけなので、それだけをここで足す。 */
.pblock-help       { margin-top: var(--space-3); }

/* popover のリズムを1つに揃える（2026-08-26）。既定は panel の gap 16 に
   .field + .field の margin-top 16 が重なって、トグル行 → Update frequency の間だけ
   ~55px と panel 内で最大の隙間になっていた。グループの区切りは divider に一本化し、
   間隔は panel の gap（16）だけにする → どのグループ間も 16 + 1px + 16 で等間隔。
   これで SEO / GEO の2枚は「グループ数が違うだけの同じ構造」になる。 */
.pblock .menu--panel .field + .field { margin-top: 0; }
.pblock .menu--panel .menu__divider  { margin: 0; }

/* パネルに commit の手掛かりが無く飾りに見えていたので、保存の挙動を明示する行を
   両方の末尾に置く（Done ボタンは header の X と役割が重複するので採らない）。 */
.pblock-saved      { display: flex; align-items: center; gap: var(--space-3);
                     font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans);
                     color: var(--text-muted); }
.pblock-saved .ph  { font-size: 14px; color: var(--text-faint); }

/* 表の一部しか出していない Keyword ideas カードの「全件を見る」導線。
   テキストリンクは house ルールにより DS Button の Text 型 = .btn--ghost。 */
.pblock-more       { display: flex; margin-top: var(--space-4);
                     margin-left: calc(var(--space-5) * -1); }

/* SEO パネルは canvas 幅（923px）前提で min-width を持つ。Page ドキュメントの
   本文幅は左の Pages 一覧ぶん狭いので、ブロックの中でだけ解除して流し込む。
   .seo の定義そのものは書き換えない（スコープ付きの流用）。 */
.pblock__body .seo { min-width: 0; }

/* Keyword ideas の並び（Figma 1508:17485）:
   Keyword Variation + Questions が横並び、Broad Match Keywords が下に全幅。
   .seo__tables（3カラム）とは別の並びなのでこのクラスで置き換える。 */
.pblock-ideas      { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                     gap: var(--space-5); align-items: start; }
.pblock-ideas > :last-child { grid-column: 1 / -1; }


/* =============================================================================
   GEO BLOCK (.geo*) — Master 1508:19434
   節構成: Keyword overview / AI Visibility Leaderboard / Top prompts /
           Raising・Falling brands / Topic-Level Share of Voice / Prompts & Outputs
   ============================================================================= */
.geo               { display: flex; flex-direction: column; gap: var(--space-8); }
.geo__sect         { display: flex; flex-direction: column; gap: var(--space-5); }
.geo__h            { display: flex; align-items: center; gap: var(--space-4);
                     font: var(--fw-medium) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }
.geo__hc           { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); }
.geo__hsp          { flex: 1 1 auto; }

/* ---- Keyword overview: 指標タイル3枚（値の右に up-delta） ------------------ */
.geo__tiles        { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.geo__tile         { display: flex; flex-direction: column; gap: var(--space-5);
                     padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-subtle); }
.geo__tk           { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-muted); }
.geo__trow         { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.geo__tv           { display: flex; align-items: baseline; gap: var(--space-1);
                     font: var(--type-h2-weight) var(--type-h2-size)/1.2 var(--font-sans); color: var(--text-primary);
                     font-variant-numeric: tabular-nums; }
.geo__tv small     { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); }
/* delta は「状態」なので意味色を最小限だけ使う。装飾ではない。
   色は矢印の向きではなく **良し悪し** に対応させる（visibility が上がる / 平均順位が
   下がる = success、競合密度が上がる = danger）。矢印は数値の増減そのもの。 */
.geo__delta        { display: inline-flex; align-items: center; gap: var(--space-2);
                     font: var(--fw-medium) var(--type-c1-size)/1 var(--font-sans); color: var(--success-700);
                     font-variant-numeric: tabular-nums; }
.geo__delta .ph    { font-size: 14px; }
.geo__delta--bad   { color: var(--danger-700); }

/* ---- 2カラム（leaderboard + chart / raising + falling） -------------------- */
/* align-items: start — 表カードをチャートに引き伸ばすと表の下にグレーの空白帯が
   出る。カードはそれぞれの中身ぶんの高さにする。
   併せて .met-chart の min-height:320 を無効化する: 320 は canvas 用の下限で、
   ここでは中身（segmented + 凡例 + プロット + 軸）より高く、隣の表と 40px ほど
   底が揃わなくなる。Figma 1508:19356 では2枚の底はほぼ同じ高さ。 */
.geo__2col         { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                     gap: var(--space-5); align-items: start; }
.geo__2col .met-chart { min-height: 0; }

/* ---- 表カード: N50 の器 + 罫線はヘッダー下だけ（Figma 実測） --------------- */
.geo__card         { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-subtle); }
.geo__t            { width: 100%; border-collapse: collapse; }
.geo__t th         { text-align: left; white-space: nowrap; padding: var(--space-3) var(--space-4);
                     border-bottom: 1px solid var(--border);
                     font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans);
                     color: var(--text-faint); font-weight: var(--fw-regular); }
.geo__t td         { padding: var(--space-5) var(--space-4);
                     font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans);
                     color: var(--text-primary); font-variant-numeric: tabular-nums; }
.geo__t th:first-child, .geo__t td:first-child { padding-left: var(--space-2); }
.geo__t th:last-child,  .geo__t td:last-child  { padding-right: var(--space-2); }
/* 幅は「名前列に余りを全部渡す」だけ決める。数値列は内容ぶんに縮む
   （Page 本文幅は Figma の canvas より狭いので固定幅を置くと溢れる）。 */
.geo__t .geo__rank { color: var(--text-secondary); width: 24px; }
.geo__t .geo__brand{ width: 100%; }
.geo__t .geo__n    { white-space: nowrap; }

/* Page ドキュメントの本文幅は Figma の canvas より狭いので、GEO の表はここでだけ
   左右 padding を詰める。数値列の幅はヘッダー語（Sentiment / Mentions）で決まっていて
   値より広いから、詰めても列同士はくっつかない。これで
     - leaderboard: 自社行の "You" タグを足しても銘柄名が折り返さない
     - Rising / Falling: Change 列を1本足しても 6 列が収まる
   の両方が1行に収まる。 */
.pblock__body .geo__t th,
.pblock__body .geo__t td { padding-left: var(--space-2); padding-right: var(--space-2); }
/* 銘柄名は折り返させない（"Contoso Search" / "Northwind AI" が2行になると行高が揃わない）。 */
.pblock__body .geo__t td:first-child { white-space: nowrap; }

/* 自社の行/列。緑は使わず、太さ + 中立の "You" タグだけで自分を見つけられるようにする。 */
.geo__t .is-self td { font-weight: var(--fw-medium); }
.geo__self         { display: inline-flex; align-items: center; height: 20px; margin-left: var(--space-3);
                     padding: 0 var(--space-2); border-radius: var(--radius-full);
                     border: 0.5px solid var(--border); background: var(--surface); color: var(--text-muted);
                     font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans);
                     font-weight: var(--fw-regular); vertical-align: middle; }

/* Rising / Falling は左右に並ぶ同じ形の表。銘柄名の長さ（NoimosAI + You タグ /
   Northwind AI）で銘柄列の幅が変わると、隣り合う2枚で列がズレて別の表に見える。
   銘柄列だけ幅を決め打ちして、5本の数値列がぴったり揃うようにする。 */
.geo__t--movers .geo__brand { width: 27%; }

/* Topic-level share of voice は全幅の表。Topic 列に余りを全部渡すと、名前と数字の間に
   500px 近い空白ができて1行が読み取れない。ここだけ数値4列に固定幅を配って散らす。 */
.geo__t--sov .geo__brand { width: 34%; }
.geo__t--sov .geo__n     { width: 16.5%; }
/* 上下どちらに動いたかは 符号 + trend アイコン + 意味色 の3つで出す（色だけに頼らない）。 */
.geo__chg          { display: inline-flex; align-items: center; gap: var(--space-2);
                     color: var(--success-700); font-variant-numeric: tabular-nums; }
.geo__chg .ph      { font-size: 14px; }
.geo__chg--down    { color: var(--danger-700); }

/* ---- Top prompts: 吹き出しアイコン + プロンプト文 + 右にその prompt の実測値 ---- */
.geo__plist        { display: flex; flex-direction: column; gap: var(--space-5);
                     padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-subtle); }
.geo__prow         { display: flex; align-items: center; gap: var(--space-5);
                     font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.geo__prow .ph     { font-size: 16px; color: var(--text-faint); flex: 0 0 16px; }
/* 素の文が3行並ぶだけだと読み物に見えるので、1行ごとに数値のメタを右端に置く。 */
.geo__pmeta        { margin-left: auto; padding-left: var(--space-6); white-space: nowrap;
                     font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint);
                     font-variant-numeric: tabular-nums; }

/* ---- チャートの一行説明: 5ブランドの表の隣で系列が2本しか無い理由を書く ------- */
.geo__chartnote    { margin-top: var(--space-4);
                     font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); }

/* ---- Prompts & Outputs: グループ → プロンプト行 → 回答カード -------------- */
.geo__group        { display: flex; flex-direction: column; gap: var(--space-5);
                     padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-subtle); }
.geo__ghead        { display: flex; align-items: center; gap: var(--space-4); cursor: pointer;
                     font: var(--fw-medium) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.geo__gmeta        { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); }
.geo__ghead .ph--caret { margin-left: auto; font-size: 16px; color: var(--text-faint); }
/* グループの中は「プロンプト1件 = 白カード1枚」（Figma 実測） */
.geo__gbody        { display: flex; flex-direction: column; gap: var(--space-5); }
.geo__prompt       { padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface); }
.geo__pq           { display: flex; align-items: center; gap: var(--space-5); cursor: pointer;
                     font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.geo__pq .ph       { font-size: 16px; color: var(--text-faint); flex: 0 0 16px; }
.geo__pq .ph--caret{ font-size: 16px; color: var(--text-faint); }
/* 折りたたみは既存の [data-collapsible] + [data-collapse-toggle]（interactions.js）を
   そのまま使う。新規 JS はゼロ。開いた状態が既定（Figma と同じ）。 */
.geo__group.is-collapsed  .geo__gbody { display: none; }
.geo__group.is-collapsed  .geo__ghead .ph--caret { transform: rotate(-90deg); }
.geo__prompt.is-collapsed .geo__out   { display: none; }
.geo__prompt.is-collapsed .geo__pq .ph--caret { transform: rotate(-90deg); }
.geo__pill         { margin-left: auto; display: inline-flex; align-items: center; height: 24px;
                     padding: 0 var(--space-4); border-radius: var(--radius-full);
                     background: var(--surface-subtle); color: var(--text-muted);
                     font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); }
.geo__out          { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-5); }
.geo__ans          { display: flex; flex-direction: column; gap: var(--space-4);
                     padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-subtle); }
.geo__ansh         { display: flex; align-items: center; gap: var(--space-3);
                     font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); }
.geo__ansh .ph     { font-size: 14px; color: var(--text-secondary); }
.geo__model        { font: var(--fw-medium) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.geo__anst         { font: var(--type-b3-weight) var(--type-b3-size)/1.6 var(--font-sans); color: var(--text-primary); }
.geo__lbl          { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); }
.geo__chips        { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.geo__chip         { display: inline-flex; align-items: center; gap: var(--space-3);
                     height: 24px; padding: 0 var(--space-4); border-radius: var(--radius-xs);
                     background: var(--surface-subtle); color: var(--text-muted);
                     font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); }
.geo__chip .ph     { font-size: 14px; color: var(--text-faint); }

/* ---- URL 行の2カラム（SEO の Broad Match Keywords、Figma 1508:17407）--------
   上2枚のキーワード表と違い、ここは globe + URL + 件数 の行が2列で並ぶ。 */
.pblock-urls       { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                     gap: var(--space-4); margin-top: var(--space-5); }
.pblock-url        { display: flex; align-items: center; gap: var(--space-4);
                     padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
                     background: var(--surface); }
.pblock-url .ph    { flex: 0 0 auto; font-size: 16px; color: var(--text-faint); }
.pblock-url__t     { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                     font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); color: var(--text-secondary); }
.pblock-url__n     { flex: 0 0 auto; font-variant-numeric: tabular-nums;
                     font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); color: var(--text-primary); }

/* ---- Canvas に置く Pages ブロック（2026-08-27 / spec-210）------------------
   セットアップの最後の1面は chat 440px の隣に canvas を開くので、本文幅は
   Pages（約 1000）ではなく約 700 になる。Pages 幅を前提にした2カラム
   （leaderboard = 表 + チャート / Rising・Falling / Keyword ideas）は、そのままだと
   列見出しが切れる。横スクロールに逃がす手もあるが、それだと**ヘッダーの頻度チップが
   初期表示から外れて、いま選んだ設定が見えなくなる**ので、ここでは縦に積む。 */
.pblock--canvas .geo__2col,
.pblock--canvas .pblock-ideas   { grid-template-columns: minmax(0, 1fr); }
.pblock--canvas .pblock-ideas > :last-child { grid-column: auto; }