/* Workspace shell: a top tab strip + a horizontal scroll-snap track of full-width
   tool panels. Swipe is native (scroll-snap); JS only syncs the active tab. Tool
   CSS is namespaced (.dice, .init, ...), so the panels do not collide.
   Tokens: --bg (page background), --text (foreground), --accent, --border, --surface. */

.ws {
    display: flex;
    flex-direction: column;
    /* Fill exactly the space below the 68px sticky header (+1px border) so the page
       itself never scrolls - the tab strip stays visible and only panels scroll. */
    height: calc(100dvh - 69px);
    max-width: none;
    padding: 0;
    position: relative; /* anchor for the absolutely-positioned .ws-editor overlay */
}

.ws-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.ws-tabs {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1 1 auto;
}
.ws-tabs::-webkit-scrollbar { display: none; }

.ws-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    padding: .4rem .7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.ws-tab[aria-selected="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.ws-tab .icon { width: 1em; height: 1em; }

.ws-edit-btn,
.ws-editor-done,
.ws-empty-btn {
    flex: 0 0 auto;
    padding: .4rem .8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.ws-track {
    display: flex;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ws-track::-webkit-scrollbar { display: none; }

.ws-panel {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    overflow-y: auto;
    padding: 1rem;
    box-sizing: border-box;
}

/* Edit mode + empty state */
.ws-empty {
    margin: auto;
    text-align: center;
    color: var(--text);
}

.ws-editor {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--bg);
}
.ws-editor-list { list-style: none; margin: 0; padding: 0; }
.ws-editor-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .25rem;
    border-bottom: 1px solid var(--border);
}
.ws-editor-row .icon { width: 1.1em; height: 1.1em; }
.ws-editor-title { flex: 1 1 auto; }
.ws-editor-row button {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    padding: .25rem .5rem;
}
.ws-editor-row button[disabled] { opacity: .35; cursor: default; }

@media (min-width: 720px) {
    /* On desktop the tab strip fits without scrolling; panels still snap. */
    .ws-tabs { flex-wrap: wrap; overflow-x: visible; }
}