/*
 * scd 基本レイアウト (Ember テーマ。tsuzuri と同じ配色)。
 *
 * 暖色の炭色を基調にしたダークテーマ。アクセントは琥珀 1 色、補助色に緑 1 色。
 * 角丸なし・影なし・グラデーションなし・アニメーションなし。UI を含めて全て等幅フォント。
 * 色は下記トークン以外を足さない (純白 #ffffff / 純黒 #000000 も使わない)。
 */

/* hidden 属性は display を当てたクラスより常に優先する */
[hidden] {
  display: none !important;
}

:root {
  color-scheme: dark;

  /* ---- カラートークン (Ember) ---- */
  --bg: #1f1b18;             /* 本文の背景 */
  --chrome: #171411;         /* 上の操作列・ステータスバーの背景 */
  --border: #2b2621;         /* 区切り線 (1px) */
  --line-highlight: #292420; /* ホバー、押している間 */
  --selection: color-mix(in srgb, var(--accent) 24%, transparent);
  --text: #d3cbc0;
  --text-bright: #efe8dd;
  --text-dim: #8a8075;
  --text-status: #978d81;    /* ステータスバーの文字 */
  --gutter: #57504a;
  --control: #a89e92;        /* 操作ボタンの線 */
  --accent: #e0a84a;
  --secondary: #6fcf9a;
  --link: #7fa6c9;           /* 青系はこれだけ */
  --link-underline: #4c6a85;
  --scrollbar-hover: #3a332d;
  --input-border: #332d27;

  /* ---- タイポグラフィ (UI も本文も同じ等幅スタック) ----
     並びは 共通 → Windows の英数字 → macOS の英数字 → 日本語 */
  --font-body: "Spline Sans Mono", "Cascadia Mono", "Consolas", "SF Mono", "Menlo", "BIZ UDGothic", "MS Gothic", monospace;
  --font-mono: var(--font-body);
  --font-size: 13.5px;
  --line-height: 22px;
  --font-size-sidebar: 12.5px;
  --font-size-status: 11.5px;

  /* ---- 寸法 ---- */
  --statusbar-height: 26px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  /* ダブルタップ・ピンチでページを拡大させない (iPhone) */
  touch-action: manipulation;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: var(--font-size) / var(--line-height) var(--font-body);
}

::selection {
  background: var(--selection);
}

button {
  font: inherit;
}

/* ---- 本文 ---- */
#main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hello {
  margin: 0;
  color: var(--text-bright);
  font-size: var(--font-size);
}

/* ---- ステータスバー (PC 用。背景 chrome、上辺 1px border) ---- */
#statusbar {
  flex: none;
  height: var(--statusbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--chrome);
  border-top: 1px solid var(--border);
  font-size: var(--font-size-status);
  line-height: calc(var(--statusbar-height) - 1px);
  color: var(--text-status);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.st-item {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* ---- 狭い画面 (幅 700px 以下 = iPhone)。body.narrow は src/layout.ts が付ける。
   配色・等幅・部品は PC と同じ。変えるのはレイアウトだけ:
   上に 36px の操作列を出し、ステータスバーは隠す ---- */
#topbar {
  display: none;
}
body.narrow #topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: calc(36px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 4px 0;
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
}
/* アプリ名を真ん中に置くため、左のボタンと同じ幅の空きを右にも取る */
body.narrow #topbar::after {
  content: "";
  flex: none;
  width: 40px;
}
.tb-btn {
  width: 40px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--control);
  cursor: pointer;
}
.tb-btn .icon {
  width: 16px;
  height: 16px;
}
.tb-btn:active {
  background: var(--line-highlight);
}
.tb-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  color: var(--text-bright);
  font-weight: 600;
  font-size: var(--font-size-sidebar);
}
body.narrow #statusbar {
  display: none;
}
body.narrow .hello {
  font-size: 20px;
}
/* ホームインジケーター (iPhone) に本文が重ならないよう、下端にセーフエリア分の余白を取る */
body.narrow #main {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* iOS は 16px 未満の入力欄にフォーカスすると画面を自動で拡大するので、狭い画面では入力欄を 16px にする */
body.narrow input,
body.narrow textarea,
body.narrow select {
  font-size: 16px;
}