/* Controls and idioms the solve page's desktop and phone shells and
   the cad page share: the page ground, the
   panel/group idiom, the compact inputs, selects and buttons, the
   segmented pair, the stage box and the toast that floats on it.
   Where these sit is each shell's business (css/chrome.css docks them
   in a grid, css/solve-mobile.css stacks them under a tab bar); colors
   come from the tokens in burr-theme.css. */

body {
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    font-family: var(--font-ui);
    color: var(--text);
}

.hidden { display: none !important; }

/* ── Panel + group idiom ──
      PANELS (Puzzle, Moves, Puzzle Explorer) sit behind a .panel-toggle
      header bar — an uppercase label with a caret that collapses the
      panel to just the bar.

      GROUPS within a panel (Pieces, View, …, and the drawer's facet
      sections) get a .group-heading — micro-caps with a trailing rule. */
.panel-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}
.panel-toggle:hover { background: var(--field-strong); }
/* Mouse interaction leaves no focus ring; keyboard focus keeps one. */
.panel-toggle:focus { outline: none; }
.panel-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel-caret { display: inline-block; transition: transform 0.15s; }
.panel-toggle[aria-expanded="true"] .panel-caret { transform: rotate(90deg); }

.group-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
}
.group-heading::after {
    content: '';
    order: 1;
    flex: 1;
    border-top: 1px solid var(--line-soft);
}

.control-group .group-heading { margin-top: 10px; }
.control-group > * + * { margin-top: 6px; }
.control-group > .group-heading + * { margin-top: 0; }

.hint { font-size: 10px; color: var(--muted); }
/* Hint text left, the Reflect action right, sharing one row. */
.hint-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.btn-compact { padding: 2px 8px; font-size: 11px; }

/* ── Inputs, selects, buttons (compact, drawer-scale) ── */
.input-row {
    display: flex;
    gap: 6px;
}
.input-row input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--field);
    padding: 4px 8px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
}
.input-row input:focus { outline: none; border-color: var(--accent); }

.btn {
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--field);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.btn:active { background: var(--field-strong); border-color: var(--faint); }
.btn:disabled { opacity: 0.4; cursor: default; }
/* Solid controls: the theme's --action pair (legible in both themes);
   the press keeps the label on the hover shade rather than the plain
   pressed grey, which would swallow it.  No transition: a theme flip
   swaps both colors of the pair, and easing them together passes
   through a shade neither ink can read. */
.btn-primary, .btn.active {
    background: var(--action-bg);
    border-color: var(--action-bg);
    color: var(--action-text);
    transition: none;
}
.btn-primary:active, .btn.active:active {
    background: var(--action-bg-hover);
    border-color: var(--action-bg-hover);
}
/* Hover only where a pointer can leave again: a touch screen would
   keep the hover shade stuck on the last tapped button. */
@media (hover: hover) {
    .btn:hover:not(:disabled) { background: var(--field-strong); }
    .btn-primary:hover:not(:disabled), .btn.active:hover:not(:disabled) {
        background: var(--action-bg-hover);
        border-color: var(--action-bg-hover);
    }
}

select {
    width: 100%;
    padding: 4px 6px;
    background: var(--field);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
    font-family: inherit;
    cursor: pointer;
}
select:focus { outline: none; border-color: var(--accent); }

/* ── Segmented pair (3D / 2D, .stl / .scad): equal-width .btn siblings,
      the active one filled ── */
.segmented { display: flex; gap: 6px; }
.segmented .btn { flex: 1; text-align: center; }

/* ── Stage toast: a pill floating at the bottom of the stage (the
      solve page's mode toast, the cad page's render status) ── */
.stage-toast {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel-strong);
    color: var(--text);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow-soft);
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 12px;
    pointer-events: none;
}

/* ── Stage: the page's canvas fills this box and reads its size from
      it (pages observe it with a ResizeObserver); where the box sits is
      the shell's business — a grid cell or a fixed region ── */
#stage {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
#stage canvas { display: block; }

/* Cross-shell escape hatch at the foot of a page's controls (each
   shell places it; js/shared/shell-switch.js drives it). */
#ui-switch-link { color: var(--muted); }