/* 画面ごとの並べ方。★部品の**余白と置き場所**だけを決める。
 *
 * ★形（枠・色・高さ）はここで触らない。components.css の1か所に置いてある。
 *   ここで形を上書きし始めると、また定義が散らばって追えなくなる。
 */

/* ---------------------------------------------------------------- ホーム */
/* ★カード同士の間隔は広めに取る。地とカードの明度差を詰めてあるぶん、
 *   どこまでが1件かを切るのは**この間隔だけ**。 */
.cards { display: flex; flex-direction: column; gap: 15px; padding-top: 15px; }

.empty { margin-top: 24px; font-size: 13px; color: var(--t2); white-space: pre-line; }

/* 「ただのお知らせ」。★絞り込みで隠れた件数など、
 *   読まなくても損をしないもの**だけ**ここに置く。 */
.hint {
  margin-top: 12px;
  font-size: 12px; color: var(--t2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* ★いま効いている絞り込みの札。★**押せない**（チップとは別物）。
 *   枠を細く・地を持たせないでおく。チップと同じ見た目にすると、
 *   ここを押せば外せると読める（外す口は右の「すべて表示」）。
 * ★成績の見出し（.stats-hd）でも同じ札を使う。同じ「いまの条件」を
 *   2か所で別の見た目にしない。 */
.hint-f, .stats-hd .hint-f {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  color: var(--t1);
  white-space: nowrap;
}
.hint-f .ic { width: 13px; height: 13px; margin-right: 0; color: var(--t2); }

/* ★「買えない理由」。商品が並んでいるのに買えない＝**いちばん取りこぼす場所**。
 *   以前はこれも .hint（12pxの薄い字＋下線リンク）で出していたが、
 *   薄い注記は読まれない。売り物の画面で、進む口をいちばん弱い部品にしない。
 * ★カードと同じ語彙（--ink2 の面）だが、縁は --line2 で一段明るくする。
 *   下に並ぶカードに埋もれず、かといって別の色を持ち込まない。
 * ★出すのは1つだけ。ログインとカードを同時に並べない
 *   （順番があるものを並べると、どちらが先か分からなくなる）。 */
.notice {
  margin-top: 14px;
  background: var(--ink2);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 14px;
}
/* ★お知らせだけで、次にやることが無いもの（まだ売っていない時間帯など）。
 *   ★縁を落として決めの色を消す。同じ強さで出すと、
 *   ボタンの無い箱が「押せるはずなのに押せない」ように見える。 */
.notice.quiet { border-color: var(--edge); background: none; }
/* ★本日の総評（開催が終わったあと）。★売っていたときと**同じ枠・同じ大きさ**。
 *   ボタンが無くなるぶん背は縮むが、位置と幅と余白は変えない——
 *   同じ場所の中身が入れ替わるように見せる。
 * ★決めの色は使わない（次にやることが無いので）。ただし quiet ほどは引かない。
 *   その日の成績は**読ませたいもの**で、単なる案内ではない。 */
.notice.review { border-color: var(--edge); }
.notice-t { font-size: 15px; font-weight: 700; color: var(--t1); }
.notice-d { margin-top: 6px; font-size: 12px; color: var(--t2); line-height: 1.55; }
/* ★★案内の中の太字は**白**（2026-08-31に全部の案内へ広げた）。
 *   ★もとは総評の枠（.notice.review）だけの決まりだった。ほかの案内では
 *     太字が地の文と同じ濃さ（--t2）のままで、**太いだけで目立たなかった**。
 *   ★<b> を付けているのは「そこだけ読んでも意味が通る言葉」——
 *     配信の視聴券・どなたでも・締切前から、など。読み飛ばす人がそこで止まれる
 *     ようにするのが目的なので、濃さも変える。
 *   ★逆に言うと、**強調したい言葉にだけ <b> を使うこと**。
 *     文を丸ごと囲うと、白い行が並んで強弱が消える。 */
.notice .notice-d b { color: var(--t1); }
/* ★★いちばん読ませたい一言（会員登録＋カード登録で無料）に**黄色の蛍光**を敷く。
 *   ★字を黄色にしない——暗い地に黄色い字は明暗差が足りない
 *     （css/tokens.css の --warn-line に実測付き）。地を黄色く塗り、字は濃い色に。
 *   ★黄の地＋濃い字は明・暗どちらのテーマでも読める（テーマに依らず塗る）。
 *   ★box-decoration-break: clone … 折り返しても各行に地が付く（切れ目で欠けない）。 */
.notice .notice-d b.hl {
  background: #F5C518;
  color: #201900;
  padding: 1px 5px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* ★決めの色（塗り）はここで使う。画面の中で「次にやること」は1つだけ。 */
.notice .btn.wide { margin-top: 12px; }
/* ★★2つ目の入口（閲覧の権利）は**文字リンク**で従える。
 *   ★カード登録が本命（塗りボタン）。こちらをボタンにすると強さで競るので、
 *     「または、〇〇」の1行にして本命の下に小さく置く（feed_health_cta）。
 *   ★中の .linkbtn（css/controls.css）が下線つきの文字リンク。 */
.notice-alt {
  margin-top: 10px;
  text-align: center;
  font-size: 12px; color: var(--t3);
}
/* ★視聴券リンクに添える断り（無料期間中は買わなくてよい）。
 *   ★リンクの下に**小さく**改行して置く。同じ行に続けると「購入する（…）」の
 *     二重括弧になって読みにくい。 */
.notice-fine {
  display: block;
  margin-top: 3px;
  font-size: 11px; color: var(--t3);
}
/* 割引前の値段。★ボタンのすぐ下に、小さく。
 *   ボタンの中に入れると、押すところ（金額）と参考の数字が同じ大きさで並んで
 *   どちらが払う額なのか読めなくなる。 */
.notice-price {
  margin-top: 7px;
  text-align: center;
  font-size: 11px; color: var(--t3);
  font-variant-numeric: tabular-nums;
}
.notice-price-n { color: var(--line2); }

/* ★これは見た目だけの試作。実際の配信には繋がっていない、と画面上で分かるようにする。 */
.demo {
  margin-top: 12px;
  border: 1px dashed var(--line2);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 11px; color: var(--t2); line-height: 1.5;
}

/* ---------------------------------------------------------------- 設定 */
/* ジャンルの名札。★島の外に出す。中に入れると行と見分けが付かない。
 *   ジャンルが1つしかない画面では出さない（何も区別しない見出しは足さない）。 */
.genre {
  margin: 18px 4px 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  color: var(--accent);
}

/* 島の中の操作。★**ボタンはボタンの形をしていること**。
 *   一度これを枠なしの行にしてみたが、押せるものと読むだけの行が
 *   同じ見た目になり、どれが操作なのか分からなくなった。
 *   区切りを整えるために、押せることを捨ててはいけない。
 * ★そのかわり「箱の中の箱」に見えないよう、島の枠とは別の役割を持たせる:
 *   行とのあいだに罫線を1本入れて、ここから下は操作の場だと示す。
 * ★ボタンの形は触らない。触るのは**余白だけ**。 */
.group form { margin: 0; }
.group .btn.wide { margin-top: 0; }
.group .act {
  padding: 14px 0;
  border-top: 1px solid var(--edge);
}
/* ★操作が続くときは線を1本だけ。2本引くと、別のまとまりに見える。 */
.group .act + .act { border-top: none; padding-top: 0; margin-top: 10px; }

/* 島の中の入力（メールアドレスの変更）。★島がもう枠を持っているので枠は無し。 */
.setform { padding: 14px 0; }
.setform .btn.wide { margin-top: 14px; }
.setform .dlg-row { margin-bottom: 0; }
.setform .dlg-row label { width: 88px; }
.setform-lead {
  margin-bottom: 12px;
  font-size: 12px; color: var(--t2); line-height: 1.5;
}

/* 「もっと表示する」。★ボタンではなく文字の口にする。
 *   ボタンにすると、その島でいちばん強い操作に見えて、
 *   本来の操作（カードを登録する など）と競る。 */
.more {
  display: block;
  width: 100%;
  /* ★上下を揃える。島は下に余白を持たないので、
   *   ここが薄いと最後の文字が島の縁に貼り付く。 */
  padding: 13px 0;
  border: none; background: none;
  border-top: 1px solid var(--edge);
  color: var(--accent); font-size: 13px;
  text-align: center; cursor: pointer;
}
.more[disabled] { color: var(--t3); cursor: default; }

/* ---------------------------------------------------------- ブラウザ通知 */
/* ★★いまどうなっているかを**必ず1行で言う**。
 *   トグルの見た目だけだと、「ONに見えるのに鳴らない」が起きたときに
 *   読み手が確かめる手立てが無い——これがいちばん気づけない壊れ方。
 * ★色だけで区別しない。文が事実を言い、色はそれを後押しするだけ。 */
.push-state { display: inline-block; margin-top: 4px; color: var(--t3); }
.push-state.ok { color: var(--accent); }
.push-state.ng { color: var(--ng); }
/* ★使えない環境（iPhoneでホーム画面に入れていない・httpsでない・古いブラウザ）。
 *   ★理由とやり方を出すので、消さずに**薄く出す**。消すと
 *     「自分の端末では出ない機能がある」ことにすら気づけない。 */
.push-state.na { color: var(--t2); }
.push-na .sw { display: none; }


/* ---------------------------------------------------------------- 購入の確認 */
/* ★JSのダイアログではなく1枚の画面。金額を見せてからPOSTする形になり、
 *   戻るキーがそのまま効き、JSが動かなくても買える。 */
/* ★上の余白は持たない。ヘッダーとの間は .body の padding が受け持つ
 *   （2026-08-25。ここで持つと画面ごとに幅が変わる）。 */
.buy .dlg-what { margin-top: 4px; }
.buy-what { margin-top: 12px; font-size: 12px; color: var(--t2); }
.buy-form {
  margin-top: 20px;
  display: flex; justify-content: flex-end; gap: 10px; align-items: center;
}
.buy-note { margin-top: 14px; font-size: 11px; color: var(--t3); }
.range-form { margin-top: 16px; }
/* 1枚の画面に置くときは、モーダルの帯を外して地に馴染ませる。 */
.dlg-foot.plain { background: none; padding: 18px 0 0; }

/* ---------------------------------------------------------------- ログイン */
.login-alt {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.login-alt form { margin: 0; }

/* 添え字。★1語だけ色や濃さを変えたいときに使う。
 * ★★`.t3` という名前にしてはいけない。荒れの段（.res-head.t3 / .hanko.t3＝大荒れの赤）
 *   と字面がぶつかる。いまは段のほうが必ず .res-head や .hanko と一緒に書かれていて
 *   詳しさで勝つので事故は起きていないが、名前が同じというだけで
 *   「片方を直したらもう片方が変わる」罠になる。**用途の名前**を付ける。 */
.dim { color: var(--t3); }
.warn-inline { color: var(--ng); }