@charset "utf-8";

:root {
  --ibis-bg: #ffffff;
  --ibis-panel: #f7f9fc;
  --ibis-border: #dde3ec;
  --ibis-text: #3a4250;
  --ibis-muted: #78839a;
  --ibis-grid: #e8ecf3;
  --ibis-axis: #99a3b3;
  --ibis-bitline: #ccd5e3;
  --ibis-accent: #2b6cb0;
  --ibis-eye: #e07b39;
  --ibis-tx: #2b6cb0;
  --ibis-rx: #d9534f;
  --ibis-txdie: #7aa7d9;
  --ibis-rxdie: #e8a09e;
  /* 差動: P / N の片側波形とコモンモード。
     差動波形（--ibis-tx / --ibis-rx）と同時に表示するので、色は必ず分ける */
  --ibis-txp: #7aa7d9;
  --ibis-txn: #9d8fd0;
  --ibis-rxp: #1f9d8f;
  --ibis-rxn: #d98b2b;
  --ibis-cm: #6b46c1;
  --ibis-warn: #b7791f;
  --ibis-ok: #2f855a;
  --ibis-bad: #c53030;
}

body.ibis-page {
  color: var(--ibis-text);
  background: var(--ibis-bg);
}

.ibis-wrap {
  max-width: 1360px;
  margin: 0 auto;
  /* Bootstrap の .row が持つ -15px マージンを飲み込む幅にして横スクロールを防ぐ */
  padding: 0 15px 60px;
}

.ibis-lead {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ibis-muted);
}

/* ------------------------------------------------------------ 読み込み */

.ibis-loader {
  border: 2px dashed var(--ibis-border);
  border-radius: 8px;
  background: var(--ibis-panel);
  padding: 14px;
  transition: border-color .15s, background .15s;
}

.ibis-loader.dragover {
  border-color: var(--ibis-accent);
  background: #eef4fb;
}

.ibis-loader-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ibis-filename {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--ibis-muted);
  word-break: break-all;
}

.ibis-privacy {
  font-size: 0.78rem;
  color: var(--ibis-muted);
  margin: 6px 0 0;
}

/* ------------------------------------------------------------ パネル */

.ibis-panel {
  border: 1px solid var(--ibis-border);
  border-radius: 8px;
  background: var(--ibis-panel);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.ibis-panel h3 {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ibis-muted);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ibis-border);
}

.ibis-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ibis-field > label {
  flex: 0 0 8.5em;
  font-size: 0.82rem;
  margin: 0;
  color: var(--ibis-text);
}

.ibis-field > input,
.ibis-field > select {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.86rem;
  padding: 3px 6px;
  border: 1px solid var(--ibis-border);
  border-radius: 4px;
  background: #fff;
  color: var(--ibis-text);
}

.ibis-field .ibis-unit {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--ibis-muted);
  min-width: 2.4em;
}

.ibis-field-note {
  font-size: 0.74rem;
  color: var(--ibis-muted);
  margin: -4px 0 8px 9.3em;
}

.ibis-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 18px;
}

.ibis-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  margin-right: 12px;
  white-space: nowrap;
}

/* ------------------------------------------------------------ 回路図 */

/* 狭い画面では縮小せず、この枠の中だけ横スクロールさせる */
.ibis-schematic-scroll {
  overflow-x: auto;
  margin: 4px 0 6px;
}

.ibis-schematic {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}

.ibis-schematic text {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  fill: var(--ibis-text);
}

.ibis-schematic .sc-label {
  font-size: 10px;
  fill: var(--ibis-muted);
}

.ibis-schematic .sc-wire {
  stroke: var(--ibis-axis);
  stroke-width: 1.4;
  fill: none;
}

.ibis-schematic .sc-box {
  fill: #fff;
  stroke: var(--ibis-accent);
  stroke-width: 1.4;
}

.ibis-schematic .sc-line {
  fill: #eef4fb;
  stroke: var(--ibis-accent);
  stroke-width: 1.4;
}

.ibis-schematic .sc-probe {
  fill: var(--ibis-rx);
}

/* ------------------------------------------------------------ プロット */

.ibis-plot-card {
  border: 1px solid var(--ibis-border);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px 6px;
  margin-bottom: 12px;
}

.ibis-plot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.ibis-plot-title {
  font-weight: 700;
  font-size: 0.92rem;
}

.ibis-plot-hint {
  font-size: 0.74rem;
  color: var(--ibis-muted);
}

.ibis-canvas {
  width: 100%;
  display: block;
  cursor: crosshair;
  touch-action: pan-y;
}

.ibis-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.78rem;
  margin: 4px 0 2px;
}

.ibis-legend label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.ibis-swatch {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.ibis-readout {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  color: var(--ibis-muted);
  min-height: 1.2em;
}

/* ------------------------------------------------------------ 指標 */

.ibis-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
}

.ibis-metric {
  border: 1px solid var(--ibis-border);
  border-radius: 6px;
  background: #fff;
  padding: 7px 9px;
}

.ibis-metric-label {
  font-size: 0.72rem;
  color: var(--ibis-muted);
  display: block;
  margin-bottom: 2px;
}

.ibis-metric-value {
  display: block;
  font-size: 1.0rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.ibis-metric-value.ok { color: var(--ibis-ok); }
.ibis-metric-value.bad { color: var(--ibis-bad); }

.ibis-metric-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--ibis-muted);
}

/* ------------------------------------------------------------ その他 */

.ibis-msg {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.84rem;
  margin-bottom: 10px;
}

.ibis-msg.err {
  background: #fdecea;
  border: 1px solid #f5c6c0;
  color: #a02c24;
}

.ibis-msg.warn {
  background: #fdf6e3;
  border: 1px solid #f0e0b0;
  color: var(--ibis-warn);
}

.ibis-msg.info {
  background: #eef4fb;
  border: 1px solid #cfe0f2;
  color: #2c5282;
}

.ibis-msg ul {
  margin: 4px 0 0;
  padding-left: 1.2em;
}

.ibis-busy {
  opacity: .5;
  pointer-events: none;
}

.ibis-modelinfo {
  font-size: 0.78rem;
  color: var(--ibis-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.5;
}

.ibis-details {
  margin-top: 16px;
  font-size: 0.86rem;
  line-height: 1.8;
}

.ibis-details summary {
  cursor: pointer;
  font-weight: 700;
  padding: 6px 0;
}

.ibis-details h4 {
  font-size: 0.92rem;
  margin: 14px 0 4px;
}

.ibis-details code {
  background: var(--ibis-panel);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.86em;
}

.ibis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.ibis-table th,
.ibis-table td {
  border: 1px solid var(--ibis-border);
  padding: 4px 8px;
  text-align: left;
}

.ibis-table th {
  background: var(--ibis-panel);
  font-weight: 600;
}

@media (max-width: 575px) {
  .ibis-field > label { flex-basis: 7em; font-size: 0.78rem; }
  .ibis-field-note { margin-left: 0; }
}