/* public/css/base.css
   共通スタイル。R1・B1（2026-07-18）で PoC の base.css
   （wicon-2026/pwa/src/shared/styles/base.css）を土台に全面差し替えた。
   構成＝前半：PoC 由来（そのまま）／後半：サンプル固有セクション。
   色は :root の CSS 変数に一本化する（.warning も PoC の
   --color-warning へ統一。旧 #9a6b00 → #8a5f12） */

/* ══════════════════════════════════════════════════════════
   ここから PoC 由来（そのまま） */

:root {
  color-scheme: light;
  --color-bg: #f6f7f4;
  --color-surface: #ffffff;
  --color-text: #1f2a24;
  --color-muted: #66736c;
  --color-border: #d7ddd8;
  --color-primary: #2f6f4e;
  --color-primary-dark: #24553d;
  --color-danger: #9f2d3f;
  --color-warning: #8a5f12;
  --shadow-soft: 0 1px 2px rgb(31 42 36 / 0.08);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
textarea,
select {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
}

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.site-header__inner,
.page-main {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}

.brand__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.brand__subtitle {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--color-text);
  font-size: 0.92rem;
}

.nav-list a[aria-current="page"] {
  background: #e3eee7;
  color: var(--color-primary-dark);
  font-weight: 700;
}

.page-main {
  padding: 28px 0 48px;
}

.page-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}

.page-heading h1 {
  margin: 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
  letter-spacing: 0;
  line-height: 1.25;
}

.page-heading p {
  margin: 0;
  max-width: 760px;
  color: var(--color-muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.panel,
.metric-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.panel {
  padding: 18px;
}

.panel h2,
.metric-card h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  letter-spacing: 0;
}

.metric-card {
  padding: 16px;
}

.metric-card__value {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.metric-card__note,
.placeholder-text,
.form-help {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.button:hover {
  background: var(--color-primary-dark);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.button--secondary {
  background: #ffffff;
  border-color: var(--color-border);
  color: var(--color-text);
}

.button--secondary:hover {
  background: #eef2ef;
}

.button--danger {
  background: var(--color-danger);
}

.button--danger:hover {
  background: #7d2030;
}

.status-line {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2ef;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.status-line[data-state="recording"] {
  background: #f8e5e9;
  color: var(--color-danger);
}

.status-line[data-state="recorded"],
.status-line[data-state="completed"] {
  background: #e3eee7;
  color: var(--color-primary-dark);
}

.status-line[data-state="uploading"] {
  background: #fff3d2;
  color: var(--color-warning);
}

.status-line[data-state="error"] {
  background: #f8e5e9;
  color: var(--color-danger);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 0.9rem;
  font-weight: 700;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--color-text);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.result-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfb;
}

.result-item dt {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.result-item dd {
  margin: 4px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.pre-box {
  min-height: 120px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfb;
  white-space: pre-wrap;
  word-break: break-word;
}

.stack {
  display: grid;
  gap: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .site-header__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .nav-list {
    justify-content: flex-start;
  }

  .nav-list a {
    min-height: 34px;
    padding-inline: 8px;
  }
}

/* ══════════════════════════════════════════════════════════
   ここから下はサンプル（vinealix-sample）固有のスタイル。
   色は上の変数を参照する */

label {
  display: block;
  margin-top: 1rem;
}

input,
select,
button {
  font-size: 1rem; /* 16px。これ未満だと iPhone が入力時に画面を勝手に拡大する */
  padding: 0.6rem;
}

input,
select {
  width: 100%;
  margin-top: 0.3rem;
}

button {
  margin-top: 1.2rem;
  padding: 0.6rem 2rem;
  background: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
}

/* ヘッダー内のボタン（ログアウト）は、上の素の button 装飾の
   余白・大きさを受けない（ナビ項目の高さ 36px に合わせる） */
.site-header .button {
  margin-top: 0;
  min-height: 36px;
  padding: 6px 12px;
}

/* ── メッセージ・補足文 ─────────────────────────────────── */
.error {
  color: var(--color-danger);
}

.muted {
  color: var(--color-muted);
}

/* T10・S3：打ち間違い警告。警告のみで確定は止めない（API設計 §8 末尾） */
.warning {
  color: var(--color-warning);
}

/* ── T8：QR カメラ映像（input.html） ─────────────────────── */
video {
  width: 100%;
  max-width: 480px; /* R1・B3 修正：PC で大きくなりすぎない上限（2026-07-18 Jun指摘） */
  margin-top: 1rem;
  background: #000;
  border-radius: 4px;
}

/* ── T10・T11：下書き一覧・確定値一覧のカード ──────────────
   直書きの色（#ccc）を変数に置き換え、背景に surface（白）を
   追加した。見た目の本調整は B5・B6 で行う */
#draft-list,
#measurement-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#draft-list li,
#measurement-list li {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.8rem;
  margin-top: 1rem;
  background: var(--color-surface);
}

#draft-list p,
#measurement-list p {
  margin: 0 0 0.3rem;
}

/* 一覧の行内ボタンは小さめ（画面下部の主ボタンと見た目で区別する） */
#draft-list button {
  margin-top: 0.5rem;
  margin-right: 0.6rem;
  padding: 0.4rem 1.2rem;
}

/* ── R1・B1：ログイン画面の幅 ─────────────────────────────
   ヘッダーなしの login.html 用。1120px では間延びするため、
   .page-main と重ね掛けして幅だけ狭める */
.page-main--narrow {
  width: min(420px, calc(100% - 32px));
}

/* ── R1・B2：リンクをボタンの見た目にしたときの下線打ち消し ──
   ホームの「計測をはじめる」は <a class="button">。マウスを
   乗せたとき a:hover の下線がボタンに出ないようにする */
a.button:hover {
  text-decoration: none;
}

/* ── R1・B3：計測画面のパネル化にともなう補助 ─────────────
   1) hidden 属性を display 指定より必ず優先させる。CSS の決まりでは、
      クラスの display（.button の inline-flex・.stack の grid）が
      ブラウザ標準の [hidden]（display: none）に勝ってしまい、
      隠したはずの要素が見えてしまう。それを防ぐ保険 */
[hidden] {
  display: none !important;
}

/* 2) .field・.toolbar の中では、橋渡し（素のタグ装飾）の余白を受けない */
.field label,
.field input,
.field select,
.toolbar .button {
  margin-top: 0;
}

/* 3) PoC の .field は select を想定していないため、input と同じ見た目を足す */
.field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--color-text);
}

/* ── R3：音声入力のマイクボタン（input.html・Route A/B 共通） ──
   丸い1ボタンのトグル。待機中＝緑のマイク、録音・聞き取り中＝赤の停止■。
   アイコンの入れ替えは .is-recording クラスで CSS が行う（JS はクラスを
   付け外しするだけ）。横の状態ピル（.status-line）は既存の
   [data-state] の色分けをそのまま使う */
.voice-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.button--voice {
  width: 56px;
  min-height: 56px;
  margin-top: 0; /* 素の button 装飾（橋渡し）の余白を受けない */
  padding: 0;
  border-radius: 50%;
  flex: none;
}

.button--voice .voice-icon--stop {
  display: none;
}

.button--voice.is-recording {
  background: var(--color-danger);
}

.button--voice.is-recording:hover {
  background: #7d2030;
}

.button--voice.is-recording .voice-icon--mic {
  display: none;
}

.button--voice.is-recording .voice-icon--stop {
  display: block;
}

/* ── R6：備考専用マイク（input.html） ─────────────────────
   備考の入力欄と同じ行に丸マイクを並べる（左=Route A・右=Route B。
   計測パネルの「A が上・B が下」と同じ順）。ボタン下の小さな文字
   （.note-voice-caption）が経路の見分け。状態ピルは行の下に1つ共用
   （既存の .voice-controls ＋ .status-line をそのまま使う） */
.note-voice-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.note-voice-row input {
  flex: 1;
  min-width: 0; /* flex の決まり：これが無いと長い文で行からはみ出す */
}

.note-voice-mic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
}

.note-voice-caption {
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* 備考マイクは計測パネルの 56px より一回り小さくする（2026-07-23
   Jun指摘）。44px はスマホで指でも押しやすい大きさの下限の目安 */
.note-voice-mic .button--voice {
  width: 44px;
  min-height: 44px;
}

.note-voice-mic .voice-icon {
  width: 22px;
  height: 22px;
}