/* 意図: 既存デザインシステムがないため、色やフォントをハードコードせず
   ブラウザ標準スタイルを活かしつつ、余白と整列のみを調整する。 */

/* 全体の文字サイズを1ptだけ小さくする（要求仕様） */
body {
  font-size: calc(1rem - 1pt);
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 12px;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 8px 0;
}

.header > h1 {
  margin: 0;
  flex: 0 0 auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.header-right .header-product {
  white-space: nowrap;
}

.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  overflow: hidden;
}

.notify-area {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(960px, calc(100vw - 24px));
  pointer-events: none;
}

/* ページ下部: アプリのバージョン表示 */
.footer {
  margin: 8px 0 0 0;
  text-align: right;
  font-size: 0.92em;
  opacity: 0.75;
}

.notify {
  border: 1px solid currentColor;
  border-left-width: 6px;
  border-left-color: var(--notify-accent, currentColor);
  border-radius: 8px;
  background: var(--notify-bg, Canvas);
  color: CanvasText;
  padding: 10px 12px;
  margin: 0 0 8px 0;
  opacity: 1;
  animation: notifyFadeOut 400ms ease forwards;
  animation-delay: 5s;
  will-change: opacity;
}

/* 起動時警告など: 消さない通知 */
.notify.is-persist {
  animation: none;
}

/* 種別ごとの色（エラー=赤系、成功=緑系） */
.notify.is-error {
  --notify-accent: #B00020;
  --notify-bg: color-mix(in srgb, Canvas 88%, #B00020 12%);
}

.notify.is-success {
  --notify-accent: #0A7D2A;
  --notify-bg: color-mix(in srgb, Canvas 88%, #0A7D2A 12%);
}

.notify.is-warn {
  --notify-accent: #8A6D00;
  --notify-bg: color-mix(in srgb, Canvas 88%, #8A6D00 12%);
}

@keyframes notifyFadeOut {
  to {
    opacity: 0;
  }
}

.notify-title {
  color: var(--notify-accent, currentColor);
  font-weight: 700;
  margin: 0 0 4px 0;
}

.notify-body {
  margin: 0;
  white-space: pre-wrap;
}

.panel {
  margin: 0;
  padding: 8px;
  border: 1px solid currentColor;
  overflow: auto;
  min-height: 0;
}

.panel > h2 {
  margin: 0 0 6px 0;
}

/* 設定: タイトル右に基本レジスタボタン */
.panel-config .config-titlebar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 6px 0;
}

.panel-config .config-titlebar h2 {
  margin: 0;
}

.panel-config .config-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-config .config-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.panel-config .config-model {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.panel-config .hint.hint-mode {
  align-self: center;
  white-space: nowrap;
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 6px 0;
}

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

/* 2.0系: 左（0x09/0x0A）・右（0xA0〜0xA4）を固定の2カラムで配置 */
.v2-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 10px;
}

/* 2.0系: 左（0x09側）と右（0xA0側）の区切り線 */
.v2-right {
  position: relative;
  padding-left: 14px;
}

.v2-right::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: currentColor;
  opacity: 0.35;
}

@media (max-width: 820px) {
  .v2-layout {
    grid-template-columns: 1fr;
  }

  /* 1カラム時は縦線を消す */
  .v2-right {
    padding-left: 0;
  }

  .v2-right::before {
    display: none;
  }
}

.status-reg {
  border: none;
  padding: 0;
  margin: 10px 0;
}

.status-reg .reg-head {
  margin: 0 0 6px 0;
}

.bitgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.status-note {
  margin: 6px 0 0 0;
}

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

/* FW別の項目をJSで切替（hidden属性） */
[hidden] {
  display: none !important;
}

textarea {
  width: 100%;
}

.log {
  /* 画面が動かないよう、最初から固定高さを確保して内部スクロールにする */
  height: 22vh;
  min-height: 22vh;
  padding: 10px;
  border: 1px solid currentColor;
  overflow-x: auto;
  overflow-y: auto;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.panel-log {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px;
}

.panel-log .log-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px 0;
}

.panel-log .log-titlebar > h2 {
  margin: 0;
}

.panel-log .log-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.panel-log .log {
  flex: 1 1 auto;
  margin: 0;
}

.hint {
  margin: 6px 0;
}

/* 設定（Config/DeepSleep）: 余白と整列を詰める（他パネルへ影響させない） */
.panel-config .row {
  margin: 4px 0;
  gap: 10px;
}

.panel-config fieldset {
  margin: 6px 0;
  padding: 6px 8px 8px;
}

.panel-config legend {
  padding: 0 6px;
}

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

/* 0x00〜0x08（基本レジスタ）は縦に並べる */
.panel-config .grid.grid-basicregs {
  grid-template-columns: 1fr;
}

/* 基本レジスタ: 0x00/0x01は左右、0x02以降は各1行 */
.panel-config .grid-basicregs .basic-pair {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
}

.panel-config .grid-basicregs .basic-pair > label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.panel-config .grid-basicregs .basic-note {
  flex: 0 0 auto;
  white-space: nowrap;
}

.panel-config .grid-basicregs .basic-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.panel-config .grid-basicregs .basic-line.hint-spec-links {
  flex-wrap: wrap;
}

/* REG3など「2行に分けた行」は、REG名+HEX分だけインデントして揃える */
.panel-config .grid-basicregs .basic-line.basic-subline {
  padding-left: calc(10ch + 4ch + 20px);
}

.panel-config .grid-basicregs .basic-name {
  min-width: 10ch;
  white-space: nowrap;
}

.panel-config .grid-basicregs .basic-line > .hint {
  margin: 0;
  white-space: nowrap;
}

.panel-config .grid-basicregs label.inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.panel-config .grid-basicregs label.check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.panel-config .grid-basicregs select {
  max-width: 220px;
}

/* Air Data Rate は選択肢が長いので枠を広げる（他のselectには影響させない） */
.panel-config #reg0_air {
  width: 330px;
  max-width: 330px;
}

/* REG見出し（計算結果）行は「見出し + HEX」を横並び固定 */
.panel-config .reg-head {
  flex-wrap: nowrap;
  align-items: baseline;
}

.panel-config .reg-head > :first-child {
  min-width: 10ch;
}

/* 通常の項目は縦並び（ラベル → 入力）で崩れにくくする */
.panel-config label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* チェック項目だけ横並び */
.panel-config label.check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.panel-config label > input:not([type="checkbox"]):not([type="radio"]),
.panel-config label > select {
  width: 100%;
  max-width: 320px;
}

/* 1byte(2桁HEX)入力は固定幅にして間延びを防ぐ */
.panel-config input[maxlength="2"] {
  width: 4ch;
  max-width: 4ch;
}

/* 通信暗号キーは未読出(00)でも見やすくする（disabledのグレー化を抑制） */
.panel-config #reg06:disabled,
.panel-config #reg07:disabled {
  color: currentColor;
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

/* label直下の入力は別ルールで幅が広がるため、2桁HEXは同じ幅に強制 */
.panel-config label > input[maxlength="2"]:not([type="checkbox"]):not([type="radio"]) {
  width: 4ch;
  max-width: 4ch;
}

.panel-config .hint {
  margin: 2px 0;
}

/* 通信暗号キーの注釈だけ少し小さく */
.panel-config .hint.hint-crypt {
  font-size: 0.75em;
}

/* 送信方法は選択肢が長いので枠を約1.5倍に広げる */
.panel-config #reg3_txMethod {
  width: 330px;
  max-width: 330px;
}


/* 0x02 REG0直下のSF/BW説明は、REG名+HEX分だけインデントする */
.panel-config .hint.hint-sf-bw {
  padding-left: calc(10ch + 4ch + 20px);
}

.panel-config details {
  margin: 4px 0;
}

.panel-config details > summary {
  cursor: pointer;
}

/* 設定: 基本レジスタ と 2.0系 を左右に並べる */
.panel-config .config-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
}

/* VERSION右にFW判定結果を表示 */
.panel-config .version-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-config .version-inline > label {
  flex: 0 0 auto;
}

.panel-config .fw-inline {
  white-space: nowrap;
}

.footer {
  margin: 8px 0 0 0;
}

/* 1920×1080想定: 2カラムで1画面に収める */
@media (min-width: 1200px) {
  .container {
    max-width: 1800px;
  }

  .layout {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "test log"
      "config config";
  }

  .panel-test { grid-area: test; }
  .panel-config { grid-area: config; }
  .panel-log { grid-area: log; }

  /* 右カラムは縦方向が詰まりやすいので少し圧縮 */
  .panel-test textarea {
    min-height: 70px;
  }

  /* 1920×1080で設定を1画面に寄せる：ラベル+入力を1行化して縦を圧縮 */
  .panel-config {
    padding: 6px;
  }

  .panel-config .grid {
    gap: 4px 8px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  /* デスクトップ上書きでも基本レジスタは1列固定 */
  .panel-config .grid.grid-basicregs {
    grid-template-columns: 1fr;
  }

  .panel-config .grid-basicregs select {
    max-width: 200px;
  }

  .panel-config label:not(.check) {
    display: grid;
    grid-template-columns: 1fr minmax(8ch, 180px);
    align-items: center;
    gap: 6px;
  }

  .panel-config label.check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .panel-config label > input:not([type="checkbox"]):not([type="radio"]),
  .panel-config label > select {
    width: 100%;
    max-width: 180px;
  }


  .panel-config input[type="number"] {
    width: 10ch;
    max-width: 10ch;
  }

  .panel-config .config-two {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* 2カラム時は列幅が狭いので、基本レジスタのselectを少し短く */
  .panel-config .config-two .grid-basicregs select {
    max-width: 160px;
  }
}