/* views.css — the persona editor sheet, the Knowledge Base, Data Ingestion and
   Armory view shells, the Theater Command sheet, and the overlay enter/exit
   motion. Last in the cascade, including the bare `a` colour at the very end. */

/* ---- Persona editor sheet ----
   This was a 380px full-width band in the document flow directly above
   .sim-grid. Opening it dropped #action-log from 298px to 36px and the
   command rail from 612px to 214px: the feed IS the product, and one
   optional editor evicted it. It is a sheet now, on the same pattern as
   Theater Command — fixed, right-anchored, backdrop, focus trap — so the
   console behind it keeps its size and gets it back untouched on close.
   The two panes stack rather than sitting side by side; at 664px wide the
   Current Profile column was mostly empty space. */
/* Wider than Theater Command: this one holds two stacked panes and a form,
   not a single field. Written as a sheet override so it wins wherever
   .theater-sheet's own width sits in the cascade. */
.theater-sheet.persona-sheet { width: min(560px, 100%); }
.nl-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.nl-pane { display: flex; flex-direction: column; }
.nl-pane + .nl-pane { border-top: 1px solid var(--surface-border); }
.nl-pane.is-override { background: var(--surface-recessed-soft); flex: 1; }
.nl-pane-head { padding: var(--space-snug) var(--space-shell); border-bottom: 1px solid var(--surface-border); background: var(--surface-recessed-soft); }
.nl-pane-head h4 { color: var(--accent-color); font-size: var(--type-caption); letter-spacing: var(--track-label); margin: 0; }
.nl-pane-body { padding: var(--space-shell); display: flex; flex-direction: column; gap: var(--space-base); }
.nl-btn-row { display: flex; gap: var(--space-base); }
.nl-btn-row > button { flex: 1; }
.nl-clone { flex-direction: column; gap: var(--space-base); padding: var(--space-base); background: var(--surface-recessed); border: 1px solid var(--surface-border); border-radius: var(--radius); }
.nl-check { display: flex; align-items: center; gap: var(--space-snug); color: var(--text-primary); font-size: var(--type-control); cursor: pointer; }
.nl-status { font-size: var(--type-caption); color: var(--text-secondary); min-height: 18px; text-align: center; }
/* Every sheet closes the same way, so the control is a class, not five
   copies of the same inline style. */
.sheet-close { background: transparent; border: none; color: var(--text-secondary); font-size: var(--type-body); padding: 2px var(--space-snug); cursor: pointer; }
.sheet-close:hover { background: transparent; color: var(--text-primary); }

/* =================== WIKI / INGEST / ARMORY shells =================== */
.panel-content { padding: var(--space-loose); overflow-y: auto; width: 100%; }

/* ---- Data Ingestion ----
   This view was a 980px column centred in a 1330px frame: 175px of dead
   gutter each side, and every rule in it lived in an inline style
   attribute, so it was the one view the design system could not reach.
   The two entry paths — ingest a document, synthesise a passage — are
   genuinely parallel, so they sit side by side and use the width. The
   prose stays measure-bound; only the forms span. */
.ingest-head { display: flex; flex-wrap: wrap; gap: var(--space-snug); justify-content: space-between; align-items: center; }
.ingest-head h2 { font-size: var(--type-claim); margin: 0; color: var(--text-primary); }
.ingest-actions { display: flex; gap: var(--space-snug); }
.ingest-lede { max-width: 68ch; color: var(--text-secondary); line-height: var(--leading-body); margin: var(--space-snug) 0 var(--space-loose); }
.ingest-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--space-shell); align-items: start; max-width: 1360px; }
.ingest-card {
    display: flex; flex-direction: column; gap: var(--space-shell);
    background: var(--surface-2); border: 1px solid var(--surface-border);
    border-radius: var(--radius); padding: var(--space-loose);
}
/* Reset the knowledge base (phase 13): Restore and Clear, moved out of the
   command rail. Full width under the two ingest cards, set apart by a loose gap. */
.kb-reset { margin-top: var(--space-loose); max-width: 1360px; gap: var(--space-base); }
.kb-reset-actions { display: flex; flex-wrap: wrap; gap: var(--space-snug); }
.ingest-card h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-control); font-size: var(--type-control); color: var(--text-primary); margin: 0; }
.ingest-field { display: flex; flex-direction: column; gap: var(--space-micro); }
.ingest-status {
    padding: var(--space-base); background: var(--group-head);
    border: 1px solid var(--surface-border); border-radius: var(--radius);
    font-size: var(--type-control); color: var(--terminal-text); line-height: var(--leading-body);
}

.wiki-sidebar { width: 320px; flex-shrink: 0; background: var(--surface-2); border-right: 1px solid var(--surface-border); display: flex; flex-direction: column; overflow: hidden; }
/* Knowledge Base stacks rather than squeezing: the index takes a capped
   share of the height and the reading pane keeps the rest. */
@media (max-width: 1000px) {
    #wiki-view { flex-direction: column; }
    .wiki-sidebar { width: 100%; max-height: 42vh; border-right: 0; border-bottom: 1px solid var(--surface-border); border-radius: var(--radius) var(--radius) 0 0; }
    #wiki-view > .wiki-reading { border: 1px solid var(--surface-border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: var(--space-shell); }
}
#sidebar-list { overflow-x: hidden !important; min-width: 0; }
#sidebar-list * { max-width: 100%; overflow-wrap: break-word; }
.wiki-reading { flex: 1; overflow-y: auto; padding: var(--space-section); }

/* scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* Theater Command sheet — right-anchored, fixed (so main's overflow can't
   clip it), with a real backdrop like every other overlay in the app. */
.theater-sheet {
    position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 100%);
    border-left: 1px solid var(--surface-border-strong);
    background: var(--surface-color); flex-direction: column; z-index: 210;
    box-shadow: -8px 0 30px var(--shadow-ink);
}
.theater-sheet-head {
    padding: var(--space-base) var(--space-shell); border-bottom: 1px solid var(--surface-border);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface-recessed-soft);
}
.sheet-backdrop { position: fixed; inset: 0; z-index: 205; background: var(--scrim); display: none; }
.sheet-backdrop.is-open { display: block; }
/* Overlays: enter AND exit on one curve. allow-discrete keeps the element
   rendered through the exit before display:none applies; @starting-style
   supplies the from-state on enter. Degrades to instant show/hide on
   browsers without these features. Visibility is driven by .is-open. */
#theater-sidebar, #nl-designer-container, #clone-modal-container {
    display: none; opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out),
                transform var(--dur-med) var(--ease-out),
                display var(--dur-med) allow-discrete;
}
/* Both sheets arrive from the edge they are anchored to. */
#theater-sidebar, #nl-designer-container { transform: translateX(24px); }
/* The clone disclosure is small and nested, so it moves faster. */
#clone-modal-container {
    transform: translateY(-10px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                display var(--dur-fast) allow-discrete;
}
#theater-sidebar.is-open,
#nl-designer-container.is-open,
#clone-modal-container.is-open { display: flex; opacity: 1; transform: none; }
@starting-style {
    #theater-sidebar.is-open,
    #nl-designer-container.is-open { opacity: 0; transform: translateX(24px); }
    #clone-modal-container.is-open { opacity: 0; transform: translateY(-10px); }
}

a { color: var(--accent-color); }