/* web/mockups/ds/onboarding.css
 * オンボーディング・ページ送りパネル（下から競り上がる／固定高カルーセル／3ページ）＋
 * フッターの「つかいかた」入口。共有部品として index.html から読み込む。
 *
 * 自動表示（scrimなし・非ブロッキング・role=region）と、フッターの「つかいかた」からの能動再表示
 * （scrimつき・role=dialog）を、同一DOM（.sheet-holder 内の1つの .sheet）に対して
 * ds/onboarding.js が `.sheet-holder--modal` 修飾クラスを付け外しして切り替える。
 * 見た目の分岐はこのCSSに閉じ、開閉・ページ送りの分岐はJSに閉じる。
 *
 * 造形・語彙・状態遷移の正本: .spec-workflow/specs/firstview-onboarding/mocks/golive-additions--all-states.html
 * 色/書体はすべて theme-story トークン経由（生hex・独自:root上書きなし）。
 */

/* 「つかいかた」入口ボタンの見た目は規約フッター側（ds/legal-footer.css の .legal__link--howto）に置く。
   規約リンクと同じ並び・同じ造形に揃えるため、footer の stylesheet に同居させている。 */

/* ===== パネルの出現層（重なり層。出没しても本文の高さは変えない） ===== */
/* 既定＝自動表示: 幕なし・非ブロッキング・フォーカスを奪わない role=region。 */
.sheet-holder {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-in-out),
    visibility var(--duration-base) var(--ease-in-out),
    background-color var(--duration-base) var(--ease-in-out);
}
.sheet-holder > .sheet {
  pointer-events: auto;
}
.sheet-holder.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 能動再表示＝role=dialog: 幕（墨黒半透過）を敷き、背後の操作をブロックする。 */
.sheet-holder--modal {
  z-index: var(--z-modal);
  background-color: color-mix(in srgb, var(--color-black) 48%, transparent);
  pointer-events: auto;
}
.sheet-holder--modal.is-hidden {
  pointer-events: none;
}

/* パネル本体（自動・再表示で共有する不透明の白パネル。上角だけ丸め、上辺の淡い影で主役から分離する。
 * 半透明にすると背後が透けて文字が沈むため、地は必ず不透明にする。
 * --pager-h: ページ送り1ページ分の固定高。全ページ共通＝送っても総高が動かない。 */
.sheet {
  --pager-h: 19.5rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
  background-color: var(--color-white);
  border-radius: var(--radius-soft) var(--radius-soft) 0 0;
  box-shadow: 0 -2px 12px color-mix(in srgb, var(--color-black) 10%, transparent);
  overflow: hidden;
  transition: transform var(--duration-slow) var(--ease-out-cubic);
}
.sheet-holder.is-hidden .sheet {
  transform: translateY(100%);
}

/* つまみ（パネルである合図。側面色帯でなく中央の小バー） */
.sheet__grabber {
  flex: none;
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 1);
  margin: var(--space-2) auto 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-gray);
}

/* 上部は見出し無し＋×だけ（唯一の閉じ導線。「とじる」ボタンは撤去し二重の閉じを作らない） */
.sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-1) var(--pad-card) 0;
}
.sheet__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  color: var(--color-black);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-soft);
  cursor: pointer;
  margin: calc(var(--spacing) * -1) calc(var(--spacing) * -2) 0 0;
  transition: background-color var(--duration-base) var(--ease-in-out);
}
.sheet__close:hover {
  background-color: color-mix(in srgb, var(--color-black) 8%, transparent);
}
.sheet__close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ページ送り（固定高カルーセル）。トラックを横移動し、覗き窓で1枚ずつ見せる。 */
.pager {
  flex: none;
  height: var(--pager-h);
  overflow: hidden;
}
.pager__track {
  display: flex;
  width: 300%;
  max-width: none;
  height: 100%;
  transition: transform var(--duration-slow) var(--ease-out-cubic);
}
/* 日本語は文節境界で折り返す（auto-phrase）＋禁則strict。狭い枠での単語割れを防ぐ。 */
.pager__page {
  flex: none;
  width: calc(100% / 3);
  max-width: none;
  height: 100%;
  overflow: hidden;
  padding: var(--space-4) var(--pad-card) 0;
  display: flex;
  flex-direction: column;
  word-break: auto-phrase;
  line-break: strict;
}
.sheet[data-page="1"] .pager__track { transform: translateX(0); }
.sheet[data-page="2"] .pager__track { transform: translateX(-33.3333%); }
.sheet[data-page="3"] .pager__track { transform: translateX(-66.6667%); }

.sheet__h {
  font-family: var(--font-noto);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  line-height: var(--leading-snug);
}
.sheet__link,
.sheet__link:visited,
.sheet__link:active {
  color: var(--color-black);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

/* --- ページ1: ハッピー度スペクトル（半円ダイヤルを一直線にほどいた 0→100 の尺度） --- */
.sheet__lead {
  margin-top: var(--space-2);
  font-family: var(--font-noto);
  font-size: var(--text-small);
  color: var(--color-subtle-strong);
  line-height: var(--leading-normal);
}
.sheet__lead .num {
  color: var(--color-black);
  font-weight: var(--font-weight-bold);
}

.spectrum {
  margin: var(--space-4) 0 0;
  padding: 0 calc(var(--spacing) * 1.5);
}
.spectrum__caps {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  letter-spacing: var(--tracking-wide);
}
.spectrum__cap {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 1);
}
.spectrum__cap .num {
  font-size: var(--text-h5);
  line-height: 1;
}
/* 結末色勾配のトラック（＝尺度そのもの。装飾でなくデータの色符号化。--score-* は theme-story 正本）。
 * 「この一冊」マーカーは caps と別行（トラック上のゲージ帯）に置き、高マーク時も端の定義と重ならない。 */
.spectrum__track {
  position: relative;
  height: calc(var(--spacing) * 4);
  margin-top: calc(var(--spacing) * 12);
  border-radius: var(--radius-pill);
  background-image: linear-gradient(90deg, var(--score-1), var(--score-2), var(--score-3), var(--score-4), var(--score-5), var(--score-6), var(--score-7));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-black) 8%, transparent);
}
/* マーカー＝ダイヤルの白ノブ＋結末色リングの水平版。--band-ink は data-band 属性から継承する
 * （index.html の [data-band="happy|bittersweet|downer"] が既に定義済みのトークンを流用）。 */
.spectrum__mark {
  position: absolute;
  top: 50%;
  left: calc(var(--mark, 50) * 1%);
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: var(--color-white);
  border: 3px solid var(--band-ink);
  box-shadow: var(--shadow-sm);
}
.spectrum__mark::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: calc(var(--spacing) * 2);
  background-color: color-mix(in srgb, var(--color-black) 45%, transparent);
  transform: translateX(-50%);
}
.spectrum__flag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--spacing) * 2.5);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 1);
  white-space: nowrap;
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}
.spectrum__flag .num {
  font-size: var(--text-h5);
  line-height: 1;
}
.spectrum__defs {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.spectrum__def {
  flex: 1 1 0;
  font-family: var(--font-noto);
  font-size: calc(var(--text-small) * 0.9);
  color: var(--color-subtle-strong);
  line-height: var(--leading-snug);
  text-align: left;
}
.spectrum__def--hi {
  text-align: right;
}
/* --- ページ2: 2ジェスチャの上品なミニ図（横にずれるカード／やわらかいタップ） --- */
.gestures {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.gesture {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.gesture__fig {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 24);
  height: calc(var(--spacing) * 16);
  color: var(--color-black);
}
.gesture__fig svg {
  display: block;
  width: 100%;
  height: 100%;
}
.gesture__blur {
  filter: blur(1.4px);
}
.gesture__cap {
  font-family: var(--font-noto);
  font-size: var(--text-body);
  color: var(--color-black);
  line-height: var(--leading-snug);
}
.gesture__cap b {
  font-weight: var(--font-weight-bold);
}
.gesture__sub {
  display: block;
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-small);
  color: var(--color-subtle-strong);
}

/* --- ページ3: 掲載リクエストの受け皿（あたたかく簡潔に） --- */
.sheet__body {
  margin-top: var(--space-3);
  font-family: var(--font-noto);
  font-size: var(--text-body);
  color: var(--color-black);
  line-height: var(--leading-normal);
}
.sheet__note {
  margin-top: var(--space-4);
  font-family: var(--font-noto);
  font-size: var(--text-small);
  color: var(--color-subtle-strong);
  line-height: var(--leading-snug);
}

/* 脚部＝ドット（現在地・タップ可）＋主操作（次へ／はじめる）。閉じは×のみ。位置と高さは全ページで不変。 */
.sheet__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(var(--spacing) * 15);
  padding: var(--space-2) var(--pad-card) var(--space-3);
}
.sheet__dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.dot::before {
  content: "";
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  border-radius: var(--radius-pill);
  background-color: var(--color-gray);
  transition:
    width var(--duration-base) var(--ease-in-out),
    background-color var(--duration-base) var(--ease-in-out);
}
.dot.is-on::before {
  width: calc(var(--spacing) * 5);
  background-color: var(--color-black);
}
.dot:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  .sheet-holder { transition: none; }
  .sheet { transition: none; }
  .pager__track { transition: none; }
  .dot::before { transition: none; }
}