/*
  RecordStack base layer — a tiny reset plus base element styling and the handful of shared layout
  helper classes that are not component-scoped. NO color literals here: everything references the
  semantic tokens in tokens.css. Component-specific styling lives in each component's scoped
  *.razor.css; this file is only for cross-cutting basics.
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--rs-font-sans);
    font-size: var(--rs-text-md);
    line-height: var(--rs-line-height-normal);
    color: var(--rs-color-fg);
    background-color: var(--rs-color-bg);
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    line-height: var(--rs-line-height-tight);
    font-weight: var(--rs-font-weight-bold);
}

a {
    color: var(--rs-color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img,
svg {
    display: block;
    max-width: 100%;
}

/* FontAwesome runs in SVG mode (App.razor), injecting a nested <svg.svg-inline--fa> into each <i>. Bound it
   to the icon's font-size — mirroring FontAwesome's own default — so an icon mounted late by Blazor (which the
   kit's MutationObserver can miss) can't fall back to the `svg { max-width: 100% }` rule above and balloon to
   its container's width. */
.svg-inline--fa {
    display: inline-block;
    width: auto;
    height: 1em;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* A consistent keyboard focus indicator for every interactive surface. */
:focus-visible {
    outline: var(--rs-focus-ring-width) solid var(--rs-color-focus-ring);
    outline-offset: 2px;
}

code,
pre {
    font-family: var(--rs-font-mono);
    font-size: var(--rs-text-sm);
}

/* ---- Shared layout helpers (used by the styleguide and screens) ---- */

/* Vertical rhythm: stack children with a consistent gap. */
.rs-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-4);
}

/* Horizontal grouping that wraps; the workhorse for toolbars/button rows. */
.rs-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rs-space-3);
}

/* ---- Form control base (shared by TextField + Select; cross-cutting, so not component-scoped) ---- */
/* Same height + font as every other control (--rs-control-height / text-sm) so inputs, selects and
   buttons all line up — matching the dashboard. */
.rs-text-field,
.rs-select {
    width: 100%;
    height: var(--rs-control-height);
    padding: 0 var(--rs-space-3);
    background-color: var(--rs-color-surface);
    color: var(--rs-color-fg);
    border: 1px solid var(--rs-color-border-strong);
    border-radius: var(--rs-radius-md);
    font-size: var(--rs-text-sm);
}

.rs-text-field::placeholder {
    color: var(--rs-color-fg-muted);
}

.rs-text-field:disabled,
.rs-select:disabled {
    background-color: var(--rs-color-surface-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Tabular, lining numerals so columns of numbers/ids align (record grids, counts, ids, prices). */
.rs-numeric {
    font-variant-numeric: var(--rs-font-variant-numeric);
}

/* Visually hidden but available to assistive tech. */
.rs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Data panel (E3 Phase 6) — the shared chrome for the records-screen Find / Sort panels: a titled, raised
   surface that drops in below the toolbar. Panel-specific layout (criterion rows, sort keys) stays in each
   panel's scoped CSS; the surface, header and footer live here so both panels read as one product. */
.rs-data-panel {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-3);
    margin-bottom: var(--rs-space-4);
    padding: var(--rs-space-4);
    background: var(--rs-color-surface);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-lg);
    box-shadow: var(--rs-shadow-sm);
    font-size: var(--rs-text-sm);
}

.rs-data-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rs-space-3);
}

.rs-data-panel__title {
    margin: 0;
    font-size: var(--rs-text-sm);
    font-weight: var(--rs-font-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rs-color-fg-muted);
}

/* The panel's action row — add/clear/run, the match combinator — divided from the body by a hairline. */
.rs-data-panel__footer {
    display: flex;
    align-items: center;
    gap: var(--rs-space-3);
    flex-wrap: wrap;
    padding-top: var(--rs-space-3);
    border-top: 1px solid var(--rs-color-border);
}

/* Layout designer (E7 Phase 2): a canvas (element list) beside an inspector. Placement is picker + inspector
   driven for now; a pointer-drag canvas is a later enhancement (the ViewModel already models position/size). */
.rs-designer {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    gap: var(--rs-space-4);
    align-items: start;
}

@media (max-width: 48rem) {
    .rs-designer {
        grid-template-columns: 1fr;
    }
}

.rs-designer__canvas,
.rs-designer__inspector {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-4);
}

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

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

.rs-designer__element {
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-sm);
}

.rs-designer__element.is-selected {
    border-color: var(--rs-color-accent);
    box-shadow: 0 0 0 1px var(--rs-color-accent);
}

.rs-designer__element-select {
    display: flex;
    gap: var(--rs-space-2);
    align-items: baseline;
    width: 100%;
    padding: var(--rs-space-2) var(--rs-space-3);
    background: none;
    border: 0;
    cursor: pointer;
    text-align: start;
    font: inherit;
}

.rs-designer__element-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rs-color-fg-muted);
    min-width: 5.5rem;
}

.rs-designer__grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rs-space-2);
}

.rs-designer__inspector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rs-space-2);
}

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

/* Design mode's Layouts surface (redesign — canvas-first IDE): the CANVAS is the subject — a raised surface that
   fills the detail, holding the live preview (the editable design canvas in Form, or the runtime List/Table
   renderer). The INSPECTOR is a right-hand rail (its own raised panel) that owns the selected element's props, or
   — with nothing selected — the layout-level (view) properties: theme + access. Toggleable from the toolbar; when
   off it isn't rendered and the canvas reclaims the full width. */
.rs-layouts-stage {
    display: flex;
    gap: 0;
    align-items: stretch;
    /* Fill the detail body so the canvas | inspector divider runs full height (no floating cards, no gutter). */
    min-height: 100%;
}

.rs-layouts-stage__canvas {
    flex: 1 1 auto;
    min-width: 0;
    /* Edge-to-edge: the live preview (List/Table) / editable design canvas (Form) uses the full width the surface
       gives it; each preview supplies its own inner padding, matching the records grid. */
}

.rs-layouts-stage__inspector {
    flex: 0 0 20rem;
    max-width: 20rem;
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-4);
    padding: var(--rs-space-4);
    /* The vertical divider between the canvas and the inspector — a single rule, not two rounded panels + a gap. */
    border-left: 1px solid var(--rs-color-border);
}

/* Narrow viewports: the inspector drops below the canvas (full width); the divider becomes a top rule. */
@media (max-width: 60rem) {
    .rs-layouts-stage {
        flex-direction: column;
    }

    .rs-layouts-stage__inspector {
        flex: 1 1 auto;
        max-width: none;
        border-left: 0;
        border-top: 1px solid var(--rs-color-border);
    }
}

/* E7 Phase 3 — layout parts, per-element style tokens, and named themes. Applied by RecordLayoutView; global (not
   scoped) so the cascade reaches the field editors inside. Tokenized only — no arbitrary CSS from user data. */

/* The runtime layout wrappers must be able to shrink below their content so a wide Table preview scrolls inside
   the RecordGrid (edge cues + no clipping) rather than blowing out the width — see .rs-record-grid min-width:0. */
.rs-layout,
.rs-layout--table {
    min-width: 0;
}

/* Parts: fixed header/footer bands and a labeled sub-summary band. Body is the plain flow (no extra chrome). */
.rs-layout__part--header,
.rs-layout__part--footer {
    padding-block: var(--rs-space-2);
}
.rs-layout__part--header { border-block-end: 1px solid var(--rs-color-border); }
.rs-layout__part--footer { border-block-start: 1px solid var(--rs-color-border); }
.rs-layout__part--subsummary { padding-block-start: var(--rs-space-2); }
.rs-layout__part-band {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rs-color-fg-muted);
    background: var(--rs-color-surface-muted);
    padding: var(--rs-space-1) var(--rs-space-2);
    border-radius: var(--rs-radius-sm);
}

/* Per-element style tokens (E7 Phase 3). */
.rs-el--align-center { text-align: center; }
.rs-el--align-end { text-align: end; }
.rs-el--bold { font-weight: 700; }
.rs-el--font-small { font-size: 0.85em; }
.rs-el--font-large { font-size: 1.2em; }
.rs-el--bordered {
    border: 1px solid var(--rs-color-border-strong);
    border-radius: var(--rs-radius-sm);
    padding: var(--rs-space-2);
}
.rs-el--fill-subtle { background: var(--rs-color-surface-muted); border-radius: var(--rs-radius-sm); padding: var(--rs-space-2); }
.rs-el--fill-accent { background: var(--rs-color-accent-subtle); border-radius: var(--rs-radius-sm); padding: var(--rs-space-2); }
.rs-el--fill-warning { background: var(--rs-color-warning-subtle); border-radius: var(--rs-radius-sm); padding: var(--rs-space-2); }

/* Named themes (E7 Phase 3): the default theme adds no class; these adjust the whole layout's density / weight. */
.rs-theme-minimal { --rs-space-4: 0.5rem; }
.rs-theme-minimal .rs-layout__label { color: var(--rs-color-fg-muted); font-weight: 500; }
.rs-theme-bold .rs-layout__label { font-size: 1.05rem; font-weight: 700; color: var(--rs-color-fg); }
.rs-theme-bold .rs-layout__part--header { border-block-end-width: 2px; border-block-end-color: var(--rs-color-accent); }

.rs-designer__inline-label { font-size: 0.85rem; color: var(--rs-color-fg-muted); align-self: center; }

/* Shared master-pane chrome — GLOBAL so all three master panes (TableMasterPane for Schema/Records,
   LayoutsTreeMasterPane for Layouts, ValueListMasterPane for Value Lists) render identically. It previously lived
   in TableMasterPane.razor.css, but Blazor SCOPES a .razor.css to its owning component, so the reusing panes got
   an unstyled (browser-default big/bold) header with no divider. Global here fixes that: every pane's header is the
   small-caps title on a fixed-height row whose bottom divider lines up with the detail toolbar's across the split. */
.rs-table-master {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.rs-table-master__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rs-space-2);
    /* Fixed to the shared workspace-header height so this bottom divider lines up with the detail toolbar's,
       reading as one continuous rule across the master | detail split. */
    height: var(--rs-workspace-header-height);
    padding: var(--rs-space-3);
    border-bottom: 1px solid var(--rs-color-border);
}

.rs-table-master__title {
    margin: 0;
    font-size: var(--rs-text-sm);
    font-weight: var(--rs-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rs-color-fg-muted);
}

.rs-table-master__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--rs-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rs-table-master__hint {
    margin: 0;
    padding: var(--rs-space-3);
    font-size: var(--rs-text-sm);
    color: var(--rs-color-fg-muted);
}

/* A row is the selectable button plus an optional trailing actions menu, laid out so the menu pins right. */
.rs-table-master__item {
    display: flex;
    align-items: center;
    gap: var(--rs-space-1);
    border-radius: var(--rs-radius-sm);
}

.rs-table-master__item:hover {
    background-color: var(--rs-color-surface-muted);
}

.rs-table-master__item--active,
.rs-table-master__item--active:hover {
    background-color: var(--rs-color-accent-subtle);
}

.rs-table-master__select {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--rs-space-2);
    padding: var(--rs-space-2) var(--rs-space-2);
    background: none;
    border: 0;
    border-radius: var(--rs-radius-sm);
    cursor: pointer;
    text-align: left;
    color: var(--rs-color-fg);
    font: inherit;
}

.rs-table-master__item--active .rs-table-master__select {
    color: var(--rs-color-accent);
    font-weight: var(--rs-font-weight-medium);
}

.rs-table-master__icon {
    flex: 0 0 auto;
    width: 1rem;
    text-align: center;
    color: var(--rs-color-fg-muted);
}

.rs-table-master__item--active .rs-table-master__icon {
    color: var(--rs-color-accent);
}

.rs-table-master__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--rs-text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-table-master__actions {
    flex: 0 0 auto;
    padding-right: var(--rs-space-1);
}

/* E9 Phase 4 — the report-editor form block (Reports design surface). GLOBAL rather than scoped to
   ReportsSurface because the /styleguide "Saved report editor" card reuses the same markup, and a scoped
   .razor.css would leave that demo unstyled (same reason the master-pane chrome lives here). All tokens, so
   light/dark track automatically. The surface-only master list stays in ReportsSurface.razor.css. */
.rs-report-detail {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-4);
    /* Keep the form comfortably readable instead of stretching field controls across a wide detail pane. */
    max-width: 44rem;
}

.rs-report-detail__title {
    margin: 0;
    font-size: var(--rs-text-lg);
    font-weight: var(--rs-font-weight-bold);
    color: var(--rs-color-fg);
}

/* One summary = field select (grows) + kind select + remove, on a single aligned row. A grid lays the three
   out by track so the field select owns the free space and the remove button stays a fixed trailing cap. */
.rs-report-detail__summary-row {
    display: grid;
    grid-template-columns: 1fr minmax(7rem, max-content) auto;
    align-items: center;
    gap: var(--rs-space-2);
}

/* Let the select controls shrink within their tracks (so a long option ellipses rather than blowing out). */
.rs-report-detail__summary-row > * {
    min-width: 0;
}

/* Group-by breaks as a wrapping field of checkboxes — dense but with room to read each label. */
.rs-report-detail__groupby {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rs-space-2) var(--rs-space-5);
}

/* Save / Cancel pinned to the trailing edge, set off from the form by a divider. */
.rs-report-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--rs-space-2);
    padding-top: var(--rs-space-4);
    border-top: 1px solid var(--rs-color-border);
}

.rs-designer__check { display: inline-flex; gap: var(--rs-space-1); align-items: center; margin-inline-end: var(--rs-space-2); font-size: 0.85rem; }

/* E10 Phase 1 — the saved-script editor + run view. Global (not scoped to ScriptsSurface) because the /styleguide
   "Script editor / run" card reuses the same markup, and a scoped .razor.css would leave that demo unstyled (same
   reason .rs-report-detail lives here). All tokens, so light/dark track automatically. The surface-only master list
   stays in ScriptsSurface.razor.css. */
.rs-script-detail {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-4);
    max-width: 48rem;
}

.rs-script-detail__title {
    margin: 0;
    font-size: var(--rs-text-lg);
    font-weight: var(--rs-font-weight-bold);
    color: var(--rs-color-fg);
}

/* The raw step-JSON editor: a monospaced, resizable code area sharing the text-field's surface + border tokens so
   it reads as one of the form's controls (P1 ships this functional editor; the GUI step-picker is later polish). */
.rs-script-detail__editor {
    width: 100%;
    min-height: 12rem;
    resize: vertical;
    padding: var(--rs-space-2) var(--rs-space-3);
    font-family: var(--rs-font-mono);
    font-size: var(--rs-text-sm);
    line-height: 1.5;
    color: var(--rs-color-fg);
    background-color: var(--rs-color-surface);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-sm);
    tab-size: 2;
}

.rs-script-detail__editor:focus-visible {
    outline: 2px solid var(--rs-color-accent);
    outline-offset: -1px;
    border-color: var(--rs-color-accent);
}

/* Save / Cancel pinned to the trailing edge, set off from the form by a divider. */
.rs-script-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--rs-space-2);
    padding-top: var(--rs-space-4);
    border-top: 1px solid var(--rs-color-border);
}

/* --- the run view: outcome banner + host-call log --------------------------------------------- */

.rs-script-run {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-3);
    max-width: 48rem;
}

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

/* The outcome is a small pill; its accent tracks ok/aborted/error so the result reads at a glance. */
.rs-script-run__outcome {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--rs-space-2);
    border-radius: var(--rs-radius-pill, 999px);
    font-size: var(--rs-text-xs);
    font-weight: var(--rs-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rs-script-run__outcome--ok {
    color: var(--rs-color-success-fg, var(--rs-color-fg));
    background-color: var(--rs-color-success-subtle, var(--rs-color-accent-subtle));
}

.rs-script-run__outcome--aborted {
    color: var(--rs-color-warning-fg, var(--rs-color-fg));
    background-color: var(--rs-color-warning-subtle, var(--rs-color-surface-muted));
}

.rs-script-run__outcome--error {
    color: var(--rs-color-danger-fg, var(--rs-color-fg));
    background-color: var(--rs-color-danger-subtle, var(--rs-color-surface-muted));
}

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

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

.rs-script-run__label {
    font-weight: var(--rs-font-weight-bold);
    color: var(--rs-color-fg-muted);
    margin-inline-end: var(--rs-space-1);
}

.rs-script-run__message {
    padding: var(--rs-space-2) var(--rs-space-3);
    font-size: var(--rs-text-sm);
    color: var(--rs-color-danger-fg, var(--rs-color-fg));
    background-color: var(--rs-color-danger-subtle, var(--rs-color-surface-muted));
    border-radius: var(--rs-radius-sm);
}

.rs-script-run__log-title {
    margin: 0;
    font-size: var(--rs-text-sm);
    font-weight: var(--rs-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rs-color-fg-muted);
}

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

/* The host-call log: an ordered, monospaced trail of capability → detail — the run's trust surface. */
.rs-script-run__log {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-sm);
    overflow: hidden;
}

.rs-script-run__log-row {
    display: flex;
    gap: var(--rs-space-3);
    padding: var(--rs-space-1) var(--rs-space-3);
    font-family: var(--rs-font-mono);
    font-size: var(--rs-text-xs);
}

.rs-script-run__log-row:nth-child(even) {
    background-color: var(--rs-color-surface-muted);
}

.rs-script-run__cap {
    flex: 0 0 auto;
    min-width: 9rem;
    font-weight: var(--rs-font-weight-bold);
    color: var(--rs-color-accent);
}

.rs-script-run__detail {
    color: var(--rs-color-fg-muted);
    overflow-wrap: anywhere;
}

/* E10 Phase 3 — the event-trigger editor. Shared with the /styleguide specimen, so it lives here (global) rather than
   in the Triggers surface's scoped .razor.css. Mirrors the script-editor block's tokens so the two surfaces read as
   one system. */
.rs-trigger-detail {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-4);
    max-width: 48rem;
}

.rs-trigger-detail__title {
    margin: 0;
    font-size: var(--rs-text-lg);
    font-weight: var(--rs-font-weight-bold);
    color: var(--rs-color-fg);
}

/* The Enabled toggle, laid out as a checkbox + label row that reads as one of the form's controls. */
.rs-trigger-detail__enabled {
    display: flex;
    align-items: center;
    gap: var(--rs-space-2);
    font-size: var(--rs-text-sm);
    color: var(--rs-color-fg);
    cursor: pointer;
}

/* Save / Cancel pinned to the trailing edge, set off from the form by a divider. */
.rs-trigger-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--rs-space-2);
    padding-top: var(--rs-space-4);
    border-top: 1px solid var(--rs-color-border);
}

/* E10 Phase 3 — the /styleguide trigger-list specimen: a compact read-only list of event → script bindings. */
.rs-trigger-list {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-trigger-list__row {
    display: flex;
    align-items: baseline;
    gap: var(--rs-space-2);
    padding: var(--rs-space-2) var(--rs-space-3);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-sm);
    background-color: var(--rs-color-surface);
}

.rs-trigger-list__event {
    font-size: var(--rs-text-sm);
    font-weight: var(--rs-font-weight-bold);
    color: var(--rs-color-accent);
}

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

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

.rs-trigger-list__location {
    margin-inline-start: auto;
    font-size: var(--rs-text-xs);
    color: var(--rs-color-fg-muted);
    font-family: var(--rs-font-mono);
}

/* E10 Phase 3 — the record form's "perform script" outcome: the dialog a Show Custom Dialog intent raised, shown
   inline as an accent-subtle status strip with a dismiss control. */
.rs-record-form__script-dialog {
    display: flex;
    align-items: center;
    gap: var(--rs-space-3);
    margin-top: var(--rs-space-3);
    padding: var(--rs-space-2) var(--rs-space-3);
    border: 1px solid var(--rs-color-accent);
    border-radius: var(--rs-radius-sm);
    background-color: var(--rs-color-accent-subtle);
}

.rs-record-form__script-dialog-text {
    flex: 1 1 auto;
    font-size: var(--rs-text-sm);
    color: var(--rs-color-fg);
}

.rs-record-form__script-dialog-dismiss {
    flex: 0 0 auto;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: var(--rs-text-sm);
    color: var(--rs-color-accent);
    cursor: pointer;
}

.rs-record-form__script-dialog-dismiss:hover {
    text-decoration: underline;
}

/* E7 Phase 4 — rich layout elements: tab control, editable portal box. Named rs-layout-tabs (NOT rs-tabs —
   that's the shared underline Tabs component's class, and a global rule here bleeds into its scoped CSS, #245). */
.rs-layout-tabs { display: flex; flex-direction: column; gap: var(--rs-space-3); }
.rs-layout-tabs__strip {
    display: flex;
    gap: var(--rs-space-1);
    border-block-end: 1px solid var(--rs-color-border);
}
.rs-layout-tabs__tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-block-end: 2px solid transparent;
    padding: var(--rs-space-2) var(--rs-space-3);
    margin-block-end: -1px;
    font: inherit;
    color: var(--rs-color-fg-muted);
    cursor: pointer;
}
.rs-layout-tabs__tab:hover { color: var(--rs-color-fg); }
.rs-layout-tabs__tab.is-active {
    color: var(--rs-color-fg);
    border-block-end-color: var(--rs-color-accent);
    font-weight: 600;
}
.rs-layout-tabs__panel { padding-block-start: var(--rs-space-1); }

.rs-portal { display: flex; flex-direction: column; gap: var(--rs-space-2); }
.rs-portal__title { font-weight: 600; color: var(--rs-color-fg); }
.rs-portal__note { color: var(--rs-color-fg-muted); font-size: 0.9rem; }

/* E7 Phase 3 — List / Table view-mode rendering (RecordLayoutView). List repeats the body as label/value rows per
   record between the fixed header/footer bands; Table renders the body's field controls as a RecordGrid. */
/* Edge-to-edge list (#253): records are separated by a divider inset from the pane edges (padding-inline on the
   container), not framed as rounded cards. */
.rs-layout--list .rs-layout__list-rows { display: flex; flex-direction: column; padding-inline: var(--rs-space-4); }
.rs-layout__list-row {
    padding-block: var(--rs-space-3);
    border-bottom: 1px solid var(--rs-color-border);
}
.rs-layout__list-row:last-child { border-bottom: none; }
.rs-layout__list-field { display: flex; justify-content: space-between; gap: var(--rs-space-3); }
.rs-layout__list-label { color: var(--rs-color-fg-muted); }
.rs-layout__list-value { font-weight: 500; text-align: end; }
.rs-layout__empty { color: var(--rs-color-fg-muted); font-style: italic; }

/* The designer's view-mode preview + the styleguide's side-by-side Form/List/Table specimens. */
.rs-designer__preview { border: 1px dashed var(--rs-color-border); border-radius: var(--rs-radius-md); padding: var(--rs-space-3); }
.rs-styleguide__view-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--rs-space-4); }
.rs-styleguide__view-mode-title { margin: 0; font-size: 0.85rem; color: var(--rs-color-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* -- Picker family (date / time / datetime) — shared chrome ------------------------------------------
   The trigger field and the popover footer are rendered by several sibling components (DatePicker /
   TimePicker / DateTimePicker and their popovers), so their styling is shared here rather than in any one
   component's scoped file. The popover surface (PickerPopoverShell), the month grid (CalendarGrid) and the
   time spinner (TimeSpinner) each own their own scoped CSS. No colour literals — everything is a token, so
   the whole family inherits the dark remap for free. */

/* The trigger wrapper overlays the glyph, mirroring Select's "strip native chrome, overlay our own fa-light
   glyph" pattern. The trigger is a <button>, so the shared control base sizing (matching .rs-text-field /
   .rs-select) lives on .rs-date-field__control rather than the cross-cutting input selector. */
.rs-date-field {
    position: relative;
    display: block;
    width: 100%;
}

.rs-date-field__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rs-space-2);
    width: 100%;
    height: var(--rs-control-height);
    padding: 0 var(--rs-space-3);
    background-color: var(--rs-color-surface);
    color: var(--rs-color-fg);
    border: 1px solid var(--rs-color-border-strong);
    border-radius: var(--rs-radius-md);
    font-size: var(--rs-text-sm);
    text-align: left;
    cursor: pointer;
}

.rs-date-field__control--placeholder .rs-date-field__value {
    color: var(--rs-color-fg-muted);
}

.rs-date-field__control:disabled {
    background-color: var(--rs-color-surface-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

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

.rs-date-field__glyph {
    flex: none;
    color: var(--rs-color-fg-muted);
    font-size: var(--rs-text-xs);
    pointer-events: none;
}

/* The popover footer (Today / Now / Clear / Done affordances) sits inside the shell's ChildContent, i.e. in
   the calling popover's markup, so its styling is shared here. */
.rs-date-popover__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rs-space-2);
    margin-top: var(--rs-space-2);
    padding-top: var(--rs-space-2);
    border-top: 1px solid var(--rs-color-border);
}

/* Plain text-buttons for the footer affordances (accent + a muted-destructive clear). */
.rs-date-popover__action {
    padding: var(--rs-space-1) var(--rs-space-2);
    background: none;
    border: none;
    border-radius: var(--rs-radius-sm);
    color: var(--rs-color-accent);
    font-size: var(--rs-text-sm);
    cursor: pointer;
}

.rs-date-popover__action:hover {
    background-color: var(--rs-color-surface-muted);
}

.rs-date-popover__action--clear {
    color: var(--rs-color-fg-muted);
}

/* The popover's compact 12h/24h quick-toggle (a persisted shortcut for the Settings clock-format choice) — the
   shared SegmentedControl, centered above the time section. */
.rs-clock-quick {
    display: flex;
    justify-content: center;
    margin-bottom: var(--rs-space-2);
}

/* Shared 360° rotation for spinner rings. Lives here (global) rather than per component .razor.css so the sync
   indicator + panel — and any future spinner — share one definition and can't drift in timing. Per-surface size,
   colour and reduced-motion tuning stay local; only the rotation is shared. */
@keyframes rs-spin {
    to {
        transform: rotate(360deg);
    }
}