/* ==========================================================
   SIGABA-EX スタイルシート
   ダーク配色を :root 変数として定義し、.theme-light クラスが
   html要素に付与された場合のみライト配色に上書きする。
   ========================================================== */

* { box-sizing: border-box; }

:root {
  --bg: #10141a;
  --fg: #d7e0e6;

  --titlebar-bg: #1c232c;
  --titlebar-border: #4a3f22;
  --accent: #e8b95c;
  --subtitle-fg: #7d8894;
  --rotor-dot: #f0c95f;
  --rotor-dot-glow: #f0c95f88;

  --theme-toggle-bg: #262f3a;
  --theme-toggle-fg: #cfd8e0;
  --theme-toggle-border: #3a4552;

  --keybar-bg: #181e26;
  --keybar-border: #2a323d;
  --keybar-label-fg: #9fb0bd;

  --key-input-bg: #0d1116;
  --key-input-fg: #7CFC9A;
  --key-input-border: #3a4552;

  --small-btn-bg: #262f3a;
  --small-btn-fg: #cfd8e0;
  --small-btn-border: #3a4552;

  --lamp-off: #55302b;
  --lamp-ok: #3fe07a;
  --lamp-bad: #e0523f;

  --key-status-fg: #8a97a3;
  --strength-weak: #e0836f;
  --strength-mid: #e8b95c;
  --strength-strong: #7CFC9A;

  --panel-bg: #161b22;
  --panel-border: #2a323d;
  --panel-header-fg: #e8b95c;

  --plain-area-bg: #0e1319;
  --plain-area-fg: #d7e0e6;
  --plain-area-border: #2a323d;

  --cipher-area-bg: #0a1712;
  --cipher-area-fg: #7CFC9A;
  --cipher-area-border: #234a34;

  --stat-text-fg: #647180;

  --main-btn-bg: #3a4a3f;
  --main-btn-fg: #d7e0e6;
  --main-btn-border: #4a6a52;

  --divider-bg: #2a323d;

  --statusbar-bg: #141920;
  --statusbar-fg: #8a97a3;
  --statusbar-border: #2a323d;
  --statusbar-err: #e0836f;
  --statusbar-ok: #7CFC9A;
}

html.theme-light {
  --bg: #eef1f4;
  --fg: #202833;

  --titlebar-bg: #ffffff;
  --titlebar-border: #c9a94a;
  --accent: #a6771f;
  --subtitle-fg: #4a5560;

  --theme-toggle-bg: #e7ebef;
  --theme-toggle-fg: #2a323d;
  --theme-toggle-border: #c3ccd4;

  --keybar-bg: #ffffff;
  --keybar-border: #d3d8de;
  --keybar-label-fg: #4a5560;

  --key-input-bg: #ffffff;
  --key-input-fg: #1a6b34;
  --key-input-border: #c3ccd4;

  --small-btn-bg: #e7ebef;
  --small-btn-fg: #2a323d;
  --small-btn-border: #c3ccd4;

  --lamp-off: #d99b8f;

  --key-status-fg: #5c6773;
  --strength-weak: #c0392b;
  --strength-mid: #a6771f;
  --strength-strong: #146b2c;

  --panel-bg: #ffffff;
  --panel-border: #d3d8de;
  --panel-header-fg: #a6771f;

  --plain-area-bg: #f7f9fb;
  --plain-area-fg: #202833;
  --plain-area-border: #d3d8de;

  --cipher-area-bg: #f0f7f1;
  --cipher-area-fg: #146b2c;
  --cipher-area-border: #bfe0c6;

  --stat-text-fg: #7a8794;

  --main-btn-bg: #cfe3d3;
  --main-btn-fg: #202833;
  --main-btn-border: #7fae8a;

  --divider-bg: #d3d8de;

  --statusbar-bg: #e6e9ed;
  --statusbar-fg: #5c6773;
  --statusbar-border: #d3d8de;
  --statusbar-err: #c0392b;
  --statusbar-ok: #146b2c;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(11px, 1.05vw, 15px);
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- Title bar ---------- */
.titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 8px;
  background: var(--titlebar-bg);
  border-bottom: 2px solid var(--titlebar-border);
  position: relative;
}
.titlebar .rotor-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rotor-dot);
  box-shadow: 0 0 4px var(--rotor-dot-glow);
}
.titlebar h1 {
  margin: 0;
  font-size: 1.1em;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
}
.titlebar .subtitle {
  font-size: 0.75em;
  color: var(--subtitle-fg);
  letter-spacing: 0.05em;
}
.theme-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -11px;
  background: var(--theme-toggle-bg);
  color: var(--theme-toggle-fg);
  border: 1px solid var(--theme-toggle-border);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.75em;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Key bar ---------- */
.keybar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 10px;
  background: var(--keybar-bg);
  border-bottom: 2px solid var(--keybar-border);
}
.keybar label {
  color: var(--keybar-label-fg);
  font-size: 0.85em;
}
#keyInput {
  width: 22em;
  max-width: 100%;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.05em;
  letter-spacing: 0.18em;
  text-align: center;
  background: var(--key-input-bg);
  color: var(--key-input-fg);
  border: 1px solid var(--key-input-border);
  border-radius: 3px;
  padding: 4px 6px;
}
#keyInput:focus { outline: none; border-color: var(--accent); }
.small-btn {
  background: var(--small-btn-bg);
  color: var(--small-btn-fg);
  border: 1px solid var(--small-btn-border);
  border-radius: 3px;
  padding: 3px 9px;
  font-size: 0.8em;
  cursor: pointer;
}
.small-btn:hover { border-color: var(--accent); color: var(--accent); }
.small-btn:active { transform: translateY(1px); }
.small-btn:focus-visible,
.main-btn:focus-visible,
.theme-toggle:focus-visible,
#keyInput:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lamp {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
  background: var(--lamp-off);
  box-shadow: 0 0 4px #00000088 inset;
}
.lamp.ok { background: var(--lamp-ok); box-shadow: 0 0 8px var(--lamp-ok); }
.lamp.bad { background: var(--lamp-bad); box-shadow: 0 0 8px var(--lamp-bad); }
#keyStatus { font-size: 0.8em; color: var(--key-status-fg); min-width: 6.5em; }
#keyStrength { font-size: 0.78em; min-width: 6em; font-weight: bold; }
/* 鍵未入力時（class=""）はダミーの余白を確保しない。
   これを入れないと、中身が空でもmin-widthぶんの空白がそのまま残り、
   「未入力 (0/16-32)」とボタン群の間に不自然な隙間ができてしまう。 */
#keyStrength:empty,
#keyStrength[class=""] { min-width: 1em; }
#keyStrength.weak { color: var(--strength-weak); }
#keyStrength.mid { color: var(--strength-mid); }
#keyStrength.strong { color: var(--strength-strong); }

/* ---------- Main area ---------- */
.main {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  padding: 6px;
  gap: 6px;
}
.panel {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 6px;
  gap: 3px;
}
.panel-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.1;
}
.panel-header h2 {
  margin: 0;
  font-size: 0.9em;
  color: var(--panel-header-fg);
  letter-spacing: 0.05em;
}
.panel textarea {
  flex: 1 1 0;
  min-height: 12.5em; /* 行の高さ(1.4em)×8行 + 余白ぶん を目安に確保 */
  width: 100%;
  resize: none;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1em;
  line-height: 1.4;
  border-radius: 4px;
  padding: 6px 8px;
  overflow-y: auto;
}
.plain-area {
  background: var(--plain-area-bg);
  color: var(--plain-area-fg);
  border: 1px solid var(--plain-area-border);
}
.cipher-area {
  background: var(--cipher-area-bg);
  color: var(--cipher-area-fg);
  border: 1px solid var(--cipher-area-border);
  letter-spacing: 0.03em;
}
.btn-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin: 1px 0;
  flex-wrap: wrap;
}
.btn-row button { flex: 0 0 auto; }
.stat-text {
  font-size: 0.72em;
  color: var(--stat-text-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-btn {
  background: var(--main-btn-bg);
  color: var(--main-btn-fg);
  border: 1px solid var(--main-btn-border);
  border-radius: 4px;
  padding: 4px 16px;
  font-size: 0.88em;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.main-btn:hover { border-color: var(--strength-strong); color: var(--strength-strong); }
.main-btn:active { transform: translateY(1px); }

.divider {
  flex: 0 0 auto;
  width: 1px;
  background: var(--divider-bg);
}

/* ---------- Status bar ---------- */
.statusbar {
  flex: 0 0 auto;
  padding: 4px 12px;
  font-size: 0.78em;
  color: var(--statusbar-fg);
  background: var(--statusbar-bg);
  border-top: 1px solid var(--statusbar-border);
  min-height: 1.6em;
}
.statusbar.err { color: var(--statusbar-err); }
.statusbar.okmsg { color: var(--statusbar-ok); }

/* ---------- Footer link (index.html最下部の注意点ページへの導線) ---------- */
.footer-links {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 6px 12px;
  background: var(--statusbar-bg);
  border-top: 1px solid var(--statusbar-border);
}
.footer-link {
  font-size: 0.75em;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.footer-link:hover { text-decoration: underline; }
.footer-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Doc page (security.html: 使用上の注意ページ) ---------- */
.doc-page {
  flex: 1 1 auto;
  overflow-y: auto;
  width: 100%;
  max-width: 46em;
  margin: 0 auto;
  padding: 16px 20px 40px;
  line-height: 1.7;
  box-sizing: border-box;
}
.doc-back {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.85em;
  color: var(--accent);
  text-decoration: none;
}
.doc-back:hover { text-decoration: underline; }
.doc-page h2 {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 1.2em;
}
.doc-page h2 + h2,
.doc-page p + h2,
.doc-page ul + h2,
.doc-page div + h2 {
  margin-top: 32px;
}
.doc-page h3 {
  margin: 28px 0 8px;
  color: var(--panel-header-fg);
  font-size: 1.02em;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 4px;
}
.doc-page p,
.doc-page li {
  font-size: 0.92em;
  color: var(--fg);
}
.doc-page ul { padding-left: 1.3em; }
.doc-page li { margin-bottom: 8px; }
.doc-usage {
  padding-left: 1.3em;
  counter-reset: doc-usage-counter;
}
.doc-usage li {
  margin-bottom: 10px;
  line-height: 1.6;
}
.doc-warning {
  margin: 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--statusbar-err);
  border-left: 4px solid var(--statusbar-err);
  border-radius: 4px;
  background: var(--panel-bg);
}
.doc-warning p {
  margin: 0;
  font-size: 0.9em;
  color: var(--statusbar-err);
  font-weight: bold;
  line-height: 1.7;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
  margin: 10px 0;
}
.doc-table th,
.doc-table td {
  border: 1px solid var(--panel-border);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.doc-table th {
  background: var(--panel-bg);
  color: var(--panel-header-fg);
}
.doc-note {
  margin-top: 24px;
  font-size: 0.82em;
  color: var(--stat-text-fg);
}
.doc-note a { color: var(--accent); }

@media (max-width: 720px) {
  .doc-page { padding: 12px 14px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================
   スマホ幅（720px以下）向けの上書き。
   このブロックは意図的にファイルの最後に置いている。CSSは同じ詳細度
   (specificity)の規則が複数マッチする場合、後に書かれた方が勝つため、
   ファイルの途中に置くと、後ろにある通常(非メディアクエリ)の規則に
   上書きされて無効化されてしまう。

   実機（iPhone Safari / Android Chromium系）で確認された実際の不具合：
   1つの.panel内に flex:1 1 0 のテキストエリアが2つ並んでいる状態で、
   .panel自体の高さを「内容量に合わせて自動計算」(flex: 0 0 auto)させると、
   一部のモバイルブラウザは1つ目のテキストエリアの高さは正しく計算する一方、
   2つ目以降を高さ0として扱ってしまう（flex-basis:0の複数アイテムを
   内容依存(auto)の高さを持つフレックスコンテナに入れたときの実装差異）。
   これが「暗号文/平文の出力欄だけが極端に潰れる、または消える」原因だった。

   対策：モバイルではテキストエリアの高さを flex-grow に頼らず、
   固定値(height/min-height)で明示的に指定する。これにより上記の
   自動計算のあいまいさを排除し、ブラウザ間の実装差異の影響を受けなくする。
   - html/body/#app の高さは 100% 固定ではなく min-height: 100dvh
     （動的ビューポート単位。アドレスバーの出し引きに追従する。
     dvh未対応の古いブラウザ向けに 100vh を先にフォールバックとして書く）
   - .panel は「.mainの50%ずつ」ではなく内容量なりの高さ(flex: 0 0 auto)
   - .panel textarea は flex-grow をやめ、固定の height/min-height を指定
   ========================================================== */
@media (max-width: 720px) {
  html, body {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  #app {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .main {
    flex-direction: column;
    overflow-y: visible;
  }
  .panel {
    flex: 0 0 auto;
  }
  .panel textarea {
    flex: 0 0 auto;
    height: 10em;
    min-height: 10em;
  }
  .divider {
    width: auto;
    height: 1px;
  }
}