/* TerpRecipe - Catppuccin Latte と Mocha。配色は TerpChrono で実測して調整した値を土台にしている。
 *
 * 色は**全部**変数で、どの変数も**両方の**テーマに定義がある。パレットより下にリテラルの色
 * （#rrggbb や rgba()）を書いたらバグ: テーマの切り替えを生き延びて、片方で読めなくなる。
 * 未定義の変数も同じで、エラーも警告も出ずに宣言だけが無効になる。
 * tests/test_css.py がこの3つ（未定義の var / 片方だけの色 / パレットより下のリテラル）を見張る。
 *
 * ⚠️ パレットの2つのブロックは、下の並びと書き方のまま保つこと（テストが正規表現で探す）。
 *    既定は Light: 台所で昼間に開くことが多い。Night は設定画面で選ぶ（口座に覚える）。
 */

:root {
  --radius: 10px;
  --gap: 14px;
  --font: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
}

/* Light - Catppuccin Latte。カードはページより明るい（mantle は白）。 */
:root, :root[data-theme="light"] {
  color-scheme: light;

  --base:       #eff1f5;
  --mantle:     #ffffff;
  --surface0:   #dce0e8;
  --surface1:   #bcc0cc;
  --text:       #33364d;
  --subtext:    #464a60;
  --overlay:    #5e6276;
  --blue:       #1250c9;
  --blue-hover: #0e3fa2;
  --on-accent:  #ffffff;
  --green:      #2f7a21;
  --red:        #c00d34;
  --peach:      #c04c05;
  --tint-red:   rgba(192, 13, 52, 0.08);
  --tint-green: rgba(47, 122, 33, 0.09);
  --tint-blue:  rgba(18, 80, 201, 0.08);
  --tint-peach: rgba(192, 76, 5, 0.10);
  --shadow:     0 1px 3px rgba(51, 54, 77, 0.12);
}

/* Night - Catppuccin Mocha。カードはページより暗い。 */
:root[data-theme="night"] {
  color-scheme: dark;

  --base:       #1e1e2e;
  --mantle:     #181825;
  --surface0:   #313244;
  --surface1:   #45475a;
  --text:       #e2e7f7;
  --subtext:    #bfc7de;
  --overlay:    #949cb4;
  --blue:       #89b4fa;
  --blue-hover: #a3c5fb;
  --on-accent:  #1e1e2e;
  --green:      #a6e3a1;
  --red:        #f38ba8;
  --peach:      #fab387;
  --tint-red:   rgba(243, 139, 168, 0.12);
  --tint-green: rgba(166, 227, 161, 0.10);
  --tint-blue:  rgba(137, 180, 250, 0.12);
  --tint-peach: rgba(250, 179, 135, 0.14);
  --shadow:     0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---- 土台 -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.7;
}

a { color: var(--blue); }
a:hover { color: var(--blue-hover); }

h1, h2, h3 { line-height: 1.35; margin: 0; }

/* ---- 上の帯 ------------------------------------------------------------ */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--gap);
  padding: 10px 16px;
  background: var(--mantle);
  border-bottom: 1px solid var(--surface0);
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--peach);
  text-decoration: none;
}
.brand:hover { color: var(--peach); }

.book-name { color: var(--overlay); font-size: 0.9rem; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--subtext);
  text-decoration: none;
}
.nav a:hover { background: var(--surface0); color: var(--text); }
.nav a.is-current { background: var(--tint-blue); color: var(--blue); }

.topbar form { margin: 0; }

/* ---- 入れ物 ------------------------------------------------------------ */

.container { max-width: 960px; margin: 0 auto; padding: 20px 16px 48px; }
.narrow { max-width: 440px; margin: 0 auto; }

.page-title { font-size: 1.4rem; margin-bottom: var(--gap); }

.card {
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card > h2 { font-size: 1.05rem; margin-bottom: 10px; }

/* 縦に積む。間隔は1か所で決める。 */
.stack > * + * { margin-top: var(--gap); }
/* 横に並べる。狭ければ折り返す。 */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.hint { color: var(--overlay); font-size: 0.88rem; }
.empty { color: var(--overlay); text-align: center; padding: 36px 12px; }

/* ---- 入力 -------------------------------------------------------------- */

.field { display: block; }
.field > span { display: block; font-size: 0.9rem; color: var(--subtext); margin-bottom: 4px; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
textarea, select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--mantle);
  border: 1px solid var(--surface1);
  border-radius: var(--radius);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}
input[readonly] { background: var(--base); color: var(--subtext); }

.btn {
  display: inline-block;
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--surface1); color: var(--text); }

.btn-primary { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--on-accent); }

.btn-danger { background: var(--tint-red); border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--on-accent); }

/* 帯の中のログアウトなど、目立たせたくない押しもの。 */
.btn-plain { padding: 6px 10px; font-weight: 400; background: transparent; border-color: transparent; color: var(--subtext); }
.btn-plain:hover { background: var(--surface0); }

.btn-small { padding: 5px 10px; font-size: 0.88rem; }

/* ---- お知らせ ---------------------------------------------------------- */

.flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--surface1);
  background: var(--mantle);
  margin-bottom: var(--gap);
}
.flash-error   { border-color: var(--red);   background: var(--tint-red); }
.flash-success { border-color: var(--green); background: var(--tint-green); }
.flash-info    { border-color: var(--blue);  background: var(--tint-blue); }

/* 渡すリンクを出す箱（招待・再設定）。読み取り専用の欄とコピーの押しもの。 */
.copybox { display: flex; flex-wrap: wrap; gap: 8px; }
/* 欄には最低の幅を持たせる。狭い画面では、ボタンを潰す代わりに次の行へ送る。 */
.copybox input { flex: 1 1 220px; min-width: 0; font-size: 0.9rem; }

/* ---- 表 ---------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
/* ⚠️ セルの中で折り返さない。日本語はどの文字の間でも折り返せるので、狭い画面では
      名前の列が1文字幅まで潰れて縦書きになり、行が間延びする（実機の幅で踏んだ）。
      入りきらない分は .table-wrap が横に流す。 */
.table th, .table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--surface0); vertical-align: middle; white-space: nowrap; }
.table th { font-size: 0.85rem; font-weight: 600; color: var(--overlay); }

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid var(--surface1);
  color: var(--subtext);
  white-space: nowrap;
}
.badge-admin   { border-color: var(--blue);  color: var(--blue);  background: var(--tint-blue); }
.badge-pending { border-color: var(--peach); color: var(--peach); background: var(--tint-peach); }
.badge-off     { border-color: var(--red);   color: var(--red);   background: var(--tint-red); }

/* ---- 狭い画面 ---------------------------------------------------------- */

@media (max-width: 600px) {
  .container { padding: 14px 12px 40px; }
  .nav { margin-left: 0; width: 100%; order: 3; }
  .card { padding: 14px; }
}