/* 電気設計ツール群 本体（ビジュアルチャート・早見表・電卓・計算書）を Setsubi Weave の見た目にする上書き。
   1) suite.generated.css : 直書きの暗色を明色に、等幅書体をポータルの書体に置き換える自動生成分（scripts/gen_light_theme.py）
   2) suite-chart.css     : ケーブル選定ビジュアルチャート専用の配置（左に設定欄、右にマップ）
   3) このファイル         : 全タブ共通の部品（面・枠・入力・ボタン・チップ・凡例・判定など）を手書きで作り直す */
@import url("/assets/themes/suite.generated.css");
@import url("/assets/themes/suite-chart.css");

/* ---------- 配色トークン: 暗色テーマの変数を明るいブランド配色に差し替える ---------- */
body,body[data-theme="dark"],body[data-theme="high-contrast"]{
  --bg-0:#f4f7fc;--bg-1:#ffffff;--bg-2:#eef3fb;
  --line:#e6ecf7;--line-2:#c9dbf1;
  --ink:#0f1c3f;--ink-dim:#5b6b8c;--ink-2:#2f3f63;
  --accent:#2e5be0;--accent-rgb:46,91,224;
  --good:#1f7a4d;--warn:#8a5a00;--bad:#b3261e;
  --card:#ffffff;--card-2:#eef3fb;
  --shadow:0 10px 24px -18px rgba(15,28,63,.28);
  --guide-1:#2e5be0;--guide-2:#e0559b;--grid:rgba(27,58,139,.08);
  --label-bg:#ffffff;--label-ink:#0f1c3f;
  --surface-tint:27,58,139;--color-scheme:light;
}
html,body{background:#f4f7fc}
body{font-family:Arial,"Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:0}
body::before,body::after{display:none}
/* ポータルに載せるため、電気設計ツール群 自身のナビ・ホーム・テーマ切替・評価フォーム（Netlify Forms）は出さない */
nav.tabnav,#tabnavMobilePanel,#tab-home,.theme-switcher,.fb-bar{display:none !important}

/* ---------- 面・枠: 白い面に細い青灰の枠、角は 14px。ぼかしやグラデーションは使わない ---------- */
.panel,.controls,.qc-card{
  background:#ffffff;border:1px solid #c9dbf1;border-radius:14px;
  box-shadow:0 10px 24px -18px rgba(15,28,63,.28);backdrop-filter:none;
}
.panel-h{padding:10px 16px;background:#f6f9fe;border-bottom:1px solid #e6ecf7;gap:10px 14px}
.panel-title{font:700 14px/1.3 Arial,"Hiragino Sans","Noto Sans JP",sans-serif;color:#0f1c3f;letter-spacing:0;gap:8px}
.panel-title .mark{width:9px;height:9px;border-radius:2px;background:#2e5be0;transform:rotate(45deg);margin:0 3px}
.panel-sub{color:#5b6b8c;font-size:11px}
.badge{background:#e8effc;color:#1b3a8b;border:1px solid #c9dbf1;font-weight:700}

/* ---------- 設定欄 ---------- */
.controls{padding:12px 16px;gap:10px 12px}
.controls-head{color:#1b3a8b;border-right:1px solid #e6ecf7;padding:0 14px 0 0}
.controls-head .icon{filter:none;font-size:18px}
.controls-head .txt{font:700 11px Arial,"Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:.14em;color:#1b3a8b}
.ctrl label{color:#5b6b8c;font-size:11px;letter-spacing:0;font-weight:700}
.lab-row .val,.val{color:#1b3a8b;font-weight:700}
.help-icon{color:#5b6b8c;border-color:#c9dbf1}
.help-icon:hover{color:#1b3a8b;border-color:#1b3a8b;background:#e8effc}

/* 入力: 白地に青灰の枠。フォーカスで青 */
input[type="number"],input[type="text"],textarea{
  background:#ffffff;border:1px solid #c9dbf1;border-radius:8px;color:#0f1c3f;box-shadow:none;
}
/* select は矢印を background-image で描いているので、色だけ差し替える（shorthand で位置・サイズを消さない） */
select{
  background-color:#ffffff;border:1px solid #c9dbf1;border-radius:8px;color:#0f1c3f;box-shadow:none;
  background-image:linear-gradient(45deg,transparent 50%,#1b3a8b 50%),linear-gradient(135deg,#1b3a8b 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select:hover,input[type="number"]:hover{background-color:#ffffff;border-color:#8fb0e6;box-shadow:none}
select:focus,input[type="number"]:focus{background-color:#ffffff;border-color:#2e5be0;box-shadow:0 0 0 3px rgba(46,91,224,.15)}
input[type="number"]:hover,input[type="number"]:focus{background:#ffffff}
select option,select optgroup{background:#ffffff;color:#0f1c3f}
input[type="range"]{background:#dbe7f7;border:0;height:4px}
input[type="range"]::-webkit-slider-thumb{background:#1b3a8b;border:2px solid #ffffff;box-shadow:0 0 0 2px #c9dbf1}
input[type="range"]::-moz-range-thumb{background:#1b3a8b;border:2px solid #ffffff;box-shadow:0 0 0 2px #c9dbf1}
input[type="range"]::-moz-range-track{background:#dbe7f7}

/* 切替チップ: つながった区切りボタン。選択中は紺で塗る */
.chips{gap:0;border:1px solid #c9dbf1;border-radius:8px;overflow:hidden;background:#ffffff}
.chip{border:0;border-right:1px solid #e6ecf7;border-radius:0;background:#ffffff;color:#5b6b8c;box-shadow:none;font-weight:700}
.chip:last-child{border-right:0}
.chip:hover{background:#eef3fb;color:#1b3a8b;border-color:#e6ecf7}
.chip.active,body[data-theme="high-contrast"] .chip.active{background:#1b3a8b;color:#ffffff;border-color:#1b3a8b}
.assist-chip{border:1px solid #c9dbf1;border-radius:8px;background:#ffffff;color:#2f3f63;box-shadow:none;font-weight:700}
.assist-chip:hover{border-color:#8fb0e6;color:#1b3a8b}
.assist-chip.active{background:#1b3a8b;border-color:#1b3a8b;color:#ffffff;box-shadow:none}
.eco-chip{background:#ffffff;border-color:#c9dbf1;color:#5b6b8c}
.eco-chip.active{background:#e6f5ec;border-color:#9fd6b6;color:#1f7a4d;box-shadow:none}
.toggle-cb span{background:#dbe7f7;border-color:#c9dbf1}
.toggle-cb span::before{background:#ffffff;box-shadow:0 1px 2px rgba(15,28,63,.3)}
.toggle-cb input:checked + span{background:#1b3a8b;border-color:#1b3a8b}

/* ボタン */
.btn{background:#ffffff;border:1px solid #c9dbf1;color:#1b3a8b;border-radius:8px;box-shadow:none;font-family:Arial,"Hiragino Sans","Noto Sans JP",sans-serif}
.btn:hover{background:#e8effc;border-color:#8fb0e6;color:#1b3a8b}
.btn.primary{background:#1b3a8b;border-color:#1b3a8b;color:#ffffff}
.btn.primary:hover{background:#2e5be0;border-color:#2e5be0}
.btn.danger{background:#fbe9e7;border-color:#f0b4ae;color:#b3261e}
.btn.danger:hover{background:#f6d6d2}
.btn.ghost{background:transparent;border-color:transparent}

/* ---------- 凡例・判定・結果 ---------- */
.legend{background:#f6f9fe;border-top:1px solid #e6ecf7;padding:8px 14px}
.legend .t{color:#5b6b8c;letter-spacing:.06em}
.lg-item{background:#ffffff;border:1px solid #e6ecf7;border-radius:999px;padding:2px 9px 2px 5px;color:#2f3f63;font-weight:700;font-size:11px}
.lg-swatch{width:10px;height:10px;border-radius:50%}
.criteria{background:#ffffff;border:1px dashed #c9dbf1;border-radius:10px;color:#2f3f63}
.criteria > b:first-child{color:#1b3a8b}
.result-card{background:#f6f9fe;border:1px solid #c9dbf1;border-radius:12px}
.result-card .sqbox{border:0;box-shadow:none;border-radius:10px;color:#ffffff}
.result-card .sqbox .v{text-shadow:none}
.result-card .sqbox.na{background:repeating-linear-gradient(45deg,#f0b4ae 0 6px,#fbe9e7 6px 12px);color:#b3261e}
.result-info .k{color:#5b6b8c}
.result-info .v{color:#0f1c3f}
.result-info .v.ok{color:#1f7a4d}
.result-info .v.ng{color:#b3261e}
.judgment{border-radius:999px;padding:6px 14px}
.judgment.ok{background:#e6f5ec;border-color:#9fd6b6;color:#1f7a4d}
.judgment.ng{background:#fbe9e7;border-color:#f0b4ae;color:#b3261e}
.sz-cell{background:#ffffff;border:1px solid #e6ecf7;border-radius:8px;color:#2f3f63}
.sz-cell.ok{background:#e6f5ec;border-color:#9fd6b6;color:#1f7a4d}
.sz-cell.amp{background:#fff4e0;border-color:#f0d29a;color:#8a5a00}
.sz-cell.vd{background:#fbe9e7;border-color:#f0b4ae;color:#b3261e}
.sz-cell.pick{background:#1b3a8b;border-color:#1b3a8b;color:#ffffff;box-shadow:none}
.sz-cell.clicked{outline:2px solid #2e5be0;box-shadow:0 0 0 3px rgba(46,91,224,.18)}
.sz-cell .st,.sz-cell .sz-unit{opacity:.85}

/* ---------- 注記・ツールチップ ---------- */
.foot{background:transparent;border:0;border-top:1px solid #e6ecf7;border-radius:0;backdrop-filter:none;color:#5b6b8c;padding:10px 2px 0}
.foot .warn{color:#8a5a00}
.foot .src{color:#2f3f63}
.foot .lic{color:#5b6b8c}
.foot .info-btn{background:#ffffff;border:1px solid #c9dbf1;color:#1b3a8b}
.foot .info-btn:hover{background:#e8effc;border-color:#8fb0e6}
.tip{background:#ffffff;border:1px solid #c9dbf1;color:#0f1c3f;border-radius:10px;box-shadow:0 14px 30px -14px rgba(15,28,63,.4)}

/* ---------- グラフ（SVG）: 目盛は青灰、カーソルは紺 ---------- */
.chart text{font-family:Arial,"Hiragino Sans","Noto Sans JP",sans-serif}
.chart .grid line{stroke:#e6ecf7}
.chart .axis line,.chart .axis path{stroke:#c9dbf1}
.chart .axis text{fill:#5b6b8c;font-size:12px;font-weight:700}
.chart .axis-title{fill:#1b3a8b;font-weight:700}
.chart .aux-x line{stroke:rgba(27,58,139,.35);mix-blend-mode:normal}
.cursor-line{stroke:#1b3a8b;stroke-opacity:.75;stroke-dasharray:4 4;filter:none}
.cursor-dot{fill:#1b3a8b;stroke:#ffffff;stroke-width:3}
.band{stroke:#ffffff;stroke-opacity:.55;stroke-width:1}
.band-label{fill:#ffffff;font-weight:800;paint-order:stroke;stroke:rgba(15,28,63,.7);stroke-width:3}
.na-label{fill:#ffffff;paint-order:stroke;stroke:#0f1c3f;stroke-opacity:.75}
.line-label{font-weight:700}

/* ---------- 見出しの重複: ポータルの見出しと同じ表題をアプリ側では出さない ---------- */
.motor-chart-title{display:none}          /* 電動機配線早見表 */
.qc-head{display:none}                    /* 電気設計電卓 */
/* PID 調整演習はポータルから外した（2026-09-22）。本体 HTML にはタブとして残っているので、表示だけ止める */
#subtab-pid,.sub-tab-btn[data-subtab="pid"]{display:none !important}

/* ---------- 本体幅: トップページの分野カードと同じ（ビジュアルチャートは suite-chart.css 側で同じ幅にしている） ---------- */
.other-wrap,.bulk-wrap,.qc-wrap{width:var(--sw-content-w);margin-left:auto;margin-right:auto;box-sizing:border-box}
.bulk-wrap{padding-left:0;padding-right:0}
.qc-wrap{max-width:none;padding-left:0;padding-right:0}
/* 電卓: 幅が広いときは結果カードを左、設定カードを右の 2 列に */
@media (min-width:961px){
  .qc-pane{padding:0}
  .qc-pane.is-on{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.6fr);gap:14px;align-items:start}
  .qc-pane .qc-result{grid-column:1;position:sticky;top:12px;margin:0}
  .qc-pane .qc-card,.qc-pane .qc-conduit-bar,.qc-pane .qc-cable-list{grid-column:2}
  .qc-mode{width:min(560px,100%)}
}
/* 計算書（ケーブル・電線管）: アプリ側が幅 100%・余白 !important で指定しているので、同じ強さで上書きする */
#tab-doc .doc-sub-content.active .bulk-wrap{width:var(--sw-content-w) !important;max-width:none;margin-left:auto;margin-right:auto;padding-left:0 !important;padding-right:0 !important}

/* ---------- 早見表の見出し行: 条件は枠で囲まず文字だけで並べ、2 つのボタンは右端に大きく ---------- */
.motor-chart-title-row{align-items:center}
.motor-chart-meta{margin-left:0;width:100%;gap:0 10px;align-items:center}
.motor-chart-meta::before{content:"条件";font:700 11px Arial,"Hiragino Sans","Noto Sans JP",sans-serif;color:#1b3a8b;letter-spacing:.1em;margin-right:2px}
.motor-chart-meta-pill{
  padding:0 !important;background:none !important;border:0 !important;border-radius:0 !important;
  font:600 12.5px Arial,"Hiragino Sans","Noto Sans JP",sans-serif !important;color:#2f3f63 !important;letter-spacing:0;
}
.motor-chart-meta-pill + .motor-chart-meta-pill::before{content:"・";color:#8fb0e6;margin-right:10px}
.motor-chart-settings-btn{
  padding:8px 16px !important;font:700 13px Arial,"Hiragino Sans","Noto Sans JP",sans-serif !important;
  background:#ffffff !important;border:1px solid #c9dbf1 !important;border-radius:10px !important;color:#1b3a8b !important;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;box-shadow:none !important;
}
.motor-chart-settings-btn:hover{background:#e8effc !important;border-color:#8fb0e6 !important}
.motor-chart-settings-btn:first-of-type{margin-left:auto}
#mcSettingsBtn{background:#1b3a8b !important;border-color:#1b3a8b !important;color:#ffffff !important}
#mcSettingsBtn:hover{background:#2e5be0 !important;border-color:#2e5be0 !important}
.motor-chart-settings-btn .ui-ic{width:16px;height:16px}
.motor-chart-sub{display:none}   /* 説明行は出さない（説明のないアプリにそろえる） */
/* 条件の文字列と 2 つのボタンは 1 行に収める（狭いときは先頭の長い項目だけ省略記号で縮め、700px 以下では折り返す） */
.motor-chart-meta{flex-wrap:nowrap;min-width:0}
.motor-chart-meta-pill{flex:0 0 auto;white-space:nowrap}
#mcPillMaker{flex:0 1 auto;min-width:80px;overflow:hidden;text-overflow:ellipsis}
.motor-chart-settings-btn{flex:none}
@media (max-width:700px){.motor-chart-meta{flex-wrap:wrap;row-gap:8px}#mcPillMaker{overflow:visible}}
.motor-chart-meta::before{flex:none;white-space:nowrap}