:root {
  color-scheme: light;
  --bg: #f5f7f8;
  --panel: #ffffff;
  --line: #d6dde2;
  --text: #182026;
  --muted: #60717d;
  --accent: #126d8f;
  --accent-dark: #0d526c;
  /* ロゴマークの橙点。アプリアイコンの橙(#f59a1e)を白背景で使える濃さにしたもの。 */
  --brand-dot: #e8890c;
  --danger: #b33a3a;
  --warn: #8a6400;
  --ok: #237348;
  /* 段階クラス制アワード（JCC-100→200…）カードの識別色 */
  --staged: #6d4fa8;
  /* 運用画面の内容幅の上限。広いPC幅で入力欄・運用地バーが間延びしないよう
     中央寄せする基準で、2ペイン（ワッチ＋エディタ）が収まる幅。ヘッダ直下の
     バンドは背景・下枠を全幅に保ったまま、padding-inlineで中身だけこの幅へ
     揃える。 */
  --content-max: 1150px;
  /* 保留編集フォーカスモード時の内容幅（フォーム1枚ぶん） */
  --content-max-focus: 680px;
  /* ヘッダ（.topbar）の高さ。PC幅ではヘッダをstickyにするため、その下端を基準に
     位置を決めたい要素（sticky通知など）が参照する。値はCSSから決まる: 上下
     padding 10px×2 ＋ 最も高い子（ナビタブ・通信状態チップの34px）＝54px（.topbarの
     min-heightと一致）に、下枠1pxを足した実占有高。ヘッダの中身を高くしたら直す。 */
  --topbar-height: 55px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* iPhoneのノッチ/ホームバー領域を避ける（standalone表示） */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 1.15rem;
  font-weight: 650;
}

h2 {
  font-size: 0.95rem;
  font-weight: 650;
}

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

/* ---- ブランドロゴ（design/logo/README.md） ----
   マーク＝アプリアイコンのレーダーを線画にしたもの。ワードマークは通称
   「ハムナビ」の由来が字面で分かるようNaviだけアクセント色にする。
   マークの線・中心点はcurrentColorで描いてあるので、色は.brandのcolorで決まる。 */

.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  /* 長いコールサイン等でヘッダが詰まってもロゴは縮めない（潰れると別物に見える）。 */
  flex: none;
}

.brand-mark {
  width: 24px;
  height: 24px;
  display: block;
}

.brand-mark-dot {
  fill: var(--brand-dot);
}

.brand-wordmark {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.brand-wordmark-accent {
  color: var(--accent);
}

/* ログインゲート用の大きいロックアップ。h1の既定サイズを上書きする。 */
.brand-lg {
  justify-content: center;
  gap: 10px;
}

.brand-lg .brand-mark {
  width: 34px;
  height: 34px;
}

.brand-lg .brand-wordmark {
  font-size: 1.35rem;
}

/* 狭い画面は末尾のgatorを落として短縮名「HamNavi」にする。マークだけでは寂しく、
   フル名は運用コールサイン表示（.station-identity）を押しのけるため。HamNaviは
   その場の思いつきの略ではなく、manifest.webmanifestのshort_nameおよび
   apple-mobile-web-app-titleと同じ正式な短縮名——iOSホーム画面でアイコン下に出る
   文字列と一致する。読み上げも表示どおり「HamNavi」になる。
   ログインゲート（.brand-lg）は横幅に余裕があるのでフル名のまま。 */
@media (max-width: 760px) {
  .topbar .brand-wordmark {
    font-size: 0.85rem;
  }

  .topbar .brand-wordmark-tail {
    display: none;
  }
}

/* 選択中プロファイルの運用コールサインとオペレータのコールサイン。.topbarの3番目の要素
   として置くことで、justify-content:space-betweenがタイトルと通信状態
   アイコンの間の余白ちょうど中央へ自動配置する（2点間の中点になる数学的
   性質を利用。flex-grow等の追加指定は不要）。 */
.station-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}

/* [hidden]属性はクラスセレクタと同specificityのためUA既定のdisplay:noneが
   author側のdisplay:flexに負けて可視化してしまう（実機で確認した不具合）。
   明示的に上書きして必ず非表示にする。 */
.station-identity[hidden] {
  display: none;
}

.station-identity-callsign {
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 700;
}

.station-identity-operator {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 38px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 7px 12px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

button:hover {
  background: var(--accent-dark);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button.secondary {
  color: var(--accent);
  background: #fff;
}

button.danger-outline {
  color: var(--danger);
  border-color: #dca0a0;
  background: #fff;
}

input,
select,
textarea {
  width: 100%;
  /* ネイティブのtime入力などは固有幅を持ち、min-width:auto(既定)だとflex/grid内で
     縮みきれず行末で右パディングを突き抜ける(iOSの時刻欄はみ出し対策)。 */
  min-width: 0;
  min-height: 38px;
  border: 1px solid #c4cdd3;
  border-radius: 6px;
  padding: 7px 9px;
  background: #fff;
  color: var(--text);
  /* iOS WebKitは入力欄のフォントが16px未満だとフォーカス時に自動ズームし、
     blur後も戻らない。ラベルの0.84remを継承させず16px(1rem)を明示して防ぐ。 */
  font-size: 1rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* HAMLOG照会で補完された欄の目印（MVP画面と同じ視覚言語）。利用者が編集すると外れる。 */
input.hamlog-filled,
select.hamlog-filled {
  border-color: #6da8bb;
  background: #edf8fb;
}

input.hamlog-filled:focus,
select.hamlog-filled:focus {
  border-color: #247d99;
  outline-color: color-mix(in srgb, #247d99 28%, transparent);
}

/* 交信履歴（自ログ最終交信）で補完された欄の目印（緑系）。編集すると外れる。 */
input.logbook-filled,
select.logbook-filled {
  border-color: #82ab6f;
  background: #f0f8ec;
}

input.logbook-filled:focus,
select.logbook-filled:focus {
  border-color: #4f8236;
  outline-color: color-mix(in srgb, #4f8236 28%, transparent);
}

/* QRZ.com照会で補完された欄の目印（HAMLOGの青と対になる暖色）。編集すると外れる。 */
input.qrz-filled,
select.qrz-filled {
  border-color: #c2a55a;
  background: #fbf6e7;
}

input.qrz-filled:focus,
select.qrz-filled:focus {
  border-color: #a3822f;
  outline-color: color-mix(in srgb, #a3822f 28%, transparent);
}

/* 相手局QTHの部分一致候補選択で補完された欄の目印（紫系）。編集すると外れる。 */
input.geo-filled,
select.geo-filled {
  border-color: #8570b3;
  background: #f2eef9;
}

input.geo-filled:focus,
select.geo-filled:focus {
  border-color: #614a94;
  outline-color: color-mix(in srgb, #614a94 28%, transparent);
}

/* 総務省Web-API（常置場所）で補完された欄の目印（青緑系）。編集すると外れる。 */
input.soumu-filled,
select.soumu-filled {
  border-color: #4a9d8e;
  background: #e9f6f3;
}

input.soumu-filled:focus,
select.soumu-filled:focus {
  border-color: #2f7d6f;
  outline-color: color-mix(in srgb, #2f7d6f 28%, transparent);
}

input:disabled,
select:disabled {
  background: #eef1f3;
  color: var(--muted);
}

/* ---- ログインゲート ---- */

.login-gate {
  align-items: center;
  background: #f8fafc;
  display: flex;
  inset: 0;
  justify-content: center;
  min-height: 100vh;
  position: fixed;
}

.login-gate[hidden] {
  display: none;
}

.login-gate-card {
  background: #fff;
  border: 0.5px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgb(15 23 42 / 15%);
  max-width: 360px;
  padding: 32px;
  text-align: center;
  display: grid;
  gap: 10px;
}

.login-button {
  background: #1d4ed8;
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  font-weight: 500;
  margin: 8px 0;
  padding: 10px 20px;
  text-decoration: none;
}

/* ログイン失敗の理由。既定は.mutedの淡色なので、理由が入ったときだけ警告色にする。 */
.login-gate-error {
  color: var(--danger);
  font-weight: 500;
}

/* ---- ヘッダー ---- */

/* ロゴと「実験用」チップを横一列に置く。従来はp(ブロック)＋span(インライン)で
   チップがロゴの下へ回り込み、ヘッダが2行ぶんに伸びていた。 */
.topbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.topbar {
  min-height: 54px;
  padding: 10px 16px;
  /* バンド（背景・下枠）は全幅のまま、中身だけ運用画面と同じ内容幅へ収める
     （.station-barと同じ手）。広いPC幅で上限が無いと、ナビが画面右端まで
     離れて本文（--content-max）から遠くなり、狙うのに大きく視線と手が動く。 */
  padding-inline: max(16px, calc((100% - var(--content-max)) / 2 + 16px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

/* PC幅ではスクロールしてもヘッダを残し、グローバルナビへいつでも届くようにする。
   モバイル（760px以下）はナビが下部固定タブバーで既に常時見えているため付けない
   ——狭い画面の縦をヘッダ55pxぶん常に食うほうが損になる。 */
@media (min-width: 761px) {
  .topbar {
    position: sticky;
    top: 0;
    /* シート（50）・QTH候補（40）・キーボード（35）より下、下部タブバーや
       選択バー（30）と同格の常設クローム層。 */
    z-index: 30;
  }
}

/* ---- グローバルナビ（PWA_IA_REDESIGN.md 1.1） ----
   同一DOMをCSSで再配置する: PC幅はヘッダ行内の水平ナビ（既定）、モバイル
   （760px以下）は下部固定タブバー。別画面・別DOMは作らない。 */
.global-nav {
  display: flex;
  gap: 4px;
}

.global-nav-tab {
  min-height: 34px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.global-nav-tab:hover {
  background: #eef3f5;
}

.global-nav-tab.active {
  color: var(--accent);
  background: #e3eef3;
}

/* タブバッジ（継続状態の件数表示。PWA_IA_REDESIGN.md 3.2） */
.global-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  vertical-align: 1px;
}

.global-nav-badge[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .global-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* シート（z-index:50）・QTH候補（40）より下、通知sticky（30）と同格。
       ナビは常設クロームなのでシートに覆われるのが正しい。 */
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--line);
  }

  .global-nav-tab {
    border-radius: 8px;
    text-align: center;
  }

  /* 下部タブバーの高さぶんコンテンツ下端を空ける（bodyのsafe-area paddingを
     タブバー込みの値で上書きする）。 */
  body {
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
  }
}

/* 通信状態と「N局入力中」の並び。既定（PC幅）は横並びにする——通信状態を展開すると
   縦積みではヘッダが83pxまで伸びるため（実測）。760px以下は従来どおり縦積みのまま
   （点は小さく高さを食わない）。 */
.topbar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  /* flexアイテムの既定min-width:autoでは中身より縮まない。展開したチップを
     狭いPC幅で省略記号へ落とすために0を明示する。 */
  min-width: 0;
}

@media (max-width: 760px) {
  .topbar-status {
    display: block;
  }
}

.draft-count {
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
}

/* サーバー/エージェント通信状態（issue #3、MVPダッシュボードから移植）。
   同一DOMをCSSで出し分ける（PWA_IA_REDESIGN.md 1.1のレスポンシブ方針）: 既定＝PC幅は
   見出しと詳細まで出し、760px以下では点へ畳む。どちらもタップ/クリックで
   #connectionDetail に全文を開ける（畳んだ状態では唯一の読み口になる）。 */
.connection-statuses {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.connection-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  /* ヘッダにはナビ・自局コールも並ぶ。2枚で横幅を食い潰さないよう上限を置き、
     狭いPC幅では縮んで省略記号にする（全文はクリックで開く詳細にある）。 */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 200px;
  min-height: 34px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: left;
}

.connection-dot-mark {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 999px;
  background: var(--muted);
  flex-shrink: 0;
}

.connection-dot-text {
  display: grid;
  min-width: 0;
}

.connection-dot-title,
.connection-dot-message {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-dot-title {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text);
}

.connection-dot.ok {
  border-color: #a7d2bb;
  background: #eef8f2;
  color: var(--ok);
}

.connection-dot.ok .connection-dot-mark {
  background: var(--ok);
}

.connection-dot.warning,
.connection-dot.checking {
  border-color: #dfcb88;
  background: #fff8df;
  color: var(--warn);
}

.connection-dot.warning .connection-dot-mark,
.connection-dot.checking .connection-dot-mark {
  background: var(--warn);
}

.connection-dot.error {
  border-color: #dda9a9;
  background: #fdeeee;
  color: var(--danger);
}

.connection-dot.error .connection-dot-mark {
  background: var(--danger);
}

.connection-dot.checking .connection-dot-mark {
  animation: status-pulse 1.4s ease-in-out infinite;
}

/* hoverの淡色は展開したチップのためのもの。適用条件を2つに絞る。
   (1)ポインタのある環境だけ: タッチ端末では:hoverがタップ後も残るため（iOSの
      sticky hover）、指を離しても色が固定される。点は背景色そのものが状態を表す
      ので、淡色が居座ると「タップ後に色が薄いまま戻らない」になる
      （2026-07-21にiPhone実機で発生。v114で作り込んだ回帰）。
   (2)展開する幅だけ: 760px以下は点なので、淡色を当てると状態色が消える
      （デスクトップでウィンドウを狭めた場合に相当）。
   なお個々のルールは`.connection-dot.ok`(0,2,0)等に勝つ必要があるため要素セレクタ
   を併記する（PWA_IA_REDESIGN.md 7.2）。 */
@media (hover: hover) and (min-width: 761px) {
  button.connection-dot:hover {
    background: #eef3f5;
  }

  button.connection-dot.ok:hover {
    background: #e3f2ea;
  }

  button.connection-dot.warning:hover,
  button.connection-dot.checking:hover {
    background: #fdf2cd;
  }

  button.connection-dot.error:hover {
    background: #fbe3e3;
  }
}

/* 760px以下は点へ畳む（ヘッダに文字を並べる幅が無い）。ボタン自体が点になり、
   中身は見せない。ナビの下部タブ化と同じブレークポイント。 */
@media (max-width: 760px) {
  .connection-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    max-width: none;
    gap: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--muted);
    flex-shrink: 0;
  }

  .connection-dot-mark,
  .connection-dot-text {
    display: none;
  }

  .connection-dot.ok {
    background: var(--ok);
  }

  .connection-dot.warning,
  .connection-dot.checking {
    background: var(--warn);
  }

  .connection-dot.error {
    background: var(--danger);
  }

  .connection-dot.checking {
    animation: status-pulse 1.4s ease-in-out infinite;
  }
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.connection-detail {
  margin: 8px 16px 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: pre-line;
}

/* ---- トースト通知（PWA_IA_REDESIGN.md 3.1） ----
   画面上端のオーバーレイ。インフローのバナーと違いレイアウトを押し下げない。
   エディタのCall欄を覆い続けないよう高さは内容ぶんだけ、同時表示は常に1件。 */
.toast-lane {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  /* シート（50）より上: 保存失敗等はシート操作中でも見える必要がある。 */
  z-index: 60;
  /* 複数通知は縦に積む（最大3件。app.jsのTOAST_MAX_VISIBLE）。新しいものが下に
     足されるので、読んでいる最中に既存の行が動かない。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-height: 0;
  max-width: 640px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 14px rgb(15 23 42 / 18%);
}

.toast:hover {
  background: #eef3f5;
}

.toast.success {
  color: var(--ok);
  border-color: #a7d2bb;
  background: #eef8f2;
}

.toast.warning {
  color: var(--warn);
  border-color: #dfcb88;
  background: #fff8df;
}

.toast.error {
  color: var(--danger);
  border-color: #e1adad;
  background: #fff0f0;
}

/* ---- レイアウト（PC: 2ペイン＋本日一覧 / iPhone: 縦積み） ---- */

.entry-layout {
  display: grid;
  /* 左列（ワッチ・本日）は一覧なので行内の情報量が幅に比例して増える。
     エディタは入力欄の必要幅が決まっており、広げても間延びするだけなので
     左列へ多めに配る（2026-07-21、0.55fr:1.45frから変更）。 */
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  /* 2行目に余り高さを全部渡す。既定(auto auto)だと、右列のエディタが左列の
     合計より高いぶんの余白が2つの行へ均等配分され、QSO一覧の行数が変わるたび
     1行目まで伸縮してタブが上下に動いた（8件⇔0件で140px）。 */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "heard editor"
    "today editor";
  align-items: start;
  gap: 12px;
  padding: 12px 16px 24px;
  /* 他画面(.log-view)は780pxで中央寄せしている。ここだけ上限が無いと広い
     PC幅で入力欄が間延びするため、2ペイン分の上限を置いて揃える。 */
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.heard-panel {
  grid-area: heard;
}

.editor-panel {
  grid-area: editor;
}

.today-panel {
  grid-area: today;
}

.heard-panel,
.editor-panel,
.today-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

/* 編集フォーカスモード（PWA_DESIGN.md 3.3）。保留編集中は入力画面から
   編集に関係ないワッチリスト・QSO一覧を引き算し、読み取り専用バー＋編集
   フォームだけの「全画面編集」にする。スマホでは全画面モーダル相当、PCでは
   フォームを中央寄せしてダイアログ風になる。枠は保留編集バーと同じ
   アクセント色の点線で、ひと続きの編集モードとして見せる。 */
body.held-edit-active .heard-panel,
body.held-edit-active .today-panel {
  display: none;
}

body.held-edit-active .entry-layout {
  display: block;
  max-width: var(--content-max-focus);
  margin: 0 auto;
  width: 100%;
}

body.held-edit-active .editor-panel {
  border: 2px dashed var(--accent);
  background: #f6fafc;
}

.panel-head {
  min-height: 48px;
  padding: 10px 12px;
  display: flex;
  /* 幅が足りないときは操作群ごと次行へ落とす。見出しはCJKの既定改行で
     「ワッチリ/スト」と語中折れするため折り返させない（下のh2）。 */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2 {
  white-space: nowrap;
}

/* ---- 聞こえている局（ドラフト一覧） ---- */

/* CALL入力＋入力ボタン＋追加ボタン。ヘッダ行(.panel-head)と同じ行に収め、
   CALL欄はパネル全幅ではなく必要な幅（最長10文字程度）だけ取る。 */
.heard-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* 余り幅を取り込み、中身は右へ寄せる（space-betweenの右側席のまま）。
     基底は0: autoだと基底＝中身の実寸になり、flex-wrapは「縮める前に折り返す」
     ため、CALL欄が縮めば1行に収まるiPhone幅でもヘッダが2行になる。 */
  flex: 1 1 0;
  justify-content: flex-end;
}

.heard-actions input {
  /* 基底は最小幅で申告し、行に収まったあとgrowで7emまで戻す。基底7emだと
     flex-wrap環境では縮む前に行ごと折り返してしまい、iPhone幅でヘッダが
     2行になる（縦の圧迫を減らす設計意図に反する）。 */
  flex: 1 1 4.5em;
  min-width: 4.5em;
  max-width: 7em;
  text-transform: uppercase;
}

.heard-actions button {
  flex-shrink: 0;
}

.heard-list {
  display: flex;
  flex-direction: column;
  max-height: 44vh;
  overflow: auto;
}

.heard-empty {
  padding: 12px;
}

.heard-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "call pill"
    "detail pill";
  align-items: center;
  gap: 1px 8px;
  padding: 9px 12px;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid #edf1f3;
  border-radius: 0;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.heard-item:hover {
  background: #f9fbfc;
}

.heard-item.active {
  background: #eaf3f7;
  box-shadow: inset 3px 0 0 var(--accent);
}

.heard-call {
  grid-area: call;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.heard-detail {
  grid-area: detail;
  color: var(--muted);
  font-size: 0.78rem;
}

.heard-item .draft-pill {
  grid-area: pill;
}

.draft-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f6f8f9;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

/* ---- 入力フォーム ---- */

.editor-head {
  min-height: 48px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  /* ヘルプポップアップ(.help-popup)の位置基準。ヘッダー幅いっぱいに広げる */
  position: relative;
}

.editor-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* タイトル(状態ピル＋コールサイン)は行を占め、操作ボタンが多い状態でも
     潰されない。狭いときはボタンが次行へ折り返す。 */
  flex: 1 1 auto;
}

.editor-head-title h2 {
  font-size: 1.05rem;
  min-width: 0;
  /* コールサインは空白が無く、overflow-wrap:anywhereだと1文字ずつ縦折れする。
     折り返さず、入りきらなければ省略表示にする（保存待ちの3ボタン時の崩れ対策）。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* 交換バー（PWA_EXCHANGE_BAR.md 3節）。編集ヘッダとフォームの間の固定位置に置く。
   全要件が充足したら丸ごと消す——常時何かが出ていると視覚的な地になり、本当に
   足りないときに効かなくなるため。 */
.exchange-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #fffaf0;
  font-size: 0.78rem;
}

.exchange-bar[hidden] {
  display: none;
}

/* 要件が揃った後も席は保つ（畳むとフォームが跳ね、RSTを入れ終えてName/QTHへ
   指を伸ばす瞬間に標的が動く）。地を引いて静かな充足表示にする。 */
.exchange-bar.settled {
  background: #f6f8f9;
}

.exchange-bar .exchange-label {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--warn);
  white-space: nowrap;
}

.exchange-bar.settled .exchange-label,
.exchange-bar .exchange-label.muted {
  color: var(--muted);
}

/* チップと同じ高さの箱にする。揃った瞬間に行の高さが変わると、その差だけ
   フォームが動いてしまう（席を保つ意味が薄れる）。 */
.exchange-bar .exchange-settled {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 0;
  border: 1px solid transparent;
  color: var(--ok);
  font-size: 0.74rem;
  font-weight: 600;
}

/* チップはボタン。タップで該当欄のピッカーを開く。button既定（塗り+白文字）を
   打ち消すため要素セレクタを併記する（PWA_IA_REDESIGN.md 7.2）。 */
button.exchange-chip {
  min-height: 26px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--warn);
  background: #fff;
  color: var(--warn);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

/* 伝達済み（消し込み）。タップで戻せるのでカーソルはpointerのまま。 */
button.exchange-chip.met {
  border-color: transparent;
  background: #e6f2ec;
  color: var(--ok);
}

/* 値が未定の伝えるチップ（「レポート --」等）。太枠で入力の起点であることを示す。 */
button.exchange-chip.undecided {
  border-width: 2px;
  background: #fffaef;
  font-weight: 700;
}

button.exchange-chip.more {
  border-color: #ccd5da;
  color: var(--muted);
  font-weight: 500;
}

/* 成立・保存を押したのに必須の欄が未記録のとき、足りない欄そのものを明滅させる
   （バーに不足は出さない。PWA_EXCHANGE_BAR.md 4節）。input・select・RSTボタン・
   freqComposeのいずれにも使う。 */
.field-attention {
  animation: field-attention 0.9s ease-in-out 2;
}

@keyframes field-attention {
  0%, 100% { background: #fff; }
  50% { background: #fdecc8; border-color: var(--warn); }
}

@media (prefers-reduced-motion: reduce) {
  .field-attention {
    animation: none;
    background: #fdecc8;
    border-color: var(--warn);
  }
}

/* 保存に要るのにまだ埋まっていない欄の琥珀サイン（PWA_EXCHANGE_BAR.md 2.1。
   RST欄と同じ見た目をMode・時刻にも使う）。枠を2pxへ太らせると欄の自然高さが
   +2pxになり行ごとフォームが動く（実測）ため、枠は1pxのままinset影で2px相当の
   太さに見せる（幾何が変わらない）。入力共通スタイル(0,0,1)より詳細度を上げる
   ためセレクタを併記する。 */
.qso-form select.awaiting,
.qso-form input.awaiting {
  border-color: var(--warn);
  box-shadow: inset 0 0 0 1px var(--warn);
  background: #fffaef;
}

.qso-form {
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  /* 欄（label）はラベル行＋入力の縦積み。ラベル行の高さは欄ごとに違う
     （時刻はJST/UTCピル、Callは参考情報チップを抱える）ため、上揃えだと
     **入力欄そのものが横一列に並ばない**（2026-08-21にiPhone実機で指摘。
     チップが出ると段差がさらに開く）。行の意味は「入力が並ぶ列」なので
     下端で揃え、ラベル側の高さの違いを上へ逃がす。 */
  align-items: flex-end;
}

.qso-form label {
  display: grid;
  gap: 4px;
  color: #374b57;
  font-size: 0.84rem;
  /* 各項目はflexアイテム。min-width:0でflex-basisまで縮められるようにし、
     ネイティブ時刻コントロールの固有幅で右へはみ出すのを防ぐ。 */
  min-width: 0;
}

.call-label-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

/* Call欄直上のソース別照会チップ（HAMLOG・交信履歴・QRZ.com）。継続状態をチップへ
   畳む方針（PWA_IA_REDESIGN.md 3.2）に沿い、出す情報が無いときは席そのものを消す。 */
.callsign-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 4px;
  min-width: 0;
}

/* 未入力・照会前は子要素が無い。空のままだとmarginだけが残って欄が下へずれるため、
   席ごと消す（[hidden]と違い:emptyはauthorのdisplay指定に負けない）。 */
.callsign-source-chips:empty {
  display: none;
}

.callsign-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  min-height: 19px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f6f8f9;
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
  /* タップで該当カードへ飛ぶ。ボタンだがフォーム内なのでtype=buttonを明示する。 */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.callsign-source-chip .callsign-source-chip-label {
  opacity: 0.75;
}

.callsign-source-chip.ok {
  color: var(--ok);
  border-color: #a7d2bb;
  background: #eef8f2;
}

.callsign-source-chip.warn {
  color: var(--warn);
  border-color: #dfcb88;
  background: #fff8df;
}

.callsign-source-chip.danger {
  color: var(--danger);
  border-color: #e1adad;
  background: #fff0f0;
}

/* Call欄だけが行の余白を全部吸うと、スマホ幅で「Callが広すぎ・時刻が狭すぎ」に
   なる（実測: 402px幅でCall 279px / 時刻 64px）。伸びしろは時刻欄と分け合い、
   上限も置く（10文字のコールサインに280pxは要らない。PC幅の間延びも防ぐ）。 */
.f-call {
  flex: 1 1 170px;
  max-width: 240px;
  min-width: 0;
}

.f-call input {
  text-transform: uppercase;
}

/* ---- コールサイン用ソフトキーボード（PWA_CALLSIGN_KEYBOARD.md） ---- */

/* Call欄とワッチ追加欄は等幅＋slashed zeroで O と 0 を字形で区別する（設計2.1節）。
   キーボードの有無に関係なく有効な改善なので、専用キーボードが出ないPC幅でも効く。 */
.f-call input,
#quickCall {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-feature-settings: "zero" 1;
  letter-spacing: 0.04em;
}

/* 日本語を入力する可能性のないコールサイン欄では、フォーカス時にIMEを無効にする。
   `ime-mode`はCSS UI Level 3で廃止された非標準プロパティで、効くのはFirefox（Windows）
   だけ。Chromium・SafariにはページからIMEを制御する手段が無く、未知プロパティとして
   無視される。その環境向けの本命はcallsign_ime.jsのIME合成ガード（PWA_DESIGN.md 3.1）。 */
.f-call input,
#quickCall,
#clublogCallsign,
#sfStationCallsign,
#sfOperatorCallsign,
#logbookCallsign {
  ime-mode: disabled;
}

/* maxlength超過の打鍵を拒否したときの短い揺れ（設計3.2節）。 */
.callsign-keyboard-reject {
  animation: callsign-keyboard-shake 180ms linear;
}

@keyframes callsign-keyboard-shake {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .callsign-keyboard-reject {
    animation: none;
  }
}

/* ラベル行の「⌨」トグル（専用⇄内蔵）。粗いポインタの端末でだけJSがhiddenを外す。
   ラベル行はbaseline揃えなので、ボタンの枠が行を押し広げないよう小さく保つ。 */
.callsign-keyboard-toggle {
  margin-left: auto;
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.2;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.callsign-keyboard-toggle[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.callsign-keyboard-toggle[hidden] {
  display: none;
}

/* キーボード本体（設計2.2節）。下部固定。グローバルナビ（30）の上、QTH候補（40）・
   シート（50）の下。タッチ操作専用なのでダブルタップ拡大・選択・長押しメニューを切る。 */
.callsign-keyboard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.callsign-keyboard[hidden] {
  display: none;
}

.callsign-keyboard-rows {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: 6px;
}

/* 1段＝半単位20列。各キーの列幅（span）はJSがデータから与える（文字2・⌫6・操作段3/5/12）。 */
.callsign-keyboard-row {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 6px;
}

.ckb-key {
  height: 44px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fb;
  color: var(--text);
  font: 600 1.2rem/1 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-feature-settings: "zero" 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 押下表示は:activeに頼らない（pointerdownをpreventDefaultするとSafariで付かないことがある）。 */
.ckb-key.pressed {
  background: #cfe0ea;
}

.ckb-key.digit {
  background: #eef3f7;
}

.ckb-key.slash {
  background: #e3f0f7;
  border-color: #b9d4e3;
  color: var(--accent);
}

.ckb-key.backspace {
  font-size: 1.1rem;
}

.ckb-key.action {
  font: 600 0.95rem/1 "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.ckb-key.commit {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ckb-key.commit.pressed {
  background: var(--accent-dark);
}

/* 表示中はキーボードの高さぶんbodyの下端を空ける（下部ナビのpadding-bottom上書きと
   同じ方式）。--ckb-heightはJSが実測で入れる。 */
body.callsign-keyboard-open {
  padding-bottom: calc(var(--ckb-height, 257px) + env(safe-area-inset-bottom) + 12px);
}

.f-time {
  /* iOSのネイティブtime入力はUA最小幅を持ち、固定列幅(110px)+min-width:0でも
     縮まず列を右へ突き抜ける。基準幅はコントロールの実寸(basis:auto)のままにし、
     縮小も禁止(shrink:0)して、欄が自分のborder-box内に収まる保証を維持する。
     その上で行の余白はCall欄と分け合って伸ばす（伸びる方向にはUA最小幅の問題が
     出ない）。上限はHH:MMに対して間延びしない程度に留める。 */
  flex: 1 0 auto;
  max-width: 120px;
}

/* 日付欄は保留編集のときだけ現れる（PWA_IA_REDESIGN.md 5.3）。ネイティブdate入力も
   time入力と同じくUA固有幅を持つため、列を固定せず実寸に合わせる。
   [hidden]はauthorのdisplay系指定に負けるので明示的に打ち消す（PWA CSSの既知の罠）。 */
.f-date {
  flex: 0 0 auto;
}

.f-date input {
  width: auto;
}

/* 日付欄（記録の訂正のときだけ）と交信メモ欄（QSO詳細の編集モードでは既存のメモ
   セクションが担うので出さない）は [hidden] で消す。`.qso-form label`の display:grid
   に負けないよう同じ詳細度で打ち消す。 */
.qso-form label.f-date[hidden],
.qso-form label.f-memo[hidden] {
  display: none;
}

/* 欄(label)は縮まない前提(shrink:0)なので、入力は欄いっぱいに広げてよい。
   width:autoのままだとgridのstretch解釈をUAに委ねることになり、伸ばした欄の中で
   コントロールだけ実寸のまま残る余地がある。 */
.f-time input {
  width: 100%;
}

/* 時刻ラベルと表示基準ピルの行。ラベル文字とピルをベースラインで揃える。 */
.time-label-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* 表示基準（JST/UTC）の切り替えピル。既定のJSTは目立たせず、UTCのときだけ
   アクセント色で塗って「いま既定ではない基準で見ている」ことを常に示す
   （時刻の読み違えは他のどの欄の誤りよりも後から気づきにくい）。 */
.tz-pill {
  padding: 1px 7px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.tz-pill.utc {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* 未確定の時刻はライブ表示（app.jsが現在時刻を流し続ける）。デジタル時計と同じく
   コロンだけを点滅させ、「まだ動いている＝確定していない」ことを示す。成立すると
   .clock-liveが外れて点滅は止まり、静止した編集可能な値になる。
   **UA擬似要素（::-webkit-datetime-edit-text）は使わない**——iOS Safariが解釈せず
   実機で点滅しなかった（2026-08-21にユーザー報告）。代わりにライブ中はネイティブ欄を
   visibility:hiddenで隠し（レイアウト箱は残すので欄幅は変わらない）、同じ寸法の
   自前の文字面（.clock-face）を重ねてコロンだけを点滅させる。 */
.f-time {
  position: relative;
}

.f-time input.clock-live {
  visibility: hidden;
}

/* ネイティブ入力と同じ箱（min-height・border・radius・padding・font-size）を再現し、
   disabled時の地色・文字色に合わせる。位置はラベル列の最下段＝入力欄の位置。 */
.clock-face {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid #c4cdd3;
  border-radius: 6px;
  padding: 7px 9px;
  background: #eef1f3;
  color: var(--muted);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.clock-face[hidden] {
  display: none;
}

.clock-face.blink-off .clock-face-colon {
  opacity: 0;
}

/* 動きを減らす設定の利用者には点滅させない（時計の進行だけで足りる）。 */
@media (prefers-reduced-motion: reduce) {
  .clock-face.blink-off .clock-face-colon {
    opacity: 1;
  }
}

.f-band {
  /* 「135kHz(2200m)」のような最長ラベルが切れない幅 */
  flex: 0 1 138px;
}

.f-freq {
  flex: 0 1 150px;
}

/* バンド先選択の周波数入力。固定部（span）＋可変部（input）を1つの入力欄に見せる。
   固定部はspanなので上書きできない（PWA_DESIGN.md 3.1）。 */
.freq-compose {
  display: flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid #c4cdd3;
  border-radius: 6px;
  background: #fff;
  padding: 0 9px;
}

.freq-compose:focus-within {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.freq-prefix {
  color: var(--text);
  font-size: 1rem;
  white-space: nowrap;
  user-select: none;
}

.freq-compose input {
  border: none;
  outline: none;
  min-height: 0;
  padding: 7px 0;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
}

.freq-compose input:focus {
  outline: none;
}

.freq-compose.disabled {
  background: #f1f4f6;
  color: var(--muted);
}

.freq-compose.disabled .freq-prefix {
  color: var(--muted);
}

/* 未入力の琥珀サイン（保存必須の周波数を欄自体で示す。不足バーには出さない。
   PWA_EXCHANGE_BAR.md 2.1）。RST欄のawaitingと見た目を揃える。枠2px化は欄の
   自然高さを+1px変えるため、枠1px＋inset影で太さを出す（幾何不変）。 */
.freq-compose.awaiting {
  border-color: var(--warn);
  box-shadow: inset 0 0 0 1px var(--warn);
  background: #fffaef;
}

/* バンド外周波数のフェールセーフ表示（保存もブロックされる）。空欄琥珀より優先。 */
.freq-compose.out-of-band {
  border-color: var(--danger);
  background: #fff0f0;
}

.freq-warn {
  color: var(--danger);
  font-size: 0.72rem;
  font-weight: 400;
}

/* プロファイル編集フォームのエリアサフィックス整合警告（PWA_DESIGN.md 3.7）。
   慣習の検証なので保存はブロックしない目安表示。危険色でなく注意色。 */
.sf-field-warn {
  color: var(--warn);
  font-size: 0.72rem;
  font-weight: 400;
}

/* HAMLOG欄長超過の入力警告（保存はブロックしない・目安表示）。 */
input.over-limit {
  border-color: #e1adad;
  background: #fff0f0;
}

.byte-over {
  display: block;
  margin-top: 2px;
  color: var(--danger);
  font-size: 0.72rem;
  font-weight: 400;
}

/* display:block が hidden 属性（UA既定の display:none）を上書きしてしまうため、
   hidden 時は明示的に消す（これが無いとドラフト切替後も前の警告が残る）。 */
.byte-over[hidden] {
  display: none;
}

.f-mode {
  flex: 0 1 90px;
}

.f-rst {
  flex: 0 0 auto;
}

/* His/Myのレポート対。1組の交換なのでフォームの折り返しで泣き別れさせない
   （flexの行分割は要素の間でしか起きないため、束ねて1アイテムにする）。 */
.f-rst-pair {
  display: flex;
  gap: 10px 12px; /* .qso-formのgapと同じ値（束ねる前と見た目を変えない） */
  flex: 0 0 auto;
}

/* RSTの単一フィールド（時刻欄と同じ操作感）。タップでピッカーが開く。
   未入力は"--"を薄字表示し、成立にはピッカーでの入力が必須。 */
.rst-field {
  min-width: 62px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #c4cdd3;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}

.rst-field.empty {
  color: var(--muted);
}

.rst-field:disabled {
  background: #f1f4f6;
  color: var(--muted);
  cursor: default;
}

/* 交換バーが未交換として挙げている欄は、欄自体も強調する（PWA_EXCHANGE_BAR.md 3.2）。
   バーを見ていなくても気づけるように、足りないものと直すべき場所を同時に示す。
   .rst-field.empty(0,2,0)に勝つよう要素セレクタを併記する（同 PWA_IA_REDESIGN.md 7.2）。 */
button.rst-field.awaiting {
  border: 2px solid var(--warn);
  background: #fffaef;
  color: var(--warn);
  font-weight: 700;
}

button.rst-field.awaiting:disabled {
  border-color: #d8c9a4;
  background: #f6f2e9;
}

/* RSTピッカー（桁カラム選択のモーダル） */
.rst-picker {
  position: fixed;
  inset: 0;
  background: rgba(24, 32, 38, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.rst-picker[hidden] {
  display: none;
}

.rst-picker-sheet {
  background: var(--panel);
  border-radius: 12px 12px 0 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  width: min(360px, 100%);
}

/* PC幅ではシートを画面中央に置く（2026-08-27に利用者から指摘）。下端固定は
   親指の届く範囲が正義のスマートフォンでは最適だが、大きな窓では視線とポインタの
   移動距離がそのままコストになり、シート内のヘルプも画面外へはみ出しやすい。
   ブレークポイントはRSTピッカーのanchored（下の@media）と同じ761pxを使い回す
   （増やさない。[[web-ui-responsive-policy]]）。anchoredなシートはposition:absolute
   でflex配置から外れるため、この指定の影響を受けない。 */
@media (min-width: 761px) {
  .rst-picker {
    align-items: center;
  }

  /* 角丸は全周に。下端シート用のsafe-area分の余白も要らなくなる。
     **max-height/overflowはここで足さない**——中身の長いシートは個別に
     `max-height: 85vh; overflow-y: auto`を持っており（中央配置でも上下に
     余白が残る）、持たないシートは内容が短い。共通側で足すと、横スクロール
     容器を全シートに生む（tests/test_pwa_layout_invariants.pyが検知する）。 */
  .rst-picker .rst-picker-sheet {
    border-radius: 12px;
    padding-bottom: 14px;
  }
}

.rst-picker-title {
  font-weight: 600;
  margin-bottom: 10px;
}

.rst-picker-columns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}

/* 桁の列は「5段」を基準にした縦流しグリッド。R（1〜5）は1列に収まり、S・T（1〜9）は
   5段を超えた分が右の列へ流れて「左列9〜5・右列4〜1」の2列になる。以前は縦1列＋
   max-height 240pxだったためS/Tの9項目（392px）がスクロールになり、下の方の値を
   選ぶのに一手間かかっていた（2026-08-22にiPhone実機で指摘）。項目を縮めて収める案は
   1項目約23pxとタップ目標として小さすぎるので採らない。列の横幅はapp.jsが
   小列の数（R=1・S/T=2）をflex-growへ入れて配分する。 */
.rst-picker-digit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 0; /* app.jsが小列の数（R=1・S/T=2）でflex-growを上書きする */
}

/* 桁の細いヘッダ（R 了解度／S 信号強度／T 音調）。S/Tが2小列に割れても、箱の幅いっぱいの
   ヘッダが「ここまでが1つの桁」を示す（2026-08-22、実機で「横に並ぶと一見で分かりにくい」
   と指摘）。選択肢の40pxより十分細く、下罫線で列に接する。 */
.rst-picker-col-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}

.rst-picker-col-head b {
  color: var(--text);
  font-size: 0.9rem;
}

.rst-picker-col {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, minmax(40px, auto));
  gap: 4px;
}

.rst-picker-opt {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.rst-picker-opt.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.rst-picker-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* PC幅ではRSTピッカーを押したボタンの近くへ出す（マウス移動距離の短縮）。
   画面下端の固定シートは親指の届く範囲が正義のスマートフォンでは最適だが、
   ポインタ操作では入力欄からシートまで往復する距離がそのままコストになる。
   位置はapp.jsがボタンの矩形から計算してtop/leftへ入れる。`anchored`クラスは
   `#rstPicker`にだけ付き、同じ`.rst-picker`基盤を使う他のシート（QRZ設定・
   運用地プロファイル等）は入力欄と1対1で結び付かないため下端のままにする。

   @mediaで包むのは、開いたまま窓を狭められたときの保険でもある。position:static
   に戻ればインラインのtop/leftは無視され、スマートフォン向けの下端シートへ
   自動的に戻る。 */
@media (min-width: 761px) {
  .rst-picker.anchored {
    /* 近接ポップオーバーなので暗幕は薄く。背後の入力欄が見えている方が、
       どの欄を編集中か分かる。 */
    background: rgba(24, 32, 38, 0.18);
  }

  .rst-picker.anchored .rst-picker-sheet {
    position: absolute;
    width: min(320px, calc(100vw - 16px));
    /* 窓が極端に低いときでも決定/キャンセルへ手が届くようにしておく
       （下端シートと違い、はみ出した分を画面外へ逃がせないため）。 */
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(24, 32, 38, 0.28);
  }
}

.f-qsl {
  flex: 0 1 110px;
}

.f-code {
  flex: 0 1 90px;
}

.f-grid {
  flex: 0 1 100px;
}

.f-half {
  flex: 1 1 45%;
  min-width: 150px;
}

/* 相手局QTHの部分一致候補（PWA_DESIGN.md 3.6）。入力欄の直下に重ねて出す。 */
.qth-field {
  position: relative;
}

.qth-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 2px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  max-height: 220px;
  overflow-y: auto;
}

.qth-suggestions button {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}

.qth-suggestions button:hover,
.qth-suggestions button:focus {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}

/* 交信メモは行全幅の複数行入力。HAMLOGのRemarks（短文入力）と視覚的に区別する。 */
.f-memo {
  flex: 1 1 100%;
}

.f-memo textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  /* textareaはUA既定のフォントを持つので親から引き継ぐ。ただし`font: inherit`の
     ショートハンドで一括継承すると、冒頭の共通ルール（input, select, textarea の
     font-size: 1rem）まで打ち消して`.qso-form label`の0.84rem＝13.4pxになる。
     iOS WebKitは16px未満の入力欄でフォーカス時に自動ズームし、blurしても戻らない
     （拡大したまま横スクロールが残る）。familyだけ継ぎ、sizeは16pxを明示する。 */
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.field-note {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
}

/* ---- コールサイン参考情報（ソース別カード。qso-entryモックのreference-card踏襲） ---- */

.callsign-info {
  margin: 0 12px 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.callsign-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.callsign-info-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 650;
}

/* 保留編集のときだけ出る明示照会ボタン。見出し行に収まる高さにする。 */
#callsignInfoLookupButton {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.82rem;
}

/* [hidden]がauthor側のdisplay指定に負ける事故を避けるため明示する。 */
#callsignInfoLookupButton[hidden] {
  display: none;
}

/* 自局QTHバー（運用地プロファイル。ヘッダ直下の共通設定）。プロファイル/JCC・JCG
   選択の「主要行」と、GPS・現在地・管理の「操作行」の2行に分ける（PWA_DESIGN.md
   3.1）。JCC/JCG候補ラベルは常に都道府県名を含む（例:「東京都足立区」）ため1行に
   詰め込むと文字が収まらず窮屈になる。2行にして各行に幅の余裕を持たせる。
   幅が足りるPC幅では横並びへ戻す（下の761px以上の指定）。 */
.station-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 16px;
  /* バンド（背景・下枠）はヘッダに続く帯として全幅のまま、中身だけ入力
     レイアウトと同じ幅へ収める。広いPC幅で運用地selectが全幅まで伸び、
     GPSチップと管理ボタンが画面の左右端へ引き離されるのを防ぐ。 */
  padding-inline: max(16px, calc((100% - var(--content-max)) / 2 + 16px));
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

/* 幅が足りるPC幅では1行に収める（index.htmlの「ヘッダ直下の共通設定として1行に
   収める」）。同一DOMをCSSで再配置する方針（PWA_IA_REDESIGN.md 1.1）。
   ブレークポイントで切り替えず、主要行に必要幅(38em)をflex-basisで宣言して
   wrapに任せる: 2行へ割るべきかどうかはビューポート幅ではなく「JCC/JCG候補
   selectが出ているか」で変わるため、幅の閾値では捉えられない（761pxで一律に
   1行化すると、候補select表示時に両selectが200px弱まで潰れてラベルが切れた）。 */
@media (min-width: 761px) {
  .station-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
  }

  .station-bar-row-main {
    flex: 1 1 38em;
  }

  /* 余り幅を吸収させる。1行に収まったときは操作群が右端へ、折り返して単独行に
     なったときも行末へ寄る（どちらもjustify-content:flex-endが効く）。 */
  .station-bar-row-actions {
    flex: 1 0 auto;
  }

  /* selectを残り幅いっぱいまで伸ばさない。プロファイル名は長くても
     「常置場所（東京都世田谷区）（既定）」程度で、それ以上の幅は情報を
     増やさず間延びするだけ（.log-filter-row selectと同じ考え方）。 */
  .station-bar-row-main select {
    max-width: 30em;
  }
}

/* 保留編集中に自局QTHバーと差し替える読み取り専用バー（PWA_DESIGN.md 3.3）。
   入力時のバーと見分けが付くよう、操作UIなし・アクセント色のタグ＋点線の
   下枠＋淡色地の「記録の表示」らしい見た目にする。 */
.station-bar.held-editing {
  display: none; /* [hidden]属性は上の display:flex に負けるためクラスで消す */
}

.held-edit-station-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  /* 差し替え元の自局QTHバーと同じく、バンドは全幅・中身は下のフォームへ揃える。
     このバーが出るのは保留編集中＝entry-layoutが--content-max-focusで中央寄せ
     されているときなので、そちらの内容幅に合わせる。狭い幅では既定の16pxへ戻る。 */
  padding-inline: max(16px, calc((100% - var(--content-max-focus)) / 2 + 16px));
  border-bottom: 2px dashed var(--accent);
  background: #eaf3f7;
}

.held-edit-station-bar[hidden] {
  display: none;
}

.held-edit-station-tag {
  flex: none;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.held-edit-station-text {
  color: var(--text);
  font-size: 0.9rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.station-bar-label {
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
}

.station-bar-row-main select {
  flex: 1 1 8em;
  min-width: 0;
  font-size: 1rem; /* iOSの自動ズーム防止（3.5節） */
}

.station-bar-row-actions {
  justify-content: flex-end;
}

.station-gps-chip {
  margin-right: auto;
}

.station-manage {
  flex: none;
  white-space: nowrap;
}

/* プロファイル代表座標とGPS実測位置の乖離警告チップ（タップで詳細をトースト表示。
   PWA_IA_REDESIGN.md 3.2。toast.warningと同系色）。保存はブロックしない目安表示。 */
.station-mismatch-button {
  min-height: 0;
  padding: 3px 10px;
  border: 1px solid #dfcb88;
  border-radius: 999px;
  color: var(--warn);
  background: #fff8df;
  font-size: 0.78rem;
  white-space: nowrap;
}

.station-mismatch-button[hidden] {
  display: none;
}

/* GPS実測の運用地チップ（取得済みのときだけ表示。タップで解除）。
   スペースが足りないときはselectでなくこのチップが縮んで省略表示になる。 */
.station-gps-chip {
  flex: 0 1 auto;
  min-width: 2.5em;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: #eef7fb;
  color: var(--accent);
  font-size: 0.78rem;
}

/* 使用中の機材チップ（EQUIPMENT_PROFILE_DESIGN.md §2.5）。タップで差し替えシート。
   機材が1つも決まっていなければ行ごと隠れる（JS側でhidden）。 */
.station-bar-row-equipment {
  flex: 1 1 100%;
}

.equipment-chip {
  min-height: 0;
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 差し替え中は既定と違うことを色でも示す（文言だけだと読み飛ばす）。 */
.equipment-chip.overridden {
  border-color: var(--accent);
  background: #eef7fb;
  color: var(--accent-dark);
}

.equipment-chip[hidden] {
  display: none;
}

/* スマートフォン幅ではラベルとボタン余白を切り詰め、select・チップの操作幅を確保する */
@media (max-width: 480px) {
  .station-bar {
    padding: 8px 10px;
    gap: 6px;
  }

  .station-bar-label {
    display: none;
  }

  .station-bar .station-manage {
    padding: 7px 8px;
  }
}

/* GPS座標の保存可否トグル（管理シート先頭の端末設定） */
.station-coords-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  margin-bottom: 12px;
  color: #374b57;
  font-size: 0.84rem;
}

.station-coords-toggle input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
}

.station-coords-toggle small {
  font-size: 0.74rem;
}

/* 既定の運用地プロファイル切り替え（station-coords-toggleと同じ視覚言語だが、
   .station-form内のgridレイアウトを上書きするため別クラスにする）。 */
.station-form .station-default-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  color: #374b57;
  font-size: 0.84rem;
}

.station-form .station-default-toggle input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
}

.station-form .station-default-toggle small {
  font-size: 0.74rem;
}

/* 運用地プロファイル管理シート（RSTピッカーの土台を流用） */
.station-sheet {
  width: min(480px, 100%);
  max-height: 85vh;
  overflow-y: auto;
}

.station-profile-list {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.station-profile-item {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
}

.station-profile-item.active {
  border-color: var(--accent);
  background: #eef7fb;
}

/* 一覧行は<button>（app.jsのrenderStationProfileListが生成）なので、中の子は
   button { white-space: nowrap }（163行）を継承する。nowrapは「ボタンのラベルを
   途中で割らない」ための規則で、利用者が自由に付ける表示名には当てはまらない。
   長い名前（例「茨城県つくば市（筑波山京成ホテル移動）」）が継承したまま残ると
   min-contentがグリッドトラックを押し広げ、.station-sheetのoverflow-y:autoから
   派生したoverflow-x:autoと結び付いてシート全体が横スクロールする
   （2026-08-04に実機報告。402px幅でシートが459pxへ膨張＝57pxはみ出し）。
   打ち消し漏れが膨張を生む形を、守りを既定・例外だけ明示する形へ反転させる
   （子を足したときに自動的に守られる）。overflow-wrap:anywhereはmin-contentを
   1文字まで落とすため。break-wordではmin-contentが縮まず効かない。 */
.station-profile-item > * {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.station-profile-name {
  font-weight: 600;
}

/* 上の既定に対する意図的な例外。詳細は補助情報なので1行へ固定して行高を揃える
   （切れても行は識別できる）。表示名はどのプロファイルかを決める主キーなので
   折り返して全文見せる、という非対称は意図。 */
.station-profile-detail {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.station-form > label {
  display: grid;
  gap: 4px;
  color: #374b57;
  font-size: 0.84rem;
  min-width: 0;
}

.station-form input,
.station-form select {
  font-size: 1rem; /* iOSの自動ズーム防止 */
  min-width: 0;
  /* min-width:0 は自動最小サイズ（下限）を外すだけで、min-contentそのものは縮めない。
     iOS WebKitのselectは最長optionを固有幅として持つため、下限を外しても列
     （1fr≒180px）を突き抜けうる。Chromeでは再現しないぶん見落としやすいので、
     用いる幅を上限で止めておく。 */
  max-width: 100%;
}

.station-form .sf-wide,
.station-form .station-sheet-message,
.station-form .rst-picker-actions {
  grid-column: 1 / -1;
}

.station-sheet-message {
  margin: 0;
  font-size: 0.82rem;
}

/* 代表座標の貼り付け案内。欄と欄の間に挟まるので、行間の詰まりを避けて小さく置く。 */
.sf-coordinate-hint {
  margin: -2px 0 2px;
  font-size: 0.78rem;
}

/* 運用バンド・運用モードの選択（DESIGN.md 4.5節、2026-08-12）。選択肢が多い
   （バンドは30件）ので、1件1行のリストではなく折り返すチップにする。 */
.station-form .sf-capability {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0;
  padding: 8px 10px 10px;
  min-width: 0;
}

.station-form .sf-capability legend {
  padding: 0 4px;
  color: #374b57;
  font-size: 0.84rem;
}

.station-form .sf-capability small {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
}

.capability-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.capability-picker label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #374b57;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* 選択中のチップは塗りで示す（チェックボックス自体は小さく、束の中では
   入っているかどうかが一目で分からないため）。 */
.capability-picker label:has(input:checked) {
  border-color: var(--accent);
  background: #e6f1f6;
  color: var(--accent-dark);
}

/* バンド別機材の対応表（EQUIPMENT_PROFILE_DESIGN.md §9.4）。1行＝バンド＋リグ＋
   アンテナ＋出力＋地上高＋削除。狭い幅では折り返して2段になる。 */
.band-equipment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.band-equipment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.band-equipment-row select,
.band-equipment-row input {
  flex: 1 1 6em;
  min-width: 0;
  font-size: 0.86rem;
}

/* 文字を打ち込む欄だけは16pxを割らない。iOS WebKitは16px未満の入力欄でフォーカス時に
   自動ズームし、blurしても戻らない（拡大したまま横スクロールが残る）。selectは
   ホイールピッカーが開くだけでズームしないので、行の詰まりを避けて0.86remのまま残す。 */
.band-equipment-row input {
  font-size: 1rem;
}

/* 数値欄は桁数が少ないので伸ばさない（機材selectへ幅を回す）。基準を`em`にすると
   上の16px固定に引きずられて広がるため、selectと同じ見た目の幅をpxで与える。 */
.band-equipment-row .be-power,
.band-equipment-row .be-height {
  flex: 0 1 62px;
}

.band-equipment-row .be-remove {
  flex: 0 0 auto;
  min-height: 0;
  padding: 4px 8px;
  font-size: 0.78rem;
}

.capability-picker input[type="checkbox"] {
  /* このファイル冒頭の `input, select, textarea { width:100%; min-height:38px }` は
     チェックボックスにも効く。放置するとチップが全幅38pxの箱に伸びて、シートが
     縦に膨れる（同じ罠を法的同意カードとバックフィル画面で踏んでいる）。 */
  width: auto;
  min-height: 0;
  margin: 0;
}

/* 運用地バックフィル（過去QSOへのRemarks解析。STATION_LOCATION_BACKFILL_DESIGN.md §2.6）。
   グループ数が多くなり得るため縦スクロールさせる。 */
.station-backfill-sheet {
  width: min(480px, 100%);
  max-height: 85vh;
  overflow-y: auto;
}

/* シート見出し＋ⓘ。 */
.station-backfill-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.station-backfill-title-row .rst-picker-title {
  margin-bottom: 0;
}

/* ⓘで開くヘルプ本文。入力画面の.help-popupと違い**フロー内**に展開する
   （シートはoverflow-y:autoのスクロール容器で、中の絶対配置は下端で切れる）。
   hoverでは開かない——読むために本文が場所を取るので、開く意思を要求する。 */
.station-backfill-help-note {
  display: none;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.82rem;
  line-height: 1.55;
}

.station-backfill-help-note.open {
  display: block;
}

.station-backfill-help-note p {
  margin: 0;
}

.station-backfill-help-note p + p {
  margin-top: 8px;
}

.station-backfill-intro {
  font-size: 0.82rem;
  margin-bottom: 6px;
}

/* 地名DB（geo-pack）未配置の告知。確信度が全部「不明」になる原因が
   利用者の書き方ではなくサーバ側のデータ欠落であることを明示する。 */
.station-backfill-geo-warning {
  border: 1px solid #dfcb88;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #fff8df;
  color: var(--warn);
  font-size: 0.8rem;
}

.station-backfill-geo-warning[hidden] {
  display: none;
}

.station-backfill-groups {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.station-backfill-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 6px;
}

.station-backfill-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.station-backfill-group-raw {
  font-size: 0.84rem;
  color: var(--muted);
  word-break: break-all;
}

.station-backfill-group-count {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

/* 確信度バッジ（設計書§2.2の3段階。high=既に地名DBと整合、review=要確認、
   unknown=解釈できず既定で非選択）。 */
.station-backfill-confidence {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.station-backfill-confidence.high {
  background: #eaf6ee;
  color: var(--ok);
}

.station-backfill-confidence.review {
  background: #fff8df;
  color: var(--warn);
}

.station-backfill-confidence.unknown {
  background: #f1eef5;
  color: #6a5a86;
}

.station-backfill-group-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.station-backfill-group-fields label {
  display: grid;
  gap: 2px;
  font-size: 0.78rem;
  color: var(--muted);
}

.station-backfill-group-fields .sf-wide {
  grid-column: 1 / -1;
}

.station-backfill-group-profile-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

.station-backfill-group-profile-toggle input[type="checkbox"] {
  /* 自局QTH等の入力欄と同じ全幅指定を継承しないよう明示的に固定サイズを与える。 */
  width: auto;
  margin: 0;
}

.station-backfill-group-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.station-backfill-group-status {
  font-size: 0.78rem;
  color: var(--muted);
  margin-right: auto;
}

.station-backfill-group.applied {
  opacity: 0.6;
}

/* 一括適用・座標修復のセクション。上のグループ（.station-backfill-group）と
   同じ枠にする——区切り線だけだとカードの並びから外れて「シート全体にかかる
   操作」に見え、対象範囲（グループとは排他）を読み違える。 */
.station-backfill-default {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  display: grid;
  gap: 8px;
}

/* 一括適用・座標修復のセクションはJSがhidden属性で出し入れするが、上の
   display:gridがUA既定の[hidden]{display:none}に勝ってしまう（PWA CSSの
   既知の罠）。対象0件でも枠だけ出ていたのを打ち消す。 */
.station-backfill-default[hidden] {
  display: none;
}

.station-backfill-subtitle {
  font-size: 0.9rem;
  margin: 0;
}

.station-backfill-date-row {
  display: flex;
  gap: 8px;
}

.station-backfill-date-row label {
  flex: 1 1 0;
  display: grid;
  gap: 2px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* QRZログインシート（RSTピッカーの土台を流用しつつフォーム用に整える） */
.qrz-sheet {
  width: min(400px, 100%);
}

.qrz-form {
  display: grid;
  gap: 10px;
}

.qrz-form > label {
  display: grid;
  gap: 4px;
  color: #374b57;
  font-size: 0.84rem;
}

.qrz-remember {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
}

.qrz-remember input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
}

.qrz-remember small {
  font-size: 0.74rem;
}

/* 資格情報・送信開始日・送信・履歴を1枚に載せるため、QRZログインシートと違って
   縦に長い（375x812で約860px、初回利用者向けの警告が出ると約930px）。下端シートは
   flex-endで積むので、収まらない分は**上へはみ出して画面外**へ出る——タイトルと
   状態行が見切れ、スクロールで取り戻すこともできない（2026-08-29にiPhone実機で指摘）。
   運用地プロファイル管理シート（.station-sheet）と同じくシート自身をスクロールさせる。 */
.clublog-sheet {
  max-height: 85vh;
  overflow-y: auto;
}

/* Club Log連携シート（QRZシートのフォーム土台を流用）。送信ブロックと履歴は
   フォームの下へ区切り線で分ける。 */
.clublog-upload {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.clublog-skipped {
  font-size: 0.76rem;
}

/* 送信開始基準日（SERVICE_SEND_DESIGN.md 3.3節）。資格情報フォームと送信ブロックの
   間に挟むので、上下どちらとも区切り線で分ける。 */
.clublog-baseline {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.clublog-baseline-title {
  font-size: 0.84rem;
  font-weight: 650;
  color: #374b57;
}

.clublog-baseline > label {
  display: grid;
  gap: 4px;
  color: #374b57;
  font-size: 0.84rem;
}

.clublog-baseline input[type="date"] {
  /* 共通ルール（input, select, textarea { width: 100% }）のままだと日付入力が
     シート幅いっぱいに伸びる。内容に応じた幅で十分。 */
  width: auto;
  justify-self: start;
  min-height: 38px;
}

.clublog-baseline small {
  font-size: 0.74rem;
}

.clublog-baseline-warning {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff4e5;
  border: 1px solid #f0c48a;
  color: #7a4a10;
  font-size: 0.78rem;
}

.clublog-history {
  margin-top: 12px;
  display: grid;
  gap: 4px;
}

.clublog-history-title {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--muted);
}

.clublog-history-row {
  font-size: 0.76rem;
}

/* LoTW連携シート（Club Logシートの部品を流用。LOTW_SUBMISSION_DESIGN.md 7節）。 */
.lotw-precondition {
  margin: 0 0 10px;
  padding-left: 1.2em;
  font-size: 0.8rem;
  display: grid;
  gap: 4px;
}

.lotw-groups {
  font-size: 0.78rem;
}

.lotw-history-detail {
  font-size: 0.72rem;
  color: #8a5a2a;
}

.lotw-history-cancel {
  margin-left: 8px;
  font-size: 0.74rem;
}

.callsign-info-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.callsign-info-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fafcfd;
  min-width: 0;
}

.callsign-info-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.callsign-info-source {
  font-size: 0.82rem;
  font-weight: 650;
}

.callsign-info-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f6f8f9;
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.callsign-info-status.ok {
  color: var(--ok);
  border-color: #a7d2bb;
  background: #eef8f2;
}

.callsign-info-status.warn {
  color: var(--warn);
  border-color: #dfcb88;
  background: #fff8df;
}

.callsign-info-status.danger {
  color: var(--danger);
  border-color: #e1adad;
  background: #fff0f0;
}

.callsign-info-rows {
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  font-size: 0.8rem;
}

.callsign-info-rows dt {
  color: var(--muted);
  white-space: nowrap;
}

.callsign-info-rows dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.callsign-info-footer {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

/* 総務省Web-APIの出典明示（規約第3条）。displayは指定しない（[hidden]属性による
   非表示がauthorのdisplayに負けないようにするため。PWAのCSS落とし穴）。 */
.callsign-info-attribution {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ---- ヘルプアイコン（成立・保存の説明ポップアップ） ---- */
/* タップ（.open）でもマウスオーバー（hover対応端末のみ）でも開く。ポップアップは
   editor-headを基準に左右padding分だけ内側へ広げ、狭幕でも横あふれしない。 */
.help-wrap {
  display: inline-flex;
  flex-shrink: 0;
}

.help-icon {
  /* ⓘ グリフ自体が円を含むので、枠・背景は付けずグリフをそのまま見せる。
     iOS Safari等はborder:none/background:transparentだけではボタンの既定の
     角丸チェンジが残るため、appearanceも明示的に解除する。 */
  appearance: none;
  -webkit-appearance: none;
  min-width: 24px;
  min-height: 24px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.help-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.help-popup {
  display: none;
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  margin-top: 6px;
  z-index: 40;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.55;
  box-shadow: 0 6px 20px rgb(15 23 42 / 15%);
}

.help-popup p {
  margin: 0;
}

.help-popup p + p {
  margin-top: 8px;
}

.help-wrap.open .help-popup {
  display: block;
}

@media (hover: hover) {
  .help-wrap:hover .help-popup {
    display: block;
  }
}

/* ---- 本日のQSO ---- */

/* 「まとめて反映」行（未反映タブ内の常設。PWA_IA_REDESIGN.md 3.2） */
.held-actions {
  margin: 8px 12px 0;
  border: 1px solid #a9cbe6;
  border-radius: 6px;
  padding: 8px 10px;
  color: #245c8a;
  background: #eef5fb;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.held-actions[hidden] {
  display: none;
}

.held-actions button {
  flex-shrink: 0;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.82rem;
}

/* ---- QSO一覧タブ（未反映／本日／昨日） ---- */

.today-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--line);
}

.today-tab {
  flex: 1;
  min-height: 34px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f6f8f9;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.today-tab.active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: inset 0 2px 0 var(--accent);
  /* 選択タブの下端を本文と繋げる（枠線の切れ目を隠す） */
  margin-bottom: -1px;
  padding-bottom: 7px;
}

.today-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.today-list {
  display: flex;
  flex-direction: column;
  max-height: 38vh;
  overflow: auto;
}

.today-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #edf1f3;
  font-size: 0.88rem;
}

/* 本日のQSO欄の保留行だけに出す編集ボタン（コンパクト） */
.today-edit {
  min-height: 28px;
  padding: 2px 10px;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.today-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* 2段組の行でも時刻は上段（コール）と揃える */
  align-self: flex-start;
  padding-top: 1px;
}

/* コール（上段）＋バンド/モード/QTH（下段）を縦に積む中央カラム */
.today-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.today-call {
  font-weight: 650;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 下段（バンド/モード/QTH＋移動運用チップ）を横に並べる行。subテキストだけが
   省略され（flex:1 1 auto＋min-width:0）、チップは場所を確保して残る。
   チップをsubの内側へ入れると、subのoverflow:hiddenが右端から切り落とすため
   「情報が多い行ほどチップが先に消える」不具合になる（2026-07-16に実測して修正）。 */
.today-subline {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.today-sub {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #f6f8f9;
  white-space: nowrap;
}

.status.synced {
  color: var(--ok);
  border-color: #a7d2bb;
  background: #eef8f2;
}

.status.pending,
.status.leased,
.status.unknown,
.status.message-sent {
  color: var(--warn);
  border-color: #dfcb88;
  background: #fff8df;
}

.status.held {
  color: #3a4a57;
  border-color: #c4cdd3;
  background: #eef1f3;
}

.status.failed {
  color: var(--danger);
  border-color: #e1adad;
  background: #fff0f0;
}

.status.waiting-for-database {
  color: #245c8a;
  border-color: #a9cbe6;
  background: #eef5fb;
}

.status.merge-review {
  color: #8a4b00;
  border-color: #e8bd7d;
  background: #fff3e0;
}

/* ---- iPhone幅: 縦積み（PWA_DESIGN.md QSOリアルタイム入力画面） ---- */

@media (max-width: 760px) {
  .entry-layout {
    grid-template-columns: 1fr;
    /* 縦積みは3行。行をまたぐ要素が無く余り高さの配分問題も起きないので、
       PC幅の`auto 1fr`（2行前提）は打ち消して全行を内容なりにする。 */
    grid-template-rows: none;
    grid-template-areas:
      "heard"
      "editor"
      "today";
    padding: 10px 10px 20px;
  }

  .heard-list {
    max-height: 30vh;
  }

  /* 狭幕では操作ボタン（保存待ちは編集に戻す/送信を試す/破棄の3つ）を常に
     コールサインの下の行へ回し、タイトルに1行を確保する。 */
  .editor-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* 参考情報カードは狭幕では縦積み。 */
  .callsign-info-cards {
    grid-template-columns: 1fr;
  }
}

/* ---- ログビュー（QSO参照画面。QSO_BROWSE_DESIGN.md 2節） ---- */

/* 入力ビューとの排他は body.log-view-active / body.activity-view-active /
   body.awards-view-active で行う（hidden属性はauthorのdisplay指定に負ける既知の
   落とし穴があるため、クラスで明示制御する）。3ビューは互いに排他ではない
   （同時にactiveにはならないが、どれも入力ビューを隠す点は共通）。 */
body.log-view-active .entry-layout,
body.log-view-active .station-bar,
body.log-view-active .held-edit-station-bar,
body.activity-view-active .entry-layout,
body.activity-view-active .station-bar,
body.activity-view-active .held-edit-station-bar,
body.awards-view-active .entry-layout,
body.awards-view-active .station-bar,
body.awards-view-active .held-edit-station-bar,
body.services-view-active .entry-layout,
body.services-view-active .station-bar,
body.services-view-active .held-edit-station-bar,
body.qso-view-active .entry-layout,
body.qso-view-active .station-bar,
body.qso-view-active .held-edit-station-bar,
body.settings-view-active .entry-layout,
body.settings-view-active .station-bar,
body.settings-view-active .held-edit-station-bar {
  display: none;
}

.log-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 24px;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
}

.log-view[hidden] {
  display: none;
}

.log-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.log-head h2 {
  font-size: 1.05rem;
}

.log-summary {
  margin-left: auto;
}

/* ログ画面のヘッダに置く表示基準ピル（.tz-pillの見た目を共用）。件数の右隣。 */
#logDisplayTzToggle {
  flex: 0 0 auto;
}

.log-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#logSearch {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--panel);
}

.log-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.log-filter-row select,
.log-filter-row input[type="date"] {
  /* 共通ルール（input,select,textarea { width:100% }）を上書きし、内容に応じた
     最小限の幅にする（期間・運用地・状態が理由なく全幅に伸びていた不具合）。 */
  width: auto;
  min-width: 92px;
  max-width: 200px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 4px 8px;
  font-size: 0.88rem;
  text-overflow: ellipsis;
}

/* バンド・モードのチップ列。1行に収めず折り返す（横スクロールは発見しづらく、
   環境によってはネイティブスクロールバーが末尾のチップに重なって見切れるため）。 */
.log-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.log-chiprow[hidden] {
  display: none;
}

.log-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.84rem;
  flex: 0 0 auto;
}

.log-chip.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-dark);
  font-weight: 650;
}

.log-chip-count {
  color: var(--muted);
  font-size: 0.74rem;
}

/* 深くスクロール中のSSE更新通知。読書位置を壊さず、タップで先頭へ戻って更新。 */
.log-new-pill {
  position: sticky;
  top: 8px;
  z-index: 5;
  align-self: center;
  border-radius: 999px;
  font-size: 0.84rem;
  min-height: 34px;
  padding: 5px 14px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

.log-new-pill[hidden] {
  display: none;
}

/* PC幅はヘッダがsticky（.topbar）なので、その下端より上へ出さない。 */
@media (min-width: 761px) {
  .log-new-pill {
    top: calc(var(--topbar-height) + 8px);
  }
}

.log-list {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.log-date-heading {
  padding: 6px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--muted);
}

/* 見出しの日付がどちらの基準かを添える（ヘッダのピルはスクロールで流れるため、
   読書中ずっと画面に残るのはこの見出しだけ）。日付本体より弱く出す。 */
.log-date-heading-tz {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.log-list .today-item:last-child {
  border-bottom: none;
}

.log-sentinel {
  text-align: center;
  padding: 12px;
  min-height: 20px;
}

.log-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-size: 0.86rem;
  color: var(--danger);
}

/* ---- アクティビティマップ（GitHub風の日別QSO数ヒートマップ。
   QSO_BROWSE_DESIGN.md 4節） ---- */

.activity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-controls select {
  width: auto;
  min-width: 92px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 4px 8px;
  font-size: 0.88rem;
}

.activity-summary {
  font-size: 0.86rem;
}

/* 曜日ラベル＋グラフ本体の行。曜日ラベルは横スクロールの外に置く固定列
   （列が週であることを示す目印が、スクロールで流れて見えなくならないように）。 */
.activity-graph-body {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}

.activity-weekday-labels {
  display: grid;
  grid-template-rows: repeat(7, 11px);
  gap: 3px;
  width: 22px;
  flex: 0 0 auto;
  /* 月ラベル行（14px）ぶん下げ、グリッドの行と縦位置を揃える。 */
  margin-top: 14px;
  font-size: 0.62rem;
  color: var(--muted);
}

.activity-weekday-labels span {
  display: flex;
  align-items: center;
}

/* グリッドは日付の連続体なので折り返さず横スクロールにする（バンドチップとは
   異なり、離散した選択肢ではなく時系列の連続なので折り返しは適さない）。
   ネイティブスクロールバーは隠し、左縁だけフェードで「過去へ続く」ことを示す
   （初期表示は最新側＝右端へスクロールするため、右縁のフェードは不要）。
   曜日ラベルはこの外側（.activity-graph-body直下）にあるためフェードの
   影響を受けない。 */
.activity-graph-wrap {
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, black 14px, black 100%);
  mask-image: linear-gradient(to right, transparent, black 14px, black 100%);
  flex: 1 1 auto;
  min-width: 0;
}

.activity-graph-wrap::-webkit-scrollbar {
  display: none;
}

.activity-month-labels {
  display: flex;
  gap: 3px;
  height: 14px;
  font-size: 0.68rem;
  color: var(--muted);
}

.activity-month-labels span {
  width: 11px;
  flex: 0 0 auto;
  /* flexアイテム化(blockified)により幅11pxが効くため、2〜3文字の月ラベル
     （"10月"等）はwhite-space未指定だと折り返して2行になり、14px高の
     ボックスから溢れた2行目がグリッド側へ垂れて小さな点に見えていた。
     折り返さず右へはみ出す表示（意図どおり）にする。 */
  white-space: nowrap;
  overflow: visible;
}

.activity-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  gap: 3px;
}

.activity-cell {
  width: 11px;
  height: 11px;
  /* グローバルなbutton{min-height:38px}を上書きしないと、11px固定の行トラックに
     対してボタン本体が下へはみ出し、同じ列内で下のセル（未来日の透明セル含む）
     に重なって見える（縦に繋がった帯・未来日が色付いて見える不具合の原因）。 */
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--line);
  cursor: pointer;
}

.activity-cell.out-of-range {
  background: transparent;
  cursor: default;
}

.activity-cell.level-1 {
  background: color-mix(in srgb, var(--accent) 25%, var(--panel));
}

.activity-cell.level-2 {
  background: color-mix(in srgb, var(--accent) 50%, var(--panel));
}

.activity-cell.level-3 {
  background: color-mix(in srgb, var(--accent) 75%, var(--panel));
}

.activity-cell.level-4 {
  background: var(--accent);
}

.activity-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 0.74rem;
}

/* ---- アワード達成状況（AWARD_STATS_DESIGN.md） ---- */

.awards-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 詳細側のコントロール行: 戻るボタンとconfirmedトグルを両端に。 */
.awards-detail-controls {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.awards-confirmed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
}

.awards-confirmed-toggle input {
  width: auto;
  min-height: auto;
}

/* サマリの発行元見出し（グリッドの1行を占める）。 */
.awards-group-title {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.award-band-row.achieved {
  border-color: var(--accent);
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.award-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.award-card-name {
  font-size: 0.8rem;
  color: var(--muted);
}

.award-card-value {
  font-size: 1.15rem;
  font-weight: 650;
}

.award-card-badge {
  font-size: 0.72rem;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.award-card-badge.achieved {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-dark);
  font-weight: 650;
}

.award-card-progress {
  font-size: 0.74rem;
}

.award-card-bar {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.award-card-bar > div {
  height: 100%;
  background: var(--accent);
}

/* 段階クラス制アワード（直近の目標数を分母にしたバー）。「全部集める」型の
   カードと見分けられるよう、枠・バー・目標数を識別色で塗り分ける。 */
.award-card.staged {
  border-color: color-mix(in srgb, var(--staged) 45%, var(--line));
  background: color-mix(in srgb, var(--staged) 5%, var(--panel));
}

.award-card.staged .award-card-bar > div {
  background: var(--staged);
}

/* 最上位クラス達成済みはバーを達成色にする */
.award-card.staged.topped .award-card-bar > div {
  background: var(--ok);
}

.award-card-target {
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--staged);
}

/* バンド分布条件（WARC-1000・AJA）未達成の注記。局数は足りていても正式には
   未達成であることを警告色で明示する。 */
.award-card-band-warning {
  font-size: 0.74rem;
  color: var(--warn);
  font-weight: 600;
}

.awards-notes p {
  font-size: 0.78rem;
  margin: 2px 0;
}

.award-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
}

.award-group summary {
  cursor: pointer;
  font-size: 0.9rem;
}

/* アワード詳細の達成条件（要旨）。見出しと状態行の間に1段落。 */
.award-description {
  margin: 0 0 8px;
  font-size: 0.86rem;
  line-height: 1.55;
}

.award-code-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.award-code-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.78rem;
}

.award-code-chip.worked {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-dark);
  font-weight: 650;
  cursor: pointer;
}

.award-code-chip.historical {
  border-style: dashed;
}

.award-band-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.award-band-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.activity-legend .activity-cell {
  cursor: default;
}

/* ---- 移動運用チップ（一覧行に付ける、POTA/非デフォルトプロファイル/QTH） ----
   常置場所の運用にはチップを出さないので、ここが表示されるだけで「移動運用」と
   分かる目印になる。POTA・プロファイル・qthは色を分けてPOTAだけ目立たせる。
   .today-subline のflexアイテムとして置き、狭いときはラベルだけが省略されて
   最後は📍アイコンが残る（min-width）。上限は行幅に対する相対（max-width:%）に
   する: ビューポート幅の@mediaでは「行が狭い」を捉えられず、デスクトップでも
   Name/QTHが長い行でチップが消えていた（2026-07-16に実測して修正）。 */
.station-trip-chip {
  /* shrinkさせない: 縮むのはまずsubテキスト側で、チップは上限(max-width)に
     達するまでラベルを保つ。0 1 auto にするとsubと一緒に縮み始め、まだ余白が
     あるうちからラベルが省略される。 */
  flex: 0 0 auto;
  min-width: 1.9em; /* 📍だけは必ず残す下限 */
  max-width: 45%;   /* 長い地名がsubテキストを潰さない上限 */
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.75rem;
  line-height: 1.4;
  background: #eef2f7;
  color: #334;
  border: 1px solid #d7dde5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.station-trip-chip.station-trip-pota {
  background: #fff4e0;
  border-color: #f0c884;
  color: #7a4c15;
}

.station-trip-chip.station-trip-profile {
  background: #e5f0ff;
  border-color: #a9c8ee;
  color: #1e4a86;
}

/* バンド・モードの色分けチップ（BAND_MODE_COLOR_DESIGN.md）。色はJSの色表
   （web/shared/band_mode_colors.js）からインライン指定し、ここは形だけを持つ。
   バンド=塗り・モード=枠、という形の違いが「何の色か」の見分けを担う。 */
.qso-band-chip,
.qso-mode-chip {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.5;
  padding: 0 7px;
  white-space: nowrap;
}

.qso-band-chip {
  border-radius: 999px;
}

.qso-mode-chip {
  border: 1px solid currentColor;
  border-radius: 5px;
  background: var(--panel);
}

/* QSL受領マーク（LOTW_QSL_SYNC_DESIGN.md §8）。バンド＝塗り・モード＝枠の色分けと
   競合しないよう、3チャネル同じ中立の確認色で、塗りも枠も持たない薄い地＋
   チェック記号の小ピルにする。チャネルは文字で区別する。 */
.qsl-received-chip {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.5;
  padding: 0 6px;
  border-radius: 999px;
  background: #e6f3ea;
  color: #1f6b3a;
  white-space: nowrap;
}

.qso-detail-qsl-link {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* 統計「サービス」ビュー（SERVICE_SEND_DESIGN.md §11）。アワードカードと同じ
   カード面で、送信側の列と確認側の列を分けて見せる。 */
.services-confirmations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.services-confirmations .services-stat {
  flex: 1 1 120px;
}

.services-grid {
  display: grid;
  gap: 10px;
}

.services-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel);
  display: grid;
  gap: 8px;
}

.services-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.services-card-name {
  font-weight: 650;
}

.services-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
}

.services-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fafbfc;
  /* <button>土台のカードはnowrapを継承する（PWA_IA_REDESIGN.md 7.2.2）。ラベルが
     セル幅（最小110px）を超えたら折り返し、はみ出さない。 */
  white-space: normal;
  text-align: left;
  min-width: 0;
}

.services-stat-label {
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.services-stat-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 650;
}

.services-stat.attention .services-stat-value {
  color: #7a4a10;
}

.services-stat.confirmed .services-stat-value {
  color: #1f6b3a;
}

.services-card-foot {
  font-size: 0.76rem;
}

/* 統計「連携」の操作ブロック（送信・取得。2026-09-06に設定のシートから移設）。 */
.services-ops {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 2px solid var(--line);
}

.services-ops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.services-ops-head h3 {
  margin: 0;
  font-size: 1rem;
}

.services-ops-head button {
  min-height: 32px;
  padding: 4px 12px;
}

.services-note {
  font-size: 0.76rem;
}

/* 数字はログ一覧へのドリルダウン（button化）。<button>既定のaccent背景・白文字を
   打ち消し、divのときと同じ見た目にする。押せることは枠色とカーソルで示す。 */
button.services-stat {
  text-align: left;
  font: inherit;
  color: inherit;
  min-height: 0;
  margin: 0;
  cursor: pointer;
  border-color: #b9c9d3;
}

button.services-stat:hover,
button.services-stat:focus-visible {
  background: #eef4f8;
}

/* ログビュー: 統計からのドリルダウンで付いた絞り込み（qsl=/send=）は専用UIが無いので、
   要約の隣に解除つきチップで示す（SERVICE_SEND_DESIGN.md §11）。 */
.log-service-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.log-service-filters:empty {
  display: none;
}

.log-service-filter-chip {
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.6;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #b9c9d3;
  background: #eef4f8;
  color: #1f3a4a;
  min-height: 0;
  margin: 0;
}


/* ---- 行タップで詳細を開くQSO行（QSO_DETAIL_DESIGN.md §2.2） ----
   .today-item / .log-item は <button> 要素なので、既定の accent 背景・白文字を
   打ち消して <div> のときと同じ見た目に戻す。left align・折り返しも復元する。 */
.today-item-tappable,
.log-item-tappable {
  background: transparent;
  color: inherit;
  border: none;
  border-bottom: 1px solid #edf1f3;
  border-radius: 0;
  padding: 8px 12px;
  margin: 0;
  width: 100%;
  min-height: 0;
  text-align: left;
  white-space: normal;
  font: inherit;
  cursor: pointer;
}

.today-item-tappable:hover,
.log-item-tappable:hover {
  background: #f4f7f9;
}

/* ---- QSO詳細ビュー（QSO_DETAIL_DESIGN.md §2） ---- */

.qso-detail-view[hidden] {
  display: none;
}

.qso-detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qso-detail-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.qso-detail-callrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.qso-detail-call {
  font-size: 1.35rem;
  font-weight: 700;
}

.qso-detail-time,
.qso-detail-gear {
  font-size: 0.9rem;
}

.qso-detail-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.qso-detail-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: none;
  margin: 0;
}

.qso-detail-field {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.qso-detail-field-label {
  min-width: 6em;
  color: var(--muted);
  font-size: 0.85rem;
}

.qso-detail-field-value {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.qso-detail-field-value.multiline {
  white-space: pre-wrap;
}

.qso-detail-memo-text {
  margin: 0;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}

/* 交信メモの編集ウィジェット（QSO_DETAIL_DESIGN.md §6） */
.qso-detail-memo-input {
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  /* ここは親（.qso-detail-section）が16pxなので`font: inherit`でも実害は無かったが、
     親の見出しサイズを下げた途端にiOSのフォーカス時自動ズームを踏む（.f-memo textarea
     で実際に起きた）。sizeだけは継承させず16pxに固定しておく。 */
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
  box-sizing: border-box;
}

.qso-detail-memo-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.qso-detail-memo-status {
  font-size: 0.85rem;
}

/* 運用地・機材の個別編集（QSO_DETAIL_DESIGN.md §11.4）。入口はセクション内の
   小さなボタン、編集本体はRSTピッカーと同じ土台のシート。 */
.qso-detail-station-edit {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 0.82rem;
}

/* 交信内容の編集モード（QSO_FORM_COMPONENT_DESIGN.md §4.2）。フォーム部品は入力ビューと
   同じマークアップ（.qso-form）を詳細セクションの中に置く。編集中であることが一目で
   分かるよう、入力ビューの編集フォーカスモードと同じアクセント色の点線枠で囲む。 */
.qso-detail-edit .qso-form-host {
  border: 2px dashed var(--accent);
  border-radius: 10px;
  padding: 8px;
  background: #f6fafc;
}

.qso-detail-edit-actions {
  margin-top: 6px;
}

.qso-detail-edit-lookup .callsign-info-header {
  margin-bottom: 0;
}

.qso-detail-station-sheet {
  width: min(420px, 100%);
  max-height: 85vh;
  overflow-y: auto;
}

.qso-detail-station-form {
  display: grid;
  gap: 8px;
}

.qso-detail-station-field {
  display: grid;
  gap: 2px;
  font-size: 0.82rem;
}

.qso-detail-station-field[hidden] {
  display: none;
}

/* チェックボックスは全幅指定（input全般の既定）を継承させない。 */
.qso-detail-station-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.qso-detail-station-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.qso-detail-station-note {
  font-size: 0.78rem;
  margin: 0;
}

/* 緯度・経度は対で読む値なので横に並べる。 */
.qso-detail-station-coords {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.qso-detail-station-status {
  font-size: 0.82rem;
  margin: 0;
}

/* 失敗の理由は説明文と同じ見た目にしない（読み飛ばされて「保存できた」と
   誤解される）。mutedクラスの色に勝てるよう要素側にも十分な詳細度を持たせる。 */
.qso-detail-station-status.is-error,
.qso-detail-station-note.is-error,
.qso-detail-memo-status.is-error {
  color: var(--danger);
  font-weight: 600;
}

.qso-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.qso-detail-actions .destructive {
  color: var(--danger);
  border-color: #dca0a0;
  background: #fff;
}

.qso-detail-hamlog-records,
.qso-detail-qsl-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
}

.qso-detail-revision {
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}

.qso-detail-revision:last-child {
  border-bottom: none;
}

.qso-detail-revision-head {
  font-weight: 600;
  font-size: 0.9rem;
}

.qso-detail-revision-diffs {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 0.85rem;
  color: var(--muted);
}

.qso-detail-error {
  color: var(--danger);
}

/* ---- 運用地地図（QSO_DETAIL_DESIGN.md §10） ---- */

.qso-detail-map {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qso-detail-map svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eaf1f6;
}

.qso-detail-map-distance {
  margin: 2px 0 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.qso-detail-map-note,
.qso-detail-map-credit {
  margin: 0;
  font-size: 0.72rem;
}

.qso-detail-worked-link {
  align-self: flex-start;
  margin-top: 4px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 10px;
  font-size: 0.85rem;
  min-height: 0;
  border-radius: 6px;
  cursor: pointer;
}

/* ---- 統計サブタブ（PWA_IA_REDESIGN.md 1.1。アクティビティ/アワードの行き来） ---- */

.stats-subtabs {
  display: flex;
  gap: 6px;
}

.stats-subtab {
  min-height: 32px;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.stats-subtab.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* ---- 設定ハブ（PWA_IA_REDESIGN.md 5.1） ---- */

.settings-view {
  gap: 12px;
}

.settings-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.settings-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.settings-section .muted {
  margin: 0;
}

.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 設定ハブ内の日付入力（ADIF取り込み開始日）。共通ルール
   （input, select, textarea { width: 100% }）のままだとセクション幅いっぱいに
   伸びるので、内容に応じた幅へ戻す。 */
.settings-section > label {
  display: grid;
  gap: 4px;
  font-size: 0.88rem;
}

.settings-section input[type="date"] {
  width: auto;
  justify-self: start;
  min-height: 38px;
}

.settings-autofill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
  color: var(--muted);
}

.settings-autofill select {
  width: auto;
  min-width: 200px;
}

/* ---- 設定ハブ Phase 3: ログブック・ペアリング・HDB設定（PWA_IA_REDESIGN.md 5.1） ---- */

/* 実験用ログブック選択中のヘッダ表示（バナーにしない。PWA_IA_REDESIGN.md 3.2） */
.experimental-chip {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 8px;
  border: 1px solid #dfcb88;
  border-radius: 999px;
  color: var(--warn);
  background: #fff8df;
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.experimental-chip[hidden] {
  display: none;
}

body.experimental-logbook .topbar {
  background: #fff8df;
  border-bottom-color: #dfcb88;
}

/* 非本番環境（人柱ステージング・開発）の隅リボン。ヘッダ色（実験用ログブックが使用）
   とは別方式で「本番ではない」ことを常時明示する。app.jsがホスト名で出し分ける。
   クリップ用の正方形コンテナで斜めバンドの余剰をはみ出させず、横スクロールを防ぐ。 */
.env-ribbon {
  position: fixed;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  overflow: hidden;
  z-index: 9999;
  pointer-events: none; /* 下の操作を妨げない */
}
.env-ribbon > span {
  position: absolute;
  top: 7px;
  right: -30px;
  width: 96px;
  transform: rotate(45deg);
  text-align: center;
  background: #8b5cf6;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 2px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* リボンがトップバー右端の内容（局数・状態）へ被らないよう、非本番時だけ
   ヘッダに右余白を足して内容をリボンの手前へ寄せる（app.jsがenv-nonprod付与）。
   リボンはビューポート右上に固定なので、内容が--content-maxで中央寄せされて
   右端に60px以上の余白ができている広い幅では、そちらを保つ（.topbarの
   padding-inlineを潰して内容を右端へ引き戻さない）。 */
body.env-nonprod .topbar {
  padding-right: max(60px, calc((100% - var(--content-max)) / 2 + 16px));
}
.env-ribbon[hidden] {
  display: none;
}

.settings-hdb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}

.settings-hdb-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

/* マージ方式の説明（選択肢名だけでは衝突時の挙動が読めないため常時表示）。 */
.settings-hdb-mode-help {
  font-size: 0.8rem;
}

/* HAMLOG欄の桁数（実バイト長）。ログブックカード内に出す（実際に効くのは
   最終観測HDB1件の値のため）。既定は畳んでおき、必要なときだけ開く
   （常時出すとHDBカードが縦に伸びて主要な設定が押し下がる）。 */
.settings-hdb-widths {
  align-self: stretch;
  font-size: 0.82rem;
}

.settings-hdb-widths > summary {
  cursor: pointer;
  color: var(--muted);
}

.settings-hdb-widths ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.settings-hdb-widths li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-hdb-width-label {
  min-width: 5.5em;
  font-weight: 600;
}

.settings-hdb-width-value {
  font-variant-numeric: tabular-nums;
}

.settings-hdb-widths p {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
}

.settings-hdb-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
}

/* 設定ハブのチェックボックス（説明文を右カラムへ折り返す。station-coords-toggleと
   同じ視覚言語）。 */
.settings-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  font-size: 0.88rem;
}

.settings-toggle input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
}

.settings-toggle small {
  font-size: 0.78rem;
}

.settings-hdb-toggle input {
  width: auto;
}

.settings-hdb-mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}

.settings-hdb-mode select {
  width: auto;
  min-width: 220px;
}

.pairing-code {
  align-self: stretch;
  background: #0f172a;
  border-radius: 8px;
  color: #f8fafc;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  margin: 12px 0;
  padding: 14px 16px;
  text-align: center;
  user-select: all;
  word-break: break-all;
}

.pairing-steps {
  margin: 12px 0;
  padding-left: 20px;
  font-size: 0.86rem;
}

/* 入手導線。直前の有効期限行と地続きに見えると1文に読めるので、間を空ける。 */
.pairing-install {
  margin-top: 10px;
}

.pairing-steps li {
  margin-bottom: 6px;
}

/* ---- QSO詳細の同期操作＋競合チップ（PWA_IA_REDESIGN.md 5.2） ---- */

/* ⓘポップアップ（.help-popup）の位置基準。操作ボタン行の幅いっぱいに広げる。 */
.qso-detail-actions {
  position: relative;
}

.qso-detail-actions .help-popup {
  left: 0;
  right: 0;
}

.status.conflict-chip {
  color: var(--danger);
  background: #fdf1f1;
  border: 1px solid #e1adad;
}

.qso-detail-merge-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qso-detail-merge-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.85rem;
}

/* ---- 比較サブビュー（競合解決・再照合の候補採用。PWA_IA_REDESIGN.md 5.2）
   モバイルは欄カードの縦積み、PC幅はauto-fillグリッドで複数カラムに流す。 ---- */

.compare-intro {
  margin: 0;
}

.compare-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

@media (max-width: 480px) {
  .compare-fields {
    grid-template-columns: 1fr;
  }
}

.compare-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.compare-field-diff {
  border-color: #dfcb88;
  background: #fffdf4;
}

.compare-field-label {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
}

.compare-version {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.88rem;
}

.compare-version-label {
  flex: 0 0 9em;
  font-size: 0.76rem;
  color: var(--muted);
}

.compare-version-value {
  word-break: break-all;
}

.compare-field-diff .compare-version-value {
  font-weight: 650;
}

.compare-manual {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.compare-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}

.compare-radio input {
  width: auto;
  margin: 0;
}

.compare-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}

.compare-candidate {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.compare-candidate-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

/* 直近書き戻しジョブの失敗理由（エージェント報告のresult_message） */
.qso-detail-failure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #e1adad;
  border-radius: 8px;
  background: #fdf1f1;
  font-size: 0.85rem;
}

.qso-detail-failure-label {
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--danger);
}

.qso-detail-failure-message {
  color: var(--text);
  word-break: break-all;
  white-space: pre-wrap;
}

/* 取り込めなかったレコード（HDB必須項目欠落。migration 0022） */
.settings-subsection-title {
  margin: 6px 0 0;
  font-size: 0.86rem;
  font-weight: 650;
}

.settings-import-issues {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-import-block {
  padding: 8px 10px;
  border: 1px solid #e1adad;
  border-radius: 8px;
  background: #fdf1f1;
}

.settings-import-block-title {
  color: var(--danger);
  font-size: 0.86rem;
  font-weight: 650;
}

.settings-import-skip-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.82rem;
  line-height: 1.6;
}

.settings-import-skip-head {
  font-weight: 650;
}

/* ---- UDP取り逃がしの確認（PWA_IA_REDESIGN.md 5.3） ---- */

/* button.secondary（0,1,1）に負けないよう要素セレクタを併記する
   （クラス単独だと背景が#fffのままになる。実機検証で判明）。 */
button.udp-open-button {
  min-height: 30px;
  padding: 3px 10px;
  font-size: 0.8rem;
  color: var(--warn);
  border-color: #dfcb88;
  background: #fff8df;
}

.udp-open-button[hidden] {
  display: none;
}

.udp-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

.udp-candidate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.udp-candidate-head {
  font-weight: 650;
  font-size: 0.9rem;
}

.udp-candidate-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.udp-candidate-actions button {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.82rem;
}

/* ---- 規約・ポリシー（同意ゲート・設定リンク）とアカウント削除 ----
   EULA_ROLLOUT_PLAN.md F1〜F3。[hidden]はauthorのdisplay系指定に負けるため、
   オーバーレイ側では毎回明示的に打ち消す（このファイル既知の落とし穴）。 */

.login-gate-legal {
  font-size: 0.85rem;
  margin-top: 4px;
}

/* 同意ゲートはloginGateのカードを使い回すが、読ませる文章とチェックが入るので
   幅を広げ、左寄せにし、文書が伸びても画面内で収まるようにする。 */
.legal-gate-card {
  /* 狭い画面で画面端に張り付かないよう、余白ぶんを引いた幅で止める。 */
  max-width: min(440px, calc(100vw - 24px));
  text-align: left;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.legal-gate-title {
  font-size: 1.15rem;
  margin: 0;
}

.legal-gate-documents {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 4px 0;
  padding: 0;
}

.legal-gate-documents li {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.legal-gate-documents .legal-gate-document-version {
  color: var(--muted);
  font-size: 0.8rem;
  margin-left: 6px;
}

.legal-gate-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* このファイル冒頭の `input, select, textarea { width:100%; min-height:38px }` は
   チェックボックスにも効く。放置するとチェックボックスが全幅38pxの箱に伸び、
   カードが縦に膨れて同意ボタンが画面外へ落ちる（2026-07-25に実機で踏んだ）。
   type指定で明示的に打ち消す。 */
.legal-gate-check input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin-top: 3px;
  flex: 0 0 auto;
}

.legal-gate-decline {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* 文中に混ぜる操作（ログアウト・削除導線）。buttonの見た目をリンクへ寄せる。 */
.link-button {
  background: none;
  border: 0;
  color: #1d4ed8;
  cursor: pointer;
  font: inherit;
  min-height: 0;
  padding: 0;
  text-decoration: underline;
}

.settings-legal-links {
  font-size: 0.9rem;
}

.settings-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0 4px;
}

/* アカウント削除ダイアログ。設定画面からも同意ゲートからも開くため、
   既存の最大z-index（60）より上に重ねる。 */
.account-deletion-dialog {
  position: fixed;
  inset: 0;
  background: rgba(24, 32, 38, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 70;
}

.account-deletion-dialog[hidden] {
  display: none;
}

.account-deletion-sheet {
  background: var(--panel);
  border-radius: 12px;
  padding: 18px;
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  display: grid;
  gap: 10px;
}

.account-deletion-sheet h2 {
  font-size: 1.1rem;
  margin: 0;
}

.account-deletion-targets {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.account-deletion-step {
  display: grid;
  gap: 8px;
}

.account-deletion-step[hidden] {
  display: none;
}

.account-deletion-step input[type="email"] {
  width: 100%;
}

/* ---- QSO一括編集（QSO_BULK_EDIT_DESIGN.md §3・§4） ---- */

/* 選択モードのトグル（ログ見出し行。件数・表示基準ピルの右隣）。見出し行の
   高さを押し広げないようコンパクトにする。 */
button#logSelectButton {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 3px 12px;
  font-size: 0.84rem;
  white-space: nowrap;
}

/* クラス単独ではbutton.secondaryの背景に負けるため
   要素+ID併記で詳細度を確保する（7.2の既知の罠）。 */
button#logSelectButton.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 行頭のチェック印。行そのものが<button>なので実inputは使わず装飾で表現し、
   選択状態は行のaria-pressedが伝える。 */
.log-select-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  font-size: 0.8rem;
  line-height: 1;
}

.log-item.bulk-selected .log-select-mark {
  border-color: var(--accent);
  background: var(--accent);
}

.log-item.bulk-selected .log-select-mark::after {
  content: "✓";
  color: #fff;
  font-weight: 700;
}

.log-item.bulk-selected {
  background: #e3eef3;
  border-color: var(--accent);
}

/* 下端固定の選択バー。モバイルはグローバルナビの上、PC幅は画面下端近くに浮かべる。
   全幅バンドではなく浮きカードなので、内容幅規律ではなくmax-widthで画面内へ収める。 */
.log-selection-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  /* シート（50）より下・グローバルナビ（30）と同格。選択バーはシートに覆われてよい。 */
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
}

/* display:flexはUA既定の[hidden]{display:none}に勝ってしまう（既知の罠）。 */
.log-selection-bar[hidden] {
  display: none;
}

.log-selection-count {
  font-weight: 650;
  font-size: 0.88rem;
  white-space: nowrap;
}

.log-selection-bar button {
  min-height: 34px;
  padding: 5px 10px;
  font-size: 0.84rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  /* 下部固定のグローバルナビ（50px+safe-area）の上へ載せる。 */
  .log-selection-bar {
    bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

/* 一括編集シート。中身が縦に長くなり得るので個別にスクロール容器を持つ
   （PWA_IA_REDESIGN.md 2.3。test_pwa_layout_invariantsの許可リストに登録済み）。 */
.bulk-edit-sheet {
  width: min(440px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  display: grid;
  gap: 10px;
}

.bulk-edit-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.bulk-edit-subtitle {
  font-size: 0.9rem;
  margin: 0;
}

.bulk-edit-sheet label {
  display: grid;
  gap: 2px;
  font-size: 0.82rem;
}

.bulk-edit-sheet .bulk-edit-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
}

/* このファイル冒頭の input { width:100%; min-height:38px } はチェックボックスにも
   効き、放置すると全幅38pxの箱に伸びてシートが縦に膨れる（既知の罠。type指定で打ち消す）。 */
.bulk-edit-check input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
}

/* 失敗の理由は説明文と見た目を変える（淡色のままだと読み飛ばされる。station-editと同じ規律）。 */
.bulk-edit-sheet .station-sheet-message.is-error {
  color: var(--danger);
  font-weight: 600;
}