/* 押すもの・書くもの。★人が**触る**部品だけ。
 *
 * ★ボタン・入力・チップ・印。読むだけのもの（カード・表・成績）は入れない。
 * ★★以前は .btn が5か所に散らばって上書きし合い、どの余白が効いているのか
 *   追えなくなっていた（島の中で文字が枠に重なった）。同じことを繰り返さない。
 * ★「この画面だけこうしたい」は screens.css で**余白だけ**上書きする。
 *   形（枠・色・高さ）をあちらで触り始めると、また散らばる。
 */

/* ---------------------------------------------------------------- ボタン */
/* ★高さは padding ではなく min-height ＋ flex中央ぞろえで作る。
 *   padding で作ると、文字が折り返した瞬間に枠と中身がずれる。
 *   中央ぞろえなら、2行になっても枠の真ん中に収まる。
 * ★大きさは2つだけ（既定 / sm）。形（ghost / fill / danger）と掛け合わせるだけで、
 *   画面ごとに別のボタンを作らない。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  /* ★長い文言でも枠を割らない。日本語は単語の切れ目が無いので、
   *   折り返しを許さないと枠から溢れる。 */
  overflow-wrap: anywhere;
}
.btn.ghost { background: transparent; border-color: var(--line2); color: var(--t1); }
/* ★塗りはロゴの青。既定の明るい青だと、同じ画面に別の青が2つ並ぶ。決めの色は1つに絞る。 */
.btn.fill { background: var(--brand); border-color: var(--brand); color: #fff; }
/* ★取り返しのつかない操作だけ赤。全部に色を付けると、どれが危ないか分からない。 */
.btn.danger { color: var(--ng); border-color: var(--ng); }
/* 行の中に置く小さいほう。★高さも一緒に下げる（枠だけ小さくすると字が詰まる）。 */
.btn.sm { min-height: 32px; padding: 4px 12px; font-size: 13px; }
/* 全幅。★余白は持たせる側（.act / .setform / .notice）で消す。 */
.btn.wide { display: flex; width: 100%; margin-top: 16px; }
.btn[disabled] { opacity: .5; cursor: default; }

/* 文字の口。★ボタンにすると、その場でいちばん強い操作に見えて本命と競る。 */
.linkbtn {
  background: none; border: none; padding: 0;
  color: var(--accent); font-size: 12px; text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------------- 入力 */
.inp {
  flex: 1; min-width: 0;
  background: var(--ink3); color: var(--t1);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 10px; font-size: 15px;
}
/* ★コードの入力欄。数字だけを大きく、字間を空けて。6桁を目で数えられるように。 */
.inp.code {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  letter-spacing: 8px;
  text-align: center;
  padding: 12px 10px;
}

/* ★★カードを打つ枠の**器**（card.php / js/card.js）。中身は決済代行の iframe。
 *   ★高さを決め打ちしない。向こうが行数を変えたときに切れる
 *     （エラーの1行が出た瞬間にボタンが隠れる、という壊れ方をする）。
 *   ★地は入力欄（.inp）と揃える。ここだけ地が違うと、
 *     「このサイトの入力欄ではない」ように見えて手が止まる。 */
.pay-el {
  background: var(--ink3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin: 12px 0;
}

/* トグル。★つまみは常に白、地だけ変える（ON=ロゴの青／OFF=明るい灰）。
 *   つまみの色まで変えるとONとOFFで別部品に見えて、
 *   「同じものの状態が2つある」と読めなくなる。動くのは位置と地の色だけでよい。 */
.sw {
  flex: none;
  width: 52px; height: 32px;
  border-radius: 16px;
  background: var(--offtrack);
  border: 1px solid transparent;
  position: relative;
  cursor: pointer;
  transition: background .15s;
}
.sw::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}
.sw[aria-checked="true"] { background: var(--brand); border-color: var(--brand); }
.sw[aria-checked="true"]::after { transform: translateX(20px); }
.sw[disabled] { opacity: .4; cursor: default; }

/* ------------------------------------------------------- 絞り込みの帯 */
/* ★★期間・プラン・成績を**1つの枠**にまとめる。
 *   地の上に3つ並んでいるだけだと、どこまでが「操作するところ」なのか
 *   輪郭が無く、成績がカードの一部にも見えていた。
 * ★設定画面の島と同じ作り（地より明るい面＋角丸＋字下げした罫線）。
 *   新しい流儀を持ち込まない——同じ物は同じ見た目にする。
 * ★面は --ink3。カード（--ink2）より一段明るいので、
 *   **操作する帯**と**読む中身**が明度で分かれる。
 *   同じ --ink2 にすると、絞り込みが「1枚目のカード」に見える。 */
.filter {
  margin-top: 14px;
  background: var(--ink3);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  /* ★★4方とも --edge-pad。ページの枠（.body）と同じ値にする。
   *   以前は 12px 14px で、上下も左右もページの16pxと合っていなかった。
   *   ★入れ子の箱がそれぞれ違う余白を持つと、画面全体で「余白の階段」ができる。
   *     同じ値を使えば、外の枠と中の枠の縁がきれいに平行に並ぶ。 */
  padding: var(--edge-pad);
}

/* ---------------------------------------------------------------- チップ */
.chips {
  display: flex;
  align-items: center;
  /* ★★折り返す。期間が5つ（今日/昨日/過去3日/過去7日/期間）になって
   *   1行に収まらなくなった。折り返さないと**横にはみ出して押せない**。
   * ★行間は字間より広く（下の .chips2 と同じ理由）。 */
  flex-wrap: wrap;
  gap: 10px 8px;
  padding: 12px 0 0;
}
/* ★枠の中では**先頭の行だけ**上の余白を枠側（padding）に任せる。両方持つと二重に空く。
 * ★★:first-child を外さないこと。`.filter .chips` と書くと、
 *   同じ要素に付いている .chips2 の padding-top まで打ち消す（詳細度が上）。
 *   実際それで期間の行とプランの行がくっついた（2026-08-25）。
 *   ★詳細度で消えた指定は**エラーにならない**ので、見るまで気づけない。 */
.filter .chips:first-child { padding-top: 0; }
/* ★★期間の行は**行いっぱいに伸ばす**（2026-08-25）。
 *   ・普通は1行に収まる。伸ばすと右端がそろって、押す帯として1つに見える
 *   ・狭い端末で折り返したときも、右端が欠けたようには見えない
 *   ★格子（.chips2）にしないのは、「期間」のチップが選ぶと日付そのもの
 *     （8/19〜8/25）になって**幅が大きく変わる**ため。等分すると溢れる。
 *   ★:not(.chips2) を外さないこと。プランの行にも当たって格子が壊れる。 */
/* ★字間を8→6pxに詰める。伸ばして右端をそろえるので、隙間が狭くても
 *   1つずつは分かれて見える。★これで360px幅に9pxの余裕ができる
 *   （8pxのままだと余りが1pxしかなく、字体が少し広いだけで折り返す）。 */
.chips:not(.chips2) { gap: 10px 6px; }
.chips:not(.chips2) .chip {
  flex: 1 1 auto;
  justify-content: center;
  /* ★★左右を12→10pxに詰めた。5つで20px浮き、**360px幅（Androidに多い）で
   *   1行に収まる**ようになる。詰める前は9px足りずに折り返し、
   *   2行目が「期間」1つだけ全幅に伸びて不格好だった。
   * ★上下（6px）は詰めない。押す的の高さはここで決まる。 */
  padding: 6px 10px;
}
.chip {
  /* ★印（SVG）と名前を並べるので inline-flex。inline-block のままだと
   *   SVGの下に文字ぶんの余白が出て、チップの高さが1つずつずれる。 */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--t2);
  border-radius: var(--radius);   /* ★既定の錠剤型にしない */
  /* ★★小さめ。期間5つ＋プラン5つで**10個が並ぶ場所**なので、
   *   1つを大きくすると帯だけで画面が埋まる。押す的は padding で確保する
   *   （字を大きくするより、余白で広げるほうが場所を食わない）。 */
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
/* ★選択中はロゴと同じ濃紺。既定の薄い青だとブランドの色と別物になる。 */
.chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* プランの絞り込み。★期間とは**行を分ける**。同じ列に混ぜると軸が読めない。
 * ★横スクロールにはしない。隠れたプランに気づけない＝商品を並べる画面で
 *   いちばんやってはいけないこと。**全部見えていること**を守る。
 *
 * ■ ★★折り返しではなく**格子**にした（2026-08-25）
 *   flex-wrap で折り返していたが、名前の長さがばらばら（すべて／荒れ／
 *   荒れ（広域）／荒れ（艇指名）／イン逃げ）なので、スマホでは
 *   **3個＋2個の不揃いな2行**になって、右端がぎざぎざに欠けて見えていた。
 *   ★「入りきらなかったから落ちた」ように見えるのがいちばん悪い。
 *     幅をそろえた格子にすると、2行なのは**そう決めた形**に見える。
 *   ★3列。5つあるので2行になり、最後の1枠が空く。空き枠は地のままなので
 *     欠けては見えない（左詰めで並んでいるだけに読める）。
 *   ★名前も短くした（inc/plans.php の title）。括弧付きのままだと
 *     1枠に収まらず、結局こぼれる。 */
.chips2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* ★行間 10px・字間 8px。★詰めない——2行になったとき、
   *   縦の隙間が横より狭いと**上下のチップが1つの塊**に見える。 */
  gap: 10px 8px;
  /* ★★期間の行との間に**罫線**を引く（2026-08-25）。
   *   軸が違う（いつ／なに）ので、余白だけで分けていたが、
   *   プランが2行になったこともあって**どこで軸が変わるのか**が読みにくかった。
   * ★同じ枠の中で成績を切っている罫線（.stats-box）と**同じ間の取り方**にする。
   *   1つの枠の中に違う切り方を混ぜると、区切りの強さが読めなくなる。 */
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--edge);
}
/* ★プランは名前が長いので、期間よりさらに小さく。
 * ★枠いっぱいに広がるので、中身は中央に置く（左に寄ると枠と字がずれて見える）。 */
.chips2 .chip { padding: 5px 8px; font-size: 11px; justify-content: center; }

/* ---------------------------------------------------------------- 印 */
/* ★★絵文字をやめてSVGにした（2026-08-24）。
 *   絵文字は端末ごとに絵が違う——同じプランが人によって別の印に見える。
 *   色も端末側が持っているので、選択中のチップ（濃紺の地）で潰れていた。
 * ★currentColor で描く。置いた場所の文字色にそのまま従うので、
 *   チップが反転しても、行が薄くなっても、印だけ浮かない。 */
.ic {
  width: 1.05em; height: 1.05em;
  flex: none;
  vertical-align: -.14em;
  margin-right: 4px;
}
/* ★チップの中は gap で空けるので、印側の余白は要らない（二重に空く）。 */
.chip .ic { margin-right: 0; }