/*
  App-level layout and screen-specific styling only. Reusable visuals belong to a component's scoped
  *.razor.css; the design vocabulary belongs to tokens.css. NO color literals here — use the tokens.
*/

/* The router's FocusOnNavigate focuses the page <h2> (the section-style page title) after each navigation
   for screen-reader users. Keep the focus (a11y) but suppress the visible ring — it is a non-interactive
   heading, not a control. */
h2:focus-visible {
    outline: none;
}

/* Inter — self-hosted variable font (OFL). The UI font set on --rs-font-sans in tokens.css. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/Inter-Variable.woff2") format("woff2");
}

/* Agdasima — self-hosted narrow display font (OFL), used for the brand wordmark. */
@font-face {
    font-family: "Agdasima";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("../fonts/Agdasima-400.woff2") format("woff2");
}

@font-face {
    font-family: "Agdasima";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("../fonts/Agdasima-700.woff2") format("woff2");
}

body {
    margin: 0;
    font-family: var(--rs-font-sans);
    color: var(--rs-color-fg);
    background-color: var(--rs-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rs-main {
    max-width: var(--rs-container-max);
    margin: 0 auto;
    padding: var(--rs-space-6) var(--rs-space-5);
}

.rs-empty {
    color: var(--rs-color-fg-muted);
}

/* Databases list screen — built on the shared DataTable + dialogs (Phase 2). */
.rs-databases__name {
    color: var(--rs-color-accent);
    font-weight: var(--rs-font-weight-medium);
    text-decoration: none;
}

.rs-databases__name:hover {
    text-decoration: underline;
}

.rs-databases__actions-col {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* The row-actions cell stays a real table cell (NOT display:flex — a flex td drops out of the table's row
   height sizing, so it no longer stretches to match sibling cells, e.g. a taller collaborator-avatar row —
   leaving its border-bottom short of theirs and a stray seam at the column boundary). The single kebab
   right-aligns as inline content and centers vertically (mirrors .rs-records__actions). */
.rs-databases__actions {
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

/* "Shared with" column — collaborator avatars / indicator (Database Sharing #174). */
.rs-databases__shared-col {
    width: 12rem;
}

.rs-databases__shared {
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-sm);
}

/* The avatar stack is a button so the owner can jump straight into the Share dialog from the row. Cap the
   control to the row's text line box so the avatar stack (taller than the cell's text) can't inflate the
   table row height — the avatars overflow into the cell's vertical padding instead of growing the row. */
.rs-databases__collaborators {
    display: inline-flex;
    align-items: center;
    height: 1lh;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.rs-databases__solo {
    color: var(--rs-color-fg-subtle);
}

/* Share database dialog (Database Sharing #174). */
.rs-share {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-5);
    min-width: min(30rem, 80vw);
}

.rs-share__add-row {
    display: flex;
    gap: var(--rs-space-2);
    align-items: center;
}

.rs-share__add-row .rs-text-field {
    flex: 1 1 auto;
}

.rs-share__feedback {
    margin: var(--rs-space-2) 0 0;
    font-size: var(--rs-text-sm);
}

.rs-share__feedback--error {
    color: var(--rs-color-error);
}

.rs-share__feedback--info {
    color: var(--rs-color-fg-muted);
}

.rs-share__people-title {
    margin: 0 0 var(--rs-space-2);
    font-size: var(--rs-text-sm);
    font-weight: var(--rs-font-weight-semibold);
    color: var(--rs-color-fg-muted);
}

.rs-share__empty {
    margin: 0;
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-sm);
}

.rs-share__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-2);
}

.rs-share__row {
    display: flex;
    align-items: center;
    gap: var(--rs-space-3);
}

.rs-share__identity {
    display: flex;
    align-items: center;
    gap: var(--rs-space-2);
    flex: 1 1 auto;
    min-width: 0;
}

.rs-share__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-share__row-actions {
    display: flex;
    align-items: center;
    gap: var(--rs-space-2);
    flex: 0 0 auto;
}

/* Tables screen (Phase 3) — built on the shared DataTable + dialogs. */
.rs-tables__name {
    font-weight: var(--rs-font-weight-medium);
}

.rs-tables__count-col {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.rs-tables__actions-col {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.rs-tables__actions {
    display: flex;
    gap: var(--rs-space-2);
    justify-content: flex-end;
    align-items: center;
}

/* "Records" navigation link in the Tables list — a link styled to sit beside the small action buttons. */
.rs-tables__records-link {
    display: inline-flex;
    align-items: center;
    padding: var(--rs-space-1) var(--rs-space-3);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-md);
    background-color: var(--rs-color-surface);
    color: var(--rs-color-accent);
    font-size: var(--rs-text-sm);
    text-decoration: none;
}

.rs-tables__records-link:hover {
    border-color: var(--rs-color-border-strong);
    background-color: var(--rs-color-surface-muted);
}

/* Fields screen (Phase 4) — built on the shared DataTable + dialogs + FieldTypePicker. */
.rs-fields__name {
    font-weight: var(--rs-font-weight-medium);
    margin-right: var(--rs-space-2);
}

.rs-fields__flag-col {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.rs-fields__actions-col {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Row-actions cell. A normal table-cell (NOT display:flex) so it stretches to the full row height and its
   bottom border lines up with the rest of the row — including the emptied system-field cells. The 1.75rem
   kebab is taller than a text line, so with the shared cell's vertical padding it would push body rows proud
   of the (buttonless) header; drop the vertical padding so the kebab centers within the text-driven row
   height instead. !important because the shared DataTable td padding is more specific (and density-scoped). */
.rs-fields__actions {
    text-align: right;
    white-space: nowrap;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.rs-fields__type-readonly {
    margin: 0;
    padding: var(--rs-space-2) var(--rs-space-3);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-md);
    background-color: var(--rs-color-surface-muted);
    color: var(--rs-color-fg-muted);
}

/* Relationships screen (Phase 5) — built on the shared DataTable + dialogs + RelationshipEditor. */
.rs-relationships__name {
    font-weight: var(--rs-font-weight-medium);
}

.rs-relationships__actions-col {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.rs-relationships__actions {
    display: flex;
    gap: var(--rs-space-2);
    justify-content: flex-end;
    align-items: center;
}

.rs-relationships__readonly-value {
    margin: 0;
    padding: var(--rs-space-2) var(--rs-space-3);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-md);
    background-color: var(--rs-color-surface-muted);
    color: var(--rs-color-fg-muted);
}

/* In-database master/detail workspace (E3.5 Phase 2): the table switcher (master) on the left + the records /
   schema body (detail) on the right. Fills the shell content area (a flex column) as a flex row that never
   page-scrolls — the master scrolls its own list, the detail keeps the full-height / only-body-scrolls grid. */
.rs-data-workspace {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    /* Cancel the shell content padding so the split spans edge-to-edge; the panes re-apply their own. */
    margin: calc(-1 * var(--rs-space-5));
}

.rs-data-workspace__master {
    flex: 0 0 var(--rs-master-pane-width, 16rem);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--rs-color-border);
    background-color: var(--rs-color-surface);
}

.rs-data-workspace__detail {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--rs-space-5);
}

/* Edge-to-edge records page: the data pane uses every pixel, so the detail drops its gutter and the toolbar /
   grid / pager span the full width (the toolbar and pager supply their own horizontal inset, the grid's cells
   their own padding). Scoped to the records page — the schema editor keeps the default detail gutter. */
.rs-data-workspace__detail--flush {
    padding: 0;
}

@media (max-width: 640px) {
    /* Narrow viewports: stack so the master becomes a short, capped switcher above the detail. */
    .rs-data-workspace {
        flex-direction: column;
    }

    .rs-data-workspace__master {
        flex: 0 0 auto;
        max-height: 14rem;
        border-right: 0;
        border-bottom: 1px solid var(--rs-color-border);
    }
}

/* Full-height records page: fills the workspace detail (a flex column) so the page itself never scrolls. The
   header matter (table nav, toolbar, find/sort) stays pinned at the top and the pager at the bottom; only the
   table body scrolls between them. */
.rs-records-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Full-width layout (E3.5 Phase 3 / #159): the sidebar is hidden, so the master track collapses to 0 (the
   master pane is simply not rendered) and the detail's flex:1 reclaims the full width. The detail still owns
   the workspace padding so the grid keeps its edge gutter. No grid track to zero — the flex split does it. */
.rs-data-workspace--full .rs-data-workspace__detail {
    /* No special rule needed beyond flex:1 1 auto (already set); kept as a hook for the full-width state. */
    flex: 1 1 auto;
}

/* The records toolbar (E3.5 Phase 3): a single flex row with two states. The lead (toggle + title, or — when
   the sidebar is hidden — the toggle + left-pinned table combobox) sits at the left; the controls group is
   pushed to the right by a dynamic spacer (margin-left:auto) so the combobox stays left-pinned and the normal
   controls stay right-aligned in both layouts. Wraps gracefully at narrow widths so the two never overlap. */
.rs-records__toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rs-space-3);
    margin-bottom: var(--rs-space-5);
}

.rs-records__toolbar-lead {
    display: flex;
    align-items: center;
    gap: var(--rs-space-3);
    min-width: 0;
}

.rs-records__toolbar-title {
    margin: 0;
    font-size: var(--rs-text-lg);
    font-weight: var(--rs-font-weight-semibold);
}

/* The left-pinned table selector (combobox + "New table") shown only in the full-width layout. */
.rs-records__table-picker {
    display: flex;
    align-items: center;
    gap: var(--rs-space-2);
    min-width: 0;
}

.rs-records__table-picker .rs-select-field {
    min-width: 12rem;
}

/* The dynamic spacer: margin-left:auto consumes the free space between the lead and the controls, pinning the
   combobox left and the controls right. When the toolbar wraps, the controls group drops to its own line. */
.rs-records__toolbar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rs-space-3);
    margin-left: auto;
}

/* Responsive overflow toolbar (#166): a single NON-wrapping line. ONE unified row — Lead (left) · dynamic spacer ·
   trailing cluster led by the kebab · End (far right). The Lead, kebab + End never overflow; the actions row clips
   (and the JS moves low-priority actions into the kebab) so the bar always stays exactly one row tall. The dynamic
   spacer (flex:1, min-width:0) absorbs the slack between the lead and the trailing cluster and collapses first. */
.rs-overflow-toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--rs-space-3);
    /* Fixed height + uniform padding so the spacing around every control in the bar is identical, and the bar
       matches the "TABLES" header and the pager bars. */
    height: var(--rs-workspace-header-height);
    padding: var(--rs-space-3);
    margin-bottom: var(--rs-space-5);
    min-width: 0;
}

/* The records-page toolbar is the top frame of the edge-to-edge data pane: a fixed-height header row (matching
   the "TABLES" master header so their bottom dividers form one continuous line across the split), a modest
   horizontal gutter so the title/controls aren't jammed to the edges, and a bottom divider instead of the
   card's top border. Scoped to the records page so the generic toolbar (e.g. the styleguide) is unaffected. */
.rs-records-page > .rs-overflow-toolbar {
    margin-bottom: 0;
    border-bottom: 1px solid var(--rs-color-border);
}

.rs-overflow-toolbar > .rs-dropdown,
.rs-overflow-toolbar__end {
    flex: 0 0 auto;
}

/* The lead can shrink (its name truncates) so the trailing cluster is never pushed off the row; the combobox keeps
   its own min-width so the switcher stays usable. */
.rs-overflow-toolbar__lead {
    flex: 0 1 auto;
}

.rs-overflow-toolbar__lead,
.rs-overflow-toolbar__end {
    display: flex;
    align-items: center;
    gap: var(--rs-space-3);
    min-width: 0;
}

/* The inline table name (the absorbed page title) — a touch more prominent than body, truncates gracefully. */
.rs-overflow-toolbar__lead .rs-records__toolbar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-overflow-toolbar__spacer {
    flex: 1 1 0;
    min-width: 0;
}

/* The overflowable actions. position:relative anchors the measurement "ghosts"; overflow:hidden clips on the
   first (pre-JS) render at narrow widths instead of wrapping. */
.rs-overflow-toolbar__actions {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--rs-space-3);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.rs-overflow-toolbar__action {
    flex: 0 0 auto;
}

/* A collapsed action stays in the DOM purely so its width is always measurable; it is out of flow and hidden
   from sight + the a11y tree (the interactive copy is the kebab menu item). */
.rs-overflow-toolbar__action--ghost {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    pointer-events: none;
}

/* The data region between the (flex-none) header matter and the page modals. LoadingContainer renders its
   child inline (no wrapper), so the grid and the pager are direct flex children: the grid fills (flex:1) and
   scrolls its own body, the pager pins (flex:0). */
.rs-records-page__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* List view's scroller — the grid brings its own (.rs-record-grid__scroll) and the form its own
   (.rs-record-view__scroll), but the list layout doesn't, so it gets one here: it fills the body and scrolls its
   own content while the toolbar + master pane stay fixed. The pager is a sibling outside it, so it stays pinned. */
.rs-records-page__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Shared bottom bar chrome (#253): the Table/List pager and the Form pane's action+browse bar use it so both sit
   at the bottom of the view, at the same fixed height + uniform padding as the toolbar, with a top divider framing
   the scrolling body above. Three sections on a 1fr·auto·1fr grid so the nav stays truly centred whatever the
   left/right widths. */
.rs-pager {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--rs-space-3);
    height: var(--rs-workspace-header-height);
    padding: var(--rs-space-3);
    border-top: 1px solid var(--rs-color-border);
}

.rs-pager__left,
.rs-pager__nav,
.rs-pager__right {
    display: flex;
    align-items: center;
    gap: var(--rs-space-2);
    min-width: 0;
}

.rs-pager__left { justify-self: start; }
.rs-pager__nav { justify-self: center; }
.rs-pager__right { justify-self: end; }

/* Equal-width nav buttons: the fixed-width icon keeps the single- and double-chevron controls the same size.
   Backs up the FontAwesome kit's own .fa-fw in case its utilities aren't bundled. */
.rs-pager__nav .fa-fw {
    width: 1.25em;
    text-align: center;
}

/* "Page/Record [input] of N" — a direct-jump cluster. The input is sized to a few digits and centred. */
.rs-pager__jump {
    display: flex;
    align-items: center;
    gap: var(--rs-space-2);
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-sm);
    white-space: nowrap;
}

.rs-pager__jump .rs-text-field {
    width: 3.75rem;
    text-align: center;
    padding-inline: var(--rs-space-2);
}

.rs-records__range {
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-sm);
    white-space: nowrap;
}

.rs-records__page-size {
    display: flex;
    gap: var(--rs-space-2);
    align-items: center;
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-sm);
    white-space: nowrap;
}

.rs-records__column-toggle {
    display: flex;
    gap: var(--rs-space-2);
    align-items: center;
}

/* Records grid row actions (Phase 4) — Edit / Delete per row. */
.rs-records__actions-col {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* The row-actions cell stays a real table cell (NOT display:flex — a flex td drops out of the table's column
   sizing, so the columns stop filling width:100% and the row background runs past the last cell). The single
   kebab right-aligns as inline content and centers vertically. */
.rs-records__actions {
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

/* The kebab row-actions menu (RowActionsMenu) — the standard per-row actions affordance across every table.
   Stops row-click propagation itself; this just lays out the trigger. */
.rs-row-actions {
    display: inline-flex;
}

/* The kebab reads as a button: an additive translucent overlay on hover (token) so it's always visible on a
   plain, striped, or already-hovered row — it darkens (light theme) / lightens (dark) whatever is beneath,
   rather than matching a fixed surface that could equal the row's own hover tint. And it's sized below the row
   height at every density — the default IconButton is a fixed control-height that overflows a compact row. */
.rs-row-actions .rs-dropdown__trigger .rs-icon-button {
    width: 1.75rem;
    height: 1.75rem;
}

.rs-row-actions .rs-dropdown__trigger .rs-icon-button:hover:not(:disabled) {
    background-color: var(--rs-color-overlay-hover);
    color: var(--rs-color-fg);
}

/* Relationship columns (Phase 7) — navigable cells that follow a relationship to the related record / list. */
.rs-records__rel-col {
    white-space: nowrap;
}

.rs-records__rel-link {
    display: inline-flex;
    align-items: center;
    gap: var(--rs-space-1);
    padding: 0;
    border: none;
    background: none;
    color: var(--rs-color-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.rs-records__rel-link:hover {
    color: var(--rs-color-fg);
}

.rs-records__rel-empty {
    color: var(--rs-color-fg-muted);
}

/* Related-records panel (Phase 7) — read-only mini-grid of the records reached by a relationship. */
.rs-related__caption {
    margin: 0 0 var(--rs-space-3);
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-sm);
}

.rs-related__note {
    color: var(--rs-color-fg-muted);
}

.rs-related__pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rs-space-3);
    justify-content: space-between;
    align-items: center;
    margin-top: var(--rs-space-4);
}

.rs-related__range {
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-sm);
}

.rs-related__pager-controls {
    display: flex;
    gap: var(--rs-space-3);
    align-items: center;
}

/* Editable portal (E6 Phase 3): add/remove affordances over the related set. */
.rs-related__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--rs-space-3);
}

.rs-related__add-form {
    padding: var(--rs-space-3);
    margin-bottom: var(--rs-space-4);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-md);
    background: var(--rs-color-bg-subtle);
}

.rs-related__add-actions {
    display: flex;
    gap: var(--rs-space-3);
    justify-content: flex-end;
}

.rs-related__actions-col {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.rs-related__open {
    margin-right: auto;
    color: var(--rs-color-accent);
    font-size: var(--rs-text-sm);
}

/* Sortable column header (Phase 6) — a header that cycles its sort on click. */
.rs-records__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--rs-space-1);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
    color: inherit;
}

.rs-records__sort:hover {
    color: var(--rs-color-accent);
}

.rs-records__sort-indicator {
    font-size: var(--rs-text-xs);
    color: var(--rs-color-fg-muted);
    display: inline-flex;
    flex: none;
    width: 1em;
    height: 1em;
    overflow: hidden;
}

/* Bound the FontAwesome svg with EXPLICIT 1em width + height (not width:auto). Safari can render a Blazor-
   re-mounted nested svg at its native viewBox size when the width is auto — blowing the sort chevron up to
   overlay the table — until the kit re-processes it; an explicit square (the container clips as a final guard)
   bounds it in every browser, and FA's preserveAspectRatio scales the glyph to fit without distortion. */
.rs-records__sort-indicator svg,
.rs-records__sort-indicator .svg-inline--fa {
    width: 1em;
    height: 1em;
}

/* Compact density: a smaller sort chevron to match the tighter rows (the icon is an `<i>` whose nested FA svg
   is bound to 1em, so the font-size sets its size). */
.rs-record-grid[data-density="compact"] .rs-records__sort-indicator {
    font-size: 0.625rem;
}

/* Active (sorted) columns get the accent chevron, matching the shared SortableHeader. */
th[aria-sort="ascending"] .rs-records__sort-indicator,
th[aria-sort="descending"] .rs-records__sort-indicator {
    color: var(--rs-color-accent);
}

.rs-records__sort-order {
    font-size: var(--rs-text-xs);
    color: var(--rs-color-fg-muted);
}

/* Record form note shown when a table has no editable fields. */
.rs-record-form__note {
    margin: 0;
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-sm);
}

/* Record form pane (#251, edge-to-edge in #253) — the records workspace's Form view-mode body. A flex column that
   fills the detail: the form body scrolls, and ONE fixed action+browse bar (.rs-pager) is pinned at the BOTTOM,
   matching the Table/List pager. No card frame. */
.rs-record-view__pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The record-nav cluster in the bottom bar: first / prev / "Record [input] of M" / next / last. */
.rs-record-view__browse {
    display: flex;
    gap: var(--rs-space-2);
    align-items: center;
}

/* The only scrolling region of the pane; the bar stays fixed below it. Its own gutter insets the fields. */
.rs-record-view__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--rs-space-4);
}

/* The editors are laid out comfortably, capped so wide screens don't stretch fields edge-to-edge. */
.rs-record-view__form {
    max-width: 40rem;
}

/* Related-records section (Phase 7 / #72) — read context: navigable links from the form to the related record(s). */
.rs-record-form__relationships {
    margin-top: var(--rs-space-5);
    padding-top: var(--rs-space-4);
    border-top: 1px solid var(--rs-color-border);
}

.rs-record-form__relationships-title {
    margin: 0 0 var(--rs-space-3);
    font-size: var(--rs-text-sm);
    font-weight: var(--rs-font-weight-semibold);
    color: var(--rs-color-fg-muted);
}

.rs-record-form__rel-list {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-record-form__rel-item {
    display: flex;
    gap: var(--rs-space-3);
    justify-content: space-between;
    align-items: baseline;
}

.rs-record-form__rel-name {
    color: var(--rs-color-fg);
}

.rs-record-form__rel-link {
    display: inline-flex;
    align-items: center;
    gap: var(--rs-space-1);
    padding: 0;
    border: none;
    background: none;
    color: var(--rs-color-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.rs-record-form__rel-link:hover {
    color: var(--rs-color-fg);
}

.rs-record-form__rel-empty {
    color: var(--rs-color-fg-muted);
}

.rs-relationships__hint {
    margin: 0;
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-sm);
}

/* Shared detail frame for every Design-mode surface (Schema / Layouts / Value Lists). It is the SAME "pinned
   toolbar over an independently-scrolling body" frame the records page uses — the toolbar sits INSIDE the detail
   column (right of the master gutter), so its bottom divider lines up with the "TABLES" master header's to read
   as one continuous rule across the split. The toolbar spans full width only when the sidebar is hidden (the
   master track collapses and the detail reclaims it). Detail must be --flush so the divider runs edge-to-edge;
   the toolbar and body supply their own insets. This is the one grammar that makes all four surfaces one app. */
.rs-detail-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The toolbar as the detail's top frame: drop the generic bottom margin for the aligned bottom divider. */
.rs-detail-frame > .rs-overflow-toolbar {
    margin-bottom: 0;
    border-bottom: 1px solid var(--rs-color-border);
}

/* The body scrolls independently below the pinned toolbar; it owns its own gutter (the detail is flush). Surfaces
   whose body holds forms / prose / empty states (Value Lists) keep this padding; surfaces whose body IS a data
   table or a canvas (Schema, Layouts) opt into --flush so that content runs EDGE-TO-EDGE like the records grid. */
.rs-detail-frame__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--rs-space-5);
}

.rs-detail-frame__body--flush {
    padding: 0;
}

/* Design mode's schema surface (epic #257): hosted in the workspace detail (a flex column). Full-height like the
   records page — the Fields|Relationships tabs stay pinned and only the active tab panel scrolls. Reuses the
   shared .rs-data-workspace split for the master | detail chrome. (The old standalone back-link + toolbar chrome
   were retired when schema folded into the shell.) */
.rs-schema-editor {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The tab panel: scrolls independently below the pinned toolbar + tabs, so the editor keeps the
   full-height / only-body-scrolls behaviour the records grid established. */
.rs-schema-editor__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-top: var(--rs-space-4);
}

/* A light action bar inside each tab panel (e.g. "New field" / "New relationship"), right-aligned. */
.rs-schema-editor__panel-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--rs-space-4);
}

/* Static SSR sign-in page (renders its own document; links these stylesheets directly). */
.rs-login {
    max-width: 24rem;
    margin: var(--rs-space-8) auto;
    padding: 0 var(--rs-space-5);
}

/* Value-list management (E6 Phase 1). */
/* Design mode's Value Lists surface (epic #257 P3): the detail column that hosts the inline create/edit editor
   or the DB-scoped assignment workspace, beside the value-list master pane. */
.rs-vl-detail {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-4);
    /* The .rs-detail-frame__body owns the gutter now (the surface's split-toolbar frame), so no own padding. */
}

.rs-vl-detail__title {
    margin: 0;
    font-size: var(--rs-text-lg);
    font-weight: var(--rs-font-weight-semibold);
}

.rs-vl-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--rs-space-2);
}

.rs-value-lists {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-value-lists__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rs-space-3);
    padding: var(--rs-space-2) 0;
    border-bottom: 1px solid var(--rs-color-border);
}

.rs-value-lists__meta {
    display: flex;
    align-items: center;
    gap: var(--rs-space-3);
}

.rs-value-lists__name {
    font-weight: var(--rs-font-weight-semibold);
}

.rs-value-lists__count {
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-sm);
}

.rs-value-lists__actions {
    display: flex;
    gap: var(--rs-space-2);
}

/* The assign-to-field row: field / value list / control / button on one line, wrapping when cramped. */
.rs-value-lists__assign-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rs-space-3);
}

.rs-value-lists__assignments {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-2);
    margin: var(--rs-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.rs-value-lists__assignment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rs-space-3);
    font-size: var(--rs-text-sm);
}

.rs-value-lists__items {
    width: 100%;
    resize: vertical;
    font-family: var(--rs-font-mono, monospace);
}

/* The field editor's value-list backing section (#271, field-editor front-door): a lightly-separated group at the
   foot of the add/edit field modal (pick an existing list + control style, or inline-create one). */
.rs-field-vl {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-3);
    margin-top: var(--rs-space-2);
    padding-top: var(--rs-space-4);
    border-top: 1px solid var(--rs-color-border);
}