/* ============================================================
   unify.css — 詳細（入力）・生成中・レビュー（表）の画面を、かんたん画面と同じ見た目に揃える

   なぜ別ファイルか：styles.css（Steel）は詳細モードの見た目の土台で、帳票出力・検算・表の
   幅の規則（CLAUDE.md「レビュー表の可読性」）も抱えている。そこを書き換えると影響が広い。
   かんたん画面（simple.css）と同じく「後から読み込んで上書きする」層として切り出す。
   読み込みは simple.css の後（--sx-* トークンをここで使うため）。

   やっていること：
   1. styles.css のトークンを --sx-* の値に付け替える（色・字・角丸・影がまとめて揃う）
   2. それでも残る「かんたんに無い味付け」を平らにする：グラデーション、濃い影、光沢、
      大きすぎる文字、角張ったチップ
   触らないこと：表の列幅・折り返し・幅の分岐（table.ra の colgroup と @media）。
   見た目だけ変え、配置の規則には手を出さない。
   ============================================================ */

/* ---------- 1. トークンの付け替え ---------- */
:root {
  --font-display: var(--sx-font);
  --font-body: var(--sx-font);
  --bg: var(--sx-paper);
  --text: var(--sx-ink);
  --text-muted: var(--sx-ink-2);
  --text-faint: var(--sx-ink-3);
  --accent-deep: var(--sx-accent-deep);
  --accent-tint: var(--sx-accent-tint);
  --surface-strong: var(--sx-surface);
  --border: var(--sx-line);
  --border-alt: var(--sx-line-strong);
  --radius: var(--sx-r-lg);
  --shadow: 0 1px 2px rgba(16, 24, 28, .05);
  --inner: 0 0 0 transparent;
}
/* 上からうっすら差す青いグラデーションはかんたん画面に無い */
body { background-image: none; }

/* ---------- 2. 入力画面（詳細）の幅と見出し ---------- */
/* かんたん画面と同じ幅で中央に置く（全幅に広がると、行が長くなって読みづらい） */
#screen-hearing, #screen-loading { max-width: 1100px; margin: 0 auto; }
#screen-hearing .eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--sx-ink-3);
}
#screen-hearing .page-title { font-size: 24px; font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.hearing-head { margin-bottom: 18px; align-items: center; }
.flow-step { font-size: 12px; padding: 3px 11px; background: var(--sx-surface); }
.flow-step.on { background: var(--sx-accent); box-shadow: none; }

/* ---------- 3. カード ---------- */
.card {
  border: 1px solid var(--sx-line); border-radius: var(--sx-r-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 28, .04); padding: 20px 22px; margin-bottom: 14px;
}
.card h2 { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.card .hint { font-size: 13px; line-height: 1.7; margin-bottom: 14px; }
/* 番号の四角：グラデーションと影をやめ、かんたん画面のロゴと同じ塗りの角丸に */
.step {
  width: 22px; height: 22px; border-radius: var(--sx-r-sm); font-size: 12.5px;
  background: var(--sx-accent); box-shadow: none;
}
.step.alt { background: var(--sx-ink-3); box-shadow: none; }
.card-tag { font-size: 11.5px; padding: 2px 9px; background: var(--sx-surface-2); border-color: var(--sx-line); }

/* ---------- 4. 入力欄・工種・チップ ---------- */
.field label, .chip-label { font-size: 12.5px; font-weight: 600; color: var(--sx-ink-2); letter-spacing: 0; }
/* 入力欄の字は 16px 未満にしない：iPhone の Safari は 16px 未満の欄を押すと画面を拡大する（横向きも含む） */
.field input, .field textarea, .field select {
  font-size: 16px; border-radius: var(--sx-r); border-color: var(--sx-line-strong); padding: 9px 12px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow: 0 0 0 3px var(--sx-accent-tint);
}
.worktype { border-radius: var(--sx-r); border-color: var(--sx-line); }
.worktype:hover { transform: none; box-shadow: none; border-color: var(--sx-line-strong); }
.worktype.selected { box-shadow: none; }
.worktype .wt-name { font-size: 14.5px; }
.worktype .wt-meta { font-size: 12.5px; line-height: 1.6; }
/* チップはかんたん画面の「よく探すもの」と同じ丸い札に */
.chip {
  border: 1px solid var(--sx-line-strong); border-radius: 999px;
  padding: 6px 14px; font-size: 13.5px; color: var(--sx-ink-2);
}
.chip.on { border-color: var(--sx-accent); background: var(--sx-accent-tint); color: var(--sx-accent-deep); }
.chip.sug { font-size: 13px; padding: 5px 12px; }
.chip-add { border-width: 1px; border-radius: 999px; padding: 6px 14px; font-size: 13.5px; }
.btn-mic { font-size: 13.5px; padding: 6px 14px; }
.tmpl { border-radius: var(--sx-r); border-color: var(--sx-line); }
.tmpl:hover { transform: none; }
.tmpl-name { font-size: 14.5px; }
.tmpl-meta { font-size: 12.5px; }
.tmpl-copy { background: var(--sx-accent); box-shadow: none; font-size: 13px; }

/* ---------- 5. ボタン：光沢・浮き上がり・グラデーションをやめる ---------- */
.btn-primary {
  background: var(--sx-accent); box-shadow: none; border-radius: 11px;
  font-size: 15px; font-weight: 700; padding: 12px 22px;
}
.btn-primary:hover { background: var(--sx-accent-deep); transform: none; box-shadow: none; }
.btn-primary::after { display: none; }
.btn-primary:disabled { background: var(--sx-line-strong); }
.btn-ghost {
  border-color: var(--sx-line-strong); border-radius: 9px;
  font-size: 13.5px; font-weight: 600; padding: 9px 16px; color: var(--sx-ink-2);
}

/* ---------- 6. 生成プレビュー（入力画面の最下部）：紺の帯をやめ、白いカードの見出しに ---------- */
/* padding:0 は styles.css の値。上の .card の余白で上書きされると見出しの帯が内側に浮く */
.summary-card { padding: 0; border: 1px solid var(--sx-line); box-shadow: 0 1px 2px rgba(16, 24, 28, .04); }
.summary-head {
  background: var(--sx-surface); color: var(--sx-ink); font-size: 16px;
  border-bottom: 1px solid var(--sx-line); padding: 14px 22px;
}
.summary-head .brand-mark { color: var(--sx-accent); font-size: 16px; }
.summary-k { font-size: 11.5px; }
.summary-v { font-size: 15px; }
.summary-chip { font-size: 12.5px; }
.count { border-color: var(--sx-line); border-radius: var(--sx-r); }
.count b { font-family: var(--sx-num); font-size: 28px; font-weight: 600; }
.count span { font-size: 11.5px; }
.summary-lead, .summary-note { font-size: 12.5px; }
.summary-cta .btn-primary { font-size: 16px; padding: 14px 22px; border-radius: 11px; }

/* ---------- 7. 生成中・レビュー（表） ---------- */
/* 生成中の箱は styles.css の縦長の余白を保つ（上の .card の余白で上書きされると窮屈な小箱になる） */
.loading-box { padding: 84px 20px; }
.loading-log { font-size: 14px; }
.legend { font-size: 12.5px; }
.check-item { font-size: 13.5px; border-radius: 0 var(--sx-r-sm) var(--sx-r-sm) 0; }
/* 表の見出しはグラデーションをやめて塗り一色に（列幅・折り返しの規則には触らない） */
table.ra th { background: var(--sx-accent-deep); }
.ra-scroll { border-color: var(--sx-line); }

/* 狭い画面：styles.css の同じ幅の分岐が文字を大きく戻さないよう、ここで揃え直す */
@media (max-width: 760px) {
  #screen-hearing .page-title { font-size: 20px; }
  .card { padding: 16px; }
  .summary-card { padding: 0; }   /* 上の .card で見出しの帯が内側に浮かないように（PC幅と同じ理由） */
  .summary-head { font-size: 15px; padding: 12px 16px; }
  .count b { font-size: 24px; }
  /* チップはスマホでは指で押すので少し大きく（styles.css と同じ意図。上の既定で小さくしたぶんを戻す） */
  .chip, .chip-add, .chip.sug { font-size: 14px; padding: 8px 14px; }
  .btn-mic { padding: 10px 18px; }
  .card.loading-box { padding: 64px 16px; }
  /* 生成プレビュー：縦並びになると、左の塊の flex-basis:240px が「高さ」として効いて大きな空白が出ていた。
     また本体と各ブロックの両方に左右の余白が付いて二重に字下げされていた */
  .summary-info { flex: none; min-width: 0; }
  .summary-block, .summary-lead, .summary-note { padding-left: 0; padding-right: 0; }
  .summary-counts { padding: 0; }
}

/* 「＋追加」は見た目はチップだが中身は文字の入力欄。タッチ端末では 16px にして押したときの拡大を防ぐ
   （上のスマホ幅の分岐より後に置く：同じ強さの指定は後ろが勝つ） */
@media (hover: none) {
  .chip-add { font-size: 16px; }
}