/* =========================================
   使い方ガイド（ヘッダーの初心者マーク → ダイアログ）

   layouts/application.html.erb から**全画面で**読み込む。入口ボタン
   （shared/_usage_guide_button）はどの画面のヘッダーにも置けるので、
   ページ別CSSにすると「ボタンは出るのに素のダイアログが開く」画面ができる。
   レイアウトで全画面に同じ1本を足すぶん、data-turbo-track の集合も画面間でずれない
   （→ docs/turbo-drive.md。ページ別CSSとして片方の画面にだけ tracked で足すのが
    いちばんよくある壊し方）。

   **ページ別CSSの :root で定義されたカスタムプロパティは参照しない。**
   --brand（#ff7a86）などは notes.css / search.css 側の :root にあり、それを読まない
   画面では未定義になって色が静かに落ちる。ここは literal で書く。
   application.css の :root にある --popup-top-offset だけは全画面で効くので参照してよい。
========================================= */

/* ---------- 入口の初心者マーク ---------- */
/* 見た目は小さく（24px）、タップ領域は ::before で 26px まで広げる
   （→ CLAUDE.md「アイコンボタンのタップ領域は 24px 以上」）。
   Home ではベルと並ぶので、フロストガラスの円は home.css 側がベルと一括で与える。 */
.guide-icon {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
}

.guide-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.guide-icon-img {
  width: 24px;
  height: 24px;
  display: block;
}

/* ---------- ダイアログ本体 ---------- */
/* 寸法と出す位置は通知ポップアップ（notifications.css の .notification-modal）と
   同じ値にそろえる。ヘッダーのアイコンから開くポップアップが2種類あるので、
   片方だけ別の大きさ・別の位置に出ると同じ画面の部品に見えない。 */
.usage-guide {
  border: none;
  border-radius: 18px;
  padding: 0;
  width: min(calc(100% - 32px), 383px);
  max-width: 383px;
  height: min(calc(100dvh - var(--popup-top-offset) - 24px), 622px);
  margin-top: var(--popup-top-offset);
  margin-bottom: auto;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);

  /* ピンクの地。上がいちばん濃く、本文の下へ向かって白に抜ける
     （白いカードが下に行くほど地に溶けないよう、下端は白まで行かせない）。 */
  background: linear-gradient(180deg, #ffd7dc 0%, #ffe9ec 46%, #fff4f5 100%);
  color: #4a3a3f;
}

.usage-guide::backdrop {
  background: rgba(45, 32, 78, .45);
}

/* ヘッダー / 画面タブ / 本文 の3行。3行目を minmax(0, 1fr) にすることで
   **本文だけ**が内側スクロールする（ヘッダーとタブは常に見えている）。 */
.usage-guide__inner {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  padding: 16px 14px 14px;
  box-sizing: border-box;
}

.usage-guide__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.usage-guide__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #a83a4e;
}

/* 閉じるボタン。28px の円で、タップ領域の下限（24px）を外寸だけで満たす。 */
.usage-guide__close {
  margin-left: auto;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  color: #9c5a66;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
}

/* ---------- 画面を選ぶタブ ---------- */
/* 画面が増えても縦に伸びないよう、折り返さずに横スクロールさせる。
   overflow-x: auto は縦も auto に落ちるので、選択中チップの影が切れないぶんの
   余白を上下に取っておく（padding で確保しないと影だけが欠ける）。 */
.usage-guide__tabs {
  /* 選択中のタブを行の中央へ送るとき（usage_guide_controller の revealActiveTab）、
     offsetLeft がこの行の内側の座標になるようにする。外すと offsetParent が
     ダイアログになり、送る量がずれて選択中のタブが見えないままになる。 */
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 10px;
}

.usage-guide__tabs::-webkit-scrollbar {
  display: none;
}

.usage-guide__tab {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: #8c4a56;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  /* 上下 9px + 文字 13px で外寸 32px。タップ領域の下限（24px）を外寸だけで満たす */
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
}

/* 選択中は塗りと文字色が対で成立する（塗りだけ外すと白地に白文字になる形）。
   打ち消しではなく指定し直すこと → CLAUDE.md「CSS レスポンシブ実装ルール」。 */
.usage-guide__tab.is-active {
  background: #ff7a86;
  border-color: #ff7a86;
  color: #fff;
  box-shadow: 0 6px 14px rgba(255, 122, 134, .25);
}

/* ---------- 子のピル（Home の下の For You / Rank / Trend） ---------- */
/* 上の行と子の行をまとめる枠。**.usage-guide__inner の3行グリッドの2行目に収める**
   ための箱で、ここを外して行を直に増やすと本文の 1fr がずれる
   （→ shared/_usage_guide.html.erb のコメント）。 */
.usage-guide__tabbars {
  min-width: 0;
}

/* 上の行より一段小さいピル。左の字下げで「上のタブにぶら下がっている」ことを示す。
   上の行は padding-bottom: 10px を持つので、負のマージンで間隔を詰める。 */
.usage-guide__subtabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: -6px 0 0 14px;
  padding: 0 0 10px;
}

.usage-guide__subtabs::-webkit-scrollbar {
  display: none;
}

/* .is-hidden のグローバル定義は無い（各コンポーネントが自分のぶんを持つ約束）ので、
   子の行のぶんはここが持つ。選ばれていない親の行はこれで消える。 */
.usage-guide__subtabs.is-hidden {
  display: none;
}

.usage-guide__subtab {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  color: #8c4a56;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  /* 上下 7px + 文字 12px で外寸 26px。タップ領域の下限（24px）を外寸だけで満たす */
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}

/* 選択中は塗りと文字色が対（塗りだけ外すと白地に白文字になる形）。 */
.usage-guide__subtab.is-active {
  background: #ff7a86;
  border-color: #ff7a86;
  color: #fff;
  box-shadow: 0 4px 10px rgba(255, 122, 134, .22);
}

/* ---------- 本文 ---------- */
/* **スクロールバーは出さない。** モバイルは元からオーバーレイ型で出ないので、
   出ているのはデスクトップだけ。ピンクの地にグレーの帯が1本入るうえ、幅を
   約15px 食って用語リストの行が折り返す側に効く。スクロールはできるまま。 */
.usage-guide__panels {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 旧 Edge */
  /* スクロールの下端で最後のカードの影が切れないぶんの余白 */
  padding: 2px 2px 8px;
}

.usage-guide__panels::-webkit-scrollbar {
  display: none;
}

/* .is-hidden のグローバル定義は無い（各コンポーネントが自分のぶんを持つ約束）ので、
   パネルのぶんはここが持つ。 */
.usage-guide__panel.is-hidden {
  display: none;
}

/* パネルの見出し（「◯◯の使い方」）は置かない → shared/_usage_guide.html.erb。
   先頭に来るのはこのリード文で、タブのすぐ下に続く。 */
.usage-guide__lead {
  margin: 2px 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: #6b4349;
}

/* 文章は白いカードに載せる（ピンクの地の上に直接置くと、長い文章では読みにくい）。 */
/* 左右の padding は 12px まで。用語リストの説明（最長16文字 ＋ 用語の列）が
   383px 幅のダイアログで1行に収まる余白をここで確保している。 */
.usage-guide__card {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(190, 120, 132, .14);
}

.usage-guide__card + .usage-guide__card {
  margin-top: 10px;
}

/* 見出しの行。右に実画面の切り抜き（.usage-guide__shot）を並べる。
   画像の無いカードでは見出しだけが入る行になるので、カード内の上下の間隔は
   見出し側ではなくこの行が持つ。 */
.usage-guide__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.usage-guide__card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #c7445c;
}

/* 実画面の切り抜き。横幅はカードの残りに合わせ、縦で揃える（高さ固定・幅は auto）。
   見出しが長い画面でも折り返さないよう flex-shrink は殺さず max-width で止める。 */
.usage-guide__shot {
  margin-left: auto;
  height: 30px;
  width: auto;
  max-width: 62%;
  display: block;
}

/* アイコン付きの1行（通知カードの「[DM] 要望や不具合は管理者へ」）。
   アイコンは文字の左・上下中央で、間隔は 8px、本文との間は 12px。

   **flex にするのは折り返しのため。** 文字を独立したボックス（<span>）にしておくと、
   狭い画面で2行目に回ったぶんが**アイコンの下ではなく1行目の文字の先頭に揃う**。
   アイコンを文章の中にインラインで置くと、2行目が左端まで戻ってアイコンの下に潜る。 */
.usage-guide__icon-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: #4a3a3f;
}

/* 文字が長いときに潰れないよう flex-shrink は殺す（潰れると絵が歪む）。 */
.usage-guide__icon-line-img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

/* 地に透かし（.usage-guide__watermark）を敷くカード。重なりは
   **白い地 → 透かし → 文字**で、これを成立させるのに2つとも要る:

   ・isolation: isolate —— カードを重ね合わせコンテキストにする。無いと透かしの
     z-index: -1 がカード自身の白い背景より下へ落ちて**透かしが丸ごと消える**
     （重ね合わせコンテキストの中でだけ、負の z-index は「自分の背景の上・中身の下」になる）
   ・overflow: hidden —— **透かしを枠の外へ出さないための保険**。透かしは右上に
     収まる大きさで置いてあるが、カードが短い（見出しと1行だけ等）と下へはみ出す。
     はみ出したまま出すと .usage-guide__panels が溢れるが、あそこはスクロールバーを
     隠してあるので**溢れていることが画面に出ない**

   どちらも透かしを持つカードだけに掛ける。全カードに掛けると、これから足す絵や
   ポップアップが理由の分からないまま切られる。 */
.usage-guide__card--watermark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* カードの右上。**枠の中に収める**（外へ出すと切るか溢れるかの二択になる）。
   右の 12px はカードの padding と同値で、本文の右端に揃う。
   上は padding より 10px 高い位置（＝見出しの上端より上）に置く。カードの余白に
   少し食い込ませたほうが、文字の下に沈んだ装飾に見えるため。
   **負の値にはしないこと** —— 上を切り落とすと、ベルの頭も矢印の先端も失われて
   何の絵か分からなくなる（カードは overflow: hidden）。
   文字の下に敷くだけの装飾なので当たり判定も持たせない。 */
.usage-guide__watermark {
  position: absolute;
  z-index: -1;
  top: 2px;
  right: 12px;
  width: 72px;
  height: 72px;
  pointer-events: none;
}

/* 下寄せ（データ側の position: "bottom"）。横は上寄せと同じ右端のまま。
   上の指定を**打ち消す**ので top: auto を忘れないこと —— 残すと上下とも効いて
   高さが 72px から引き伸ばされ、絵が縦に潰れる。 */
.usage-guide__watermark--bottom {
  top: auto;
  bottom: 2px;
}

/* 本文の改行はデータ（lib/usage_guide.rb）の "\n" をそのまま出す。
   文の切れ目で行を分けたいカードがあるため（通知のカードが実例）。 */
.usage-guide__card-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #4a3a3f;
  white-space: pre-line;
}

/* 但し書き（「※… coming soon」など）。本文より小さく淡く、でも読める濃さにする。
   本文と同じ太さ・同じ色にすると、まだ無い機能の説明が本文と同格に見える。 */
.usage-guide__note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8a6a70;
}

/* 問いと答え（「表示されないときは？」など）。用語リストと違って**縦に積む**ので、
   grid にはしない。問いは太字＋上の間隔で区切りに見せる（下の答えとは離さない）。 */
.usage-guide__qa {
  margin: 0;
}

.usage-guide__q {
  margin: 12px 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: #3a2b30;
}

.usage-guide__a {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #4a3a3f;
}

/* 用語と説明の対（For You / Rank / Trend のような一覧）。
   dt と dd を grid の2列に直接並べるので、**間に <div> を挟まないこと**
   （挟むと列が崩れて説明の頭が揃わなくなる）。
   1列目は max-content ＝ いちばん長い用語の幅。 */
/* 文字と余白は本文（14px）より1段詰める。383px 幅のダイアログで**いちばん長い説明
   （17文字）が1行に収まる**寸法で、緩めると「…トレンドをチェッ／ク」のように
   末尾の1〜2文字だけが折り返す。幅の内訳は
   ダイアログ 351 −（ダイアログ 14×2 ＋ パネル 2×2 ＋ カード 12×2 ＋ この枠 8×2）
   − 用語の列（max-content）− column-gap。
   本文のスクロールバーは隠してある（上の .usage-guide__panels）ので、デスクトップでも
   モバイルでも同じ幅が使える。**出す方向に戻すなら約15px 引かれる**ので、
   そのときはここも詰め直すこと。 */
.usage-guide__terms {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 8px;
  row-gap: 8px;
  margin: 0;
  padding: 10px 8px;
  border-radius: 10px;
  background: #faf9f9;
}

.usage-guide__card-body + .usage-guide__terms {
  margin-top: 10px;
}

.usage-guide__term {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #2f2429;
  white-space: nowrap;
}

.usage-guide__term-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #4a3a3f;
}

/* ---------- フォーカスの枠 ----------
   **開いた直後に選択中のタブへフォーカスを移している**（矢印キーでそのまま画面を
   移れるようにするため）ので、素のままだと**タップで開いただけでタブに青い枠が出る**
   （iOS Safari で実際に出ていた）。枠はキーボードのときだけ出す。
   `:focus { outline: none }` ＋ `:focus-visible` で描き直すのは cards.css の
   `.icon-btn` / friends.css と同じ形（打ち消しっぱなしにはしない）。

   パネルは `tabindex="0"`（本文をキーボードでスクロールするため）なので、
   こちらも触っただけで枠が出る対象に入る。 */
.usage-guide:focus,
.usage-guide__tab:focus,
.usage-guide__subtab:focus,
.usage-guide__close:focus,
.usage-guide__panel:focus {
  outline: none;
}

.usage-guide__tab:focus-visible,
.usage-guide__subtab:focus-visible,
.usage-guide__close:focus-visible,
.usage-guide__panel:focus-visible {
  outline: 2px solid #c7445c;
  outline-offset: 2px;
  border-radius: 999px;
}

.usage-guide__panel:focus-visible {
  border-radius: 12px;
}

/* タップした瞬間に iOS が被せる青いフラッシュも消す（枠と同じ出どころに見える）。
   入口の初心者マークも同じ扱いにする。 */
.usage-guide,
.usage-guide__tab,
.usage-guide__subtab,
.usage-guide__close,
.guide-icon {
  -webkit-tap-highlight-color: transparent;
}

/* 狭い画面では左右の余白とカードの内側を少しだけ詰める（文字サイズは下げない）。
   メディアクエリは上書き対象より後に置く → CLAUDE.md「カスケード順序の原則」。 */
@media (max-width: 360px) {
  .usage-guide__inner {
    padding: 14px 10px 12px;
  }

  .usage-guide__card {
    padding: 11px 10px;
  }

  /* 透かしの上・右もカードの padding に合わせる（見出しの上端と本文の右端に揃える） */
  .usage-guide__watermark {
    top: 11px;
    right: 10px;
  }

  /* 下寄せのぶんは、上の指定をここでも打ち消す（詳細度が同じなので後に書く） */
  .usage-guide__watermark--bottom {
    top: auto;
    bottom: 11px;
  }
}