/* ── 絞り込みボタン（モバイル唯一の入口。明確に一番目立たせる・5-9）── */
.fab{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:45;
  transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:90%;max-width:520px;height:56px;padding:0 26px;
  background:var(--signal-bg);color:var(--on-signal);
  border-radius:var(--r-exec);font-size:15.5px;font-weight:700;letter-spacing:.08em;white-space:nowrap;
  box-shadow:var(--shadow-fab);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),filter .18s;
}
.fab:hover{filter:brightness(1.07)}
.fab:active{transform:translateX(-50%) scale(.96)}
.fab__n{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;
  background:rgba(0,0,0,.82);color:var(--signal);border-radius:var(--r-data);
  font-family:var(--font-num);font-size:12.5px;font-weight:500}
@media (min-width:900px){ .fab{display:none} }

/* ── 一覧・トップの固定ボタン。**お気に入りへの入口**（モックの .favfab） ──
   絞り込み（実行色）とは役割が違うので色を分ける */
.favfab{
  position:fixed;right:16px;z-index:45;
  bottom:calc(88px + env(safe-area-inset-bottom));
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--sale);color:var(--on-sale);
  box-shadow:var(--shadow-fab);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),filter .18s;
}
.favfab:hover{filter:brightness(1.07)}
.favfab:active{transform:scale(.94)}
.favfab svg{width:22px;height:22px;display:block}
.favfab__n{
  position:absolute;top:-3px;right:-3px;
  display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  background:var(--ink);color:var(--sale);border:1px solid var(--sale);border-radius:var(--r-exec);
  font-size:11px;font-weight:500;
}
@media (min-width:900px){ .favfab{right:28px;bottom:28px;width:64px;height:64px} }

.scrim{position:fixed;inset:0;z-index:50;background:var(--fixed-scrim);backdrop-filter:blur(2px);
  animation:scrimIn .26s ease}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  height:var(--sheet-h);display:flex;flex-direction:column;
  background:var(--ink-2);border-top:1px solid var(--line-2);border-radius:10px 10px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.35);
  animation:sheetIn .34s cubic-bezier(.22,.9,.25,1);
}
.sheet__grip{flex:0 0 auto;width:34px;height:3px;border-radius:var(--r-data);
  background:var(--line-2);margin:9px auto 3px}
.sheet__hd{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:6px 16px 13px;
  border-bottom:1px solid var(--line)}
.sheet__t{font-family:var(--font-serif);font-size:16px;font-weight:700;letter-spacing:.1em}
.sheet__reset{margin-left:auto;font-size:12px;color:var(--fg-mute);
  text-decoration:underline;text-underline-offset:3px;transition:color .16s}
.sheet__reset:hover{color:var(--fg-dim)}
.sheet__close{font-size:20px;line-height:1;padding:4px 8px;transition:color .16s}
.sheet__close:hover{color:var(--fg)}
.sheet__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 22px}
.sheet__ft{flex:0 0 auto;padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--ink-3)}
.sheet__ft .btn-run{width:100%}

/* ── サイドレール（デスクトップ。全画面に常設・5-9）── */
.rail{display:none}
@media (min-width:900px){
  .rail{display:block;position:sticky;top:52px;flex:0 0 var(--rail-w);width:var(--rail-w);
    height:calc(100dvh - 52px);overflow-y:auto;padding:0 20px 40px;border-right:1px solid var(--line)}
  .rail__hd{display:flex;align-items:baseline;gap:8px;padding:16px 0 10px;
    border-bottom:1px solid var(--line)}
  .rail__n{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--fg-dim)}
  .rail__n b{font-family:var(--font-num);font-size:26px;font-weight:500;letter-spacing:-.02em;
    color:var(--fg);transition:color .3s}
  .rail__reset{margin-left:auto;color:var(--fg-mute);font-size:12px;
    text-decoration:underline;transition:color .16s}
  .rail__reset:hover{color:var(--fg-dim)}
  .rail .fx:first-child{padding-top:4px}
  .sheet,.scrim{display:none !important}
}

/* ── 軸ブロックとチップ ── */
.fx{padding:19px 0;border-bottom:1px solid var(--line)}
.fx__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:9px}
.fx__t{font-size:12px;font-weight:700;letter-spacing:.14em}
.fx__hint{font-size:11px;color:var(--fg-mute)}
.fx__note,.fx__cov,.fx__scope{flex-basis:100%;font-size:11px;color:var(--fg-mute);line-height:1.7}
.fx__cov a,.fx__scope a{text-decoration:underline;color:var(--signal)}

/**
 * プロフィールが公開されていない条件のときだけ出る案内（案3）。
 * **軸そのものより目立たせない。** ここが騒ぐと、条件を変えるたびに
 * 視線が持っていかれる。地の色を少し変える程度に留める。
 */
.fx--guide{padding:10px 12px;border-radius:var(--r-card);
  background:var(--ink-2);border:1px solid var(--line-2)}
/* **注意を促す文なので signal で出す。** 押しても誰も出てこない理由を
   伝えるためのもので、地の色に沈めると読まれないまま空振りが続く */
.guide__t{margin:0 0 8px;font-size:11.5px;line-height:1.7;color:var(--signal)}
.guide__jump{display:flex;flex-wrap:wrap;gap:6px}
.guide__b{padding:5px 10px;border-radius:var(--r-exec);font-size:11.5px;
  background:transparent;border:1px solid var(--line);color:var(--fg)}
.guide__b:hover{border-color:var(--signal);color:var(--signal)}
/* 飛んだ先を一瞬だけ光らせる。どこへ来たのか分からないまま置き去りにしない */
.fx.is-flash{animation:fxflash 1.2s ease-out}
@keyframes fxflash{from{background:var(--ink-3)}to{background:transparent}}
.fx__datanote{padding:14px 0 4px;font-size:11.5px;color:var(--fg-mute)}
.fx__datanote a{text-decoration:underline;color:var(--signal)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
/* 状態を切り替えるだけの要素は角のままにする。押しても画面が動かないことを形で示す（5-14） */
.chip{display:inline-flex;align-items:baseline;gap:6px;padding:7px 10px;
  border:1px solid var(--line-btn);border-radius:var(--r-data);background:var(--ink);
  font-size:12.5px;color:var(--fg-dim);
  transition:border-color .16s,color .16s,background .16s,opacity .16s}
@media (max-width:520px){ .chip{font-size:11.5px;padding:6px 9px} }
.chip:hover:not(:disabled):not(.is-on){border-color:var(--fg-mute);color:var(--fg)}
.chip__n{font-family:var(--font-num);font-size:10px;color:var(--fg-mute);
  font-variant-numeric:tabular-nums;transition:color .16s}
.chip.is-on{border-color:var(--sel-line);background:var(--sel-bg);color:var(--on-sel)}
.chip.is-on .chip__n{color:var(--sel-sub)}
.chip.is-on:hover:not(:disabled){opacity:.86}
.chip:disabled,.chip[disabled]{opacity:.26;cursor:not-allowed}
.chip--tg{padding-left:12px;padding-right:12px}
.sel{width:100%;height:40px;padding:0 12px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-data);color:var(--fg-dim);font-size:13px;transition:border-color .16s}
.sel:hover{border-color:var(--line-2)}

.fold__btn{display:flex;align-items:center;gap:8px;width:100%;padding:16px 0 4px;
  font-size:12px;letter-spacing:.1em;color:var(--fg-dim);text-align:left;
  transition:color .16s}
.fold__btn:hover{color:var(--fg)}
.fold__btn::before{content:"";display:block;width:6px;height:6px;flex:0 0 auto;
  border-right:1.4px solid var(--fg-mute);border-bottom:1.4px solid var(--fg-mute);
  transform:rotate(-45deg);transition:transform .22s,border-color .16s}
.fold.is-open .fold__btn::before{transform:rotate(45deg)}
.fold__btn:hover::before{border-color:var(--fg-dim)}
.fold__body{display:none}
.fold.is-open .fold__body{display:block}

/* ── レンジスライダーと分布（5-1 原則3 / 5-5）。対象は身長の1軸だけ ── */
.rg{padding:6px 2px 2px}
.rg__hist{display:flex;align-items:flex-end;gap:1px;height:34px;margin-bottom:6px}
.rg__bar{flex:1;background:var(--signal);opacity:.55;border-radius:1px 1px 0 0;min-height:2px;
  transition:background .18s,opacity .18s}
.rg__bar.is-out{opacity:.16}
.rg__track{position:relative;height:26px}
.rg__track::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--line-2)}
.rg__fill{position:absolute;top:12px;height:2px;background:var(--signal)}
.rg__track input[type=range]{position:absolute;inset:0;width:100%;margin:0;background:none;
  pointer-events:none;-webkit-appearance:none;appearance:none}
.rg__track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:22px;height:22px;border-radius:var(--r-exec);background:var(--signal-bg);border:0;cursor:grab}
.rg__track input[type=range]::-moz-range-thumb{pointer-events:auto;
  width:22px;height:22px;border-radius:var(--r-exec);background:var(--signal-bg);border:0;cursor:grab}
.rg__val{font-size:12.5px;color:var(--fg-dim);text-align:center;padding-top:2px}