/* Tool dock beside the scientific calculator (English page).
   A tab strip sits on top of the right rail. History is the default tab and
   looks exactly as before; any other tab widens the rail into a panel and
   the calculator rescales (fitCalculator measures the rail). The panel width
   is what is left after the calculator's own height-bound width:
   calculator width ~ 420/835 of the viewport height = 50.3vh. */
:root { --wm-dock-w: clamp(360px, calc(100vw - 50.3vh - 90px), 880px); }

#wm-dock-tabs { display: flex; gap: 3px; flex-shrink: 0; background: #1c1e20; border: 1px solid #333; border-radius: 12px; padding: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,.35); }
#wm-dock-tabs button, #wm-dock-tabs a { flex: 1 1 0; min-width: 0; appearance: none; border: 0; background: transparent; color: #a3acb5; cursor: pointer;
  border-radius: 8px; padding: 6px 2px 5px; font: 600 10.5px/1.1 Arial, Helvetica, sans-serif; letter-spacing: .03em; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px; transition: background 120ms, color 120ms; white-space: nowrap; }
#wm-dock-tabs svg { width: 18px; height: 18px; flex: none; }
#wm-dock-tabs button:hover, #wm-dock-tabs a:hover { background: #262a2e; color: #e8ffd0; }
#wm-dock-tabs button[aria-selected="true"] { background: #2a3a22; color: #c8f07a; }
#wm-dock-tabs button:focus-visible, #wm-dock-tabs a:focus-visible { outline: 2px solid #a0c870; outline-offset: 1px; }

#wm-dock-panel { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; background: #fff; border: 1px solid #333; border-radius: 12px;
  overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.45); }
#wm-side-rail.wm-dock-open #wm-dock-panel { display: flex; }
#wm-side-rail.wm-dock-open > :not(#wm-dock-tabs):not(#wm-dock-panel) { display: none !important; }

.wm-dock-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; flex-shrink: 0; flex-wrap: wrap; }
.wm-dock-head b { font: 700 13px/1.2 'Segoe UI', system-ui, sans-serif; color: #0f172a; margin-right: auto; }
.wm-dock-head .wm-btn { min-height: 30px; padding: 6px 10px; font-size: .78rem; }
.wm-dock-head a.wm-btn { text-decoration: none; }
.wm-dock-body { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }
.wm-dock-body > .wm-app-grid { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.wm-dock-body .wm-card { border: 0; box-shadow: none; border-radius: 0; padding: 14px; }
.wm-dock-load { padding: 40px 20px; text-align: center; color: #64748b; font: .9rem 'Segoe UI', system-ui, sans-serif; }

/* compact grapher: graph on top, the list underneath sized to its rows
   (up to 45% of the panel, then it scrolls) */
.wm-app-grid.compact { display: flex; flex-direction: column; }
.wm-app-grid.compact .wm-stage { order: -1; flex: 1 1 auto; min-height: 180px; height: auto; }
.wm-app-grid.compact .wm-side { flex: 0 0 auto; max-height: 45%; min-height: 0; border-right: 0; border-top: 1px solid #e2e8f0; }
.wm-app-grid.compact .wm-list { flex: 0 1 auto; }
.wm-app-grid.compact .wm-keys { display: none; }
.wm-app-grid.compact .wm-expr input { padding: 10px 6px; }

@media (min-width: 741px) {
  #wm-side-rail.wm-dock-open { width: var(--wm-dock-w); min-width: var(--wm-dock-w); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
}
@media (max-width: 740px) {
  #wm-dock-tabs { width: 100%; }
  .wm-dock-head b { display: none; }  /* the selected tab already names the tool */
  .wm-dock-head { justify-content: flex-end; }
  #wm-side-rail.wm-dock-open #wm-dock-panel { height: 82vh; flex: none; }
}
@media (max-width: 860px) {
  .wm-dock-body > .wm-app-grid.compact { height: 100%; }
  .wm-dock-body > .wm-app-grid.compact .wm-stage { height: auto; min-height: 180px; }
}
@media print { #wm-dock-tabs, #wm-dock-panel { display: none !important; } }

/* the floating Guides / About pills would sit on the open panel */
body:has(#wm-side-rail.wm-dock-open) #guides-link-btn,
body:has(#wm-side-rail.wm-dock-open) #about-link-btn { display: none !important; }