/* ═══════════════════════════════════════════════════════════════════════════
   EtnoWorkspace chrome. All GEOMETRY (positions/sizes) is set inline by the
   workspace manager's solver — this file only styles the surfaces. Uses the
   design tokens from app.css (:root).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ticket 31: until EtnoWorkspace.init() adds .ws-root (src/ui/workspace.js:1347), the panel
   content blocks are plain children of #workspaceRoot in normal flow — and .ring-render-svg's
   width/height:100% then paints the ring render at WINDOW size until the last of the 51 scripts
   auth-gate.js loads finally runs init. Hide them until the workspace owns the geometry.
   visibility, NOT display: init() must still measure a real viewport, or framing (ticket 21)
   lands on a zero-sized box. Self-cancelling — the moment .ws-root lands, this stops matching. */
#workspaceRoot:not(.ws-root) { visibility: hidden; }

.ws-root {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-base);
}
.ws-parking { display: none !important; }

/* ── Panels ── */
.ws-panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.ws-panel.ws-main {
    background: var(--bg-base);
    border-radius: 8px;
}
.ws-panel.ws-floating {
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
}
.ws-panel:focus-within { border-color: var(--accent-line); }
.ws-header {
    flex-shrink: 0;
    height: 30px;
    display: flex;
    align-items: stretch;
    gap: 4px;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-color);
    user-select: none;
    touch-action: none;
}
.ws-tabs { display: flex; align-items: stretch; flex: 1; min-width: 0; overflow: hidden; }
.ws-tab {
    display: flex; align-items: center;
    padding: 0 12px;
    font-size: 11px; font-weight: 650;
    letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--text-muted);
    cursor: grab;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-right: 1px solid var(--border-color);
    touch-action: none;
}
.ws-tab.active { color: var(--text-main); background: var(--bg-surface); box-shadow: inset 0 2px 0 var(--accent); }
.ws-tab:hover:not(.active) { color: var(--text-main); background: rgba(255,255,255,0.04); }
.ws-tab:focus-visible,
.ws-hbtn:focus-visible,
.ws-menu-btn:focus-visible,
.ws-menu-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.ws-header-btns { display: flex; align-items: center; gap: 2px; padding: 0 6px; flex-shrink: 0; }
.ws-hbtn {
    width: 24px; height: 24px; padding: 0;
    border: none; border-radius: 5px;
    background: transparent; color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; line-height: 0;
}
.ws-hbtn:hover { background: rgba(255,255,255,0.08); color: var(--text-main); }
.ws-hbtn.ws-close:hover { color: var(--danger); }
/* Chevron points toward the panel's actual collapse direction (its dock edge).
   Base icon is a down-caret; rotate per edge. Undocked/floating panels have no
   data-edge and keep the down default — collapse only ever shrinks their height. */
.ws-collapse[data-edge="up"] svg { transform: rotate(180deg); }
.ws-collapse[data-edge="left"] svg { transform: rotate(90deg); }
.ws-collapse[data-edge="right"] svg { transform: rotate(-90deg); }
/* Collapsed: rotate another 180° so the chevron now points back the opposite
   way (toward expand), keeping the "truthful direction" affordance symmetric. */
.ws-panel.ws-collapsed .ws-collapse[data-edge="down"] svg { transform: rotate(180deg); }
.ws-panel.ws-collapsed .ws-collapse[data-edge="up"] svg { transform: rotate(0deg); }
.ws-panel.ws-collapsed .ws-collapse[data-edge="left"] svg { transform: rotate(-90deg); }
.ws-panel.ws-collapsed .ws-collapse[data-edge="right"] svg { transform: rotate(90deg); }
.ws-panel.ws-collapsed .ws-collapse:not([data-edge]) svg { transform: rotate(180deg); }
.ws-body {
    flex: 1;
    min-height: 0; min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ws-body > * { flex: 1; min-height: 0; min-width: 0; }
.ws-panel.ws-collapsed .ws-body { display: none; }
.ws-panel.ws-collapsed-narrow .ws-header {
    width: 100%; height: 100%; min-height: 0;
    flex-direction: column; align-items: center; gap: 0;
    border-bottom: 0;
}
.ws-panel.ws-collapsed-narrow .ws-tabs {
    width: 100%; flex-direction: column; align-items: center;
}
.ws-panel.ws-collapsed-narrow .ws-tab {
    flex: 1; width: 100%; min-height: 0; padding: 8px 0;
    justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--border-color);
    writing-mode: vertical-rl; transform: rotate(180deg);
}
.ws-panel.ws-collapsed-narrow .ws-header-btns { padding: 3px; }
.ws-panel.ws-collapsed-narrow .ws-close { display: none !important; }

/* ── Header-less panels (issue 07): the Tools rail. No title/collapse/close —
   only a slim grip strip to move/re-dock, consistent across every dock state. ── */
.ws-grip { display: none; }
.ws-panel.ws-headerless .ws-tabs,
.ws-panel.ws-headerless .ws-header-btns { display: none; }
.ws-panel.ws-headerless .ws-header {
    height: 16px;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-color);
}
.ws-panel.ws-headerless .ws-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 100%;
    color: var(--text-dim);
    cursor: grab;
    touch-action: none;
}
.ws-panel.ws-headerless .ws-grip:hover { color: var(--text-muted); }
.ws-panel.ws-headerless.ws-drag-preview .ws-grip,
body.ws-dragging .ws-panel.ws-headerless .ws-grip { cursor: grabbing; }

/* ── Splitters ── */
.ws-splitter {
    position: absolute;
    z-index: 30;
    background: transparent;
    transition: background 0.12s;
    touch-action: none;
}
.ws-splitter.ws-split-v { cursor: col-resize; }
.ws-splitter.ws-split-h { cursor: row-resize; }
.ws-splitter:hover:not(.disabled), body.ws-resizing .ws-splitter:not(.disabled) { background: var(--accent-line); }
.ws-splitter:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--accent-line); }
.ws-splitter.disabled { cursor: default; pointer-events: none; }
body.ws-resizing { cursor: inherit; user-select: none; }
body.ws-resizing * { user-select: none !important; }

/* ── Drag & drop feedback ── */
.ws-drop-overlay {
    position: absolute;
    z-index: 200;
    pointer-events: none;
    background: rgba(99,102,241,0.16);
    border: 2px solid var(--accent);
    border-radius: 8px;
    display: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 0 0 1px rgba(99,102,241,0.22);
}
.ws-drop-overlay::after {
    content: attr(data-drop-label);
    position: absolute;
    top: 8px;
    left: 10px;
    padding: 4px 8px;
    border: 1px solid var(--accent-line);
    border-radius: 5px;
    background: rgba(15,23,42,0.92);
    color: #eef2ff;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .35px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}
.ws-drop-overlay.ws-drop-tab {
    background: rgba(129,140,248,0.12);
    border-style: dashed;
}
.ws-drop-overlay.ws-drop-snap {
    background: rgba(99,102,241,0.20);
    border-style: solid;
}
.ws-drop-target-tab {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(129,140,248,0.26), inset 0 0 0 1px var(--accent) !important;
}
.ws-drop-target-dock {
    border-color: var(--accent-line) !important;
    outline: 2px dashed var(--accent);
    outline-offset: 2px;
}
/* Dock cross: five visible drop-target buttons over the hovered leaf (PANEL-02).
   Pure pointer affordance — hit-testing happens in JS against the same rects,
   so these stay non-interactive and screen-reader-inert. */
.ws-dock-cross {
    position: absolute;
    z-index: 220;
    pointer-events: none;
    display: none;
}
.ws-dock-cross-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,0.92);
    border: 1px solid var(--accent-line);
    border-radius: 6px;
    color: #c7d2fe;
    box-shadow: var(--shadow-sm);
}
.ws-dock-cross-btn::before { content: ''; width: 0; height: 0; }
.ws-dock-cross-center::before { width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.ws-dock-cross-top::before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid currentColor; }
.ws-dock-cross-bottom::before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid currentColor; }
.ws-dock-cross-left::before { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 8px solid currentColor; }
.ws-dock-cross-right::before { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid currentColor; }
.ws-dock-cross-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #0b0f1a;
    box-shadow: 0 0 0 3px rgba(129,140,248,0.35);
}
.ws-drag-ghost {
    position: fixed;
    z-index: 1300;
    pointer-events: none;
    padding: 4px 12px;
    font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-main);
    background: var(--bg-surface-2);
    border: 1px solid var(--accent-line);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    display: none;
}
.ws-drag-preview {
    position: fixed !important;
    z-index: 1400 !important;
    pointer-events: none !important;
    opacity: .9;
    transform: rotate(1deg) scale(.985);
    transform-origin: 12px 12px;
    box-shadow: 0 12px 34px rgba(0,0,0,.42), 0 0 0 2px var(--accent);
}
.ws-drag-preview .ws-header { cursor: grabbing; }
.ws-drag-snap-preview {
    z-index: 180 !important;
    opacity: .46;
    transform: none;
    border: 2px dashed var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(129,140,248,0.22), inset 0 0 24px rgba(99,102,241,0.12);
}
.ws-drag-source { opacity: .34; }
body.ws-dragging { cursor: grabbing; }
body.ws-dragging * { cursor: grabbing !important; user-select: none !important; }

/* ── Floating resize handles ── */
.ws-fhandle { position: absolute; z-index: 5; touch-action: none; }
.ws-fh-n  { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.ws-fh-s  { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.ws-fh-e  { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.ws-fh-w  { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.ws-fh-ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.ws-fh-sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.ws-fh-nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
.ws-fh-se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: nwse-resize; }

/* ── Navbar "Panels" menu ── */
.ws-menu-wrap { position: relative; display: inline-flex; }
.ws-menu-btn {
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--border-color); border-radius: 7px;
    background: var(--secondary); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.ws-menu-btn:hover { color: var(--text-main); background: var(--secondary-hover); }
.ws-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 170px; z-index: 500;
    background: var(--bg-panel);
    border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: var(--shadow-md);
    padding: 4px;
    display: flex; flex-direction: column;
}
.ws-menu-label {
    padding: 5px 10px 3px;
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    user-select: none;
}
.ws-menu-note {
    padding: 5px 10px 3px 30px;
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.3;
}
.ws-menu.hidden { display: none; }
.ws-menu-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    border: none; border-radius: 6px;
    background: transparent; color: var(--text-main);
    font-size: 12px; text-align: left; cursor: pointer;
}
.ws-menu-item:hover:not(:disabled) { background: var(--bg-surface-2); }
.ws-preset-item { color: var(--accent-hover); }
.ws-menu-item:disabled { opacity: 0.5; cursor: default; }
.ws-menu-check { width: 14px; flex-shrink: 0; color: var(--accent); font-size: 11px; }
.ws-menu-sep { height: 1px; background: var(--border-color); margin: 4px 6px; }

/* ── Ring render (RING-02: orthographic, two-colour) ── */
.ring-render-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #f8fafc;
    color: #172033;
}
.ring-render-toolbar {
    min-height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid #d5dce7;
    background: #eef2f7;
}
/* RING-03: the Bevel control and its Reset. Only the title may shrink — a numeric field that
   collapses cannot be typed in. The panel clips its own overflow, so the shared dropdown is taken
   out to the viewport the same way the params bar's is (placeParamsBarSlider). */
.ring-render-control-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #475569;
}
/* REG-048: the panel's in-content title is gone (the dock chrome already names it), so the
   first toolbar control takes over the title's job of pushing the Bevel controls to the right. */
.ring-render-control-label-first { margin-left: auto; }
.ring-render-numeric-control {
    flex-shrink: 0;
    grid-template-columns: 56px 26px;
}
.ring-render-numeric-control > input[type="text"] {
    width: 56px;
    height: 26px;
    padding: 3px 6px;
    font-size: 12px;
}
.ring-render-numeric-control > .vector-numeric-chevron { width: 26px; min-height: 26px; font-size: 15px; }
.ring-bevel-reset {
    flex-shrink: 0;
    height: 26px;
    padding: 0 8px;
    font-size: 11px;
}
.ring-render-meta {
    flex-shrink: 0;
    padding: 5px 10px 0;
    color: #64748b;
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ring-render-viewport {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    padding: 4px 8px 8px;
}
.ring-render-svg { width: 100%; height: 100%; min-height: 0; display: block; }
.ring-render-empty {
    width: 100%;
    align-self: center;
    padding: 18px;
    text-align: center;
    color: #64748b;
    font-size: 12px;
}
/* RING-04: the Spin slider is its own bar at the very bottom of the panel — label at the left,
   the slider taking the remaining width, Reset at the right. */
.ring-spin-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-top: 1px solid #d5dce7;
    background: #eef2f7;
}
.ring-spin-bar-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #475569;
}
.ring-spin-bar input[type="range"] {
    flex: 1;
    min-width: 40px;
}
.ring-spin-bar .ring-spin-reset {
    flex-shrink: 0;
    height: 26px;
    padding: 0 8px;
    font-size: 11px;
}