/* ============================================================================
   panels.css — the column of panels to the right of the stage.

   Responsibility: how the panels look and fold. The markup is ui/panels/;
   the colours are the theme's tokens (ui/app.css), so the column follows the
   light and dark themes with the rest of the page.

   EVERY PANEL IS A FOLD: a <details class="sec-fold"> whose <summary> is its
   title — the 2D app's markup and class names. The browser does the
   folding; these rules give the title its marker (▸ closed, ▾ open) and
   space the open panel's rows.

   INSIDE A PANEL, ROWS. `.row` is a wrapping flex line of controls, so a
   row too long for the column wraps instead of widening it; `.grid3` is
   three even columns, for a set of buttons that reads as one choice.

   FOLDED AWAY (`.app.panels-off`, ui/sidebar/panel_column.js), the column is
   a strip showing only its toggle; the page's grid gives the stage the rest.
   ============================================================================ */
  .panel{background:var(--panel);border-left:1px solid var(--grid);overflow-y:auto;overflow-x:hidden;
         min-height:0}
  @media (max-width:720px){.panel{border-left:none;border-top:1px solid var(--grid)}}

  /* ---------- the heading: always in view ---------- */
  .panel-head{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--grid);
              position:sticky;top:0;z-index:1;background:var(--panel)}
  .panel-name{flex:1;font-weight:600}
  .panel .panels-toggle{padding:2px 8px;font-size:15px;line-height:1.2}

  /* ---------- folded away: a strip holding only the toggle ---------- */
  .app.panels-off .panel{overflow:hidden}
  .app.panels-off .panel > :not(.panel-head),
  .app.panels-off .panel-head > :not(.panels-toggle){display:none}
  .app.panels-off .panel-head{justify-content:center;padding:10px 0;border-bottom:none}

  /* ---------- the folds ---------- */
  .sec{border-bottom:1px solid var(--grid)}
  .sec[hidden]{display:none}
  .sec-fold > summary.sec-title{padding:10px 12px;cursor:pointer;list-style:none;user-select:none;
                                font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
                                color:var(--muted)}
  .sec-fold > summary.sec-title::-webkit-details-marker{display:none}
  .sec-fold > summary.sec-title::before{content:"▸ "}
  .sec-fold[open] > summary.sec-title::before{content:"▾ "}
  .sec-fold > summary.sec-title:hover,.sec-fold[open] > summary.sec-title{color:var(--ink)}
  .sec-fold[open]{padding:0 12px 12px}
  .sec-fold[open] > summary.sec-title{margin:0 -12px}
  .sec-fold > :not(summary) + :not(summary){margin-top:8px}

  /* ---------- the controls ---------- */
  .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .grid3 button{padding:4px 2px;white-space:nowrap}
  .panel label,.panel .lbl{color:var(--muted)}
  .panel .lbl{min-width:42px}
  .panel button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--grid);
                border-radius:6px;padding:4px 9px;cursor:pointer}
  .panel button.on{background:var(--ink);color:var(--bg)}
  .panel select,.panel input[type=text]{font:inherit;color:var(--ink);background:var(--panel);
                border:1px solid var(--grid);border-radius:6px;padding:4px 8px;min-width:0}
  .panel select{max-width:100%}
  .panel input[type=text]{flex:1}
  .panel input[type=range]{flex:1}
  #ebar{background:color-mix(in srgb,var(--panel) 88%,#ff9f1c)}
  .ochip.off{opacity:.5;text-decoration:line-through}
  input[type=color]{width:30px;height:26px;border:none;background:none;padding:0}