/* Highlighted row in the Beam Span "Forces" table.
   Default = critical station (max |Mu|) set by RefreshDesignActions
   via UIParameters.Class = "selected". User clicks another row →
   SelectedRowChanged updates _selectedStationIndex → the highlight
   moves.

   Specificity note: theme.css applies a greenish tint to display-only
   cells via `.datagrid .property.property-table .property.display`,
   and that rule has high specificity. Our selectors chain the same
   path (.datagrid .property.property-table) and also target
   .property.display directly so we override the tint with the
   selection blue. !important is needed because both rules carry it. */
.beam-span .datagrid .property.property-table tbody tr.selected td,
.beam-span .datagrid .property.property-table tbody tr.selected td *,
.beam-span .datagrid .property.property-table tbody tr.selected .property,
.beam-span .datagrid .property.property-table tbody tr.selected .property.display {
    background-color: #cfe8ff !important;
}

/* Reset background on action buttons (Design / View / external-link
   icons) so the row-highlight rule above doesn't paint over their
   icons - without this, the buttons render as solid blue squares
   because the <img> background swallows the icon. */
.beam-span .datagrid .property.property-table tbody tr.selected .button,
.beam-span .datagrid .property.property-table tbody tr.selected .button *,
.beam-span .datagrid .property.property-table tbody tr.selected button,
.beam-span .datagrid .property.property-table tbody tr.selected button *,
.beam-span .datagrid .property.property-table tbody tr.selected img {
    background-color: transparent !important;
}

/* ============ Beam Span (RC Beam) "Beam Span" tab layout ============
   A fixed-height Forces table with a 2x2 canvas grid under it:

     Forces (378px, full width)
     Beam Analysis   | Beam Span (2D)
     Section         | 3D Beam Span

   The canvases used to be pure remainder - `calc((100% - 378px) / 2 - 8px)` - so the
   378px table ate a fixed slice and the four drawings split whatever was left. On a
   ~654px centre panel that is (654 - 378)/2 - 8 = 130px per canvas, far too small to
   read a beam elevation.

   `--bs-canvas-h` keeps that even split while it still leaves each canvas 300px, then
   holds at 300px and lets `.tab-body` (`overflow: auto`) scroll - same model as
   `.moment-curvature` and `.perf-based-eval` below. The expression collapses to the
   original remainder exactly when there is room, so tall screens are unchanged.

   Row geometry: groups carry `margin: 4px` and `top` positions the MARGIN edge, so
   with canvas height h the first canvas row sits at 382px (border box 386px) and the
   second at 386px + h, and the grid's margin box ends at 394px + 2h (994px at the
   300px floor). The Forces table stays a fixed 378px by design - it is sized for the
   ~22-row Workflow case and has its own internal scroll.

   Scoped under `.beam-span` exactly as before. `beam-span-actions` is also used by
   Beam Deflection (BeamDeflectionApp.cs), which is why that prefix matters here. */
.beam-span {
    --bs-canvas-h: max(300px, calc((100% - 378px) / 2 - 8px));
    --bs-canvas-row-2-top: calc(386px + var(--bs-canvas-h));
}

.beam-span .beam-span-actions {
    position: absolute;
    left: 0;
    top: 0;
    height: 378px;
    width: calc(100% - 8px);
}

.beam-span .beam-span-analysis,
.beam-span .canvas-span-2D,
.beam-span .canvas-section,
.beam-span .canvas-span-3D {
    position: absolute;
    height: var(--bs-canvas-h);
}

/* ---- canvas row 1 ---- */
.beam-span .beam-span-analysis,
.beam-span .canvas-span-2D {
    top: 382px;
}

/* ---- canvas row 2 ---- */
.beam-span .canvas-section,
.beam-span .canvas-span-3D {
    top: var(--bs-canvas-row-2-top);
}

/* ---- columns ---- */
.beam-span .beam-span-analysis,
.beam-span .canvas-section {
    left: 0;
    width: calc(50% - 4px);
}

.beam-span .canvas-span-2D,
.beam-span .canvas-span-3D {
    left: 50%;
    width: calc(50% - 8px);
}

.beam-span .datagrid-container, .beam-span .datagrid {
    border: none !important;
}

.beam-span .datagrid .property.property-table {
    background-color: var(--panelbackground);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 !important;
}

/* Force table (the "Forces" group at the top of the Beam Span tab) can
   grow taller than its fixed-height container - e.g. ~22 rows in the
   Workflow scenario vs ~6 rows when opened standalone. Without a scroll
   constraint, row-headers and content overflow vertically into the panels
   below (Beam Analysis / Beam Span / Section).

   Selector intentionally omits the .beam-span prefix so the rule applies
   in BOTH standalone (wrapper = .beam-span) and Workflow shell contexts
   (wrapper class hierarchy may differ). !important is required because
   property-table styles defined elsewhere set conflicting overflow and
   max-height values that would otherwise win on specificity.

   Two-step fix:
     1. .beam-span-actions: hide anything that escapes the box.
     2. Inner scroll containers (multiple candidates listed because the
        exact DOM nesting depends on whether UIDataGrid wraps the table
        and which inner class actually receives layout): constrain to
        parent height and scroll vertically. */
.beam-span-actions {
    overflow: hidden !important;
}

/* Fill the fixed-height (378px) Forces group instead of leaving an empty gap
   under the last row (see the circled area in the bug report).

   Two independent problems, kept as two rules so the overflow model is
   unchanged (horizontal scroll / sticky headers keep working):

   1. The scrollable <tbody> collapsed to its content when there were only a
      few rows, so the table ended well above the bottom of the group. Give it
      a FIXED height (min = max) equal to its region so it always fills. Pixels
      (not %): .property-table-body is a <tbody> turned display:block whose
      parent <table> is height:auto, so a % max-height resolves to "none" and
      the body would expand to full content height, pushing its horizontal
      scrollbar outside the visible box.

   2. The 280px cap was ALSO on the datagrid, so the whole grid (headers + body)
      stopped ~72px short of the group's content height. Raise the datagrid to
      the group's content height (378 - group title) so the grid reaches the
      bottom; anything that still escapes is clipped by the group's overflow. */
.beam-span-actions .property.property-table-body,
.beam-span-actions .property-table-body {
    overflow-x: auto !important;
    overflow-y: auto !important;
    min-height: 280px !important;
    max-height: 320px !important;
}

.beam-span-actions .datagrid-container,
.beam-span-actions .datagrid {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    min-height: 352px !important;
    max-height: 352px !important;
}

/* Beam Deflection results use one physical table for both header rows and data.
   Keeping the table at its intrinsic width makes the grouped colspans follow the
   same columns as the body while the outer container performs horizontal scroll. */
.beam-deflection .beam-span-actions .property-table-body > table {
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
}

.beam-deflection .beam-span-actions .has-top-header thead tr:first-child th {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #e5edf2 !important;
}

.beam-deflection .beam-span-actions .has-top-header thead tr:nth-child(2) th {
    position: sticky !important;
    top: 31px !important;
    z-index: 4 !important;
}

/* Calculated cells are intentionally disabled and visually distinct from the
   six white Moment-Curvature input cells. */
.beam-deflection .beam-span-actions td.readonly-true,
.beam-deflection .beam-span-actions td.readonly-true .property-value,
.beam-deflection .beam-span-actions td.readonly-true .property-input {
    background-color: #f3f5f6 !important;
    color: #59656d !important;
}

.beam-deflection .beam-span-actions td.readonly-false,
.beam-deflection .beam-span-actions td.readonly-false .property-value,
.beam-deflection .beam-span-actions td.readonly-false .property-input {
    background-color: #ffffff !important;
}

/* "Forces" group-header toggles (Show all stations / Show all load combos). The
   generic `.property-text { width: 50% }` makes each label take half the (narrow)
   property width, so it wraps to two truncated lines. The existing fix only targets
   `.toolbar` checkboxes, not the `.group-toolbar` the group header uses - mirror it
   here so each label sizes to its text on one line. */
.beam-span-actions .group-toolbar .property.property-checkbox .property-text {
    width: unset !important;
    white-space: nowrap;
}

/* Tighten the checkbox->label gap: the base .property-value adds padding: 4px 8px
   plus margin-right: 8px (~16px) after the box, and the input carries margin-left:
   -8px. Collapse those to a small, controlled gap. */
.beam-span-actions .group-toolbar .property.property-checkbox .property-value {
    width: unset !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
}

.beam-span-actions .group-toolbar .property.property-checkbox .property-value .property-input {
    margin-left: 0 !important;
}

/* Load Combos dropdown in the group header: same fix as the Beams datagrid toolbar.
   The base 50/50 split + .property-list-value ellipsis truncated the value to "G..";
   size label + value to content and let the value box grow to the selected option. */
.beam-span-actions .group-toolbar .property.property-enum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: unset !important;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    /* Own high stacking context so the fixed expand popup (a descendant) is lifted
       above the Forces table regardless of any ancestor stacking context. */
    position: relative;
    z-index: 100000;
}

.beam-span-actions .group-toolbar .property.property-enum .property-text {
    width: unset !important;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

    .beam-span-actions .group-toolbar .property.property-enum .property-value {
        width: max-content !important;
        min-width: 120px;
        margin: 0 !important;
        width: calc(50%);
    }

.beam-span-actions .group-toolbar .property.property-enum .property-list-value {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* Keep the Load Combos dropdown's expand popup above the Forces table below it
   (the table container also sits at z-index:1000, so the later-painted table won
   the tie and hid the popup). Scoped to this dropdown only. */
.beam-span-actions .group-toolbar .property.property-enum .property-list-container {
    position: fixed !important;
    z-index: 100000 !important;
}

/* Net Area diagram header controls. Keep the Path dropdown and All paths checkbox
   compact in the group header without changing the shared group-toolbar layout. */
.net-area-diagram-canvas .group-toolbar {
    right: 36px;
}

.net-area-diagram-canvas .group-toolbar > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.net-area-diagram-canvas .group-toolbar .property {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.net-area-diagram-canvas .group-toolbar .property.property-enum .property-text {
    width: auto !important;
    margin: 0 6px 0 0;
    padding: 0;
    white-space: nowrap;
}

.net-area-diagram-canvas .group-toolbar .property.property-enum .property-value {
    width: auto !important;
    min-width: 220px;
    max-width: 260px;
    margin: 0 !important;
}

.net-area-diagram-canvas .group-toolbar .property.property-enum .property-list-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.net-area-diagram-canvas .group-toolbar .property.property-enum .property-list-container {
    position: fixed !important;
    z-index: 100000 !important;
}

.net-area-diagram-canvas .group-toolbar .property.property-checkbox .property-value {
    width: auto !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
}

.net-area-diagram-canvas .group-toolbar .property.property-checkbox .property-value .property-input {
    margin-left: 0 !important;
}

.net-area-diagram-canvas .group-toolbar .property.property-checkbox .property-text {
    width: auto !important;
    margin: 0;
    white-space: nowrap;
}

/* Step (nudge distance) numeric field in the toolbar — give the input a usable width
   so it can be clicked and typed (the generic .property width:auto collapses it). */
.net-area-diagram-canvas .group-toolbar .property.property-unit {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.net-area-diagram-canvas .group-toolbar .property.property-unit .property-text {
    width: auto !important;
    margin: 0 6px 0 0;
    padding: 0;
    white-space: nowrap;
}

.net-area-diagram-canvas .group-toolbar .property.property-unit .property-value-group,
.net-area-diagram-canvas .group-toolbar .property.property-unit .property-value {
    width: auto !important;
    margin: 0;
    padding: 0;
}

.net-area-diagram-canvas .group-toolbar .property.property-unit .property-input {
    width: 56px !important;
    min-width: 56px;
    text-align: right;
}

.net-area-diagram-canvas .group-toolbar .button.net-area-play-path,
.net-area-capacity-canvas .group-toolbar .button.net-area-play-path:not(.net-area-capacity-animate) {
    width: 28px;
    height: 28px;
    padding: 4px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.net-area-diagram-canvas .group-toolbar .button.net-area-play-path .button-icon,
.net-area-capacity-canvas .group-toolbar .button.net-area-play-path:not(.net-area-capacity-animate) .button-icon {
    width: 16px;
    height: 16px;
}

.net-area-diagram-canvas .group-toolbar .button.net-area-play-path .button-icon img,
.net-area-capacity-canvas .group-toolbar .button.net-area-play-path:not(.net-area-capacity-animate) .button-icon img {
    width: 16px;
    height: 16px;
}

.net-area-capacity-canvas .group-toolbar .button.net-area-capacity-animate {
    min-width: 88px;
    height: 30px;
    padding: 4px 10px;
    margin: 0 8px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.net-area-capacity-canvas .group-toolbar .button.net-area-capacity-animate .button-icon,
.net-area-capacity-canvas .group-toolbar .button.net-area-capacity-animate .button-icon img {
    width: 16px;
    height: 16px;
}

.net-area-capacity-canvas .group-toolbar .button.net-area-capacity-animate .button-text {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Arrow (nudge) buttons for moving the selected hole. */
.net-area-diagram-canvas .group-toolbar .button.net-area-nudge {
    min-width: 26px;
    height: 28px;
    padding: 2px 6px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Only the glyph (←→↑↓✂) is enlarged — NOT the child .tooltip, which must
   keep the normal system tooltip font size/weight. */
.net-area-diagram-canvas .group-toolbar .button.net-area-nudge .button-text {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}

/* Vertical divider separating the edit controls (left) from path/animation (right). */
.net-area-diagram-canvas .group-toolbar .net-area-toolbar-sep {
    width: 1px;
    align-self: stretch;
    min-height: 20px;
    background: var(--border);
    margin: 0 4px;
}

/* ---- Steps tab: active model on top, step result below ---- */
.net-area-steps-tab {
    overflow: hidden;
}

.net-area-steps-layout {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: auto;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

.net-area-steps-layout > .property-group {
    position: relative;
    margin: 0;
    min-height: 0;
}

.net-area-steps-model-group {
    flex: 0 0 calc(50% - 4px) !important;
    height: auto !important;
    min-height: 220px;
    max-height: 70%;
    resize: vertical;
    overflow: hidden;
}

.net-area-steps-model-group > .property-group-body {
    position: relative;
    height: calc(100% - 42px);
    overflow: hidden;
}

.net-area-steps-model-group > .property-group-body > div,
.net-area-steps-model-group > .property-group-body > div > div,
.net-area-steps-model-group .canvas2d-container,
.net-area-steps-model-group .viewer-container {
    position: relative;
    height: 100%;
    width: 100%;
    min-height: 0;
}

.net-area-steps-model-group .canvas2d {
    display: block;
    height: 100%;
    width: 100%;
    min-height: 220px;
}

.net-area-step-result-group {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 220px;
    overflow: hidden;
}

.net-area-step-result-group > .property-group-body {
    height: calc(100% - 42px);
    overflow-y: auto;
}

/* Center the typeset equations and give the walkthrough comfortable reading width. */
.net-area-steps-layout .paragraph {
    padding: 2px 12px 10px;
}

.net-area-steps-layout .param-header {
    padding: 10px 12px 2px;
    font-weight: bold;
}

.effective-length-k-canvas .group-toolbar {
    right: 36px;
}

.effective-length-k-canvas .group-toolbar {
    right: 36px;
}

.effective-length-k-canvas .group-toolbar > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.effective-length-k-canvas .group-toolbar .property {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.effective-length-k-canvas .group-toolbar .property.property-enum .property-text {
    width: auto !important;
    margin: 0 6px 0 0;
    padding: 0;
    white-space: nowrap;
}

.effective-length-k-canvas .group-toolbar .property.property-enum .property-value {
    width: auto !important;
    min-width: 170px;
    max-width: 220px;
    margin: 0 !important;
}

.effective-length-k-canvas .group-toolbar .property.property-enum .property-list-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.effective-length-k-canvas .group-toolbar .property.property-enum .property-list-container {
    position: fixed !important;
    z-index: 100000 !important;
}

.effective-length-k-canvas .group-toolbar .button.effective-length-k-play {
    width: 28px;
    height: 28px;
    padding: 4px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.effective-length-k-canvas .group-toolbar .button.effective-length-k-play .button-icon {
    width: 16px;
    height: 16px;
}

.effective-length-k-canvas .group-toolbar .button.effective-length-k-play .button-icon img {
    width: 16px;
    height: 16px;
}

/* Belt-and-suspenders: lift the whole group HEADER (which holds the toolbar and
   the expand popup) into its own stacking context above the sibling table body.
   The per-.property-enum context above works only while nothing between it and the
   table introduces a stacking context; giving the header itself a high z-index makes
   the popup win unconditionally - it out-stacks the datagrid (and its sticky headers,
   z-index 2-5) no matter what the inner nesting does. The header is 42px tall with no
   overflow clip, so the fixed popup still escapes it and paints over the table. */
.beam-span-actions .property-group-header {
    position: relative;
    z-index: 100000;
}

/* Maximizing a Beam Span canvas panel (Beam Analysis / Beam Span / Section /
   3D Beam Span / Provided vs Required) must lift it ABOVE the Forces header.
   The shared `.property-group.maximize` rule (app.css/appv2.css) only sets
   z-index:10, but the "Forces" group header above carries z-index:100000 (needed
   so its Load Combos dropdown popup floats over the table). At 100000 that header
   out-stacked the maximized panel and painted over its top strip - covering the
   panel's own header and its restore/minimize button, so there was no way back to
   the normal view. Raise the maximized panel past the Forces header so its header
   (with the minimize button) stays on top and it truly fills the tab.

   Selectors intentionally chain `.property-group` + layout class + `.maximize`
   (specificity 0,3,0 + !important) so this wins over `.property-group.maximize`
   (0,2,0 !important) regardless of stylesheet load order. Scoped to the beam-span
   layout classes (set in code, present in both standalone and Workflow shells) so
   no other app's maximize behaviour is affected. */
.property-group.beam-span-analysis.maximize,
.property-group.canvas-span-2D.maximize,
.property-group.canvas-span-3D.maximize,
.property-group.canvas-section.maximize,
.property-group.beam-span-provreq.maximize {
    z-index: 100001 !important;
}

/* Beam Deflection uses the same high-z Forces header (`beam-span-actions`).
   Keep each maximized chart above it so its own title and minimize button are
   visible instead of the underlying Forces / Refresh Results header. */
.property-group.beam-deflection-canvas-1.maximize,
.property-group.beam-deflection-canvas-2.maximize,
.property-group.beam-deflection-canvas-3.maximize,
.property-group.beam-deflection-canvas-4.maximize,
.property-group.beam-deflection-canvas-5.maximize,
.property-group.beam-deflection-canvas-6.maximize {
      z-index: 100001 !important;
  }

/* Beam Deflection's tabbed result area renders exactly one native mesh at a time.
   It therefore occupies the complete region below the Forces table instead of the
   legacy two-column/six-chart grid. */
.beam-deflection .beam-deflection-diagram {
    position: absolute;
    top: 416px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    width: auto;
    height: auto;
    overflow: hidden;
    border: 1px solid #cbd8df;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(31, 55, 68, .08);
}

.property-group.beam-deflection-diagram.maximize {
    z-index: 100001 !important;
}

.beam-deflection .beam-deflection-diagram .property-group-body {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 42px;
    bottom: 4px;
    overflow: hidden;
    border: 1px solid #d8e2e7;
    border-radius: 0 0 5px 5px;
    background-color: #fff;
    background-image:
        linear-gradient(#edf2f5 1px, transparent 1px),
        linear-gradient(90deg, #edf2f5 1px, transparent 1px),
        linear-gradient(#f6f8fa 1px, transparent 1px),
        linear-gradient(90deg, #f6f8fa 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}

.beam-deflection .beam-deflection-diagram .property-group-body .viewer-container {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto !important;
    margin-bottom: 0;
}

.beam-deflection .beam-deflection-diagram .property-group-body .viewer-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Single-diagram header: tabs begin at the left edge; view/export actions stay
   grouped at the right. The group still has a blank Text value because the
   PropertyGroup component does not render a header at all for an empty title. */
.beam-deflection .beam-deflection-diagram > .property-group-header > .property-group-header-text {
    display: none;
}

.beam-deflection .beam-deflection-diagram > .property-group-header > .group-toolbar {
    position: absolute;
    left: 0;
    right: 34px;
    top: 0;
    width: auto;
    height: 41px;
    margin: 0;
    padding: 0 6px;
    box-sizing: border-box;
}

.beam-deflection .beam-deflection-diagram > .property-group-header > .group-toolbar > div {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 2px;
    width: 100%;
    height: 41px;
    margin: 0 !important;
    inset: auto !important;
    overflow: visible;
}

.beam-deflection .beam-deflection-diagram .beam-diagram-control-first {
    margin-left: auto !important;
}

.beam-deflection .beam-deflection-diagram > .property-group-header {
    height: 42px;
    padding: 0;
    border-bottom: 1px solid #cbd8df;
    background: #fff;
}

.beam-deflection .beam-deflection-diagram .group-toolbar .button.beam-diagram-tab-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    height: 30px;
    margin: 0;
    padding: 0 13px;
    border: 0;
    border-radius: 5px;
    color: #344751;
    background: transparent;
    font-size: 12px;
    white-space: nowrap;
}

.beam-deflection .beam-deflection-diagram .group-toolbar .button.beam-diagram-tab-button:hover {
    color: #176c7b;
    background: #eef6f8;
}

.beam-deflection .beam-deflection-diagram .group-toolbar .button.beam-diagram-tab-button.checked {
    color: #fff !important;
    border-color: #23879a !important;
    background: #23879a !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(23, 108, 123, .2);
}

.beam-deflection .beam-deflection-diagram .group-toolbar .button.beam-diagram-tab-button.checked .button-text {
    color: #fff !important;
}

.beam-deflection .beam-deflection-diagram .group-toolbar .button:not(.beam-diagram-tab-button) {
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    margin: 0;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
}

.beam-deflection .beam-deflection-diagram .group-toolbar .button:not(.beam-diagram-tab-button):hover {
    border-color: #d5e1e6;
    background: #eef6f8;
}

.beam-deflection .beam-deflection-diagram .group-toolbar .button:not(.beam-diagram-tab-button) .button-icon,
.beam-deflection .beam-deflection-diagram .group-toolbar .button:not(.beam-diagram-tab-button) .button-icon img {
    width: 17px;
    height: 17px;
}

/* Keep text tabs and let the header grow naturally as its controls wrap. */
.beam-deflection .beam-deflection-diagram {
    display: flex;
    flex-direction: column;
}

.beam-deflection .beam-deflection-diagram > .property-group-header {
    position: relative;
    flex: 0 0 auto;
    height: auto;
    min-height: 42px;
}

.beam-deflection .beam-deflection-diagram > .property-group-header > .group-toolbar {
    position: relative;
    inset: auto;
    height: auto;
    margin-right: 34px;
    padding: 5px 6px;
    /* The group header is a flex row, so the toolbar defaults to flex: 0 1 auto -
       shrink-to-fit. That left no free space for the margin-left: auto that pushes the
       action buttons right, so Excel and the zoom controls rendered glued to the last
       tab. Grow to fill the header instead; margin-right reserves the maximize icon's
       slot so Zoom All ends immediately before it. */
    flex: 1 1 auto;
    min-width: 0;
}

.beam-deflection .beam-deflection-diagram > .property-group-header > .group-toolbar > div {
    height: auto;
    min-height: 30px;
    flex-wrap: wrap;
    row-gap: 4px;
}

.beam-deflection .beam-deflection-diagram > .property-group-body {
    position: relative;
    inset: auto;
    flex: 1 1 0;
    min-height: 0;
    margin: 0 4px 4px;
}

/* The Flexural Stiffness tab alone is a two-chart workspace. The left chart keeps
   the position/EI diagram; the right chart follows the transferred BeamSpan final
   section and shows its M-phi response at the same traced demand. */
.beam-deflection .beam-deflection-stiffness-diagram > .property-group-body > div {
    width: 100%;
    height: 100%;
}

.beam-deflection .beam-deflection-stiffness-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 4px;
}

.beam-deflection .beam-deflection-stiffness-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d8e2e7;
    border-radius: 5px;
    background: rgba(255, 255, 255, .82);
}

.beam-deflection .beam-deflection-stiffness-pane .paragraph.beam-deflection-chart-title,
.beam-deflection .beam-deflection-stiffness-pane .paragraph.beam-deflection-stiffness-readout {
    flex: 0 0 auto;
    margin: 0;
    border-bottom: 1px solid #d8e2e7;
    background: rgba(255, 255, 255, .94);
}

.beam-deflection .beam-deflection-stiffness-pane .paragraph.beam-deflection-chart-title .paragraph-text {
    padding: 7px 10px 5px;
    color: #253c48;
    font-weight: 600;
}

.beam-deflection .beam-deflection-stiffness-pane .paragraph.beam-deflection-stiffness-readout .paragraph-text {
    min-height: 29px;
    padding: 5px 10px;
    color: #536771;
    font-variant-numeric: tabular-nums;
    white-space: normal;
}

.beam-deflection .beam-deflection-stiffness-diagram .property-group-body .beam-deflection-stiffness-pane .viewer-container {
    position: relative;
    inset: auto;
    flex: 1 1 0;
    width: 100%;
    height: auto !important;
    min-height: 0;
    margin: 0;
}

@media (max-width: 1050px) {
    .beam-deflection .beam-deflection-stiffness-split {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Project-owned HTML/SVG diagram viewer. UIIFrame is absolute by default; this
   class deliberately assigns it to the full result region below the Forces grid. */
.beam-deflection .beam-deflection-html-viewer {
    position: absolute !important;
    top: 416px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden;
    background: #fff;
}

/* ---- Beams (M11) table toolbar "Load Combos" dropdown ----
   The standalone apps load app.css + appstyle.css (NOT appv2.css), so the Beams
   toolbar dropdown gets no styling from appv2 and inherits the base 50/50 split +
   .property-list-value ellipsis, showing "G..". Size it to content here (scoped to
   .beam-sections so no other toolbar/app is touched) and lift its expand popup. */
.beam-sections .datagrid-toolbar-right .property.property-enum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    /* Own high stacking context so the fixed expand popup is lifted above the table. */
    position: relative;
    z-index: 100000;
}

.beam-sections .datagrid-toolbar-right .property.property-enum .property-text {
    width: auto !important;
    margin: 0;
    padding: 0;
    font-size: 12px;
    white-space: nowrap;
}

.beam-sections .datagrid-toolbar-right .property.property-enum .property-value {
    width: max-content !important;
    min-width: 120px;
    margin: 0 !important;
}

.beam-sections .datagrid-toolbar-right .property.property-enum .property-list-value {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.beam-sections .datagrid-toolbar-right .property.property-enum .property-list-container {
    position: fixed !important;
    z-index: 100000 !important;
}

    .beam-span .datagrid .property.property-table tr:nth-child(2) th:nth-last-child(2), .beam-span .datagrid .property.property-table td:nth-last-child(2) {
        outline: var(--border2);
        position: sticky;
        right: 57px;
        min-width: 60px;
    }

    .beam-span .datagrid .property.property-table tr:nth-child(2) th:nth-last-child(2), .beam-span .datagrid .property.property-table td:nth-last-child(2) {
        outline: var(--border2);
        position: sticky;
        right: 57px;
        min-width: 60px;
    }

.beam-span .property-table thead tr:first-child th {
    position: sticky;
    height: 32px;
    outline: var(--border2);
    top: 1px;
}

.beam-span .property.property-table th:nth-last-child(2) {
    min-width: 0 !important;
    z-index: 4 !important;
}

.beam-span .property-table  thead tr:nth-child(2) th {
    background-color: var(--panelbackground);
    outline: var(--border2);
    position: sticky;
    top: 33px;
}

.beam-span .property-table thead tr:first-child th {
    height: 32px;
    outline: var(--border2);
    top: 1px;
}

.beam-span .property.property-table td:nth-last-child(2) {
    background-color: var(--panelbackground);
}

    .beam-span .property.property-table td:last-child .button, .beam-span .property.property-table td:nth-last-child(2) .button {
        border: none;
        padding: 0;
    }

    .beam-span .property.property-table td:last-child .button-text, .beam-span .property.property-table td:nth-last-child(2) .button-text {
        display: none;
    }


.property-table tr:has(:hover, :focus) td {
    background: #CEF !important;
}

.column-app .canvas-section {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(50% - 8px);
}

.column-app .canvas-framing {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: calc(50% - 8px);
}

.sdof-dynamics .canvas-loading {
    position: absolute;
    left: 0;
    top: 0;
    height: 33%;
    width: 100%;
}

.sdof-dynamics .impulse-canvas-loading {
    position: absolute;
    top: 8px;
    left: 0;
    width: calc(100% - 16px);
    height: calc(33% - 8px);
    margin: 0 8px 0 8px;
}

.sdof-dynamics .impulse-canvas-dis {
    position: absolute;
    top: calc(33% + 8px);
    left: 0;
    width: calc(100% - 16px);
    height: calc(33% - 8px);
    margin: 0 8px 0 8px;
}

.sdof-dynamics .impulse-canvas-forcefreeres {
    position: absolute;
    top: calc(66%);
    left: 0;
    width: calc(50% - 8px);
    height: calc(34% - 8px);
    margin-left: 8px;
}

.sdof-dynamics .impulse-canvas-overallmax {
    position: absolute;
    top: calc(66%);
    left: calc(50% + 4px);
    width: calc(50% - 8px);
    height: calc(34% - 8px);
    margin-right: 8px;
}

/* Periodic vibration plots use FIXED PIXEL heights instead of percentages.
   Reason: on small laptop screens, percent-based heights shrink the plots
   until axis labels (e.g. "Displacement") overlap or get clipped. Fixed
   pixels guarantee a minimum readable size on every screen; the parent
   tab-body scrolls when content exceeds the viewport.

   Layout (8px gaps):
     Left column  - PoK + 5 harmonics, 170px each, total 1060px
     Right column - periodic-loading 240, total-dis 240, amplitude 480 */

/* ============ SDOF Dynamics - Periodic Vibration mode ============
   Two columns. The RIGHT column is a fixed set of three plots and stays absolutely
   positioned below. The LEFT column is Po/K plus ONE PLOT PER HARMONIC, and the
   harmonic count is user input (`NoHarmonics`, default 5, no upper bound), so it is
   laid out in NORMAL FLOW - there is no fixed set of indices to hand-position.

   This replaces `.periodic-canvas-1` ... `-5`, which only covered five harmonics:
   above five the extra groups matched no rule at all, fell back to `position: static`
   and collapsed on top of each other.

   It also replaces a `min-height: 1080px` on `.tab-body` (keyed by
   `:has(.periodic-canvas-5)`). That forced the tab body TALLER than its own content,
   so it never scrolled, and taller than `.center-panel`, which is `overflow: hidden` -
   on a 665px panel harmonics 4 and 5 landed at 753px and 931px and were simply
   clipped away with no way to reach them. Real in-flow content gives `.tab-body`
   (`overflow: auto`) something to actually scroll.

   `position: relative` is required, not optional: `.property-group-body` is static, so
   the group itself must stay the containing block for `.viewer-container`
   (`position: absolute; top: 42px; bottom: 0`) or the canvas would size against
   `.tab-body` instead. `.property-group.maximize` still wins - it sets its own
   `position: absolute` with inset 0 !important. */
.sdof-dynamics .periodic-canvas-pok,
.sdof-dynamics .periodic-canvas-harmonic {
    position: relative;
    width: calc(50% - 8px);
    height: 300px;
}

/* The left column is what gives the tab body its scroll height, so guarantee at least
   enough for the taller right column (amplitude ends at 496 + 480 + margin = 984px)
   even when the user asks for only one or two harmonics. */
.sdof-dynamics .tab-body > div:has(.periodic-canvas-pok) {
    min-height: 984px;
}

.sdof-dynamics .periodic-canvas-periodicloading {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 16px);
    height: 240px;
}

.sdof-dynamics .periodic-canvas-totaldis {
    position: absolute;
    top: 248px;
    right: 0;
    width: calc(50% - 16px);
    height: 240px;
}

/* Po/K and .periodic-canvas-1 ... -5 used to be hand-positioned here; the left column
   is now laid out in flow at the top of this section, for any harmonic count. */

.sdof-dynamics .periodic-canvas-amplitude {
    position: absolute;
    top: 496px;
    right: 0;
    width: calc(50% - 16px);
    height: 480px;
}

.sdof-dynamics .earthquake-canvas-l1 {
    position: absolute;
    top: 0%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}
.sdof-dynamics .earthquake-canvas-l2 {
    position: absolute;
    top: 25%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}
.sdof-dynamics .earthquake-canvas-l3 {
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .earthquake-canvas-l4 {
    position: absolute;
    top: 75%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .earthquake-canvas-r1 {
    position: absolute;
    top: 0%;
    right: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .earthquake-canvas-r2 {
    position: absolute;
    top: 25%;
    right: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .earthquake-canvas-r3 {
    position: absolute;
    top: 50%;
    right: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .earthquake-canvas-r4 {
    position: absolute;
    top: 75%;
    right: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

/* Arbitrary vibration plots - fixed pixel heights so rotated Y-axis labels
   (e.g. "Acceleration (m/s²)") are never clipped on small screens.
   4 plots × 220px + 3 × 8px gaps = 908px; tab-body min-height 920px. */
.sdof-dynamics .tab-body:has(.arbitrary-canvas-l4) {
    min-height: 920px;
}

.sdof-dynamics .arbitrary-canvas-l1 {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 8px);
    height: 220px;
}
.sdof-dynamics .arbitrary-canvas-l2 {
    position: absolute;
    top: 228px;
    left: 0;
    width: calc(100% - 8px);
    height: 220px;
}
.sdof-dynamics .arbitrary-canvas-l3 {
    position: absolute;
    top: 456px;
    left: 0;
    width: calc(100% - 8px);
    height: 220px;
}
.sdof-dynamics .arbitrary-canvas-l4 {
    position: absolute;
    top: 684px;
    left: 0;
    width: calc(100% - 8px);
    height: 220px;
}

.equation-visualizer .left-panel {
    width: 500px;
}

.equation-visualizer .center-panel {
    left: 512px;
    right: 0;
}

.equation-visualizer .right-panel,
.equation-visualizer .right-panel-toggle {
    display: none !important;
}

.equation-visualizer .property-input-border {
    align-items: center;
    display: flex;
    height: 24px;
    padding: 0 8px;
}

.equation-visualizer .property-range .property-list-value {
    padding: 4px 4px;
}

body .equation-visualizer .property-range .property-enum {
    align-items: center;
    height: 24px;
}

.equation-visualizer .left-panel-toggle {
    display: none;
}

.dead-loads .center-panel {
    right: 0
}


.dead-loads .right-panel,
.dead-loads .right-panel-toggle {
    display: none !important;
}

.live-loads .center-panel {
    right: 0
}


.live-loads .right-panel,
.live-loads .right-panel-toggle {
    display: none !important;
}

.load-combination .center-panel {
    right: 0
}

.load-combination .right-panel,
.load-combination .right-panel-toggle {
    display: none !important;
}

/* Beam Deflection App Styles */

/* The six chart panels are three absolutely positioned rows below the Forces
   table, which ends at 416px. Row height and row top must be derived from the
   SAME expression or the rows drift apart as the window height changes:

     row height = (container - 416px table - 8px bottom - 2 x 8px gaps) / 3
     row n top  = 416px + n x (row height + 8px gap)

   Mixing a fixed `top` with a percentage `height` (the previous
   `top: 416/645/873px` + `height: calc(25% - 15px)`) broke both ways: on a
   container taller than ~915px each panel outgrew its 229px row pitch and the
   next - opaque - row covered the bottom strip of the row above, which is where
   the canvas draws the X axis (so the top two rows lost their tick values and
   their "Position (m)" label while the bottom row kept them); pinning the
   height instead left dead space under the last row. */

/* Canvas 1 - Beam 2D View (Top left) */
.beam-deflection .beam-deflection-canvas-1 {
    position: absolute;
    top: 416px;
    left: 0;
    width: calc(50% - 5px);
    height: calc((100% - 440px) / 3);
}

/* Canvas 2 - Bending Moment (Top right) */
.beam-deflection .beam-deflection-canvas-2 {
   position: absolute;
       top: 416px;
     left: calc(50%);
    width: calc(50% - 8px);
    height: calc((100% - 440px) / 3);
}

/* Canvas 3 - Stiffness (Middle left) */
.beam-deflection .beam-deflection-canvas-3 {
    position: absolute;
       top: calc(424px + (100% - 440px) / 3);
     left: 0;
    width: calc(50% - 5px);
    height: calc((100% - 440px) / 3);
}

/* Canvas 4 - Curvature (Middle right) */
.beam-deflection .beam-deflection-canvas-4 {
    position: absolute;
       top: calc(424px + (100% - 440px) / 3);
    left: calc(50%);
    width: calc(50% - 8px);
    height: calc((100% - 440px) / 3);
}

/* Canvas 5 - Rotation (Bottom left) */
.beam-deflection .beam-deflection-canvas-5 {
    position: absolute;
       top: calc(432px + 2 * (100% - 440px) / 3);
    left: 0;
    width: calc(50% - 5px);
    height: calc((100% - 440px) / 3);
}



/* Canvas 6 - Deflection (Bottom right) */
.beam-deflection .beam-deflection-canvas-6 {
    position: absolute;
       top: calc(432px + 2 * (100% - 440px) / 3);
          left: calc(50%);
    width: calc(50% - 8px);
     height: calc((100% - 440px) / 3);
}

.beam-deflection .beam-deflection-canvas-1 .property-group-body,
.beam-deflection .beam-deflection-canvas-2 .property-group-body,
.beam-deflection .beam-deflection-canvas-3 .property-group-body,
.beam-deflection .beam-deflection-canvas-4 .property-group-body,
.beam-deflection .beam-deflection-canvas-5 .property-group-body,
.beam-deflection .beam-deflection-canvas-6 .property-group-body {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 42px;
    bottom: 8px;
}

.beam-deflection .beam-deflection-canvas-1 .property-group-body .viewer-container,
.beam-deflection .beam-deflection-canvas-2 .property-group-body .viewer-container,
.beam-deflection .beam-deflection-canvas-3 .property-group-body .viewer-container,
.beam-deflection .beam-deflection-canvas-4 .property-group-body .viewer-container,
.beam-deflection .beam-deflection-canvas-5 .property-group-body .viewer-container,
.beam-deflection .beam-deflection-canvas-6 .property-group-body .viewer-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: auto !important;
    margin-bottom: 0;
    width: auto;
}

.beam-deflection .beam-deflection-canvas-1 .property-group-body .viewer-container canvas,
.beam-deflection .beam-deflection-canvas-2 .property-group-body .viewer-container canvas,
.beam-deflection .beam-deflection-canvas-3 .property-group-body .viewer-container canvas,
.beam-deflection .beam-deflection-canvas-4 .property-group-body .viewer-container canvas,
.beam-deflection .beam-deflection-canvas-5 .property-group-body .viewer-container canvas,
.beam-deflection .beam-deflection-canvas-6 .property-group-body .viewer-container canvas {
    height: 100% !important;
}

.beam-deflection .datagrid .property.property-table {
    background-color: var(--panelbackground);
    left: 0;
    right: 0;
    top: 0;
    bottom: 43px;
    margin: 0 !important;
}



.beam-deflection .property-table thead tr:first-child th {
    position: sticky;
    height: 32px;
    outline: var(--border2);
    top: 1px;
}

.beam-deflection .property.property-table th:nth-last-child(2) {
    min-width: 0 !important;
    z-index: 4 !important;
}

.beam-deflection .property-table  thead tr:nth-child(2) th {
    background-color: var(--panelbackground);
    outline: var(--border2);
    position: sticky;
    top: 33px;
}

.beam-deflection .property-table thead tr:first-child th {
    height: 32px;
    outline: var(--border2);
    top: 1px;
}

.beam-deflection .property.property-table td:nth-last-child(2) {
    background-color: var(--panelbackground);
}

.beam-deflection .property.property-table td:last-child .button, .beam-span .property.property-table td:nth-last-child(2) .button {
        border: none;
        padding: 0;
    }

.beam-deflection .property.property-table td:last-child .button-text, .beam-span .property.property-table td:nth-last-child(2) .button-text {
        display: none;
    }



    
.beam-sections .left-panel {
    bottom: 40%;
}

.beam-sections .center-panel {
    border-right: 0;
    right: 0;
}

.beam-sections .right-panel {
    background: #eff1f2;
    border-radius: 16px;
    position: absolute;
    margin: 0 8px 8px 8px;
    left: 0;
    height: calc(40% - 8px);
    bottom: 0;
    top: unset;
    width: 380px;
    overflow: hidden;
    display: block;
}

.beam-sections .right-panel-toggle {
    display: none;
}

/* Properties is the right panel, re-homed under the left panel for these table
   apps. Its own toggle is hidden above, so the left-panel toggle owns the whole
   left column - collapsing it has to take Properties with it, otherwise the
   panel stays floating over the widened centre table. Overrides the
   display:block on .beam-sections .right-panel. */
.beam-sections .right-panel.left-collapsed {
    display: none;
    width: 0;
    border: none;
    margin: 0;
    overflow: hidden;
}


.beam-sections .property.property-table td:last-child,
.beam-sections .property.property-table td:nth-last-child(2) {
    width: 32px;
}

    .beam-sections .property.property-table td:last-child .button,
    .beam-sections .property.property-table td:nth-last-child(2) .button {
        border: none;
        padding: 0;
    }

        .beam-sections .property.property-table td:last-child .button img,
        .beam-sections .property.property-table td:nth-last-child(2) .button img {
            height: 20px;
            width: 20px;
        }

    .beam-sections .property.property-table td:last-child .button-text,
    .beam-sections .property.property-table td:nth-last-child(2) .button-text {
        display: none;
    }

.moment-curvature .center-panel .tab-body > div > .canvas2d-container:nth-child(1) {
    bottom: 50%;
    right: 50%;
    border-right: var(--border);
}

.moment-curvature .center-panel .tab-body > div > .canvas2d-container:nth-child(2) {
    bottom: 50%;
    left: 50%;
}

.moment-curvature .center-panel .tab-body > div > .canvas2d-container:nth-child(3) {
    border-top: var(--border);
    border-bottom: var(--border);
    top: 50%;
    bottom: 25%;
}

.moment-curvature .center-panel .tab-body > div > .canvas2d-container:nth-child(4) {
    border-right: var(--border);
    top: 75%;
    right: 50%;
}

.moment-curvature .center-panel .tab-body div > .canvas2d-container:nth-child(5) {
    top: 75%;
    left: 50%;
}

.moment-curvature .datagrid .property.property-table th:last-child {
    position: unset;
}

.beam-span .datagrid .property.property-table th:last-child, .beam-span .datagrid .property.property-table td:last-child {
    position: sticky;
}

.elastic-stresses .left-panel {
    bottom: 0 !important;
}

.elastic-stresses .center-panel {
}

.elastic-stresses .right-panel,
.elastic-stresses .right-panel-toggle {
    display: none;
}

.elastic-analysis {
    position: absolute;
    left: 0;
    width: calc(33% - 4px);
    top: 0;
    height: 33%;
}

.elastic-distribution-1 {
    position: absolute;
    left: calc(33%);
    width: calc(33% - 4px);
    top: 0;
    height: 33%;
}

.elastic-distribution-2 {
    position: absolute;
    right: 0;
    width: calc(34% - 8px);
    top: 0;
    height: 33%;
}

.elastic-direct {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(33% + 4px);
    height: 33%;
    width: calc(33% - 4px);
}

.elastic-principal {
    position: absolute;
    right: 0;
    top: calc(33% + 4px);
    height: 33%;
    left: calc(33%);
    width: calc(33% - 4px);
}

.elastic-mohrs {
    position: absolute;
    right: 0;
    top: calc(33% + 4px);
    height: 33%;
    width: calc(34% - 8px);
}

.elastic-major {
    position: absolute;
    left: 0;
    width: calc(25% - 4px);
    bottom: 0;
    height: calc(33% - 6px);
}

.elastic-minor {
    position: absolute;
    left: calc(25%);
    width: calc(25% - 4px);
    bottom: 0;
    height: calc(33% - 6px);
}

.elastic-trajectories {
    position: absolute;
    right: 0;
    width: calc(50% - 8px);
    bottom: 0;
    height: calc(33% - 6px);
}

.analysis.analysis-template .left-panel {
    bottom: 0;
}

.analysis.analysis-template .right-panel,
.analysis.analysis-template .right-panel-toggle {
    display: none;
}

.analysis .left-panel {
    bottom: 40%;
}

.analysis .right-panel-toggle {
    display: none;
}

.analysis .left-panel.collapsed {
    bottom: 40%;
    width: 0;
    border: none;
    margin: 0;
    overflow: hidden;
}

.analysis .right-panel.left-collapsed {
    width: 0;
    border: none;
    margin: 0;
    overflow: hidden;
}

.etabs-app .left-panel {
    bottom: 50%;
}

.analysis .center-panel {
    right: 0;
}

.etabs-app .right-panel {
    height: calc(50% - 8px);
}

/* ============ Moment Curvature centre-panel canvas grid ============
   Six canvas groups in 3 rows (see MomentCurvatureApp.cs):

     row 1 | Section        | Moment Curvature        <- half/half
     row 2 | Stress Plots                             <- full width
     row 3 | Steel          | Concrete | Concrete Core

   Same sizing model as `.perf-based-eval` further down: the groups are
   `position: absolute` in `.tab-body` and carry `margin: 4px`, `top` positions the
   MARGIN edge, so with row height H the row origins are 0, H+4, 2H+8 and the last
   row's margin box ends at 3H+16. `--mc-row-h` splits the tab body evenly while
   three 300px rows still fit and holds at 300px below that, at which point
   `.tab-body` (`overflow: auto`) scrolls instead of the charts squashing - row 3
   used to be pinned with `bottom: 0`, which cannot scroll.

   Scoped under `.moment-curvature` (the app class, applied by BasePage) so these
   `curvature-canvas-*` names can never reach another app. Beam Performance used to
   share them and has since moved to its own `pbe-canvas-*` classes.

   No `!important`, so `.property-group.maximize` (app.css) still wins. */
.moment-curvature {
    --mc-row-h: max(300px, calc((100% - 16px) / 3));
    --mc-row-2-top: calc(var(--mc-row-h) + 4px);
    --mc-row-3-top: calc(var(--mc-row-h) * 2 + 8px);
}

.moment-curvature .curvature-canvas-section,
.moment-curvature .curvature-canvas-curvature,
.moment-curvature .curvature-canvas-stress,
.moment-curvature .curvature-canvas-steel,
.moment-curvature .curvature-canvas-concrete,
.moment-curvature .curvature-canvas-concrete-core {
    position: absolute;
    height: var(--mc-row-h);
}

/* ---- rows ---- */
.moment-curvature .curvature-canvas-section,
.moment-curvature .curvature-canvas-curvature {
    top: 0;
}

.moment-curvature .curvature-canvas-stress {
    top: var(--mc-row-2-top);
}

.moment-curvature .curvature-canvas-steel,
.moment-curvature .curvature-canvas-concrete,
.moment-curvature .curvature-canvas-concrete-core {
    top: var(--mc-row-3-top);
}

/* ---- columns (4px gutters come from each group's own 4px margin) ---- */
.moment-curvature .curvature-canvas-section {
    left: 0;
    width: calc(50% - 8px);
}

.moment-curvature .curvature-canvas-curvature {
    right: 0;
    width: calc(50% - 4px);
}

.moment-curvature .curvature-canvas-stress {
    left: 0;
    right: 0;
}

.moment-curvature .curvature-canvas-steel {
    left: 0;
    width: calc(33% - 8px);
}

.moment-curvature .curvature-canvas-concrete {
    left: calc(33% - 4px);
    width: calc(33% - 4px);
}

.moment-curvature .curvature-canvas-concrete-core {
    right: 0;
    width: calc(34% - 4px);
}

/* ---- Chart legend must not block the draggable location pin ----
   Canvas2D binds mousedown/mousemove/mouseup to the <canvas> element itself with no
   pointer capture, and reads event.offsetX (canvas2d.ts, Events()). The legend is a
   SIBLING `div.legend` painted over the chart (`position: absolute; top: 8px; right: 0`
   in app.css), so as soon as the pointer crosses onto it the canvas stops receiving
   mousemove and dragging the grey location pin along the beam freezes. The mouseup is
   swallowed too, leaving `onmovelocation` true so the pin then trails the cursor with
   no button held until you click back on the chart.

   FrameWork.Legend (framework.ts) only builds a header, a unit line and a colour table -
   it attaches NO event listeners - so making it click-through costs nothing but the
   ability to select its text.

   Scoped to the two apps whose canvases actually have a draggable pin
   (RulerPosition 2/3) AND a legend. Moment Curvature has a pin but no legend; Beam Span,
   Beam Deflection and the SDOF modes have legends but no pin - all left untouched.

   The collapse toggle is the one exception - it has to take clicks, so it re-enables
   pointer events on itself below. It is deliberately a small target (12px) so it blocks
   as little of the drag path as possible. */
.perf-based-eval .legend,
.elastic-stresses .legend {
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* Fade the legend ONLY WHILE the location pin is being dragged - that is the one moment it
   is actually in the way, so there is no reason to leave it washed out and hard to read
   the rest of the time. `Canvas2D.SetMovingLocation()` (canvas2d.ts) puts
   "moving-location" on the canvas container for exactly the span of the drag, mirroring
   its `onmovelocation` flag, and removes it on mouse-up or on the next mouse-down.

   A COLLAPSED legend is deliberately left opaque: only the title remains, it obscures
   nothing, and it needs to stay crisp enough to find and click again. */
.perf-based-eval .moving-location .legend:not(.collapsed),
.elastic-stresses .moving-location .legend:not(.collapsed) {
    opacity: 0.65;
}

/* ---- Collapsible legend ----
   FrameWork.Legend (framework.ts) always emits `.legend-header > .legend-header-text +
   .legend-toggle` and toggles `.collapsed` on the legend root; Canvas2D/Canvas3D persist
   the choice across the rebuild that every mesh update triggers. The chevron is hidden by
   default so the other six apps that draw legends are visually unchanged, and switched on
   only for the two apps below. */
.legend-toggle {
    display: none;
}

.perf-based-eval .legend-toggle,
.elastic-stresses .legend-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    cursor: pointer;
    pointer-events: auto;
    flex: none;
}

.legend .legend-header {
    display: flex;
    align-items: center;
}

/* Chevron direction follows the app's own convention (PropertyGroup uses up.svg when
   expanded, down.svg when collapsed): the arrow points at what the click will do. */
.legend-toggle::before {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(1px) rotate(-135deg);
    transition: transform 0.12s ease;
}

.legend.collapsed .legend-toggle::before {
    transform: translateY(-2px) rotate(45deg);
}

.legend.collapsed .legend-unit,
.legend.collapsed table {
    display: none;
}

.legend.collapsed .legend-header {
    margin-bottom: 0;
}

/* Beam-deflection curve visibility controls. Keyed legend rows receive a checkbox from
   FrameWork.Legend; other application legends have no keys and keep their existing layout. */
.beam-deflection .legend .legend-curve-toggle-cell {
    padding-right: 2px;
    width: 18px;
}

.beam-deflection .legend .legend-curve-toggle {
    accent-color: #25899d;
    cursor: pointer;
    height: 15px;
    margin: 0;
    pointer-events: auto;
    vertical-align: middle;
    width: 15px;
}

.beam-deflection .legend .legend-swatch {
    width: 24px;
}

.beam-deflection .legend .legend-label {
    padding-left: 8px;
}

.beam-deflection .legend .legend-item-hidden .legend-swatch,
.beam-deflection .legend .legend-item-hidden .legend-label {
    opacity: 0.42;
}

/* ============ Beam Performance (perfbasedeval) centre-panel canvas grid ============
   Five canvas groups laid out as a 2-row x 3-column grid inside `.tab-body`:

     row 1 | Beam Analysis        | Moment Curvature | Moment Rotation
     row 2 | Section              | Moment Rotation (ASCE 41 Backbone)  <- spans col 2+3

   Every class below is PBE-only (`pbe-canvas-*`, scoped under `.perf-based-eval`).
   They deliberately do NOT reuse `.elastic-analysis` (Elastic Stresses app) or
   `.curvature-canvas-*` (Moment Curvature app) - those were shared, and an unscoped
   short-screen override written for PBE was leaking into Moment Curvature.

   There used to be a third row (Steel | Concrete Cover | Concrete Core stress-strain
   charts). It was removed together with its C# canvas groups in
   `PerformanceBasedEvaluationApp.cs`; the two remaining rows now split the tab body
   between them, so every chart is roughly 50% taller than it was.

   ---- Vertical sizing ----
   The groups are `position: absolute`, so their containing block is `.tab-body`
   (top: 36px / bottom: 0 of `.center-panel`, `overflow: auto`). Each group also
   carries `margin: 4px` from `.center-panel .tab-body .property-group`, and `top`
   positions the MARGIN edge, so with a row height H the row origins are 0 and H+4,
   and the last row's margin box ends at 2H+12.

   `--pbe-row-h` therefore splits the tab body evenly at `(100% - 12px)/2` while that
   still leaves each row at least 300px, and pins the row height at 300px below that -
   at which point the content is taller than `.tab-body` and it scrolls. Using max()
   instead of a height breakpoint keeps the rows flush at every window size; the old
   `@media (max-height: 1000px)` block hard-coded row tops and overlapped the rows.

   No `!important` here, so `.property-group.maximize` (app.css) still wins and a
   maximised chart fills the tab as before. */
.perf-based-eval {
    --pbe-row-h: max(300px, calc((100% - 12px) / 2));
    --pbe-row-2-top: calc(var(--pbe-row-h) + 4px);
}

.perf-based-eval .pbe-canvas-analysis,
.perf-based-eval .pbe-canvas-moment-curvature,
.perf-based-eval .pbe-canvas-moment-rotation,
.perf-based-eval .pbe-canvas-section,
.perf-based-eval .pbe-canvas-moment-rotation-asce {
    position: absolute;
    height: var(--pbe-row-h);
}

/* ---- rows ---- */
.perf-based-eval .pbe-canvas-analysis,
.perf-based-eval .pbe-canvas-moment-curvature,
.perf-based-eval .pbe-canvas-moment-rotation {
    top: 0;
}

.perf-based-eval .pbe-canvas-section,
.perf-based-eval .pbe-canvas-moment-rotation-asce {
    top: var(--pbe-row-2-top);
}

/* ---- columns (4px gutters come from each group's own 4px margin) ---- */
.perf-based-eval .pbe-canvas-analysis,
.perf-based-eval .pbe-canvas-section {
    left: 0;
    width: calc(33% - 8px);
}

.perf-based-eval .pbe-canvas-moment-curvature {
    left: calc(33% - 4px);
    width: calc(33% - 4px);
}

.perf-based-eval .pbe-canvas-moment-rotation {
    right: 0;
    width: calc(34% - 4px);
}

/* ASCE 41 backbone spans columns 2 and 3 (width left auto so it tracks both edges). */
.perf-based-eval .pbe-canvas-moment-rotation-asce {
    left: calc(33% - 4px);
    right: 0;
}

/* set a single gap value */
.sdof-dynamics {
    --sd-gap: 8px;
}

    /* common panel size: (100% - 2*gaps) / 3 */
    .sdof-dynamics .sdof-canvas-1,
    .sdof-dynamics .sdof-canvas-2,
    .sdof-dynamics .sdof-canvas-3 {
        position: absolute;
        left: 0;
        right: 0;
        height: calc((100% - (2 * var(--sd-gap))) / 3);
    }

    /* stacked positions with equal gaps */
    .sdof-dynamics .sdof-canvas-1 {
        top: 0;
    }

    .sdof-dynamics .sdof-canvas-2 {
        top: calc((100% - (2 * var(--sd-gap))) / 3 + var(--sd-gap));
    }

    .sdof-dynamics .sdof-canvas-3 {
        top: calc(2 * ((100% - (2 * var(--sd-gap))) / 3) + 2 * var(--sd-gap));
        height: calc((100% - (2 * var(--sd-gap))) / 3 - 16px);
    }


    .sdof-dynamics .sdof-canvas-right-1 {
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
        height: 38%;
    }

    .sdof-dynamics .sdof-canvas-right-harmonic-1,
    .sdof-dynamics .sdof-canvas-right-harmonic-2,
    .sdof-dynamics .sdof-canvas-right-harmonic-3 {
        position: relative;
        /* no absolute positioning */
        width: 100%;
        min-height: 180px;
        /* tweak: 160–220px works well */
        margin-top: 8px;
        /* space between groups */
    }

    .sdof-dynamics .sdof-canvas-right-impulse-animation,
    .sdof-dynamics .sdof-canvas-right-impulse-1,
    .sdof-dynamics .sdof-canvas-right-impulse-2,
    .sdof-dynamics .sdof-canvas-right-impulse-3 {
        position: relative;
        /* no absolute positioning */
        width: 100%;
        min-height: 180px;
        /* tweak: 160–220px works well */
        margin-top: 8px;
        /* space between groups */
    }

.steel-beam .steel-beam-forces-table {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(50% - 12px);
    height: 33%;
}

.steel-beam .steel-beam-analysis-canvas {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(50% - 12px);
    height: 33%;
}

.steel-beam .steel-beam-section-canvas {
    position: absolute;
    left: 0;
    top: calc(33% + 8px);
    width: calc(50% - 12px);
    height: 33%;
}

.steel-beam .steel-beam-span-2d-canvas {
    position: absolute;
    right: 0;
    top: calc(33% + 8px);
    width: calc(50% - 12px);
    height: 33%;
}

.steel-beam .steel-beam-span-3d-canvas {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: calc(34% - 32px);
}

/* Column Curve tab: single chart fills the whole center panel. */
.steel-beam .steel-column-curve-canvas {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.steel-beam .steel-column-curve-canvas .property-group-header {
    min-height: 42px;
    padding-right: 44px;
}

.steel-beam .steel-column-curve-canvas .property-group-header-text {
    min-width: 280px;
}

.steel-beam .steel-column-curve-canvas .group-toolbar {
    right: 42px;
    top: 7px;
    max-width: calc(100% - 360px);
}

.steel-beam .steel-column-curve-canvas .group-toolbar > div {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .property,
.steel-beam .steel-column-curve-canvas .group-toolbar .button {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    width: auto !important;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .property-text {
    color: var(--textcolor);
    font-size: 11px;
    margin: 0 5px 0 0;
    padding: 0;
    width: auto !important;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .property-value {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .steel-column-curve-klr-input .property-input {
    height: 22px;
    min-width: 58px;
    padding: 2px 6px;
    text-align: right;
    width: 58px;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .steel-column-curve-reset.button {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 13px;
    color: var(--textcolor);
    height: 24px;
    padding: 0 10px;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .steel-column-curve-reset.button:hover {
    background-color: var(--hoverbackground);
}

.steel-beam .steel-column-curve-canvas .group-toolbar .steel-column-curve-reset .button-icon {
    height: 14px;
    margin-right: 5px;
    width: 14px;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .steel-column-curve-reset .button-icon img {
    height: 14px;
    width: 14px;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .steel-column-curve-reset .button-text {
    font-size: 11px;
    line-height: 22px;
    white-space: nowrap;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .steel-column-curve-residual-toggle {
    gap: 5px;
    max-width: 98px;
    overflow: hidden;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .steel-column-curve-residual-toggle .property-value .property-input {
    margin-left: 0 !important;
}

.steel-beam .steel-column-curve-canvas .group-toolbar .steel-column-curve-residual-toggle .property-text {
    margin: 0;
}

.steel-beam .steel-beam-forces-table .property-table {
    margin: 0;
    max-height: 100%;
}

.steel-beam .steel-beam-forces-table .property-table-footer {
    margin-top: 4px;
}

.steel-beam .steel-beam-forces-table .table {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 44px;
    bottom: 16px;
    margin-bottom: 0;
    height: unset;
    width: calc(100% - 32px);
}


/* The Beam Performance short-screen overrides that used to live here (a
   `@media (max-height: 1000px)` block) are gone: the 300px floor is now baked into
   `--pbe-row-h` above via max(), so the rows stay flush at every height instead of
   jumping at a breakpoint. The last rule in that block was also unscoped, so its
   `top: 516px` was being applied to the Moment Curvature app's Steel / Concrete /
   Concrete Core panels as well. */

/* ---- Slider editor (UIParamSlider/PropertySlider + Fixed-mode PropertyRange) ----
   Selectors are context-independent so the slider works both as a standalone
   PropertySlider and inside PropertyRange's Fixed branch. */

.property.property-slider {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 8px;
    gap: 8px;
}

.property.property-slider .property-text {
    flex: 0 0 auto;
    min-width: 80px;
    max-width: 160px;
}

.property.property-slider .property-value {
    flex: 1;
    display: flex;
    align-items: center;
}

.property-slider-track {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.property-slider-input {
    flex: 1;
    cursor: pointer;
    accent-color: var(--primary, #4b7bec);
    height: 4px;
    min-width: 0;
}

.property-slider-value {
    flex: 0 0 64px;
    text-align: right;
    font-size: 12px;
    color: var(--fontcolor);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.property.property-slider .property-input.disabled {
    padding: 2px 6px;
}

/* Unit shown inline with the parameter symbol, e.g. "f'c (MPa)".
   Scoped to the Equation Visualizer so other apps are unaffected.
   `> .property-text` targets only the row's label, not the Type dropdown's
   inner (hidden) label. Fixed-width label + flexible value keeps the four
   From/To/Interval/Type columns inside the panel. */
.equation-visualizer .property.property-range > .property-text {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: 0 0 92px;
    width: 92px;
    white-space: nowrap;
}

.equation-visualizer .property.property-range > .property-value {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.equation-visualizer .property.property-range .property-range-unit {
    font-size: 12px;
    opacity: 0.65;
    color: var(--fontcolor);
    white-space: nowrap;
}

/* M17 member editor is shown in the narrow Properties panel. Keep the same
   table renderer as M16, but do not pin the last column (K3) to the right edge. */
.m17-member-grid .datagrid .property.property-table th:last-child,
.m17-member-grid .datagrid .property.property-table td:last-child {
    position: static;
    right: auto;
    z-index: auto;
}

/* Member editors rendered inside the narrow Properties panel (M16 / M17).
   The multi-member page styling freezes the LAST TWO columns of a datagrid because in the
   centre table those are the Design / View buttons:
       .beam-sections .datagrid .property.property-table td:nth-last-child(2)
           { position: sticky; right: 59px; }
       .datagrid .property.property-table td:last-child { position: sticky; right: 0; }
   A member panel grid has no button columns, so those rules pinned real input columns -
   the second-to-last cell (Effective Length K2) floated out of the grid and sat on top of
   Unbraced Length L2, so typing in what looked like the L2 box edited K2 instead. */
.member-panel-grid .datagrid .property.property-table th:nth-last-child(2),
.member-panel-grid .datagrid .property.property-table td:nth-last-child(2),
.member-panel-grid .datagrid .property.property-table th:last-child,
.member-panel-grid .datagrid .property.property-table td:last-child {
    position: static !important;
    right: auto !important;
    z-index: auto !important;
}

/* ---- T45 Concrete Stress-Strain: Comparison tab -------------------------------------
   The Comparison tab stacks the cases table on top of the chart: the table takes the
   height it needs and the chart takes ALL the rest, so the tab body is laid out as a flex
   column. Modelled on the M53 Slab Model tab (.slab-model-canvas in app.css), which solves
   the same problem for a grid of canvases - including the two rules that matter most:
   a canvas group needs its body to be the positioned box, and the base
   ".property-group-body .viewer-container { height: 300px }" has to be beaten or the chart
   draws in a 300px band at the top no matter how tall its group is. (The single-chart tabs
   escape all this through .tab-tools-canvas, which assumes a panel holding only a chart.) */
.concrete-stress-strain .property-groups.ss-compare,
.steel-stress-strain .property-groups.ss-compare {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* One row per case and nine columns: let the table scroll rather than squash a column. */
.concrete-stress-strain .ss-compare > .ss-compare-cases,
.steel-stress-strain .ss-compare > .ss-compare-cases {
    flex: 0 0 auto;
    min-height: 0;
}

.concrete-stress-strain .ss-compare .ss-compare-cases .property-table,
.steel-stress-strain .ss-compare .ss-compare-cases .property-table {
    max-height: 340px;
    overflow: auto;
}

/* The leading classes raise specificity above
   ".center-panel .tab-body .property-group { margin: 4px }". */
.center-panel .tab-body .ss-compare > .ss-compare-canvas {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 260px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.ss-compare > .ss-compare-canvas > .property-group-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    position: relative;
}

/* Beat the base ".property-group-body .viewer-container { height: 300px }" so the chart
   fills its group instead of a fixed 300px band. */
.ss-compare .ss-compare-canvas .property-group-body .viewer-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
}

.ss-compare .ss-compare-canvas .property-group-body .viewer-container canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* The chart group keeps its maximize button: filling the tab beats sharing it. */
.ss-compare > .ss-compare-canvas.maximize > .property-group-body {
    position: absolute;
    left: 0;
    right: 0;
    top: 42px;
    bottom: 0;
    height: auto;
}

/* ---- T45 Comparison table: the Colour column is a colour, not a colour name ----------------
   Two platform behaviours have to be undone for a colour chip to work:
     1. `.property-icon img { filter: var(--svgfilter) }` exists for MONOCHROME line icons - it
        crushes every icon to one theme colour, which is why ten different swatches all rendered
        as the same dark navy.
     2. an enum cell stacks its icon above its value, and the value text repeats what the colour
        already says.
   Both are scoped by :has(img[src*="swatch-"]) so no other enum in the platform is touched. */
.property-icon img[src*="swatch-"] {
    filter: none;
    width: 22px;
    height: 22px;
}

.property.property-enum:has(img[src*="swatch-"]) {
    align-items: center;
    display: flex;
    gap: 2px;
    padding-left: 6px;
}

.property.property-enum:has(img[src*="swatch-"]) .property-icon {
    display: flex;
    align-items: center;
}

/* The chip IS the value, so the name next to it is dropped - the chevron stays so the cell still
   reads as a picker. font-size:0 hides the bare text node (there is no element to target). */
.property.property-enum:has(img[src*="swatch-"]) .property-list-value {
    align-items: center;
    display: flex;
    font-size: 0;
    padding: 2px 2px;
}

.property.property-enum:has(img[src*="swatch-"]) .expander-header-icon {
    margin-top: 0;
}

.property.property-enum:has(img[src*="swatch-"]) .expander-header-icon img {
    width: 10px;
    height: 10px;
}

/* The list keeps its names - you should know what you are picking - but each row gets the colour
   in front of it. The order is the CaseColourType enum order, so nth-child maps one-to-one. */
.property.property-enum:has(img[src*="swatch-"]) .property-list-body {
    align-items: center;
    display: flex;
    gap: 8px;
}

.property.property-enum:has(img[src*="swatch-"]) .property-list-body::before {
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    content: "";
    display: inline-block;
    height: 14px;
    width: 14px;
}

.property-enum:has(img[src*="swatch-"]) .property-list-body:nth-child(1)::before  { background: #0557C7 }
.property-enum:has(img[src*="swatch-"]) .property-list-body:nth-child(2)::before  { background: #1A9E78 }
.property-enum:has(img[src*="swatch-"]) .property-list-body:nth-child(3)::before  { background: #1778A6 }
.property-enum:has(img[src*="swatch-"]) .property-list-body:nth-child(4)::before  { background: #823DB5 }
.property-enum:has(img[src*="swatch-"]) .property-list-body:nth-child(5)::before  { background: #B82E6B }
.property-enum:has(img[src*="swatch-"]) .property-list-body:nth-child(6)::before  { background: #475473 }
.property-enum:has(img[src*="swatch-"]) .property-list-body:nth-child(7)::before  { background: #E67D21 }
.property-enum:has(img[src*="swatch-"]) .property-list-body:nth-child(8)::before  { background: #CC241F }
.property-enum:has(img[src*="swatch-"]) .property-list-body:nth-child(9)::before  { background: #738529 }
.property-enum:has(img[src*="swatch-"]) .property-list-body:nth-child(10)::before { background: #7D5438 }