/* calcyx.css — ネイティブ SheetView に準拠したダークテーマ */

:root {
  /* --- カラーテーマ (colors.js の applyColors() で上書きされる) ---
   * デフォルト値はフォールバック用。calctus Appearance_Color_* に準拠。 */
  --bg:         #161616;
  --row-line:   #202024;
  --sel-bg:     #262a37;
  --sep:        #373743;
  --text:       #ffffff;
  --cursor:     #b4c8ff;
  /* シンタックスハイライト */
  --symbol:     #40c0ff;   /* Appearance_Color_Symbols           */
  --ident:      #c0ff80;   /* Appearance_Color_Identifiers       */
  --special:    #ffc040;   /* Appearance_Color_Special_Literals  */
  --si-pfx:     #e0a0ff;   /* Appearance_Color_SI_Prefix         */
  --paren-0:    #40c0ff;   /* Appearance_Color_Parenthesis_1     */
  --paren-1:    #c080ff;   /* Appearance_Color_Parenthesis_2     */
  --paren-2:    #ff80c0;   /* Appearance_Color_Parenthesis_3     */
  --paren-3:    #ffc040;   /* Appearance_Color_Parenthesis_4     */
  --error:      #6e6e6e;   /* Appearance_Color_Error             */
  /* --- レイアウト定数 --- */
  --font:       'Courier New', Courier, monospace;
  --font-size:  13px;
  --row-h:      22px;
  --menubar-h:  28px;
  /* 上部メニューバー内のボタン/セレクトの高さ (PC 既定)。
     モバイル media query で拡大する。 */
  --menu-btn-h: 22px;
  /* L/R コピーボタンバーの高さ。既定は行高に合わせ、モバイルでは拡大する。 */
  --action-bar-h: var(--row-h);
  /* 右下固定のフォーカス行移動ボタンの幅 (モバイルで拡大)。 */
  --nav-btn-w: 32px;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  /* iOS/Android で入力フォーカス時に body がスクロールするのを抑止。
     fixed により visual viewport の変化で document が動かなくなる。 */
  position: fixed;
  width: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  /* モバイルのソフトキーボード出現に追従するため 100dvh を使う。
     100vh は layout viewport 基準でキーボード表示時に余る。 */
  height: 100dvh;
  position: relative;    /* #row-nav-bar の absolute 基準 */
}

/* ---- メニューバー ---- */
#menubar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--menubar-h);
  background: #1e1e22;
  border-bottom: 1px solid var(--sep);
  padding: 0 6px;
  flex-shrink: 0;
}
.menu-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 8px;
  border-right: 1px solid var(--sep);
  margin-right: 4px;
}
.menu-group:last-child { border-right: none; }

/* fmt セレクトだけは右端に寄せる。モバイルで .menu-btn の clamp() が
   max に張り付いてもメニューバーの右側に空白が残らないように、auto マージンで
   余白をボタン群と fmt との間に集約する。
   fmt-group の直後に非表示の file-input が入っているため :last-child では
   ないので、border-right を明示的に消す必要がある。 */
.fmt-group {
  margin-left: auto;
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

.menu-btn {
  background: #2e2e38;
  color: var(--text);
  border: none;
  padding: 0 8px;
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
  border-radius: 2px;
  /* 絵文字ボタンはグリフが縦に大きく、通常テキストボタンより高くなりがち。
     inline-flex + 固定 height で全 .menu-btn の高さを揃える。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--menu-btn-h);
  line-height: 1;
  white-space: nowrap;   /* " ▾" や " Open" が折り返さないように */
  user-select: none;     /* 連打でボタン文字が選択されてフォーカスが奪われるのを防ぐ */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.menu-btn:hover:not(:disabled) { background: #3a3a48; }
.menu-btn:disabled { opacity: 0.35; cursor: default; }

.menu-label { font-size: 11px; color: #aaa; margin-right: 4px; }

/* 広 PC (デスクトップ fine pointer + 画面幅に余裕) でのみラベル表示。
   モバイル・小画面ではアイコンのみで横幅を節約する。 */
.btn-label { display: none; }
.btn-icon-alt { display: inline; }
@media (min-width: 900px) and (pointer: fine) {
  .btn-label { display: inline; }
  /* ラベルが出るときは代替アイコン (例: About の "?") を隠す */
  .btn-icon-alt { display: none; }
}

/* ---- モバイル / タッチデバイスのタップ領域拡大 ---- */
/* 計算領域 (--row-h / --font-size) はそのまま、操作系ボタンのみ大きくする。
   狭い画面ではメニューバー全部が収まるよう clamp() でパディング・フォントを
   ビューポート幅に応じて段階的に切り詰める。 */
@media (pointer: coarse), (max-width: 768px) {
  :root {
    --menubar-h:    44px;
    --menu-btn-h:   36px;
    --action-bar-h: 40px;
    --nav-btn-w:    44px;
  }
  #menubar {
    gap:     clamp(2px, 1vw, 4px);
    padding: 0 clamp(3px, 1vw, 6px);
  }
  .menu-group {
    gap:           clamp(1px, 0.5vw, 2px);
    padding-right: clamp(3px, 1.5vw, 8px);
    margin-right:  clamp(2px, 1vw, 4px);
  }
  .menu-btn {
    padding:   0 clamp(3px, 2vw, 12px);
    font-size: clamp(12px, 3.5vw, 14px);
  }
  .dropdown-item {
    padding: 12px 16px;
    font-size: 14px;
  }
  #fmt-select {
    font-size: clamp(12px, 3.5vw, 14px);
    padding:   0 clamp(2px, 1vw, 6px);
  }
  .row-action-btn {
    padding: 0 12px;
    font-size: 14px;
  }
}

/* ---- ドロップダウンメニュー ---- */
.menu-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.dropdown-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background: #2e2e38;
  border: 1px solid var(--sep);
  min-width: 160px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  border-radius: 2px;
}
.dropdown-item {
  padding: 4px 12px;
  font-size: 11px;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-item:hover { background: #3a3a48; }
.dropdown-sep { height: 1px; background: var(--sep); margin: 2px 0; }

#fmt-select {
  background: #2e2e38;
  color: var(--text);
  border: none;
  font-size: 11px;
  font-family: var(--font);
  padding: 0 4px;
  cursor: pointer;
  /* .menu-btn と高さを揃える */
  height: var(--menu-btn-h);
  line-height: 1;
  box-sizing: border-box;
}

/* ---- シート ---- */
#sheet {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* padding-bottom は 2 行分。下段は右下固定の #row-nav-bar に隠れないため、
     上段は L/R コピーボタンが最下段のすぐ下に着地できるため。 */
  padding: 2px 0 calc(var(--action-bar-h) * 2) 0;
  position: relative;   /* #float-editor の absolute 基準 */
}

/* 永続フロート編集エディタ: フォーカス行の .expr-hl の位置に重なる。
   JS で top/left/width/height を計算して設定する。
   position:absolute なので #sheet のスクロールに自然に追従する。 */
#float-editor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: var(--row-h);
  overflow: hidden;
  /* row は position:relative で z-auto、しかも DOM 順で floatEditor より後ろにある。
     .row.focused の背景色に覆われないよう前面に引き上げる。 */
  z-index: 5;
}

/* フォーカス行の右端に浮かぶ L/R コピーボタン。
   floatEditor と同じく #sheet 内で absolute 配置、JS が top を更新する。
   非 wrapped 行では行右端、wrapped 行では 2 段目 (結果列) の右端に付く。
   右下固定の #row-nav-bar を避けるため、right を nav-btn-w 分だけずらす。 */
#row-action-bar {
  position: absolute;
  right: calc(var(--nav-btn-w) + 4px);
  height: var(--action-bar-h);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
  z-index: 6;             /* floatEditor (5) より上 */
  pointer-events: auto;
}
#row-action-bar[hidden] { display: none; }

/* 右下固定のフォーカス行移動ボタン (縦積み)。
   #app に対する absolute 配置で、スクロールやキーボード出現に追従。 */
#row-nav-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
  z-index: 7;             /* #row-action-bar (6) より上 */
  pointer-events: auto;
}
.row-nav-btn {
  background: #2e2e38;
  color: var(--text);
  border: 1px solid var(--sep);
  width: var(--nav-btn-w);
  height: var(--action-bar-h);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;     /* 連打でボタン文字が選択されてフォーカスが奪われるのを防ぐ */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.row-nav-btn:hover { background: #3a3a48; }
.row-nav-btn:disabled { opacity: 0.35; cursor: default; }
.row-action-btn {
  background: #2e2e38;
  color: var(--text);
  border: 1px solid var(--sep);
  padding: 0 8px;
  height: calc(var(--action-bar-h) - 4px);
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  user-select: none;     /* 連打でボタン文字が選択されてフォーカスが奪われるのを防ぐ */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.row-action-btn:hover { background: #3a3a48; }

/* スクロールバー */
#sheet::-webkit-scrollbar { width: 8px; }
#sheet::-webkit-scrollbar-track { background: var(--bg); }
#sheet::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

/* タッチ端末ではスクロールバーを完全に隠す。
   #row-nav-bar が #app の右端に貼り付くため、残っているとボタン上下の
   隙間でスクロールバーの hit area に指が乗って blur/scroll-start が発生し、
   ソフトキーボードが引っ込む原因になる。 */
@media (pointer: coarse), (max-width: 768px) {
  #sheet { scrollbar-width: none; }
  #sheet::-webkit-scrollbar { display: none; width: 0; }
}

/* ---- 行 ---- */
/* expr-col-w, eq-col-w は JS から設定される CSS 変数。
   ネイティブ版 update_layout() と同じロジックで計算。 */
.row {
  display: grid;
  grid-template-columns: var(--expr-col-w, 200px) var(--eq-col-w, 24px) 1fr;
  align-items: center;
  min-height: var(--row-h);
  border-bottom: 1px solid var(--row-line);
  position: relative;
}
.row.focused { background: var(--sel-bg); }

/* フォーカス行の静的 .expr-hl は floatEditor に隠されるので見せない
   (visibility:hidden でレイアウトサイズは維持し、offsetWidth/Top を読める)。 */
.row.focused .expr-hl { visibility: hidden; }

/* showResult=false の行 (リテラル単体や def/lambda 等):
   = 列・結果列がないので式セルを全幅に広げる。
   そうしないと長い式が --expr-col-w で見切れる。 */
.row.no-result .expr-cell,
.row.no-result .expr-hl {
  grid-column: 1 / -1;
}

/* 折り返し行: 式が全幅 (上段)、= + 結果が下段 */
.row.wrapped {
  grid-template-rows: var(--row-h) var(--row-h);
  min-height: calc(var(--row-h) * 2);
}
.row.wrapped .expr-cell,
.row.wrapped .expr-hl {
  grid-column: 1 / -1;
  grid-row: 1;
}
.row.wrapped .eq-cell {
  grid-column: 2;
  grid-row: 2;
}
.row.wrapped .result-cell {
  grid-column: 3;
  grid-row: 2;
}

/* IME 変換中 (単一行だった行のみ): = と結果を一時的に非表示にして
   式セルを単一行全幅に広げる。入力中に強制折り返しが発生して
   表示が崩れるのを避ける。
   元から .wrapped だった行はそのままの 2 行レイアウトを維持する。 */
.row.composing:not(.wrapped) {
  grid-template-rows: var(--row-h);
  min-height: var(--row-h);
}
.row.composing:not(.wrapped) .expr-cell,
.row.composing:not(.wrapped) .expr-hl {
  grid-column: 1 / -1;
  grid-row: 1;
}
.row.composing:not(.wrapped) .eq-cell,
.row.composing:not(.wrapped) .result-cell {
  display: none;
}

/* 式入力セル (フォーカス行) */
.expr-cell {
  position: relative;      /* オーバーレイの基準点 */
  overflow: hidden;
  padding: 0;              /* padding は子要素側で持つ (行高ずれ防止) */
  min-width: 0;
  height: var(--row-h);    /* 他行と完全に高さを揃える */
}

/* ハイライトオーバーレイ (フォーカス行・入力欄の背後に重ねる) */
.expr-hl-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  font-family: var(--font);
  font-size: var(--font-size);
  padding: 1px 4px;
  white-space: pre;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* 入力フィールド (テキストを透明にしてオーバーレイを見せる) */
.expr-input {
  position: absolute;        /* フロー外に出してセル高さに影響させない */
  inset: 0;                  /* セル全体を覆う */
  z-index: 1;
  background: transparent;
  color: transparent;        /* 入力テキストは非表示 */
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: var(--font-size);
  caret-color: var(--cursor);
  padding: 1px 4px;          /* オーバーレイと同じ padding */
  line-height: var(--row-h);
}

/* 選択時も color を transparent で固定する。
   指定しないと Android Chrome / iOS Safari が選択中の文字色を
   プラットフォーム標準 (≒黒) に戻してしまい、透明であるはずの
   入力テキストが黒塗り状態で浮き上がって見える。
   背景は半透明にしてハイライトオーバーレイが透けるようにする。 */
.expr-input::selection     { color: transparent; background: rgba(100, 160, 255, 0.35); }
.expr-input::-moz-selection { color: transparent; background: rgba(100, 160, 255, 0.35); }

/* IME 変換中 (Android Gboard 等): オーバーレイを隠して input 生テキストを表示。
   変換中は input.value が placeholder 文字列を返すケースがあり、
   highlight() が化けた文字を描画してしまうため。
   floatEditor 自身にクラスを付ける。 */
#float-editor.composing .expr-hl-overlay { visibility: hidden; }
#float-editor.composing .expr-input      { color: var(--text); }

/* ハイライト付き表示レイヤー (非フォーカス行) */
.expr-hl {
  font-family: var(--font);
  font-size: var(--font-size);
  white-space: pre;
  padding: 1px 4px;
  pointer-events: none;
  min-height: var(--row-h);
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

/* = 記号 (ネイティブ: C_SYMBOL 色) */
.eq-cell {
  padding: 0 3px;
  color: var(--symbol);
  font-family: var(--font);
  font-size: var(--font-size);
  white-space: nowrap;
  user-select: none;
}
.row.empty .eq-cell { visibility: hidden; }

/* 結果セル — ネイティブ版と同様に左揃え。Tab / クリックで選択可能。 */
.result-cell {
  padding: 0 4px;
  font-family: var(--font);
  font-size: var(--font-size);
  white-space: nowrap;
  overflow: hidden;
  user-select: text;
  cursor: text;
  outline: none;
}
.result-cell:focus {
  background: rgba(100, 140, 200, 0.15);
}
.result-cell.error { color: var(--error); }

/* ---- シンタックスハイライト用スパン ---- */
/* hl-number は未使用 (数値はデフォルト色=白、native準拠) */
.hl-string  { color: var(--special); }  /* 文字/文字列リテラル → オレンジ */
.hl-ident   { color: var(--ident);   }
.hl-symbol  { color: var(--symbol);  }
.hl-sipfx   { color: var(--si-pfx); }
.hl-comment { color: #555; font-style: italic; }
.hl-text    { color: var(--text);   }

/* カラーリテラル (#RRGGBB) の inline color-box。
   padding / margin / border はいずれも floatInput との字送りを狂わせ
   カーソル位置がズレるので使わない。背景色のみで視覚化する。 */
.hl-color-box {
  border-radius: 1px;
  /* background / color は style 属性でインライン設定 */
}

/* 括弧深さ別カラー (ネイティブ C_PAREN[4] / Appearance_Color_Parenthesis_1..4) */
.hl-paren-0 { color: var(--paren-0); }
.hl-paren-1 { color: var(--paren-1); }
.hl-paren-2 { color: var(--paren-2); }
.hl-paren-3 { color: var(--paren-3); }

/* ---- Paste ダイアログ ---- */
dialog {
  background: #26262b;
  color: var(--text);
  border: 1px solid var(--sep);
  border-radius: 4px;
  padding: 12px;
  box-sizing: border-box;
}
dialog::backdrop { background: rgba(0,0,0,0.6); }

#paste-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  /* 画面幅が 700px 以上なら 700px で中央、700px 未満ならビューポートに追従。
     PC/スマホで同じ縦積みレイアウトを共有する。 */
  width: calc(100vw - 16px);
  max-width: 700px;
  max-height: calc(100dvh - 16px);
  overflow: auto;
}

.dialog-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.dialog-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dialog-label { font-size: 11px; color: #aaa; }

dialog textarea {
  background: #1a1a20;
  color: var(--text);
  border: 1px solid var(--sep);
  font-family: var(--font);
  font-size: 12px;
  resize: none;
  padding: 4px;
  outline: none;
}

.ctrl-row { display: flex; align-items: center; gap: 8px; }
.ctrl-row-right { justify-content: flex-end; }
.ctrl-label { font-size: 11px; width: 110px; }
#paste-col-idx { width: 3em; }

dialog input[type="text"],
dialog input[type="number"] {
  background: #1a1a20;
  color: var(--text);
  border: 1px solid var(--sep);
  font-family: var(--font);
  font-size: 12px;
  padding: 2px 4px;
}

dialog button {
  background: #2e2e3a;
  color: var(--text);
  border: 1px solid var(--sep);
  padding: 3px 10px;
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
  border-radius: 2px;
}
dialog button:hover { background: #3a3a48; }
dialog button.btn-primary { background: #2a4a6a; }
dialog button.btn-primary:hover { background: #3a5a7a; }

.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- About ダイアログ ---- */
#about-dialog {
  width: calc(100vw - 32px);
  max-width: 420px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.about-icon-wrap { text-align: center; margin-bottom: 8px; }
.about-title { font-size: 16px; font-weight: bold; }
.about-subtitle { font-size: 11px; color: #aaa; margin-bottom: 8px; }
#about-dialog p { margin: 4px 0; font-size: 12px; }
#about-dialog a { color: var(--symbol); word-break: break-all; }
.about-licenses { margin: 10px 0; font-size: 11px; color: #ccc; display: flex; flex-direction: column; gap: 6px; text-align: left; }
#about-dialog .dialog-buttons { justify-content: center; }
@media (max-width: 360px) {
  .about-icon { width: 48px; height: 48px; }
}