/*
  workbench.css — the VS Code-style shell for tool pages.

  Two parts: a fixed icon rail down the left for jumping between tools without
  going through a menu, and collapsible side panels so the working area can
  take the whole window. Loaded only on tool pages.
*/

:root{ --rail-w:52px; }

/* The rail is fixed, so the page just gets padded out of its way. */
body.wb{padding-left:var(--rail-w);}
body.wb .site-header{padding-left:0;}

/* ---------------- the rail ---------------- */

.wb-rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);z-index:60;
  background:var(--panel-2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;
  padding:8px 0;gap:2px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;
}
.wb-rail::-webkit-scrollbar{display:none;}

.wb-brand{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:12px;font-family:'JetBrains Mono',monospace;
  margin-bottom:8px;text-decoration:none;
}
.wb-brand:hover{text-decoration:none;filter:brightness(1.08);}

.wb-sep{width:24px;height:1px;background:var(--border);margin:7px 0;flex-shrink:0;}
.wb-spacer{flex:1;min-height:8px;}

.wb-btn{
  position:relative;flex-shrink:0;
  width:38px;height:38px;border-radius:9px;border:1px solid transparent;background:transparent;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;
  color:var(--text-faint);cursor:pointer;padding:0;text-decoration:none;
  transition:background .12s, color .12s;
}
.wb-btn:hover{background:var(--blue-tint);color:var(--blue);text-decoration:none;border-color:transparent;}
/* VS Code's active-item marker: a bar on the leading edge. An inset shadow
   rather than a positioned pseudo-element, because the rail scrolls and would
   clip anything drawn outside the button. */
.wb-btn.active{background:var(--blue-tint);color:var(--blue);box-shadow:inset 3px 0 0 var(--blue);}
.wb-btn.on{background:var(--blue);color:#fff;}
.wb-btn.on:hover{background:var(--blue-dark);color:#fff;}

/* Tooltips — the rail is icon-only, so every button needs a label on hover.
   One shared element, positioned by JS and fixed to the viewport: the rail
   scrolls, so a tooltip drawn inside it would be clipped at its edge. */
#wb-tip{
  position:fixed;z-index:120;pointer-events:none;
  background:var(--text);color:var(--page-bg);
  font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:500;
  padding:6px 10px;border-radius:7px;white-space:nowrap;
  opacity:0;transform:translateX(-4px);transition:opacity .12s, transform .12s;
  box-shadow:0 8px 22px -8px rgba(10,18,32,.55);
}
#wb-tip.show{opacity:1;transform:translateX(0);}
#wb-tip kbd{background:transparent;border:none;color:inherit;opacity:.65;font-size:0.9em;padding:0 0 0 7px;}

@media(max-width:820px){
  /* On a phone the rail costs more than it gives — the Menu button covers
     navigation there. */
  body.wb{padding-left:0;}
  .wb-rail{display:none;}
}

/* ---------------- collapsible panels ---------------- */

/* A collapsed pane keeps its place in the DOM so state and content survive. */
.pane.wb-collapsed,
.tool-left.wb-collapsed{display:none !important;}

/* Grid columns are only meaningful while both panes are showing. */
.convert-grid.wb-one{grid-template-columns:1fr;}
.convert-grid.wb-one.three{grid-template-columns:1fr;}
.tool-shell.wb-one{grid-template-columns:1fr;}

.pane-collapse{
  border:none;background:transparent;color:var(--text-faint);
  padding:4px 7px;border-radius:6px;font-size:13px;line-height:1;cursor:pointer;
  margin-left:2px;flex-shrink:0;
}
.pane-collapse:hover{background:var(--panel-2);color:var(--blue);border-color:transparent;}

/* A slim strip to bring a hidden side panel back, like VS Code's activity bar
   toggle — always visible so a collapsed panel is never lost. */
.wb-restore{
  position:fixed;left:var(--rail-w);top:50%;transform:translateY(-50%);z-index:55;
  display:none;align-items:center;justify-content:center;
  width:18px;height:64px;padding:0;
  border:1px solid var(--border);border-left:none;border-radius:0 8px 8px 0;
  background:var(--panel);color:var(--text-faint);cursor:pointer;font-size:11px;
  box-shadow:2px 0 10px -4px rgba(10,18,32,.3);
}
.wb-restore:hover{color:var(--blue);background:var(--blue-tint);border-color:var(--border);}
body.wb-sidebar-hidden .wb-restore{display:flex;}
@media(max-width:820px){ .wb-restore{left:0;} }
body.presenting .wb-restore{display:none !important;}

/* ---------------- presentation mode owns the screen ---------------- */

body.presenting.wb{padding-left:0;}
body.presenting .wb-rail{display:none;}