/* 短絡電流計算（電気設計ツール群 流用の変数名）: 明るいブランド配色に差し替え、部品を Setsubi Weave の見た目にそろえる */
:root,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}
.theme-switcher{display:none !important}

/* ---------- 書体・面・部品（旧ツールと同じ見た目にならないように手書きで作り直す） ---------- */
body{font-family:Arial,"Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:0}
/* 上部バー: 白い帯。表題はポータルの見出しと重複するので出さない */
.topbar{background:#ffffff;border-bottom:1px solid #c9dbf1;box-shadow:none;backdrop-filter:none}
.topbar h1{display:none}
.field label{color:#5b6b8c;font-weight:700;font-size:11px}
.field select,.field input,select,input[type="number"],input[type="text"]{
  background-color:#ffffff;border:1px solid #c9dbf1;border-radius:8px;color:#0f1c3f;box-shadow:none;
}
select:focus,input:focus{border-color:#2e5be0;outline:none;box-shadow:0 0 0 3px rgba(46,91,224,.15)}
/* ボタン: 白地に紺の文字、主ボタンは紺で塗る */
.btn{background:#ffffff;border:1px solid #c9dbf1;border-radius:8px;color:#1b3a8b;font-weight:700;box-shadow:none}
.btn:hover{background:#e8effc;border-color:#8fb0e6}
.btn.primary{background:#1b3a8b;border-color:#1b3a8b;color:#ffffff}
.btn.primary:hover{background:#2e5be0;border-color:#2e5be0}
.mode-btn{background:#ffffff;border:1px solid #c9dbf1;color:#2f3f63;border-radius:12px;box-shadow:none}
.mode-btn:hover{border-color:#8fb0e6;color:#1b3a8b}
.mode-btn.active,.mode-btn[aria-pressed="true"]{background:#1b3a8b;border-color:#1b3a8b;color:#ffffff}
.seg{border:1px solid #c9dbf1;border-radius:8px;background:#ffffff;overflow:hidden}
.seg button,.seg .seg-btn{background:#ffffff;color:#5b6b8c;border:0;font-weight:700}
.seg button.active,.seg .active{background:#1b3a8b;color:#ffffff}
.zb-btn{background:#ffffff;border:1px solid #c9dbf1;color:#1b3a8b;border-radius:7px}
.zb-btn:hover{background:#e8effc}
/* 機器パレット: 薄い青の面にカード型の機器 */
.palette{background:#f6f9fe;border-right:1px solid #c9dbf1}
.tool{background:#ffffff;border:1px solid #c9dbf1;border-radius:12px;color:#2f3f63;box-shadow:0 6px 16px -14px rgba(15,28,63,.4)}
.tool:hover{border-color:#2e5be0;color:#1b3a8b}
/* 吹き出し・表 */
.help-pop{background:#ffffff;border:1px solid #c9dbf1;border-radius:12px;box-shadow:0 14px 30px -14px rgba(15,28,63,.4);color:#0f1c3f}
.tcc-tbl th{background:#f6f9fe;color:#1b3a8b;border-bottom:1px solid #c9dbf1}
.tcc-tbl td{border-bottom:1px solid #e6ecf7}
/* 本体幅: トップページの分野カードと同じ（上部バー・作業領域・ヒント行をそろえる） */
.topbar,.workspace,.hintbar{width:var(--sw-content-w);margin-left:auto;margin-right:auto;box-sizing:border-box}

/* ==========================================================================================
   短絡電流計算: Setsubi Weave 独自の配置（旧ツールの「上バー／左パレット／右ドック」の 3 分割をやめる）
   - 上: 条件カード（1 段目に受電条件、2 段目に操作ボタンとサンプル読込）
   - 左: キャンバス（点のグリッド、白いカード）。操作モードは左上に縦並び、ズームは右下
   - 右: シンボル一覧（上・2 列の横並びカード）とプロパティ（下）を縦に
   640px 以下はアプリ元来のモバイル配置（下からのシート）をそのまま使う
   ========================================================================================== */
@media (min-width:641px){
  .topbar{
    border:1px solid #c9dbf1;border-bottom:1px solid #c9dbf1;border-radius:14px;box-shadow:0 10px 24px -18px rgba(15,28,63,.28);
    padding:12px 16px;gap:10px 14px;margin:10px auto 12px;
  }
  .topbar .spacer{flex:0 0 100%;height:0}                 /* 条件と操作を 2 段に分ける */
  .topbar .field{gap:6px}
  .topbar .field label{font-size:11px}
  .zchk{border:0;padding:0 4px;background:none;color:#2f3f63;font-weight:700;order:1}
  #btnUndo,#btnRedo{order:1}
  .topbar .field:has(#sampleSel){order:2;margin-left:auto}
  #calcBtn,#btnResult,#btnXlsx{order:3}
  #calcBtn{padding:8px 18px;font-size:13px}

  /* 左: キャンバス（上）とプロパティ（下）。右: シンボル一覧（全高・スクロールなし）。行の高さは内容に合わせて伸びる */
  .workspace{
    display:grid;grid-template-columns:minmax(0,1fr) 300px;
    grid-template-rows:minmax(max(620px,calc(100dvh - var(--sw-shell-h,0px) - var(--sw-footer-h,0px) - 300px)),auto) auto;
    grid-template-areas:"canvas palette" "dock palette";
    gap:12px;align-items:stretch;padding-bottom:12px;height:auto;min-height:0;
  }
  /* キャンバスは内側でスクロールさせない（図が大きいときは行が伸びてページ全体がスクロールする） */
  .canvas-wrap{grid-area:canvas;overflow:visible;background:#ffffff;border:1px solid #c9dbf1;border-radius:14px;box-shadow:0 10px 24px -18px rgba(15,28,63,.28)}
  #canvas{background:radial-gradient(#c9dbf1 1.2px,transparent 1.4px) 0 0 / var(--cell) var(--cell)}
  .palette{grid-area:palette;width:auto;background:#ffffff;border:1px solid #c9dbf1;border-radius:14px;padding:12px;overflow:visible}
  .palette h2{color:#1b3a8b;font-size:11px;letter-spacing:.08em;text-transform:none;margin:12px 0 6px;padding-left:8px;border-left:3px solid #2e5be0;line-height:1.2}
  .palette h2:first-child{margin-top:0}
  .pal-grid{grid-template-columns:1fr 1fr;gap:6px}
  .tool{flex-direction:row;justify-content:flex-start;gap:8px;padding:6px 8px;border-radius:10px;box-shadow:none}
  .tool svg{width:24px;height:24px}
  .tool .nm{text-align:left;font-size:11px;line-height:1.2}
  .dock{grid-area:dock;width:auto;background:#ffffff;border:1px solid #c9dbf1;border-radius:14px;overflow:visible;min-height:0}
  .dock-body{border-top:0;overflow:visible}
  .dock-pane{padding:12px 16px}
  .dock-empty{font-size:12px;line-height:1.8}
  .dock-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 16px;align-items:end}
  .dock-actions{margin-top:10px}

  .modebar{
    left:12px;top:12px;bottom:auto;transform:none;flex-direction:column;gap:6px;padding:6px;border-radius:12px;
    background:#ffffff;border:1px solid #c9dbf1;box-shadow:0 10px 24px -18px rgba(15,28,63,.4);
  }
  .mode-btn{width:40px;height:40px;border-radius:10px;background:#ffffff;border:1px solid transparent;color:#2f3f63}
  .mode-btn:hover{background:#eef3fb;border-color:#c9dbf1;color:#1b3a8b}
  .mode-btn.armed{background:#1b3a8b;border-color:#1b3a8b;color:#ffffff}
  .zoombar{right:calc(300px + 12px + 12px);top:12px;bottom:auto;opacity:.92;background:#ffffff;border:1px solid #c9dbf1;border-radius:10px;box-shadow:0 10px 24px -18px rgba(15,28,63,.4)}
  .zoombar input[type=range]{accent-color:#1b3a8b}
  .hintbar{background:transparent;border-top:0;color:#5b6b8c;padding:0 2px 10px}
}
/* 画面が低くてもキャンバスを潰さない: 作業領域に下限の高さを持たせ、足りない分はページ全体をスクロール（高い画面では画面いっぱい） */
@media (min-width:641px){
  /* ページのスクロールは html（ビューポート）だけに持たせる。body をスクロール要素にすると、アプリ側の
     overscroll-behavior:none によってホイール／トラックパッドのスクロールが body で止まり、ページが動かなくなる */
  html{height:auto;min-height:100%;overflow:hidden auto}
  body{height:auto;min-height:100%;overflow:visible;overscroll-behavior:auto}
  .canvas-wrap{overscroll-behavior:auto}
}

/* テーマ切替ボタンはどの幅でも出さない（ポータルは明色固定） */
#themeBtn{display:none}

/* 640px 以下（アプリ元来のモバイル配置）: 画面の高さに収めてキャンバスの内側だけをスクロールさせる作りをやめ、
   ページ全体を普通にスクロールさせる。キャンバスは図の大きさどおりに縦に伸びる。
   キャンバス上の縦スワイプはページのスクロールに使う（機器の縦方向のドラッグ移動はスワイプではなく矢印キー等で） */
@media (max-width:640px){
  html{height:auto;min-height:100%;overflow:hidden auto}
  body{height:auto;min-height:100%;overflow:visible;overscroll-behavior:auto}
  .workspace{flex:none;display:block;height:auto;min-height:0}
  .canvas-wrap{overflow:visible;height:auto;min-height:480px;overscroll-behavior:auto}
  #canvas{touch-action:pan-y pinch-zoom}
}