/* ============================================================================
 * serial-monitor.css — Web Serial シリアルモニタ／プロッタ（t-a6f63e4f）
 *
 * 【置き場所について】
 *   本来サイトの流儀では独自パーツの CSS は assets/css/extended/custom-parts.css
 *   に置く（t-38e2919d §4）。ただし本タスクのスコープ許可が
 *   static/js/tools/ と content/tools/ のみだったため、暫定でここに置いている。
 *   custom-parts.css へ移す場合はこのファイルの中身をそのまま末尾へ追記し、
 *   content/tools/serial-monitor/index.md の <link> 行を削除すればよい。
 *
 * 【方針】
 *   ・すべて .ewsm 配下にスコープする（既存ページに一切干渉させない）
 *   ・色は CSS 変数に集約し、body.dark で差し替える。
 *     canvas も getComputedStyle でこの変数を読むので、テーマ切替に追従する。
 *   ・横スクロールを出さない（はみ出す可能性のある箇所は個別に overflow 指定）
 * ========================================================================== */

.ewsm {
  --ewsm-card-bg: #ffffff;
  --ewsm-panel-bg: #fffdf8;
  --ewsm-border: #ecd9b0;
  --ewsm-border-soft: #f0dfc0;
  --ewsm-field-border: #e3cfa4;
  --ewsm-accent: #b25f00;
  --ewsm-accent-bg: #fff3e0;
  --ewsm-accent-border: #ffd8a8;
  --ewsm-text: #2c2c2c;
  --ewsm-muted: #6b6152;
  --ewsm-label: #5a4a2f;

  --ewsm-term-bg: #fbf7ef;
  --ewsm-term-text: #33302a;
  --ewsm-term-tx: #0f6f4f;      /* 送信行 */
  --ewsm-term-sys: #8a6d3b;     /* システムメッセージ */

  --ewsm-plot-bg: #fbf7ef;
  --ewsm-plot-grid: #ece0c8;
  --ewsm-plot-axis: #8a8071;

  --ewsm-ok: #2e7d32;
  --ewsm-ng: #b3261e;
  --ewsm-warn-bg: #fffbeb;
  --ewsm-warn-fg: #b45309;
  --ewsm-warn-border: #f59e0b;

  /* 系列色（最大8系列。9本目以降は循環する） */
  --ewsm-s0: #d1495b;
  --ewsm-s1: #2a6f97;
  --ewsm-s2: #2e7d32;
  --ewsm-s3: #b25f00;
  --ewsm-s4: #6a4c93;
  --ewsm-s5: #0f8b8d;
  --ewsm-s6: #9a6a00;
  --ewsm-s7: #7d5a50;
}

body.dark .ewsm {
  --ewsm-card-bg: #262626;
  --ewsm-panel-bg: #232323;
  --ewsm-border: #3f3f3f;
  --ewsm-border-soft: #3a3a3a;
  --ewsm-field-border: #4a4a4a;
  --ewsm-accent: #ffbf69;
  --ewsm-accent-bg: #33281a;
  --ewsm-accent-border: #5a4322;
  --ewsm-text: #e8e8e8;
  --ewsm-muted: #a9a293;
  --ewsm-label: #cdc3b0;

  --ewsm-term-bg: #1c1c1c;
  --ewsm-term-text: #ddd8cd;
  --ewsm-term-tx: #6ddba8;
  --ewsm-term-sys: #b9a274;

  --ewsm-plot-bg: #1c1c1c;
  --ewsm-plot-grid: #383838;
  --ewsm-plot-axis: #9c948a;

  --ewsm-ok: #7bd88f;
  --ewsm-ng: #ff8a80;
  --ewsm-warn-bg: #2a2211;
  --ewsm-warn-fg: #fcd34d;
  --ewsm-warn-border: #b45309;

  --ewsm-s0: #ff8fa3;
  --ewsm-s1: #7cc4ff;
  --ewsm-s2: #7bd88f;
  --ewsm-s3: #ffbf69;
  --ewsm-s4: #c8a2ff;
  --ewsm-s5: #5fd8d8;
  --ewsm-s6: #ffd76e;
  --ewsm-s7: #d0a89c;
}

/* ---- 外枠 -------------------------------------------------------------- */

.ewsm {
  margin: 1.4rem 0 1.8rem;
  padding: 1.2rem;
  background: var(--ewsm-card-bg);
  border: 1px solid var(--ewsm-border);
  border-radius: 12px;
  color: var(--ewsm-text);
  box-shadow: 0 1px 3px rgba(120, 90, 30, 0.08);
}
body.dark .ewsm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); color-scheme: dark; }

.ewsm *,
.ewsm *::before,
.ewsm *::after { box-sizing: border-box; }

.ewsm__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.ewsm__badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ewsm-accent);
  background: var(--ewsm-accent-bg);
  border: 1px solid var(--ewsm-accent-border);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
}
.ewsm__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ewsm-muted);
}
.ewsm__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--ewsm-muted);
  flex: 0 0 auto;
}
.ewsm__status--on   .ewsm__dot { background: var(--ewsm-ok); }
.ewsm__status--demo .ewsm__dot { background: var(--ewsm-accent); }
.ewsm__status--err  .ewsm__dot { background: var(--ewsm-ng); }
.ewsm__status--on   { color: var(--ewsm-ok); }
.ewsm__status--demo { color: var(--ewsm-accent); }
.ewsm__status--err  { color: var(--ewsm-ng); }

/* ---- コントロール ------------------------------------------------------ */

.ewsm__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.ewsm__group {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}
.ewsm__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ewsm-label);
  white-space: nowrap;
}
.ewsm select,
.ewsm input[type="text"],
.ewsm input[type="number"] {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.34rem 0.5rem;
  color: var(--ewsm-text);
  background: var(--ewsm-panel-bg);
  border: 1px solid var(--ewsm-field-border);
  border-radius: 8px;
  max-width: 100%;
}
.ewsm select:focus,
.ewsm input:focus,
.ewsm button:focus {
  outline: 2px solid var(--ewsm-accent);
  outline-offset: 1px;
}
.ewsm button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.36rem 0.85rem;
  cursor: pointer;
  color: var(--ewsm-accent);
  background: var(--ewsm-card-bg);
  border: 1px solid var(--ewsm-accent-border);
  border-radius: 8px;
  white-space: nowrap;
}
.ewsm button:hover:not(:disabled) { background: var(--ewsm-accent-bg); }
.ewsm button:disabled { opacity: 0.45; cursor: not-allowed; }
.ewsm button.ewsm--primary {
  color: #fff;
  background: var(--ewsm-accent);
  border-color: var(--ewsm-accent);
}
body.dark .ewsm button.ewsm--primary { color: #1c1c1c; }
.ewsm button.ewsm--primary:hover:not(:disabled) { filter: brightness(1.08); }
.ewsm button.ewsm--on {
  color: var(--ewsm-accent);
  background: var(--ewsm-accent-bg);
  border-color: var(--ewsm-accent);
}

/* ---- プロッタ ---------------------------------------------------------- */

.ewsm__plotwrap {
  position: relative;
  margin-bottom: 0.5rem;
  background: var(--ewsm-plot-bg);
  border: 1px solid var(--ewsm-border-soft);
  border-radius: 8px;
  overflow: hidden;
}
.ewsm__canvas {
  display: block;
  width: 100%;
  height: 260px;
}
.ewsm__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
  color: var(--ewsm-muted);
  pointer-events: none;
}
.ewsm__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  min-height: 1.4rem;
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  color: var(--ewsm-muted);
}
.ewsm__series {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-variant-numeric: tabular-nums;
}
.ewsm__swatch {
  width: 0.85rem;
  height: 0.2rem;
  border-radius: 2px;
  flex: 0 0 auto;
}
.ewsm__sname { font-weight: 600; color: var(--ewsm-text); }

/* ---- コンソール -------------------------------------------------------- */

.ewsm__console {
  height: 220px;
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.75rem;
  overflow: auto;
  overscroll-behavior: contain;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ewsm-term-text);
  background: var(--ewsm-term-bg);
  border: 1px solid var(--ewsm-border-soft);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.ewsm__line { display: block; }
.ewsm__line--tx  { color: var(--ewsm-term-tx); }
.ewsm__line--sys { color: var(--ewsm-term-sys); font-style: italic; }

.ewsm__send { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.ewsm__send .ewsm__group--grow { flex: 1 1 14rem; min-width: 0; }
.ewsm__send input[type="text"] { width: 100%; }

/* ---- 注意書き ---------------------------------------------------------- */

.ewsm__notice {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--ewsm-warn-fg);
  background: var(--ewsm-warn-bg);
  border-left: 4px solid var(--ewsm-warn-border);
  border-radius: 6px;
}
.ewsm__notice p { margin: 0 0 0.4rem; }
.ewsm__notice p:last-child { margin-bottom: 0; }
.ewsm__notice code {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  padding: 0.05em 0.3em;
}
body.dark .ewsm__notice code { background: rgba(255, 255, 255, 0.1); }

.ewsm__hint {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--ewsm-muted);
}
.ewsm__stats {
  font-size: 0.75rem;
  color: var(--ewsm-muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  white-space: nowrap;
}

/* ---- 狭い画面 ---------------------------------------------------------- */

@media (max-width: 640px) {
  .ewsm { padding: 0.9rem; }
  .ewsm__bar { gap: 0.5rem; }
  .ewsm__group { flex: 1 1 8.5rem; }
  .ewsm__group select { width: 100%; }
  .ewsm__canvas { height: 200px; }
  .ewsm__console { height: 170px; font-size: 0.74rem; }
  .ewsm__stats { margin-left: 0; flex-basis: 100%; }
}

.ewsm__sval {
  color: var(--ewsm-muted);
  font-variant-numeric: tabular-nums;
}