/* The Animate workspace (WORKSPACES_SPEC.md): tools/animate.html, the main page's own parts with no rail. Only that page
   loads this file; the main page's look is library.css's, as before. Sharp corners; every needed action a button. */

.ws {
    position: relative;
    margin-top: var(--bar-h, 60px);
    height: calc(100vh - var(--bar-h, 60px));
    min-height: 520px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 1px;
    background: var(--border-color);
}

/* ── the workspace's bar ── */
.ws-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; background: var(--bg-medium); flex-wrap: wrap; }
.ws-name { font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-color); margin-right: 0.4rem; }
.ws-sep { width: 1px; align-self: stretch; background: var(--border-color); margin: 0 0.25rem; }
.ws-open--clip { min-width: 13rem; text-align: left; }
.ws-open.is-on { border-color: var(--primary-color); color: var(--primary-color); }
.ws .is-edited::after { content: "•"; color: var(--primary-color); margin-left: 0.3rem; }

/* ── the columns: the left (Outliner | Setup, its width dragged: --ws-left), the view, the right (Animate | Library) ── */
.ws-main { --ws-left-start: 240px; --ws-right-start: 340px; display: grid; grid-template-columns: var(--ws-left, var(--ws-left-start)) minmax(0, 1fr) var(--ws-right, var(--ws-right-start)); gap: 1px; min-height: 0; background: var(--border-color); }
/* (Starting narrower on a smaller window — a width dragged, --ws-left / --ws-right, kept as it was: SCREENS_SPEC.md §1a,
   window-room.js. A page with its own starting widths says them after this, with the same line.) */
@media (max-width: 1599px) { .ws-main { --ws-left-start: 200px; --ws-right-start: 280px; } }
.ws-right { position: relative; background: var(--bg-medium); min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ws-tabs { display: flex; flex: 0 0 auto; padding: 0.4rem 0.6rem 0; gap: 0.2rem; border-bottom: 1px solid var(--border-color); }
.ws-tabpane { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem 0.6rem; }
.ws-tabpane[hidden] { display: none; }
/* The library in its tab: the clip's details and the filters over the grid, the grid scrolling in what is left. The details
   always shown here — the main page's open or shut is the main page's (its handle is not here). */
.ws-libtab { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ws-libtab[hidden] { display: none; }
.ws-libtab > .ws-lib { flex: 1; min-height: 0; flex-direction: column; }
.ws-libtab .lib-drawer, .ws-libtab .lib-drawer.is-closed { display: flex; width: auto; flex: 0 0 auto; max-height: 34%; border-left: none; border-bottom: 1px solid var(--border-color); }
.ws-libtab .lib-handle { display: none; }
.ws-libtab .lib-panel { flex: 1; min-height: 0; width: auto; }
.ws-libtab .lib-grid, .ws-libtab .lib-poses { flex: 1; min-height: 0; overflow-y: auto; }
/* The library's 4th tab, Props: the Props panel, scrolling in the grid's place. */
.ws-libtab .ws-libview { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem 0.6rem; }
.ws-view { min-width: 0; min-height: 0; }
/* (Each tab scrolls inside its column, so the divider on the column's edge stays put.) */
.ws-left { position: relative; background: var(--bg-medium); min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ws-grip { position: absolute; top: 0; bottom: 0; right: 0; width: 6px; cursor: ew-resize; z-index: 3; }
.ws-grip--l { right: auto; left: 0; }
.ws-grip:hover, .ws-grip.is-on { background: var(--primary-color); }

/* The view's switches, in a row on top of it. */
.ws-viewrow { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; padding: 0.3rem 0.5rem; background: var(--bg-medium); border-bottom: 1px solid var(--border-color); }
.ws-viewrow .lib-viewtools { position: static; display: flex; }
.ws-viewrow .lib-viewtools[hidden] { display: none; }
.ws-viewrow > .lib-check { margin: 0 0.3rem; white-space: nowrap; }
/* A window under 1600 wide (SCREENS_SPEC.md §1d, view-row-fit.js): Mirror, Reverse and In Place in Play ▾, one under the
   other; the row's icon buttons the pose tools' size — one row at 1366. */
.ws-viewrow__pop:not([hidden]) { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
@media (max-width: 1599px) {
    .ws-viewrow .lib-btn--svg { min-width: 30px; padding-left: 0.35rem; padding-right: 0.35rem; }
}
/* A switch of the view's as an icon — its tick underneath, lit while on (the Weapon Lab's Bones, Edit trails, Rig controls
   and Cubes; the main page's Rig controls): what reads the tick is unchanged. */
.ws-viewtoggle { position: relative; cursor: pointer; }
.ws-viewtoggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ws-viewtoggle:has(input:checked) { border-color: var(--primary-color); color: var(--primary-color); background: rgba(9, 197, 204, 0.1); }
.ws-viewtoggle:has(input:focus-visible) { outline: 1px solid var(--primary-color); outline-offset: 1px; }
/* The joints' tools, first in the view's bar (workspace-ui.js createPoseBar): Move, Rotate, Scale, Axes ▾, the snap's
   magnet and its ▾, X mirror, Box select, Children, Other side — each an icon, the pressed one teal. */
.ws-posebar { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ws-posebar .ws-sep { margin: 0 0.2rem; }
.ws-posebar__btn { min-width: 1.9rem; padding: 0.24rem 0.35rem; gap: 2px; }
.ws-posebar__tag { font-size: 0.62rem; font-weight: 600; }
.ws-posebar__more { padding: 0.24rem 0.25rem; margin-left: -1px; }
.ws-posebar__axes { font: inherit; font-size: 0.72rem; background: var(--bg-dark); color: var(--text-secondary); border: 1px solid var(--border-color); padding: 0.2rem 0.3rem; }
.ws-posebar__pop { left: 0; right: auto; display: flex; flex-direction: column; gap: 2px; }
/* Keying ▾ in the timeline's bar: the Pose panel's keys, one under another. */
.ws-keying { display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
.ws-keying .lib-seq__menu-opt, .ws-posebar__pop .lib-seq__menu-opt { text-align: left; }
.ws-keying__sep { height: 1px; background: var(--border-color); margin: 3px 0; }
/* The page's transport: its buttons are in the timeline's bar now; what is left of it is not shown. */
.ws #lib-transport { display: none !important; }

/* ── the columns' tabs as icons, board D: each an icon over its name, the one picked with a teal line under it ── */
.ws-tabs.ws-icontabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 0; gap: 0; background: var(--bg-dark); }
.ws-icontab {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
    padding: 0.5rem 0.1rem 0.35rem; background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-muted); font: inherit; font-size: 0.7rem; letter-spacing: 0.04em; cursor: pointer;
}
.ws-icontab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-icontab:hover { color: var(--text-primary); }
.ws-icontab.is-on { background: var(--bg-light); border-bottom-color: var(--primary-color); color: var(--primary-color); }
.ws-icontab--sub { padding: 0.4rem 0.1rem 0.25rem; gap: 2px; font-size: 0.62rem; }
.ws .ws-icontab.is-edited::after { position: absolute; top: 1px; right: 5px; margin: 0; }
/* A row of icons (Setup's, Animate's): the tool picked under it, alone scrolling. */
.ws-subtabs { display: grid; grid-template-columns: repeat(var(--ws-n, 4), minmax(0, 1fr)); flex: 0 0 auto; border-bottom: 1px solid var(--border-color); }
.ws-tabpane.ws-split { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ws-tabpane.ws-split[hidden] { display: none; }
.ws-subbody { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem 0.6rem; }
.ws-sub[hidden] { display: none; }
.ws-sub .lib-rig-more { margin-top: 0.4rem; }
/* Animate's Transform always on top, the height of a full selection kept (workspace-ui.js) so the row under it stays put;
   Layers always at the foot, a part of the column, its list scrolling inside it. Each sized by its divider (flex-basis,
   set by workspace-ui.js), and either scrolls inside itself when made short. */
.ws-pin { flex: 0 1 auto; padding: 0.5rem 0.6rem; background: var(--bg-light); overflow-y: auto; }
.ws-pin--top { min-height: 10rem; }
.ws-pin--top > .lib-comp__head { margin-bottom: 0.3rem; }
.ws-pin--foot { flex-basis: 32%; min-height: 60px; }
/* Their dividers: a thin bar, teal when pointed at or held, as the columns' are. */
.ws-hgrip { flex: 0 0 5px; cursor: ns-resize; background: var(--border-color); }
.ws-hgrip:hover, .ws-hgrip.is-on { background: var(--primary-color); }

/* ── the drop-downs ── */
.ws-drop {
    position: absolute; z-index: 30; width: 340px; padding: 0.6rem; overflow: auto;
    max-height: calc(100vh - var(--bar-h, 60px) - 70px);
    background: var(--bg-medium); border: 1px solid var(--primary-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.ws-drop[hidden] { display: none; }
.ws-drop--download { width: 380px; }

/* ── the timeline's bar in three, as the Weapon Lab's ── */
.ws .lib-seq__bar.ws-dockbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; }
.ws-dockbar__left, .ws-dockbar__mid, .ws-dockbar__right { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; min-width: 0; }
.ws-dockbar__left { justify-self: start; }
.ws-dockbar__mid { justify-self: center; }
.ws-dockbar__right { justify-self: end; justify-content: flex-end; }
.ws-dockbar__transport { display: inline-flex; gap: 1px; }
.ws-dockbar__pop { left: 0; right: auto; min-width: 210px; }
/* A window under 1600 wide (SCREENS_SPEC.md §1c): the view's and the range's drop-downs, opened leftward from the right
   group's edge, what was on the bar in a column. */
/* At every width (DOPE_SHEET_SPEC.md §1, The top bar — one row at 1920 × 1080 too): a button of the right group's with an
   icon form (.af-short — Selected layer) is its icon; and the timeline folded (§6), the three groups lined up along the
   top, the slider's row the only second one. */
.ws-dockbar__right .af-short .af-short__word { display: none; }
.ws-dockbar__right .af-short .af-short__icon { display: block; }
.lib-fold.is-folded .lib-seq__bar.ws-dockbar { align-items: start; }
.ws-dockbar__right .ws-dockbar__pop { left: auto; right: 0; }
.ws-dockbar__narrow .ws-dockbar__pop:not([hidden]) { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
/* (Clear and Make my copy as narrow as their icon at every width, the size of the bar's other icons — the owner,
   2026-11-02, "make them compact like the smaller icons"; and under 1600 the bar's own gaps a little closer, so the right
   group's eight are one row at 1366.) */
.ws-dockbar .lib-btn--unit.af-iconic { min-width: 0; padding-left: 0.5rem; padding-right: 0.5rem; }
@media (max-width: 1599px) {
    .ws-dockbar.is-narrow .ws-dockbar__right { gap: 0.2rem; }
}
/* Frame, Start, End: Start and End greyed while a sequence's own Range says where it starts and ends; that Range box
   left out for one clip, where Start and End are its range. */
.ws-dockbar .lib-num.is-off { opacity: 0.4; pointer-events: none; }
.ws-dockbar.is-single .lib-seq__range { display: none !important; }
.ws-dockbar__pop .lib-graph__poprow { display: flex; align-items: center; gap: 0.45rem; margin: 0.15rem 0; }

/* The picked one's name, top left of the view (VIEW_BLENDER_SPEC.md §1, Blender's line there): small, never taking a
   click, the key yellow where it has a key on this frame. R, G and S, and the In-Betweens, say theirs below it. */
.ws-viewname { position: absolute; left: 0.6rem; top: 0.45rem; z-index: 5; pointer-events: none; font-size: 0.95rem;
    color: var(--text-primary, #dbe4ee); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); white-space: nowrap; }
.ws-viewname[hidden] { display: none; }
.ws-viewname.is-keyed { color: #ffd633; }
body[data-workspace] .lib-modalhint { margin-top: 1.8rem; }