/* 全ページ共通レイヤ（タイマー3画面 + 管理6画面）。
 * フォント / トークン / リセット / 汎用コンポーネント（.t-header, .t-tile, .t-btn, .t-field）を持つ。
 * 画面固有のレイアウト（スケーリング単位、状態カラー、ダイアログ等）は
 * timer.css（Operator/Viewer/Display）・admin.css（ログイン・大会・ストラクチャ管理）側に置く。
 */

/* ===================== fonts ===================== */
/* Google Fonts の latin サブセットを self-host（会場のネット接続に依存しないため）。
 * unicode-range は Google の CSS からそのまま写している。これがあることで、
 * 「接続が切断されました。再接続中…」のような日本語に対してブラウザがこれらの
 * ファイルを読みに行くことすらなくなり、即座にシステムの日本語フォントで描画される。
 * ライセンスは app/static/fonts/LICENSE-OFL.txt を参照（SIL OFL 1.1）。 */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ===================== tokens ===================== */

/* ここが既定パレットの唯一の定義。カラースキーマを設定した大会の3画面では、
 * _base.html が同じトークンを :root に再定義した <style> を timer.css の後に
 * 差し込んで上書きする（app/logic/color_scheme.py の scheme_css_vars）。
 * 管理6画面はスキーマを持たないので常にこの既定値になる。
 * 下の --c-* はすべて --c-text / --c-bg / --s-red からの派生値で、
 * スキーマ適用時はサーバー側が同じα・同じ合成比で計算し直す。
 * ここに新しい色を足すときは scheme_css_vars() 側にも足すこと（片方だけだと
 * 既定では正しく見えるのにスキーマ適用時だけ既定色が残る）。 */
:root {
  color-scheme: dark;

  /* 状態パレット。モックアップにあった黄 #ffd23d (ending) は使わず、
   * 残り60秒からの赤1色 + 残り10秒からの点滅に集約している。 */
  --s-accent: #f2f4f6;
  --s-red: #ff4b3a;
  --s-teal: #3fe0bd;
  --s-grey: #8b929c;

  --c-bg: #06070a;
  --c-panel: #0c0e12;
  --c-text: #f2f4f6;
  --c-line: rgba(242, 244, 246, 0.09);
  --c-tile-border: rgba(242, 244, 246, 0.08);
  --c-track: rgba(242, 244, 246, 0.08);
  --c-input-border: rgba(242, 244, 246, 0.18);
  --c-dimmer: rgba(242, 244, 246, 0.32);
  --c-next-caption: rgba(242, 244, 246, 0.35);
  --c-dim: rgba(242, 244, 246, 0.4);
  --c-caption: rgba(242, 244, 246, 0.45);
  --c-next: rgba(242, 244, 246, 0.55);
  --c-blinds-paused: rgba(242, 244, 246, 0.6);
  --c-sub: rgba(242, 244, 246, 0.9);

  /* .t-btn--primary の文字色。アクセント上に載るので背景色側と同じ濃さにする。 */
  --c-on-accent: #06070a;

  --c-overlay: rgba(6, 7, 10, 0.45);
  --c-backdrop: rgba(6, 7, 10, 0.65);
  --c-danger-border: rgba(255, 75, 58, 0.5);
  --c-error-bg: rgba(255, 75, 58, 0.12);
  --c-banner-bg: #5c1f1f;
  --c-banner-text: #ffd7d7;

  /* 数字はすべて Mono。UIラベルは Condensed。
   * UI文字列は日英混在なので、フォールバックに日本語フォントを必ず入れる。 */
  --font-ui: "IBM Plex Sans Condensed", "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", ui-monospace, SFMono-Regular, monospace;
}

/* 状態 → 役割トークン。管理ページは data-state を持たないので常にこのデフォルト（白）になる。
 * body[data-state=...] による上書きは timer.css 側（Operator/Viewer/Display専用）にある。 */
body {
  --accent: var(--s-accent);
  --timer-color: var(--s-accent);
  --blinds-color: var(--s-accent);
  --break-color: var(--s-accent);
}

/* ===================== reset ===================== */

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

/* `hidden`属性は必ず効かせる。UAスタイルシートの `[hidden] { display: none }` は
   CSSの優先順位で最弱なので、`.sm-badge { display: flex }` のような作者側の
   display指定があるだけで無効化され、JS側の `el.hidden = true` が何も隠せなく
   なる（提案バッジ・待機人数の枠が古い内容のまま残る不具合の原因だった）。
   個別セレクタで `[hidden]` を叩く対処が各CSSに点在しているが、新しい要素で
   同じ罠を踏まないよう、ここで一括して勝たせる。 */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
}

body {
  color: var(--c-text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===================== header ===================== */

.t-header {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: calc(var(--u) * 1.2);
}

.t-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: calc(var(--u) * 1.9);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ===================== tiles ===================== */

.t-tile {
  flex: 0 0 auto;
  background: var(--c-panel);
  border: 1px solid var(--c-tile-border);
  border-radius: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 0.75) calc(var(--u) * 1.3);
  min-width: 0;
}

.t-tile-caption {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 1.1);
  letter-spacing: 0.22em;
  color: var(--c-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-tile-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: calc(var(--u) * 3.1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.t-tile-value--sm {
  font-size: calc(var(--u) * 2.8);
}

.t-tile-sub {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 1.25);
  color: var(--c-sub);
}

/* ===================== buttons ===================== */

.t-btn {
  flex: 1 1 0;
  /* --u がどれだけ小さくなってもタッチターゲットは44px を下回らせない。 */
  min-height: max(calc(var(--u) * 3.4), 44px);
  padding: 0 calc(var(--u) * 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: max(calc(var(--u) * 1.5), 14px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  border: 1px solid var(--c-input-border);
  border-radius: calc(var(--u) * 0.5);
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
  appearance: none;
  text-align: center;
  text-decoration: none;
  /* 連打時にスマホのダブルタップズーム誤爆・タップ遅延(~300ms)を起こさせない。
   * pinch-zoomは許可したままにする（ページ全体のズームを禁止しない）。 */
  touch-action: manipulation;
}

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

/* --accent を使うので、一時停止中はグレー・残り60秒未満では赤に自動で追従する。
 * ボタン自体は点滅させない（押そうとしている対象が明滅するのは操作性を損なう）。 */
.t-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--c-on-accent);
}

.t-btn--danger {
  border-color: var(--c-danger-border);
  color: var(--s-red);
}

.t-btn--small {
  min-height: max(calc(var(--u) * 2.8), 40px);
  font-size: max(calc(var(--u) * 1.25), 13px);
  letter-spacing: 0.04em;
}

.t-controls-row {
  display: flex;
  gap: calc(var(--u) * 1);
}

/* ===================== fields ===================== */

.t-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.4);
  font-size: max(calc(var(--u) * 1.3), 13px);
  letter-spacing: 0.04em;
  margin-bottom: calc(var(--u) * 1.2);
}

.t-field input,
.t-field select,
.t-field textarea {
  font-family: var(--font-mono);
  font-size: max(calc(var(--u) * 1.6), 16px);
  font-variant-numeric: tabular-nums;
  min-height: 44px;
  padding: 0 calc(var(--u) * 0.8);
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-input-border);
  border-radius: calc(var(--u) * 0.5);
}

.t-field textarea {
  padding: calc(var(--u) * 0.8);
  resize: vertical;
}

/* チェックボックス専用のフィールド。.t-field input の文字入力用スタイル
 * （44px min-height 等）をそのまま流用すると肥大化するため別クラスで
 * 切り離す。ラベル文字を左・チェックボックスを右に置く（他の .t-field は
 * 縦積みだが、これだけ横並びが読みやすいための意図的な例外）。 */
.t-field--check {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 1);
}

.t-field--check input[type="checkbox"] {
  all: revert;
  accent-color: var(--accent);
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
  flex: 0 0 auto;
}

/* ===================== badge dot ===================== */
/* 要対応の通知を示す小さな赤丸（例: SEATSナビの「バランシング提案あり」等）。
 * ボタンラベルの右上に重ねて使う想定なので、置く側に `.t-badge-anchor` も付けること。 */

.t-badge-anchor {
  position: relative;
}

.t-badge-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--s-red);
  transform: translate(40%, -40%);
}

.t-badge-dot[hidden] {
  display: none;
}