/* The docked chrome shared by the desktop pages: the animator
   (anim.html, /solve) and the piece maker (maker.html, /cad). The
   controls inside it — buttons, inputs, the panel and group idiom —
   are css/controls.css; colors come from the tokens in burr-theme.css.

   Each page is a fixed grid of chrome docked around its stage:

       topbar   topbar  topbar
       sidebar  handle  stage

   The page's own stylesheet supplies the grid template (the solve page
   adds a query drawer row) and everything inside the stage. Chrome
   panels sit on --bg-accent and never overlap the stage — opening or
   resizing one shrinks it. The sidebar's fold and resize behavior is
   wired by js/shared/sidebar.js. */

html, body { height: 100%; }
body { display: grid; }

/* ── Topbar ── */
#topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 36px;
    background: var(--bg-accent);
    border-bottom: 1px solid var(--panel-border);
}
.topbar-brand {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.topbar-sep { color: var(--faint); }
.topbar-page {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
}
/* Actions sit at the right end; the first one pushes the rest over. */
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
#topbar .theme-toggle { margin-left: auto; }
#topbar .theme-toggle,
#topbar .icon-button { width: 26px; height: 26px; }
#topbar .theme-toggle svg,
#topbar .icon-button svg { width: 15px; height: 15px; }

/* ── Sidebar ── */
#sidebar {
    grid-area: sidebar;
    width: 260px;       /* pre-drag default; dragging sets an inline px */
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-accent);
    font-size: 12px;
}
body.sidebar-collapsed #sidebar { display: none; }

/* The handle strip between the sidebar and the stage: click collapses,
   drag resizes (it carries the chrome/stage divider line). */
#sidebar-handle {
    grid-area: handle;
    width: 7px;
    padding: 0;
    border: none;
    border-right: 1px solid var(--panel-border);
    background: var(--bg-accent);
    cursor: col-resize;
    touch-action: none;
}
#sidebar-handle:hover { background: var(--field-strong); }
/* Mouse interaction leaves no focus ring; keyboard focus keeps one. */
#sidebar-handle:focus { outline: none; }
#sidebar-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* A grip mark so the strip reads as an affordance */
#sidebar-handle::after { content: '⋮'; color: var(--faint); font-size: 11px; }

/* Collapsed: the strip widens into a vertical header bar — the query
   drawer's collapsed bar turned sideways (the same 6px padding around
   one 11px line, so this bar's width matches that bar's height) —
   labeled and clickable to reopen. */
body.sidebar-collapsed #sidebar-handle {
    width: auto;
    cursor: pointer;
}
body.sidebar-collapsed #sidebar-handle::after { content: none; }
.sidebar-handle-label { display: none; }
body.sidebar-collapsed #sidebar-handle .sidebar-handle-label {
    display: flex;
    align-items: center;
    justify-content: center;    /* centered along the strip */
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 6px;
    writing-mode: vertical-rl;
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
}
/* Vertical writing turns the caret glyph with the text; turn it back
   so it points at where the sidebar will reappear. */
.sidebar-handle-caret { transform: rotate(-90deg); }

/* A panel keeps its natural height and yields to the panels below it;
   on a short window its body scrolls rather than squeezing them out.
   A collapsed panel keeps only its header bar. */
.side-panel {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.side-panel.collapsed > :not(.panel-toggle) { display: none; }
.panel-body {
    min-height: 0;
    overflow-y: auto;
    padding: 0 10px 8px;
}
/* ── Stage: the grid cell the page's canvas fills (its box is
      css/controls.css's) ── */
#stage { grid-area: stage; }