/*
 * おあいその見た目。
 *
 * **立替アプリ（落ち着いた深緑）とは別物として、はっきり明るくしてある。**
 * 同じ端末のホーム画面に 2 つ並ぶので、色が似ていると取り違える。
 *
 * 書く順番: トークン → 骨組み → 部品 → 画面別。
 * 部品側では変数だけを使い、生の色を書かない（暗い配色で必ず取り残される）。
 * **色だけで意味を伝えない。** 精算結果には「へ 払う」という言葉を必ず添える。
 *
 * ── 明るくするときに守ったこと ──────────────────────────
 *
 * **見た目を派手にしても、次の 3 つは絶対に崩さない。**
 * `tests/screens.test.cjs` が 320px〜PC・明暗どちらでも自動で見張っている。
 *
 *   1. 文字と下地の明暗差（本文 4.5:1 / 大きい文字 3:1）
 *   2. 押せるものは 44px 以上
 *   3. 横スクロールを出さない
 *
 * **グラデーションを敷いた面には `background-color` も必ず置く。**
 * グラデーションだけだと `backgroundColor` が透明になり、
 * 明暗差の試験が下地を測れずに素通りしてしまう。
 */

/* ══════════════ トークン ══════════════ */

:root {
  /* ── 主色。**紫**。白文字で 5.6:1 ある ── */
  --primary: #6c43f5;
  --on-primary: #ffffff;
  --primary-container: #e7deff;
  --on-primary-container: #24106b;

  /* ── 差し色。**オレンジ。白文字は載せられない**ので、必ず濃い文字を載せる ── */
  --accent: #ff6b35;
  --on-accent: #40160a;
  --accent-container: #ffe2d6;
  --on-accent-container: #52200e;

  --background: #f7f4ff;
  --surface: #ffffff;
  --surface-variant: #f0ecff;
  --on-surface: #1a1730;
  --on-surface-variant: #4e4a6a;
  --outline: #dfd8f5;

  /* 意味色。plus = 受け取る / minus = 払う */
  --plus: #0f7a52;
  --minus: #d62839;
  --danger: #d62839;
  --on-danger: #ffffff;
  --error-container: #ffe1e4;
  --on-error-container: #6e0c17;

  /* 見出しの帯。**両端とも白文字で 5.5:1 以上**になる色だけを通す */
  --head-solid: #6c43f5;
  --head-grad: linear-gradient(120deg, #6c43f5 0%, #8b37d9 52%, #b0329b 100%);
  --head-fg: #ffffff;

  /* 背景のうっすらした色みだけ。**文字は載せない** */
  --wash:
    radial-gradient(720px 420px at 8% -10%, rgba(108, 67, 245, 0.14), transparent 62%),
    radial-gradient(560px 380px at 106% 2%, rgba(255, 107, 53, 0.12), transparent 60%);

  /* 余白は 4 の倍数だけ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* **角丸は大きめ。** ここがいちばん「かたさ」に効く */
  --r-tag: 10px;
  --r-small: 14px;
  --r-card: 22px;
  --r-pill: 999px;

  --max-width: 760px;
  --bar-height: 64px;
  --tap: 44px;

  /* 影は黒ではなく紫を薄めたもの。灰色の影を明るい地に落とすと濁る */
  --shadow-1: 0 2px 4px rgba(60, 30, 140, 0.06), 0 6px 16px rgba(60, 30, 140, 0.07);
  --shadow-2: 0 4px 10px rgba(60, 30, 140, 0.10), 0 14px 34px rgba(60, 30, 140, 0.14);

  --ease: cubic-bezier(0.22, 0.9, 0.28, 1);
  --dur: 0.14s;
}

@media (prefers-color-scheme: dark) {
  /* **同じ変数名だけを上書きする。ここで新しい変数を増やさない。**
     ライトにあってダークに無い変数ができると、そこだけ色が飛ぶ */
  :root {
    --primary: #c3b0ff;
    --on-primary: #2b1178;
    --primary-container: #3e2b8f;
    --on-primary-container: #e7deff;

    --accent: #ff9e6e;
    --on-accent: #4a1a05;
    --accent-container: #6b2e14;
    --on-accent-container: #ffdccc;

    --background: #13111e;
    --surface: #1c1930;
    --surface-variant: #282341;
    --on-surface: #edeafa;
    --on-surface-variant: #c6c0e0;
    --outline: #3d3760;

    --plus: #6fe0a8;
    --minus: #ffb3b8;
    --danger: #ffb3b8;
    --on-danger: #5c0f1a;
    --error-container: #5c0f1a;
    --on-error-container: #ffdade;

    /* 帯は暗い側でも白文字。**明るい紫のままだと白が読めなくなる** */
    --head-solid: #3a2470;
    --head-grad: linear-gradient(120deg, #3a2470 0%, #52276f 52%, #6b2a72 100%);
    --head-fg: #ffffff;

    --wash:
      radial-gradient(720px 420px at 8% -10%, rgba(140, 110, 255, 0.16), transparent 62%),
      radial-gradient(560px 380px at 106% 2%, rgba(255, 120, 60, 0.10), transparent 60%);

    /* 影は暗い地では効かない。面の分離は枠線でやる */
    --shadow-1: none;
    --shadow-2: none;
  }
}

/* ══════════════ 骨組み ══════════════ */

* {
  box-sizing: border-box;
}

/* **これを消さないこと。**
 * hidden 属性が効くのはブラウザ既定の `display: none` によるものなので、
 * 部品側に `display: inline-flex` などを書いた瞬間、そちらが勝って**隠れなくなる。**
 * 実際に「前回のメンバーを呼び出す」が、メンバーが 10 人居るのに出ていた。 */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--background);
  background-image: var(--wash);
  background-attachment: fixed;
  color: var(--on-surface);
  /* **丸ゴシックを先に置く。** iPhone / Mac ではこれが当たって一気にやわらかくなる。
     Windows には無いので system-ui へ落ちる */
  font-family: "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Hiragino Sans",
    "Yu Gothic UI", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  /* ホーム画面アプリで画面全体がゴムのように弾むのを止める */
  overscroll-behavior-y: none;
}

.head {
  background-color: var(--head-solid);
  background-image: var(--head-grad);
  color: var(--head-fg);
  padding-top: env(safe-area-inset-top);
  border-bottom-left-radius: var(--r-card);
  border-bottom-right-radius: var(--r-card);
}

.head-in {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
}

.head-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.head-sub {
  margin: var(--sp-1) 0 0;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.92;
}

#app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) 0;
  /* 下に貼り付く要約とホームバーのぶん。足し忘れると最後の行が永久に読めない */
  padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom) + var(--sp-8));
}

.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.card-quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}

.card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: 18px;
  font-weight: 700;
}

/* 番号の丸。**差し色をここに使う**（主色だらけにしない） */
.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: var(--r-pill);
  background: var(--accent-container);
  color: var(--on-accent-container);
  font-size: 15px;
  font-weight: 800;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════ 部品 ══════════════ */

.in {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--outline);
  border-radius: var(--r-small);
  background: var(--surface);
  color: var(--on-surface);
  /* **16px 未満にしない。** iOS が入力欄を押した瞬間に画面を拡大する */
  font-size: 16px;
  font-family: inherit;
  transition: border-color var(--dur) var(--ease);
}

.in:focus {
  border-color: var(--primary);
}

.in:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.in-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.btn {
  /* **a にも付ける**ので、高さが効くように inline-flex にしておく。
     素の a のままだと min-height が効かず、押せる範囲が文字の高さ（19px）しかない */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* 横に並べたとき、縮んで文字が 2 行に折れる（「追加」が「追／加」になっていた） */
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--sp-2) var(--sp-6);
  border: 2px solid transparent;
  /* **丸くする。** 角丸を最大にするだけで、かたさがかなり抜ける */
  border-radius: var(--r-pill);
  background: var(--surface-variant);
  color: var(--on-surface);
  font-size: 15px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* 押したときに少し沈む。**動きはここだけ。** 減らす設定の端末では下でまとめて止める */
.btn:active:not(:disabled) {
  transform: scale(0.96);
}

.btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-main {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-1);
}

.btn-quiet {
  background: transparent;
  border-color: var(--outline);
  color: var(--on-surface-variant);
  font-weight: 600;
}

.btn-danger {
  background: transparent;
  border-color: var(--outline);
  color: var(--danger);
}

.btn-block {
  width: 100%;
}

/* 高さ（44px）は .btn のまま。文字と余白だけ控えめにする */
.btn-mini {
  padding: var(--sp-1) var(--sp-4);
  font-size: 13px;
  font-weight: 600;
}

.row {
  display: flex;
  gap: var(--sp-2);
}

.row .in {
  flex: 1 1 auto;
  min-width: 0;
}

.row-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.row-end:empty {
  display: none;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.fld {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.fld-wide {
  grid-column: 1 / -1;
}

.fld label {
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface-variant);
}

.empty {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-6) var(--sp-4);
  border: 2px dashed var(--outline);
  border-radius: var(--r-card);
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  font-size: 14px;
  text-align: center;
}

.err {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-small);
  background: var(--error-container);
  color: var(--on-error-container);
  font-size: 14px;
  font-weight: 600;
}

.note {
  margin: var(--sp-3) 0 0;
  color: var(--on-surface-variant);
  font-size: 13px;
}

/* ── メンバーの札 ── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.chips:empty {
  display: none;
}

.chip {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-left: var(--sp-4);
  border: 2px solid var(--outline);
  border-radius: var(--r-pill);
  background: var(--surface-variant);
  max-width: 100%;
}

.chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
}

.chip-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 var(--tap);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--on-surface-variant);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.chip-x:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* ── この支払いを割る人 ── */

.targets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface-variant);
}

.targets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}

.target {
  position: relative;
}

/* **checkbox 自体は見えないが、大きさは札と同じにする。**
   小さくすると押せる範囲が checkbox の大きさ（13px）になってしまう。

   **z-index を必ず付けること。**
   下の `:active` で札に transform が掛かると、札が新しい重なりの文脈を作って
   **checkbox より前面に出る。** すると押し始め（checkbox）と離した先（札）が
   食い違い、**クリックが成立しなくなる**（2026-09-06 に実際そうなった）。 */
.target-box {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.target-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 2px solid var(--outline);
  border-radius: var(--r-pill);
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  font-size: 15px;
  font-weight: 600;
  transition: transform var(--dur) var(--ease);
}

/* **色だけで「選んである」を伝えない。** ✓ も出す。
   場所は常に空けておく（押すたびに札の幅が動かないように） */
.target-chip::before {
  content: "✓";
  visibility: hidden;
  font-size: 13px;
}

.target-box:checked + .target-chip {
  background: var(--primary-container);
  border-color: var(--primary);
  color: var(--on-primary-container);
  font-weight: 700;
}

.target-box:checked + .target-chip::before {
  visibility: visible;
}

.target-box:active + .target-chip {
  transform: scale(0.95);
}

.target-box:focus-visible + .target-chip {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.targets-note {
  margin: var(--sp-2) 0 0;
  color: var(--on-surface-variant);
  font-size: 13px;
}

.contact-line {
  margin: var(--sp-4) 0 0;
  color: var(--on-surface-variant);
  font-size: 14px;
}

/* ── 支払いの一覧 ── */

.pays {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.pays:empty {
  display: none;
}

.pay {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--outline);
}

.pay:first-child {
  border-top: 0;
}

.pay-main {
  flex: 1 1 auto;
  min-width: 0;
}

.pay-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
}

.pay-by-name {
  display: block;
  color: var(--on-surface-variant);
  font-size: 13px;
}

/* 全員が対象でない支払いにだけ出す */
.pay-targets {
  display: block;
  margin-top: 2px;
  color: var(--on-surface-variant);
  font-size: 13px;
}

.pay-amount {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pay-x {
  flex: 0 0 var(--tap);
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--on-surface-variant);
  font-size: 18px;
  cursor: pointer;
}

.pay-x:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* ── 合計 ── */

.totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.total {
  padding: var(--sp-4);
  border-radius: var(--r-card);
}

/* **2 枚を色で描き分ける。** 同じ色の箱が 2 つ並ぶより、ぱっと見で区別が付く */
.total:first-child {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.total:last-child {
  background: var(--accent-container);
  color: var(--on-accent-container);
}

.total-key {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.total-val {
  display: block;
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

/* ── 精算結果 ── */

.settle {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.settle:empty {
  display: none;
}

.person {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--outline);
}

.person:first-child {
  border-top: 0;
}

.person-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.person-name {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moves {
  margin: var(--sp-1) 0 0;
  padding: 0;
  list-style: none;
}

.move {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* **色だけで意味を伝えない。** 「へ 払う」「精算なし」の言葉を必ず添える */
.move-pay {
  color: var(--minus);
}

.move-none {
  color: var(--on-surface-variant);
  font-weight: 400;
}

/* ── 負担額の内訳 ── */

.bd-list {
  margin: var(--sp-2) 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-small);
  background: var(--surface-variant);
  list-style: none;
  color: var(--on-surface-variant);
  font-size: 13px;
}

.bd-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.bd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-amount {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* 「負担の合計」から下が、自分が払った額と差引 */
.bd-rule {
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: 1px solid var(--outline);
}

.bd-total .bd-amount {
  font-weight: 700;
}

.bd-plus .bd-amount {
  color: var(--plus);
}

.bd-minus .bd-amount {
  color: var(--minus);
}

.fallback {
  width: 100%;
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 2px solid var(--outline);
  border-radius: var(--r-small);
  background: var(--surface-variant);
  color: var(--on-surface);
  font-family: inherit;
  font-size: 14px;
}

/* ── 使い方 ── */

.disc {
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  background: var(--surface);
  margin-bottom: var(--sp-3);
}

.disc > summary {
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.disc > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.howto {
  margin: 0;
  padding: 0 var(--sp-4) 0 var(--sp-8);
  font-size: 14px;
}

.howto-note {
  margin: var(--sp-3) 0 0;
  padding: 0 var(--sp-4) var(--sp-3);
  color: var(--on-surface-variant);
  font-size: 14px;
}

.howto-note code {
  padding: 0 var(--sp-1);
  border-radius: var(--r-tag);
  background: var(--surface-variant);
}

.howto-note a {
  color: var(--primary);
}

/* 折りたたみの中は左右に余白が無いので、ここだけ付け足す */
.disc .row-end {
  margin-top: 0;
  padding: 0 var(--sp-4) var(--sp-4);
}

.disc .btn-quiet {
  color: var(--primary);
}

/* ── 下に貼り付く要約 ── */

.bar {
  position: fixed;
  bottom: 0;
  /* **中身と同じ最大幅にする。** left/right を 0 にすると PC でここだけ全幅に伸びる */
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--max-width));
  background: var(--surface);
  border-top: 1px solid var(--outline);
  border-top-left-radius: var(--r-card);
  border-top-right-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  /* 高さを固定したまま padding を足すと中身が潰れる。高さ自体を伸ばす */
  padding-bottom: env(safe-area-inset-bottom);
}

.bar-in {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--bar-height);
  padding: var(--sp-2) var(--sp-4);
}

.bar-nums {
  flex: 1 1 auto;
  min-width: 0;
}

.bar-key {
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-variant);
}

.bar-val {
  display: block;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.bar-sub {
  display: block;
  font-size: 12px;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bar-height) + env(safe-area-inset-bottom) + var(--sp-4));
  z-index: 2;
  margin: 0;
  max-width: calc(100vw - var(--sp-8));
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow-2);
}

/* ══════════════ 広い画面 ══════════════ */

@media (min-width: 768px) {
  #app {
    padding: var(--sp-6) var(--sp-6) calc(var(--bar-height) + var(--sp-8));
  }

  .head-in {
    padding: var(--sp-6) var(--sp-6) var(--sp-8);
  }

  .head-title {
    font-size: 36px;
  }

  .card {
    padding: var(--sp-6);
  }

  /* 広い画面では 3 列に収める。**縦に積むと右側が丸ごと空く** */
  .grid {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .fld-label {
    grid-column: 1 / 2;
  }

  .fld-amount {
    grid-column: 2 / 3;
  }

  .fld-by {
    grid-column: 3 / 4;
  }

  .fld-targets,
  .fld-btn {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}