/* TerpSpeech - Catppuccin Latte と Mocha。TerpPhoto の app.css を土台にしている。
 *
 * 色は**全部**変数で、どの変数も**両方の**テーマに定義がある。パレットより下にリテラルの色
 * （#rrggbb や rgba()）を書いたらバグ: テーマの切り替えを生き延びて、片方で読めなくなる。
 * 未定義の変数も同じで、エラーも警告も出ずに宣言だけが無効になる。
 * tests/test_css.py がこの3つ（未定義の var / 片方だけの色 / パレットより下のリテラル）を見張る。
 *
 * ⚠️ パレットの2つのブロックは、下の並びと書き方のまま保つこと（テストが正規表現で探す）。
 *
 * --card-* はタイマーのカード（緑・黄・赤）。**両テーマで同じ値** — 部屋の向こうから見て、緑・黄・赤が
 * 窓の見た目に関わらず同じ意味でないといけない（デスクトップ版と同じ決まり）。
 */

: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);
  --card-green:     #2f7a21;
  --on-card-green:  #ffffff;
  --card-yellow:    #f9e2af;
  --on-card-yellow: #1e1e2e;
  --card-red:       #c00d34;
  --on-card-red:    #ffffff;
}

/* 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);
  --card-green:     #2f7a21;
  --on-card-green:  #ffffff;
  --card-yellow:    #f9e2af;
  --on-card-yellow: #1e1e2e;
  --card-red:       #c00d34;
  --on-card-red:    #ffffff;
}

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

*, *::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(--blue);
  text-decoration: none;
}
.brand:hover { color: var(--blue); }

.topbar-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topbar-tools .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; }

/* ⚠️ `hidden` の属性は、display を持つクラスに**負ける**。全部に効く1行をここに置く（TerpPhoto と同じ）。 */
[hidden] { display: none !important; }

.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; }

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

.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"], 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:disabled { opacity: 0.5; cursor: default; }

.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-plain { padding: 6px 10px; font-weight: 400; background: transparent; border-color: transparent; color: var(--subtext); }
.btn-plain:hover { background: var(--surface0); }

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

.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); }

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

/* 利用者のスマホに合わせる: 画面の幅は 412px ではなく**約300px**（TerpPhoto で実測）。 */
@media (max-width: 600px) {
  .container { padding: 14px 12px 40px; }
  .card { padding: 14px; }
  .topbar { padding: 8px 12px; gap: 6px 8px; }
  .topbar .btn-plain { padding: 4px 6px; }
}