/* ============================================================
   responsive.css — レスポンシブ（画面幅ごとの調整）
   ============================================================ */

/* ---- タブレット〜小型ノート ---- */
@media(max-width:980px){
  header{align-items:flex-start;flex-direction:column}
  .actions{justify-content:flex-start}

  .workspace{grid-template-columns:minmax(0,1fr) 0px 0px}
  .workspace.explorer-hidden{grid-template-columns:44px 0px minmax(0,1fr)}
  .explorer{max-height:220px}
  .workspace.explorer-hidden .explorer{max-height:none}

  .main{grid-template-columns:minmax(0,1fr) 0px 0px}
  .main.preview-hidden{grid-template-columns:minmax(0,1fr) 0px 44px}
  .main>.split{display:none}

  .rail-button{height:34px;width:88px}
  .workspace.explorer-hidden .rail-button,
  .main.preview-hidden .rail-button{width:32px;height:88px}
}

/* ---- スマホ縦（設定ダイアログのメニューを横並びに） ---- */
@media(max-width:720px){
  .settings{grid-template-columns:1fr}
  .settings-menu{
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-right:0;border-bottom:1px solid var(--border);padding:0 0 12px;
  }
  .settings-menu button.active::after{right:2px}
}