/* ============================================================================
   Workbench — the three-pane writing surface

   A writing application is not a page with a sidebar. It is a full-height frame
   holding a spine, a surface and an inspector, none of which scroll each other,
   plus a status strip that is always readable. `.app-sidebar` and `.app-main`
   cannot express that: they assume one scrolling document under a fixed rail.

   It lives here rather than in the product that needed it first, because a
   stylesheet copied into an application is a second contract and the second one
   drifts. ADR 0021. Nothing below names a colour, a size or a font: every value
   is a token, which is what lets the whole frame follow the theme switch.
   ========================================================================== */

.workbench {
    display: grid;
    grid-template-columns: var(--workbench-spine) minmax(0, 1fr) var(--workbench-inspector);
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100vh;
    background: var(--bg);
    color: var(--text-body);
}

/* Each pane scrolls itself and nothing else. min-height:0 is what lets a grid
   child shrink below its content and actually overflow, the same trick
   .sidebar-nav needs; without it the whole frame grows and the status strip
   leaves the viewport. */
.workbench-pane {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workbench-spine {
    background: var(--surface-sunken);
    border-right: var(--border-width) solid var(--border-subtle);
}

.workbench-surface {
    background: var(--surface);
}

.workbench-inspector {
    background: var(--surface-sunken);
    border-left: var(--border-width) solid var(--border-subtle);
}

/* A pane's own title. It stays put while the pane's body scrolls under it,
   because a fact panel scrolled halfway down is a panel whose heading is the
   only thing telling you which of the three you are reading. */
.workbench-pane-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-7);
    border-bottom: var(--border-width) solid var(--border-subtle);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-subtle);
}

.workbench-pane-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.workbench-pane-body::-webkit-scrollbar { width: var(--space-3); }
.workbench-pane-body::-webkit-scrollbar-track { background: transparent; }
.workbench-pane-body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-xs);
}

/* ---- The spine ---------------------------------------------------------- */

/* One file in reading order. The indent is the include depth, so a part
   containing chapters reads as one, and it is set as a custom property rather
   than as a class per level: depth is a number the format already bounds at
   three, and four classes to say the same thing is four chances to disagree
   with it. */
.spine-entry {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-7);
    padding-left: calc(var(--space-7) + var(--spine-depth, 0) * var(--space-8));
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
}

.spine-entry:hover {
    background: var(--surface-hover);
    color: var(--text-body);
}

.spine-entry-open {
    background: var(--brand-soft);
    color: var(--brand-on-soft);
    font-weight: var(--weight-medium);
}

/* The dot that says a file has unsaved changes. It sits in the flow rather than
   floating, so a long title truncates against it instead of under it. */
.spine-entry-dirty {
    flex-shrink: 0;
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--radius-circle);
    background: var(--warning);
}

.spine-entry-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- The surface -------------------------------------------------------- */

/* The measure is capped and centred. Prose set to the full width of a 1600px
   window is a line nobody can track back to the start of, and every writing
   tool that gets this wrong is a tool people write in fullscreen mode to
   escape. */
.workbench-editor {
    max-width: var(--measure-prose);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-12) var(--space-10) var(--space-24);
}

/* ---- The status strip --------------------------------------------------- */

/* Spans all three columns. It is the one place that says what the model just
   did, what the last build produced and how many findings are open, and it is
   always visible because those are the three answers a writer interrupts
   themselves to look for. */
.workbench-status {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) var(--space-7);
    border-top: var(--border-width) solid var(--border-subtle);
    background: var(--surface-raised);
    font-size: var(--text-2xs);
    color: var(--text-subtle);
}

.workbench-status-spacer { flex: 1; }

.workbench-status-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}