/* ============================================================================
 * layout.css — the frame: bars, panes, drawers, sheets
 *
 * The only file in web/rms/ with a breakpoint. The frame sits beside the
 * shell's rail, so it never assumes the page's width: it is a container and
 * its one breakpoint is a container query at 51rem (the shell's own boundary
 * as a width of the frame), published as --rms-layout on the frame's body so
 * script asks the stylesheet instead of keeping a second copy of the number.
 * It stays usable down to --g-frame-min-w. A container query styles what is
 * inside the container, never the container itself: the frame's own rows are
 * sized by their content (the top bar's row grows when the bar wraps).
 *
 * It is also the one layout every screen shares (the section "the side column
 * and the sheet" below, with ui/split.js): a side column sized by its content,
 * a sheet that takes the width it is given, one line for every entry, label
 * and head. utils/check_layout.py refuses a fixed side width, a cap on a sheet
 * or a forced wrap on a label anywhere else.
 * ==========================================================================*/

/* Under rms's face the shell links no shared components (kyr-shell 1.5.0, BUNDLE_CONTRACT.md §13): the sections style all their
 * markup. A section the shell hides stays hidden, and so does anything hidden inside one; the frame takes the whole section. */
.rms-view { display: block; color: var(--c-text); font-family: var(--t-sans); }
.rms-view[hidden],
.rms-view [hidden] { display: none !important; }
/* A link is the accent over a hairline of itself (the system: accent for item IDs, section numbers and links). */
.rms-view a:not(.rms-btn) {
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-color: var(--c-link-line);
  text-underline-offset: var(--g-underline-offset);
}
.rms-view a:not(.rms-btn):hover { text-decoration-color: currentColor; }
/* A link drawn inside a drawing is the drawing's box: its frame lights on hover, its words are never underlined. */
.rms-view svg a:not(.rms-btn) { text-decoration: none; }
.rms-view a.rms-btn { text-decoration: none; }
.rms-view :is(h1, h2, h3) { font-family: var(--t-title); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-title); text-wrap: balance; }

.rms-app {
  container: rms-app / inline-size;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) var(--g-statusbar-h);
  height: var(--g-frame-h);
  min-height: var(--g-frame-min-h);
  min-width: 0;
  background: var(--c-canvas);
  color: var(--c-text);
  font-family: var(--t-sans);
  font-size: var(--t-size-base);
  line-height: var(--t-lh-base);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  scrollbar-color: var(--c-frame) transparent;
  outline: var(--g-border-frame) solid transparent;
  outline-offset: calc(-1 * var(--g-border-frame));
  transition: outline-color var(--g-motion-base) var(--g-ease);
}

/* A frame that is not showing current truth says so on all four sides in the selection's strong blue, drawn over its own edges (the
 * frame fills the window's column, so nothing outside it would show a border); its top bar becomes the past band (view_bar.js). */
.rms-app[data-view="baseline"] { outline-color: var(--c-view-baseline); }
.rms-app[data-view="branch"] { outline-color: var(--c-view-branch); }

/* The shell's phone frame puts its own 56 px bar above the content: the frame takes what is left of the screen. */
@media (max-width: 767.98px) {
  .rms-pmap-svg { width: var(--family-w, auto); max-width: none; } /* a phone pans a drawing at its own size: scaled to the width its words would be unreadable */
  .rms-tour .rms-tour-card { left: var(--g-space-2); right: var(--g-space-2); top: auto; bottom: var(--g-space-2); width: auto; max-width: none; } /* the tutorial's card docks at the bottom */
  .rms-app { height: var(--g-frame-h-phone); }
}

/* The top bar sits on the board, over the work (the system's AppShell): the project's key, the time switch, the search; no rule under
 * it, the cards below say where the work starts. */
.rms-topbar {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--g-topbar-h);
  box-sizing: border-box;
  padding: var(--g-space-3) var(--g-page-pad);
  border-bottom: var(--g-border) solid transparent;
  background: var(--c-canvas);
}
/* A baseline or a branch view: the bar is the past band, the selection blue edged in its strong blue (the outline says it on all four
 * sides, the bar in words). */
.rms-app:is([data-view="baseline"], [data-view="branch"]) .rms-topbar { border-bottom-color: var(--c-select-strong); background: var(--c-selection); color: var(--c-on-select); }

.rms-body {
  --rms-layout: wide;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 0;
  min-width: 0;
}

.rms-pane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

/* The side panes (ui/frame.js): two side columns (ui/split.js, the section below): as wide as what they hold, up to their share of the
 * frame, or at the width the person dragged the edge to (kept); hidden by its ◀ ▶ and shown again by the thin tab left on the frame's
 * edge while there is something to show. */
.rms-pane-tree {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  border-right: var(--g-border) solid var(--c-border);
  background: var(--c-surface);
}
.rms-pane-tree-body, .rms-pane-inspector-body { flex: 1; min-height: 0; overflow: auto; }
.rms-pane.rms-pane-tree, .rms-pane.rms-pane-inspector { overflow: visible; } /* the bodies scroll; the edge overhangs its pane */
.rms-pane-bar { display: flex; flex: none; align-items: center; gap: var(--g-space-1); padding: var(--g-space-1) var(--g-space-2) 0; }
.rms-pane-tree .rms-pane-bar { justify-content: flex-end; }
.rms-pane-hide { height: var(--g-row-compact); padding-inline: var(--g-space-2); color: var(--c-text-muted); }
.rms-pane-reopen {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: none;
  margin-block: auto;
  align-items: center;
  justify-content: center;
  width: var(--g-pane-reopen-w);
  height: var(--g-pane-reopen-h);
  padding: 0;
  border: var(--g-border) solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text-muted);
  font: inherit;
  cursor: pointer;
}
.rms-pane-reopen:hover, .rms-pane-reopen:focus-visible { color: var(--c-text); background: var(--c-hover); }
/* the tree's tab at the top of the frame's edge, where its ◀ was: half way down that edge stands the shell's own tab, the one that hides the
 * rail (kyr_shell .k-rail-tab, 12 px over the content), and one would lie under the other; the work steps aside by the tab's width, so the
 * tab lies over no word of it */
.rms-pane-reopen.is-tree { top: var(--g-space-1); bottom: auto; left: 0; margin-block: 0; border-left: 0; border-radius: 0 var(--g-radius-md) var(--g-radius-md) 0; }
.rms-app[data-tree="closed"][data-tree-has="yes"] .rms-pane-main { padding-inline-start: calc(var(--g-pane-reopen-w) + var(--g-border)); }
.rms-pane-reopen.is-inspector { right: 0; border-right: 0; border-radius: var(--g-radius-md) 0 0 var(--g-radius-md); }
.rms-app[data-tree="closed"][data-tree-has="yes"] .rms-pane-reopen.is-tree,
.rms-app[data-inspector="closed"][data-inspector-has="yes"] .rms-pane-reopen.is-inspector { display: flex; }

.rms-pane-main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
}

/* The inspector is the system's Drawer docked: the details of one thing on a card's ground, beside the work, so one never loses one's
 * place. */
.rms-pane-inspector {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  border-left: var(--g-border) solid var(--c-border);
  background: var(--c-surface);
}

.rms-app .rms-pane-close { display: none; }

.rms-app[data-tree="closed"] .rms-pane-tree,
.rms-app[data-inspector="closed"] .rms-pane-inspector { display: none; }

.rms-statusbar {
  display: flex;
  align-items: center;
  gap: var(--g-space-4);
  min-width: 0;
  padding: 0 var(--g-page-pad);
  border-top: var(--g-border) solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-muted);
  font-size: var(--t-size-sm);
  white-space: nowrap;
  overflow: hidden;
}

/* =====================================================================================================================================
 * The side column and the sheet: the one layout of every screen (ui/split.js; the owner, 2026-11-07, on the file viewer: "even basic
 * visuals display this better!!!! YOU KEEP ENFORCING NEWLINES IN THE THINGS!!!! enforce the frontend's infrastructure! so we fix the
 * things once forever"). utils/check_layout.py keeps it here: a fixed width on a side, a cap on a sheet or a forced wrap on a label
 * anywhere else fails the pipeline, and tests/browser/test_browser_layout.sh measures the screens in a real browser.
 *   a split    a main column and a side column in one row (.rms-split; .is-end: the side on the right); under 48rem of its own width the
 *              side goes above or under the main as the screen orders them, whole width
 *   a side     as wide as its content, its entries on one line, up to --g-side-share of what holds it; once the person dragged its edge,
 *              their width (kept, ui/split.js), up to --g-side-max; never under --g-side-min. The frame's two panes are sides too.
 *   a sheet    a screen's page and a document take the width they are given (no cap anywhere: views.css, viewer.css); in a document
 *              (.rms-prose) a paragraph alone keeps a reading measure, its headings, tables, code and figures the sheet's width
 *   one line   an entry of a side, a tab, a segmented choice, a table's head: one line at the width the layout gives it; narrowed by
 *              the person below its words it ends in … (its title says the whole); a row of tabs or of a segmented choice wraps onto a
 *              next line before it hides one, never the page scrolling (8 Nov: every action visible; its sideways scroll showed no bar,
 *              and an item's Check tab sat out of sight under the inspector's edge at 1440 px)
 *   a head     a screen's head (ui/page_head.js): its title and muted line first, whole; the actions go to a row of their own before
 *              either is cut, the muted line under the title before it is cut, the title's words wrap last
 * ===================================================================================================================================*/
.rms-split {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--g-space-5);
  min-width: 0;
}
.rms-split > :not(.rms-side) { flex: 1 1 0; min-width: min(var(--g-split-main-min), 100%); }
.rms-split.is-end > .rms-side { order: 1; }
.rms-side {
  position: relative;
  flex: none;
  box-sizing: border-box;
  inline-size: var(--rms-side-w, max-content);
  min-inline-size: min(var(--g-side-min), 100%);
  max-inline-size: var(--g-side-share);
}
.rms-side[data-sized] { max-inline-size: var(--g-side-max); }
.rms-side.is-sticky { position: sticky; top: 0; }
.rms-side.is-resizing { user-select: none; }
.rms-side-edge { position: absolute; top: 0; bottom: 0; z-index: 1; width: var(--g-pane-edge-w); cursor: col-resize; touch-action: none; outline: none; }
.rms-side[data-side="start"] > .rms-side-edge { right: calc(var(--g-pane-edge-w) / -2); }
.rms-side[data-side="end"] > .rms-side-edge { left: calc(var(--g-pane-edge-w) / -2); }
.rms-side-edge:hover, .rms-side-edge:focus-visible, .rms-side-edge.is-dragging { background: var(--c-select-strong); }
@container (max-width: 48rem) {
  .rms-split > .rms-side { position: static; order: 0; inline-size: 100%; max-inline-size: none; }
  .rms-split > .rms-side > .rms-side-edge { display: none; }
}
/* Learn's practice (views/practice.js, css/learn.css) under 48rem: the page scrolls, the lesson's coach over the frame, the frame a
 * phone's height (its host the container: .rms-learn-practice-host in the section, .rms-learn-host in the layout check) */
@container rms-learn (max-width: 48rem) {
  .rms-learn-practice.rms-learn-practice { height: auto; }
  .rms-learn-body.rms-learn-body { height: auto; flex-wrap: wrap; }
  .rms-learn-stage.rms-learn-stage > .rms-app { height: var(--g-frame-h-phone); }
  .rms-split.rms-learn-body > .rms-side.rms-learn-coach { order: -1; height: auto; border-left: 0; }
}

/* a sheet's prose: the paragraphs at a reading measure, everything else at the sheet's width; a long word breaks only when it alone is
 * wider than its line (break-word, never anywhere: a table's columns and a heading keep their words whole) */
.rms-prose { min-width: 0; overflow-wrap: break-word; }
.rms-prose :is(p, li, blockquote) { max-inline-size: var(--g-prose-measure); }

/* one line: what names a place or a column; a row of them (tabs, a segmented choice) wraps onto a next line before it hides one past an
 * edge that shows no scroll (8 Nov: an item's Check tab 4 px under the inspector's edge, People's choice on a phone) */
:is(.rms-md-outline-go, .rms-items-filter-name, .rms-tab, .rms-segmented > .rms-btn, .rms-simple-table > thead th, .rms-viewer-title) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rms-segmented { display: inline-flex; flex-wrap: wrap; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
:is(.rms-tab, .rms-segmented > .rms-btn) { flex: none; } /* each whole: the row wraps */

/* a screen's head: one row while its parts fit whole, else the actions on a row of their own */
.rms-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2) var(--g-space-4); }
.rms-head-titles { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--g-hairline); min-width: 0; }
.rms-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--g-space-2); min-width: 0; max-width: 100%; margin-left: auto; }
.rms-view .rms-head-title { overflow-wrap: break-word; }
.rms-app[data-density="compact"] .rms-head-row { gap: var(--g-space-1) var(--g-space-3); }
.rms-app[data-density="compact"] .rms-head-titles { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--g-space-3); }
.rms-app[data-density="compact"] .rms-head-title { flex: 0 1 auto; min-width: 0; }
.rms-app[data-density="compact"] .rms-head-sub { flex: 0 1 auto; min-width: 0; margin: 0; }
.rms-app[data-density="compact"] .rms-head-actions { gap: var(--g-space-1); }

/* --- a narrow frame (a phone, or the rail open on a small screen): the tree is a drawer, the inspector a full sheet, rows are
 *     cards, the top bar wraps and the first row grows with it. Every rule is scoped under .rms-app so it outweighs the
 *     components' own rules, which load after this sheet -------------------------------------------------------------------------*/

@container rms-app (max-width: 51rem) {
  .rms-app .rms-body { --rms-layout: narrow; grid-template-columns: minmax(0, 1fr); }
  /* a narrow frame's Activity bar wraps tall: it scrolls with the rows, the tabs alone stick above them */
  .rms-app .rms-act-bar { position: static; }
  .rms-app .rms-activity { --rms-stick: var(--rms-tabs-h, var(--g-zero)); }
  .rms-app .rms-pane-main { grid-column: 1; }
  .rms-app .rms-pane-tree,
  .rms-app .rms-pane-inspector {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--g-z-drawer);
    min-width: 0;
    background: var(--c-surface);
    box-shadow: var(--c-shadow-pop);
  }
  .rms-app .rms-pane-tree { max-inline-size: var(--g-drawer-w); } /* its content's width or the person's, never past the drawer's share */
  .rms-app:not([data-tree-drawer="open"]) .rms-pane-tree { display: none; } /* the drawer opens only when asked (ui/frame.js) */
  .rms-app[data-tree-has="yes"]:not([data-tree-drawer="open"]) .rms-pane-reopen.is-tree { display: flex; }
  .rms-app .rms-pane-reopen.is-tree { top: 0; bottom: 0; margin-block: auto; } /* no rail's tab on a narrow frame: the edge's middle again */
  .rms-app[data-tree="closed"][data-tree-has="yes"] .rms-pane-main { padding-inline-start: 0; }
  .rms-app .rms-pane-inspector {
    right: 0;
    inline-size: auto;
    max-inline-size: none;
    border-left: 0;
  }
  .rms-app .rms-pane-close { display: inline-flex; margin: var(--g-space-2) var(--g-space-3) 0; }
  .rms-app :is(.rms-pane-tree, .rms-pane-inspector) > .rms-side-edge, .rms-app .rms-pane-hide, .rms-app .rms-pane-reopen { display: none; }
  /* The bar in normal flow: the switcher takes the first line whole, the view and the commands the second. */
  .rms-app .rms-topbar { padding: var(--g-space-2) var(--g-page-pad-narrow); }
  .rms-app .rms-statusbar { padding-inline: var(--g-page-pad-narrow); }
  .rms-app .rms-viewbar { flex-wrap: wrap; row-gap: var(--g-space-2); column-gap: var(--g-space-2); }
  .rms-app .rms-viewbar-lead { display: none; }
  .rms-app .rms-viewbar-where { flex: 1 1 auto; flex-wrap: wrap; }
  .rms-app .rms-palette-btn .rms-kbd,
  .rms-app .rms-status-item.is-optional { display: none; }
  .rms-app .rms-table { --rms-row-h: var(--g-row-card); }
  .rms-app .rms-table-head { display: none; }
  .rms-app .rms-table-rows > .rms-table-row {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    column-gap: var(--g-space-3);
  }
  .rms-app .rms-table-rows > .rms-table-row > .rms-cell-fill { flex-basis: 100%; order: 1; }
  .rms-app .rms-table.is-sized .rms-table-viewport :is(.rms-table-rows, .rms-table-row) { min-width: 0; } /* a card: no column widths */
  .rms-app .rms-simple-table thead { display: none; }
  .rms-app .rms-simple-table tr {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--g-space-3);
    padding-block: var(--g-space-2);
    border-bottom: var(--g-border) solid var(--c-border);
  }
  .rms-app .rms-simple-table td { padding: 0; border-bottom: 0; }
  .rms-app .rms-simple-table td:empty { display: none; }
  /* views.css's narrow rules live here: layout.css is the only file with a breakpoint. */
  .rms-app .rms-head-actions { justify-content: flex-start; margin-left: 0; }
  .rms-view .rms-app .rms-head-title { font-size: var(--g-title-xl-narrow); }
  .rms-app .rms-facts { grid-template-columns: minmax(0, 1fr); }
  .rms-app .rms-facts dt { padding-bottom: 0; border-bottom: 0; font-size: var(--t-size-sm); }
  .rms-app .rms-facts dd { padding-top: 0; padding-left: 0; }
  .rms-app .rms-page,
  .rms-app .rms-explorer { --rms-pad: var(--g-page-pad-narrow); }
  .rms-app .rms-editor-body, .rms-app .rms-proposals-body { grid-template-columns: minmax(0, 1fr); }
  .rms-app .rms-editor-impact { position: static; }
  .rms-app .rms-wide-only { display: none; }
  .rms-app .rms-recap { grid-template-columns: minmax(0, 1fr); }
  .rms-app .rms-recap-base { border-right: 0; border-bottom: var(--g-border) solid var(--c-border); }
  .rms-app .rms-lensbar { padding-inline: var(--g-space-3); }
  .rms-app .rms-pm-body { grid-template-columns: minmax(0, 1fr); }
  .rms-app .rms-stage-graph { border-right: 0; border-bottom: var(--g-border) solid var(--c-border); }
  .rms-app .rms-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rms-app .rms-cat:nth-child(3) { border-left: 0; }
  .rms-app .rms-cat:nth-child(n+3) { border-top: var(--g-border) solid var(--c-border); }
  .rms-app .rms-recap-moving { border-right: 0; border-bottom: var(--g-border) solid var(--c-border); }
  .rms-app .rms-page { width: calc(100% - 2 * var(--g-space-2)); margin: var(--g-space-2); }
  .rms-app .rms-cmp-keys { display: none; }
  .rms-app .rms-reviews-row { grid-template-columns: max-content minmax(0, 1fr) max-content; }
  .rms-app .rms-reviews-when { display: none; }
  /* a project's lifecycle (ui/spaces.js): the gauge and More under the words, beside the spine */
  .rms-app .rms-space { grid-template-columns: var(--g-space-node) minmax(0, 1fr); row-gap: var(--g-space-2); }
  .rms-app :is(.rms-space-gauge, .rms-space-more) { grid-column: 2; }
  .rms-app .rms-space-more { justify-self: start; }
  .rms-app .rms-space-node { align-items: flex-start; } /* the node beside the title, the row being tall */
  .rms-app .rms-narrow-only { display: block; }
  .rms-app .rms-people-meta { margin-left: 0; }
  .rms-app .rms-config-list > li.rms-baseline { flex-wrap: wrap; }
  .rms-app .rms-project-acts { margin-left: 0; }
  .rms-app .rms-find-input { width: auto; flex: 1 1 auto; min-width: 0; }
  .rms-app .rms-people-meta.is-block { margin-left: calc(var(--g-icon-sm) + var(--g-space-1)); }
  /* The check sheet, the workbench and the studio on a phone: the verdict over its findings, a move's parts and a gauge's bar one under
   * the other, the gaps' inspector under the list, a matrix scrolled inside its own box. */
  .rms-app .rms-verdict { grid-template-columns: minmax(0, 1fr); }
  .rms-app .rms-verdict-stamp { border-right: 0; border-bottom: var(--g-border) solid var(--c-border-strong); }
  .rms-app .rms-verdict-finding { grid-template-columns: var(--g-icon-md) minmax(0, 1fr); }
  .rms-app .rms-verdict-fix { grid-column: 2; justify-self: start; }
  .rms-app .rms-move { grid-template-columns: minmax(0, 1fr); }
  .rms-app .rms-rules-version-meta { padding-left: calc(var(--g-mark) + var(--g-space-3)); }
  .rms-app .rms-rules-version-diff { margin-left: 0; }
  .rms-app .rms-signed-row { grid-template-columns: var(--g-signed-rev-w) minmax(0, 1fr); }
  .rms-app .rms-gauge { grid-template-columns: minmax(0, 1fr) max-content; }
  .rms-app .rms-gauge-bar { grid-column: 1 / -1; }
  /* the details drawer: a sheet over the lower part of the frame, the work in sight above it */
  .rms-app .rms-drawer { top: auto; left: var(--g-space-2); width: auto; height: var(--g-sheet-h); }
  .rms-app .rms-gaps-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rms-app .rms-gaps-row.is-head { display: none; }
  .rms-app .rms-gaps-reason { grid-row: 2; grid-column: 1; }
  .rms-app .rms-gaps-next { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .rms-app .rms-gaps-why { grid-row: 3; grid-column: 1 / -1; }
  .rms-app .rms-gaps-pick { white-space: normal; } /* an id breaks at its hyphens on a phone, its number kept in sight */
  /* what an input brings and where an item is taken on a phone: the state and the source's id, then the copy and what it says */
  .rms-app .rms-brought-rows, .rms-app .rms-copies-rows { grid-template-columns: max-content minmax(0, 1fr); }
  .rms-app .rms-turn { flex-wrap: wrap; }
  .rms-app .rms-setup-body { grid-template-areas: "assistant" "drawing"; grid-template-columns: minmax(0, 1fr); }
  .rms-app .rms-setup-assistant { position: static; }
  .rms-app .rms-ladder { grid-auto-flow: row; }
  .rms-app .rms-rung { border-right: 0; border-bottom: var(--g-border) solid var(--c-border); }
  .rms-app .rms-rung:last-child { border-bottom: 0; }
  .rms-app .rms-chain { flex-direction: column; align-items: stretch; }
  .rms-app .rms-chain-node, .rms-app .rms-chain-link { flex: none; }
  .rms-app .rms-chain-link { flex-direction: row; justify-content: flex-start; min-width: 0; padding: var(--g-space-1) 0 var(--g-space-1) var(--g-space-4); }
  /* Workflows: the swimlane becomes a list of steps, each with its lane as a chip; a table's cells carry their column's name. */
  .rms-app .rms-wf-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rms-app .rms-wf-tab { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--g-space-2); text-align: left; }
  .rms-app .rms-wf-diagram { padding-bottom: 0; border: 0; background: none; }
  .rms-app .rms-wf-lanes,
  .rms-app .rms-wf-heads,
  .rms-app .rms-wf-mark,
  .rms-app .rms-wf-link-svg { display: none; }
  .rms-app .rms-wf-row { grid-template-columns: minmax(0, 1fr); }
  .rms-app .rms-wf-step { grid-column: 1; margin: 0; }
  .rms-app .rms-wf-lane-chip { display: inline-flex; }
  .rms-app .rms-wf-link { height: var(--g-wf-link-h-narrow); margin-left: var(--g-space-4); border-left: var(--g-border-strong) solid var(--c-border-strong); }
  .rms-app .rms-wf-link.is-edge { display: none; }
  .rms-app .rms-wf-card { margin: var(--g-space-2) 0 0; padding: var(--g-space-3); }
  .rms-app .rms-wf-facts { grid-template-columns: minmax(0, 1fr); }
  .rms-app .rms-wf-facts dt { margin-top: var(--g-space-2); }
  .rms-app .rms-wf-terms { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rms-app .rms-wf-terms dd { margin-bottom: var(--g-space-3); }
  .rms-app .rms-wf-table td { flex-basis: 100%; }
  .rms-app .rms-wf-table td::before { content: attr(data-label); display: block; color: var(--c-text-muted); font-size: var(--t-size-xs); }
  .rms-app .rms-wf-relations { gap: var(--g-space-1) var(--g-space-3); }
}