/* ============================================================
 * lab-ui.css — AI TRUST Lab 共通コンポーネント／光彩レイヤー
 * lab-tokens.css を先に読み込むこと。色は必ず var(--lab-*) 経由。
 * 仕様は design_system/PLAN.md §2（光彩）／§4.4（部品）。
 * ============================================================ */

/* ============================================================
 * 光彩レイヤー
 *
 * 設計の4原則（LP案を読み直して得たもの）:
 *  1) 1つの区画に光源は1つだけ。玉を複数散らすと安っぽくなる。
 *  2) 光は局所的な玉ではなく、区画全体に及ぶ広い勾配にする。
 *     角だけを光らせる書き方はしない。
 *  3) 光の色は、その光が届く範囲にある文字・数値の色と揃える。
 *     色が混ざる区画では色を付けず、白い光にする。
 *  4) 光の上にベタ塗りの面を重ねて行き過ぎを抑える。光と面は対で使う。
 *
 * ぼかし要素には必ず pointer-events:none を付ける（クリックを食う事故を防ぐ）。
 * ============================================================ */

/* ── アンビエント（区画の光源）────────────────────────
   filter:blur() の玉ではなく radial-gradient で作る。
   ぼかしは半径ぶんしか広がらないが、勾配なら区画いっぱいに伸ばせる。
   親に position:relative と適当な高さを与えて使う。 */
.lab-ambient{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  background-image:
    radial-gradient(125% 78% at 46% -14%, var(--lab-ambient-tint) 0%, transparent 64%),
    radial-gradient(86% 58% at 20% 2%,   var(--lab-ambient-neutral) 0%, transparent 74%)}

/* 強く広い版。ページ最上部のように、面積が大きく主役になる区画で使う。
   届く範囲が広いぶん、原則4のベタ塗り面を必ず重ねて行き過ぎを抑えること。 */
.lab-ambient--strong{
  /* 面積が大きいぶん、既定の濃さでは薄く見える。ここで一段濃くしておく。 */
  --lab-ambient-tint: color-mix(in oklab, var(--lab-sig) 26%, transparent);
  --lab-ambient-neutral: rgba(255,255,255,.075);
  background-image:
    radial-gradient(155% 102% at 40% -26%, var(--lab-ambient-tint) 0%, transparent 74%),
    radial-gradient(110% 78% at 14% -10%, var(--lab-ambient-neutral) 0%, transparent 80%)}

/* 色を持たせない版。いろいろな色の要素が混ざる区画はこちら。 */
.lab-ambient--neutral{background-image:
    radial-gradient(115% 72% at 50% -10%, rgba(255,255,255,.07) 0%, transparent 66%)}

/* 意味色で光らせる版。--lab-ambient-tint を上書きして使う。
   例: <div class="lab-ambient" style="--lab-ambient-tint:rgba(240,100,91,.13)"> */

/* ── ウォッシュ（面そのものを光らせる）──────────────────
   カードや区画の内側に広い勾配を敷く。角の玉ではなく面全体の階調。
   光の届く範囲に、同じ色の見出しや数値を置くこと。 */
.lab-wash{position:relative;isolation:isolate}
.lab-wash::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background-image:radial-gradient(130% 108% at 6% 0%,
    var(--lab-wash-color,var(--lab-ambient-neutral)) 0%, transparent 68%)}
.lab-wash--center::before{background-image:radial-gradient(80% 70% at 50% 42%,
    var(--lab-wash-color,var(--lab-ambient-neutral)) 0%, transparent 72%)}

/* ── ガラス（光を透かす面）──────────────────────────
   光源のある区画でだけ使う。光の無い区画に使っても意味がなく負荷だけ増える。
   10枚以上並ぶカードには使わない。 */
.lab-glass{
  background:var(--lab-surface);
  -webkit-backdrop-filter:blur(var(--lab-glass-blur));
          backdrop-filter:blur(var(--lab-glass-blur));
  border:1px solid var(--lab-border);
  border-radius:var(--lab-r-lg);
  position:relative;z-index:1}

/* ── ソリッド（光を止める面）────────────────────────
   原則4。光の上にこれを重ねて明るさの行き過ぎを抑える。
   ガラスと必ず対で使い、区画の中で「透ける面」と「止める面」を作り分ける。 */
.lab-solid{background:var(--lab-surface-solid);
  border:1px solid var(--lab-border);border-radius:var(--lab-r-lg);
  position:relative;z-index:1}
/* カードの内側でさらに光を止めたい塊（明細リストなど）に。 */
.lab-solid-inset{background:var(--lab-bg);border:1px solid var(--lab-border-soft);
  border-radius:var(--lab-r);position:relative;z-index:1}

/* ── ドットグリッド ─────────────────────────────────
   単体ではほぼ見えないが、外すと地がのっぺりする。 */
.lab-dotgrid{position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:var(--lab-dot-op);
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);
  background-size:var(--lab-dot-gap) var(--lab-dot-gap)}

/* ── 色付きの影 ───────────────────────────────────
   黒影より軽く、暗い地でも沈まない。CTA とロゴタイルに。 */
.lab-shadow-glow{box-shadow:var(--lab-glow)}

/* ── 使わないこと ─────────────────────────────────
   ・カードの角だけを光らせる小さな玉（局所的で安く見える）
   ・1区画に2つ以上の光源
   ・要素の外周を光らせるハロー（見本01で逆効果と判定）
   ・光が届く範囲に何の要素も無い色付きの光 */

/* ============================================================
 * 部品
 * ============================================================ */

/* アイブロウ — 小見出し。LP案の署名的な要素。
   セクション見出しは水色で統一する（6色のシグネチャ色は従属要素にだけ出す）。
   カードなど従属要素の中では --sig を付けてシグネチャ色にする。 */
.lab-eyebrow{display:inline-block;font-family:var(--lab-mono);
  font-size:var(--lab-fs-sm);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lab-accent)}
.lab-eyebrow--sig{color:var(--lab-sig)}

/* ピルバッジ — 地は色の10%、枠は同色30%。最頻出パターン。 */
.lab-badge{display:inline-flex;align-items:center;gap:6px;
  padding:3px 12px;border-radius:var(--lab-r-pill);
  font-size:var(--lab-fs-sm);font-weight:600;line-height:1.7;
  color:var(--lab-badge-color,var(--lab-sig));
  background:color-mix(in oklab, var(--lab-badge-color,var(--lab-sig)) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--lab-badge-color,var(--lab-sig)) 30%, transparent)}
.lab-badge--ok    {--lab-badge-color:var(--lab-ok)}
.lab-badge--warn  {--lab-badge-color:var(--lab-warn)}
.lab-badge--danger{--lab-badge-color:var(--lab-danger)}
.lab-badge--muted {--lab-badge-color:var(--lab-text-muted)}

/* ロゴタイル — 色覚差でも見分けられるよう、色だけに頼らない手がかりを足す。 */
.lab-tile{display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:var(--lab-r);flex:0 0 auto;
  font-size:var(--lab-fs-xl);line-height:1;color:var(--lab-accent-ink);
  background:linear-gradient(135deg,
    var(--lab-sig),
    color-mix(in oklab, var(--lab-sig) 55%, var(--lab-accent-2)));
  box-shadow:var(--lab-glow)}

/* 見出しの一部だけをグラデーション文字にする。 */
.lab-grad-text{background-image:var(--lab-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lab-grad-text--sig{background-image:linear-gradient(90deg,
  var(--lab-sig), color-mix(in oklab, var(--lab-sig) 50%, var(--lab-accent-2)))}

/* スタット — 大きい数字＋小さい単位＋補助行の3層。 */
.lab-statrow{display:flex;flex-wrap:wrap;gap:var(--lab-gap)}
.lab-stat{flex:1 1 160px;padding:14px 16px}
.lab-stat .lab-stat__label{font-size:var(--lab-fs-md);color:var(--lab-text-muted)}
.lab-stat .lab-stat__value{font-size:var(--lab-fs-3xl);font-weight:700;line-height:1.2;
  font-variant-numeric:tabular-nums}
.lab-stat .lab-stat__unit{font-size:var(--lab-fs-md);font-weight:500;
  color:var(--lab-text-muted);margin-left:5px}
.lab-stat .lab-stat__sub{font-size:var(--lab-fs-sm);color:var(--lab-text-muted);margin-top:2px}

/* ページ上端のヘアライン。どのツールを見ているかを一目で示す。 */
.lab-hairline{position:fixed;top:0;left:0;right:0;height:2px;z-index:1200;
  background:linear-gradient(90deg,transparent,var(--lab-sig),transparent);
  opacity:.85;pointer-events:none}

/* ============================================================
 * 用語ポップアップ
 * 解説したい語に data-term="<キー>" を付けると、
 * lab-ui.js が説明を出す。マウスオーバーとタップの両方に対応。
 * ============================================================ */
.lab-term{cursor:help}
/* 下線は素の文字にだけ引く。バッジのように既に枠のある部品には引かない。 */
.lab-term:not(.lab-badge){border-bottom:1px dashed var(--lab-term-line)}
.lab-term:not(.lab-badge):hover,.lab-term:not(.lab-badge):focus-visible{
  border-bottom-color:var(--lab-accent);color:var(--lab-text);outline:none}
.lab-badge.lab-term:hover,.lab-badge.lab-term:focus-visible{
  filter:brightness(1.25);outline:none}
.lab-pop{position:absolute;z-index:1500;width:min(420px, calc(100vw - 32px));
  background:var(--lab-surface-solid);border:1px solid var(--lab-border);
  border-radius:var(--lab-r);box-shadow:0 16px 40px -12px rgba(0,0,0,.7);
  padding:15px 17px;font-size:var(--lab-fs-base);line-height:1.7;color:var(--lab-text);
  opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;
  /* ★ 吹き出しはマウスを受けない。中に入ってスクロールする作りにはしない。
     長い解説は .lab-details の折りたたみに置くこと（PLAN.md §4.4）。 */
  pointer-events:none}
/* 表示状態。lab-ui.js が .on を付け外しする。 */
.lab-pop.on{opacity:1;transform:translateY(0)}
.lab-pop h4{font-size:var(--lab-fs-lg);font-weight:700;margin-bottom:4px;color:var(--lab-accent)}
.lab-pop .sub{font-size:var(--lab-fs-sm);color:var(--lab-text-muted);margin-bottom:7px;
  font-family:var(--lab-mono)}
.lab-pop__body strong{color:var(--lab-text);font-weight:700}
.lab-pop__more{display:block;margin-top:8px;font-size:var(--lab-fs-sm);
  color:var(--lab-text-muted)}
@media (prefers-reduced-motion:reduce){.lab-pop{transition:none}}


/* ============================================================
 * 折りたたみの解説エリア
 * 吹き出しに収まらない長い説明はここに置く。
 *   <details class="lab-details"><summary>読み方と用語</summary> … </details>
 * ============================================================ */
.lab-details{background:var(--lab-surface-solid);border:1px solid var(--lab-border);
  border-radius:var(--lab-r-lg);margin:16px 0}
.lab-details > summary{cursor:pointer;list-style:none;padding:16px 20px;
  font-size:var(--lab-fs-lg);font-weight:700;color:var(--lab-text);
  display:flex;align-items:center;gap:10px}
.lab-details > summary::-webkit-details-marker{display:none}
.lab-details > summary::before{content:"▸";color:var(--lab-accent);font-size:.9em}
.lab-details[open] > summary::before{content:"▾"}
.lab-details > summary:hover{color:var(--lab-accent)}
.lab-details__body{padding:0 20px 20px}
.lab-details__item{padding:16px 0;border-top:1px solid var(--lab-border-soft)}
.lab-details__item h3{font-size:var(--lab-fs-lg);font-weight:700;color:var(--lab-accent);
  margin-bottom:6px}
.lab-details__item > *+*{margin-top:9px}
.lab-details__item ul,.lab-details__item ol{margin-left:22px}
.lab-details__item li+li{margin-top:5px}
.lab-details__item strong{color:var(--lab-text);font-weight:700}
.lab-details__item code{background:var(--lab-bg);border:1px solid var(--lab-border-soft);
  border-radius:4px;padding:1px 6px;font-family:var(--lab-mono);font-size:.92em;
  color:var(--lab-accent)}
.lab-details__item .formula{background:var(--lab-bg);border:1px solid var(--lab-border-soft);
  border-radius:var(--lab-r-sm);padding:12px 14px;font-family:var(--lab-mono);
  font-size:var(--lab-fs-sm);line-height:1.6}
.lab-details__item table{width:100%;border-collapse:collapse;font-size:var(--lab-fs-md)}
.lab-details__item th{text-align:left;padding:7px 9px;color:var(--lab-text-muted);
  font-weight:600;border-bottom:2px solid var(--lab-border)}
.lab-details__item td{padding:7px 9px;border-bottom:1px solid var(--lab-border-soft)}
@media(min-width:900px){
  /* 項目が多いので広い画面では2段組にする。 */
  .lab-details__body--cols{column-count:2;column-gap:32px}
  .lab-details__body--cols .lab-details__item{break-inside:avoid}
}