/* ==========================================================================
   cookalc tools / gelling_agent.css
   凝固剤計算ツール 固有スタイル

   共通部分（.ca-*）は /assets/css/cookalc-ui.css を使う。
   ここに書くのは、このツール固有の見た目（特徴カードのグリッド・
   硬さの切り替えボタン・比較表など）だけ。
   ========================================================================== */

/* ---- 入力欄 ---- */
.ga-field { margin-bottom: 1.25rem; }
.ga-field:last-child { margin-bottom: 0; }
.ga-hint { font-size: .8125rem; color: var(--ca-muted); margin: .375rem 0 0; }

/* ---- 特徴の比較カード（全ティア共通で閲覧可） ---- */
.ga-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 700px) {
  .ga-info-grid { grid-template-columns: repeat(3, 1fr); }
}
.ga-info-card {
    background: var(--ca-accent-bg);
    border: 1px solid var(--ca-accent-line);
    border-radius: .6rem;
    padding: 1rem 1.1rem;
}
.ga-info-card h3 {
    margin: 0 0 .4rem;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--ca-ink);
}
.ga-info-card p {
    margin: 0 0 .5rem;
    font-size: .85rem;
    color: var(--ca-sub);
    line-height: 1.6;
}
.ga-info-pct {
    font-family: var(--ca-mono);
    font-weight: 700;
    color: var(--ca-accent-dark);
}
.ga-info-tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 9999px;
    background: #fff;
    color: var(--ca-sub);
    border: 1px solid var(--ca-accent-line);
    margin: 0 .25rem .25rem 0;
}
.ga-info-source {
    margin: .5rem 0 0;
    font-size: .7rem;
    color: var(--ca-muted);
    line-height: 1.5;
}

/* ---- 硬さの切り替え（3択） ---- */
.ga-seg {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ga-seg button {
    flex: 1 1 auto;
    min-width: 6rem;
}

/* ---- 結果表示（ca-dial の中） ---- */
.ga-result-big {
    font-family: var(--ca-mono);
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: .5rem;
}
.ga-result-unit { font-size: 1.1rem; opacity: .8; }
.ga-result-sub { font-size: .875rem; color: rgba(243,236,225,.8); margin: 0; }

/* ---- teaser（ロック表示） ---- */
.ga-teaser {
    text-align: center;
    padding: 1rem .5rem .5rem;
}
.ga-teaser-icon {
    width: 2.75rem; height: 2.75rem; margin: 0 auto .75rem;
    background: var(--ca-accent-bg); color: var(--ca-accent-dark);
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.ga-teaser p { color: var(--ca-sub); font-size: .9rem; margin: 0 0 1rem; }

/* ---- 比較表（Pro専用） ---- */
.ga-compare-wrap { overflow-x: auto; }
.ga-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.ga-compare-table th, .ga-compare-table td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--ca-line);
    text-align: left;
}
.ga-compare-table th { color: var(--ca-sub); font-size: .8rem; }
.ga-compare-table td.ga-compare-amount {
    font-family: var(--ca-mono);
    font-weight: 700;
    color: var(--ca-accent-dark);
    white-space: nowrap;
}

/* ==========================================================================
   cookalc tools / bakers_percentage.css
   高機能ベーカーズパーセント計算ツール 固有スタイル

   共通部分（.ca-*）は /assets/css/cookalc-ui.css を使う。
   ここに書くのは、このツール固有の見た目（材料リストの表・計算方式の
   切り替えボタン・型サイズ入力・teaser等）だけ。
   ========================================================================== */

/* ---- 入力欄 ---- */
.bk-field { margin-bottom: 1.25rem; }
.bk-field:last-child { margin-bottom: 0; }
.bk-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.25rem;
}
@media (min-width: 640px) {
  .bk-field-row { grid-template-columns: repeat(2, 1fr); }
}
.bk-field-sub { margin-top: .75rem; }
.bk-hint { font-size: .8125rem; color: var(--ca-muted); margin: .375rem 0 0; }

/* ---- 材料リストの表 ---- */
.bk-table-wrap { overflow-x: auto; }
.bk-ing-table, .bk-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.bk-ing-table th, .bk-ing-table td,
.bk-result-table th, .bk-result-table td {
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--ca-line);
  text-align: left;
  vertical-align: middle;
}
.bk-ing-table th, .bk-result-table th { color: var(--ca-sub); font-size: .8rem; }
.bk-ing-table input[type="text"],
.bk-ing-table input[type="number"] {
  width: 100%; min-width: 5rem;
  font-size: .95rem; padding: .4rem .5rem;
}
.bk-ing-table select { min-width: 4.5rem; }
.bk-row-del {
  border: 0; background: none; cursor: pointer;
  color: var(--ca-warn); font-size: 1.15rem; font-weight: 700; line-height: 1;
  padding: .25rem .4rem;
}
.bk-row-del:hover { color: #9b2c2c; }

/* ---- 計算方式の切り替え（3択） ---- */
.bk-seg { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bk-seg button { flex: 1 1 auto; min-width: 8rem; }
.bk-seg button.bk-locked { opacity: .6; }

/* ---- 結果表示 ----
   ⚠️ 明るい文字色は「暗い背景の結果ダイヤル(#bk-result-dial)の中」だけに限定すること。
   .bk-result-table は発酵種カード（明るい背景の .ca-card）でも使っているため、
   スコープを付けずに color:#f3ece1 を当てると、そちらが白文字＋白背景で読めなくなる。
   （2026-08-28、実ブラウザのスクリーンショットで発覚。textContentを読むテストでは
   検出できなかった。）                                                        */
.bk-result-table td { font-family: var(--ca-mono); }
.bk-result-table td:first-child { font-family: var(--ca-font); }
#bk-result-dial .bk-result-table th,
#bk-result-dial .bk-result-table td { border-bottom-color: rgba(243,236,225,.18); }
#bk-result-dial .bk-result-table th { color: rgba(243,236,225,.75); }
#bk-result-dial .bk-result-table td { color: #f3ece1; }
.bk-result-note { font-size: .85rem; color: var(--ca-warn); margin: .75rem 0 0; }
#bk-result-dial .bk-result-note { color: #ffb4a1; }

/* ---- 前種・仕込み水温・型比容積の結果表示 ---- */
.bk-dt-result {
  font-size: 1.15rem; font-weight: 700; color: var(--ca-accent-dark);
  margin: .75rem 0 0;
}

/* ---- 型サイズの寸法入力 ---- */
.bk-dims {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  margin-top: .5rem;
}
.bk-dims label {
  display: inline-block; font-size: .8rem; margin: 0;
  color: var(--ca-sub); font-weight: 700;
}
.bk-dims input { width: 6rem; display: inline-block; }

/* ---- teaser（ロック表示） ---- */
.bk-teaser { text-align: center; padding: 1rem .5rem .5rem; }
.bk-teaser-icon {
  width: 2.75rem; height: 2.75rem; margin: 0 auto .75rem;
  background: var(--ca-accent-bg); color: var(--ca-accent-dark);
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.bk-teaser p { color: var(--ca-sub); font-size: .9rem; margin: 0 0 1rem; }

/* ==========================================================================
   2026-08-28 UI改善（認知負荷の軽減）
   ⚠️ このCSSはテーマ共通ファイル（code-editor-13.css）として全ページに配信される。
      他ツールに影響が出ないよう、汎用的なセレクタには必ず #bakers-tool を付けること。
   ========================================================================== */

/* ---- ヘルパーテキスト（控えめな補足説明） ----
   専門的な補足は本文と同じ強さで出さず、小さめ・グレーの「添え書き」にする。
   先頭の ℹ️ はCSSで付けるので、HTML側に絵文字を書かなくてよい。            */
#bakers-tool .bk-help {
  font-size: .8rem;
  line-height: 1.75;
  color: var(--ca-muted);
  margin: .5rem 0 0;
  padding-left: 1.5em;
  text-indent: -1.5em;   /* 2行目以降を絵文字の右に揃える（ぶら下げインデント） */
  max-width: 34em;       /* 長い説明文で視線が横に流れすぎないようにする */
}
#bakers-tool .bk-help::before {
  content: 'ℹ️';
  margin-right: .4em;
}

/* ---- 入力欄が横に広がりすぎないようにする ----
   .ca-tool は最大64remあるため、1カラムのときに入力欄が1000px近くまで伸びて
   視線移動の負担が大きかった。フォーム部品だけ上限を設ける。
   材料リストの表（.bk-ing-table）内の入力欄はセル幅に追従させたいので対象外。 */
#bakers-tool .bk-field > input[type="number"],
#bakers-tool .bk-field > input[type="text"],
#bakers-tool .bk-field > select {
  max-width: 20rem;
}
#bakers-tool .bk-field > .bk-hint { max-width: 34em; }

/* 発酵種の副材料の割り当て欄（JSで動的生成する .bk-field）にも同じ上限を効かせる */
#bk-preferment-shares input[type="number"] { max-width: 20rem; }

/* ---- 結果表示の行間を少し詰めて、カード内の情報密度を整える ---- */
#bakers-tool .bk-dt-result { line-height: 1.6; }

/* ---- 型の寸法入力は小さく、ラベルと横並びに ----
   .bk-dims input の width:6rem は cookalc-ui.css の
   `.ca-tool input[type="number"] { width:100% }`（詳細度0,2,1）に負けていて、
   実際には全幅に広がってしまっていた。#bakers-tool を付けて詳細度で勝たせる。 */
#bakers-tool .bk-dims {
  display: grid;                                  /* flexだとラベルと入力欄が別行に泣き別れる */
  grid-template-columns: auto minmax(0, 6rem);    /* 左=ラベル / 右=入力欄 で必ず対になる */
  gap: .5rem .75rem;
  align-items: center;
  justify-content: start;
}
#bakers-tool .bk-dims input[type="number"] { width: 6rem; max-width: 6rem; }
#bakers-tool .bk-dims label { margin-bottom: 0; }