@import url('tokens.css');

/* ============================================================================
   Logic page (ADR 0031 Template B — variables / actions / triggers / alarms +
   the Assets managers). Page-specific classes follow the .cn-* / .acct-* / .agent-*
   convention (global, not CSS isolation — the embedded host serves no scoped bundle,
   and the page renders rows via code-behind RenderFragment helpers too). Every themed
   value reads a token; bare px are the sanctioned structural-dimension exception.
   ============================================================================ */

/* ---- Tree pane divider + filter ----
   The column's masthead and footer are the scaffold's (ui-md-tree-header / ui-md-tree-footer,
   shared.css), and the New… command's popup is the shared menu primitive; what the pane owns
   between them is the rule under that masthead and the filter box. Process wears the divider too. */
.lg-tree-divider { height: 1px; background: var(--color-stroke); margin: var(--space-3) var(--space-2); }
.lg-tree-filter { padding: 0 var(--space-2) var(--space-3); }

/* ---- "Edited elsewhere" line on the detail bar ----
   A statement, not a warning: the node is fine, it is simply owned by another page, so the line
   takes the secondary voice the strip's own labels use and lets the button beside it carry the
   weight. It ellipsizes rather than pushing that button off a narrow column. */
.lg-elsewhere {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

/* Fixed global Dashboard connection types (Logic > Assets). The heading is the shared
   .lg-asset-library-* anatomy; only the type rows below it are this category's own. */
.lg-connection-type-list {
    display: grid;
    gap: var(--space-2);
}

.lg-connection-type-row {
    display: grid;
    grid-template-columns: minmax(9rem, .8fr) minmax(13rem, 1.35fr) minmax(11rem, 1fr) minmax(7rem, .55fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-stroke-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.lg-connection-type-identity {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.lg-connection-type-identity code {
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
}

.lg-connection-type-custom {
    width: fit-content;
    margin-top: var(--space-1);
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
}

.lg-connection-type-preview {
    width: 100%;
    min-width: 0;
    height: 44px;
    overflow: visible;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
}

.lg-connection-color-controls {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-2);
}

.lg-connection-color-controls input[type="color"] {
    width: 2.5rem;
    height: 2rem;
    padding: 2px;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.lg-connection-type-reset {
    white-space: nowrap;
    align-self: end;
}

@media (max-width: 1040px) {
    .lg-connection-type-row {
        grid-template-columns: minmax(9rem, .8fr) minmax(12rem, 1.2fr) minmax(10rem, 1fr);
    }

    .lg-connection-type-width,
    .lg-connection-type-reset {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .lg-connection-type-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .lg-connection-type-reset {
        align-self: flex-start;
    }
}

/* ---- Empty state ---- */
/* Empty state uses the shared .ui-empty-state. */

/* ---- Form-and-rail two-column layout ---- */
.lg-form-rail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.lg-form-col, .lg-rail-col { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 900px) { .lg-form-rail { grid-template-columns: 1fr; } }

/* ---- Generic panel (folder / point / asset managers) ----
   Every detail panel opens with the shared header (ui-panel-head*, shared.css); what follows is the
   panel's own content. */
.lg-panel { width: 100%; }

/* ---- Editor card internals ---- */
.lg-editor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.lg-browse-btn { padding: var(--space-1) var(--space-3); font-size: var(--font-size-small); }
.lg-editor-hint { margin-top: var(--space-2); }
.lg-hint { margin-top: var(--space-3); }
.lg-mt2 { margin-top: var(--space-2); }
.lg-mt3 { margin-top: var(--space-3); }
.lg-mt4 { margin-top: var(--space-4); }
.lg-mt5 { margin-top: var(--space-5); }
.lg-secondary { color: var(--color-text-secondary); }
.lg-accent-text { color: var(--color-accent-text); }

/* ---- Variable/alarm address echo (monospace accent address line) ---- */
.lg-address { font-size: var(--font-size-eyebrow); color: var(--color-accent-text); margin-top: var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Action/trigger location echo: muted, spaced and proportional, so it never reads as an
       address the operator could type into an expression ---- */
.lg-location { font-size: var(--font-size-eyebrow); color: var(--color-text-secondary); margin-top: var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Field grids (Kind / Output / Unit; the 4-up alarm behavior row) ---- */
.lg-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-3); }
.lg-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.lg-four-col { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.lg-check-row { margin: var(--space-4) 0 var(--space-2); }
.lg-write-row { display: flex; gap: var(--space-3); align-items: center; }
.lg-write-row .ui-input { flex: 1 1 auto; }

/* ---- VALUE rail: scalar readout + presentation previews ---- */
.lg-scalar { display: flex; align-items: baseline; gap: var(--space-3); }
.lg-scalar-value { font-size: var(--font-size-page-title); font-weight: var(--font-weight-semibold); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.lg-scalar-unit { color: var(--color-text-secondary); }
.lg-preview-image { max-height: 96px; object-fit: contain; }
.lg-color-preview { display: flex; align-items: center; gap: var(--space-4); }
.lg-color-swatch { width: 48px; height: 48px; border-radius: var(--radius-md); border: 1px solid var(--color-stroke); display: inline-block; }
.lg-color-hex { color: var(--color-text-secondary); }

/* ---- Validation message uses the shared .ui-note-caution ---- */

/* ---- Referenced points list ---- */
.lg-ref-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; }
.lg-ref-alias { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-ref-value { color: var(--color-text-secondary); flex: 0 0 auto; }

/* ---- Point details ---- */
.lg-point { display: flex; flex-direction: column; }
.lg-point-value-box { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-alt); margin-top: var(--space-2); }
.lg-point-value { font-size: var(--font-size-readout); font-weight: var(--font-weight-semibold); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }

/* ---- Alarm STATE rail ---- */
.lg-state-value { font-size: var(--font-size-readout); font-weight: var(--font-weight-semibold); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }

/* ---- Folder grid Ack button ---- */
.lg-ack-btn { padding: var(--space-1) var(--space-3); font-size: var(--font-size-small); }

/* ---- Unified asset library ----
   Browse mode deliberately gives the collection more room than the inspector. Editing is a
   separate mode, so a permanent form never competes with catalog scanning. */
.lg-asset-library-shell { min-width: 0; container-type: inline-size; }
.lg-asset-total { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.lg-asset-library-busy {
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
}
/* The gap belongs between the library and whatever the shell says above it (the busy line, the
   read-only note). With the header drawn in the card's pinned head there is often nothing above,
   and then the card's own gutter is already that gap: a second one would push the catalog down. */
.lg-asset-library-content { min-width: 0; padding-top: var(--space-5); }
.lg-asset-library-shell > .lg-asset-library-content:first-child { padding-top: 0; }
.lg-asset-library-empty { min-height: 180px; }

/* Parent overview: semantic category glyphs and counts make Assets a navigational level. */
.lg-assets-overview { min-width: 0; container-type: inline-size; }
.lg-assets-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
/* Opening the panel, the cards need no gap of their own: the card body already gives them one. */
.lg-assets-overview > .lg-assets-overview-grid:first-child { margin-top: 0; }
.lg-assets-overview-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    min-height: 92px;
    padding: var(--space-5);
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}
/* The shared hover wash, exactly as every other card that answers the pointer takes it. A jump to
   another surface TONE would read as the card changing what it is rather than as being pointed at. */
.lg-assets-overview-card:hover { border-color: var(--color-accent); background: var(--color-overlay-hover); }
.lg-assets-overview-card:focus-visible { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: var(--focus-ring-offset); }
.lg-assets-overview-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-accent-text); }
.lg-assets-overview-copy { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); }
.lg-assets-overview-title { font-weight: var(--font-weight-semibold); }
.lg-assets-overview-count { min-width: 3ch; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; text-align: right; }

/* Browsing a library is the shared .ui-collection layout (shared.css); what a library adds is the
   height it browses in. It fills the detail card and each of its columns scrolls on its own height,
   so the wheel over the catalog never drags the selected item's card off the screen with it. The
   card body stops being the one scroller and becomes the flex line the library stretches along; it
   is the columns' own overflow that lets that line shrink to the fold, which is why the narrow
   layout below — where the columns stack and scroll as one — only has to give that overflow back.
   Named through the shell so a list laid on another page's well goes on scrolling with that page. */
.ui-md-detail-body:has(.lg-asset-library-shell .ui-collection) { display: flex; flex-direction: column; }
/* No min-height here on purpose: the shell shrinks to the fold only because the columns below are
   scroll containers, which is what makes their minimum height nothing. Give that overflow back and
   the shell grows past the card again — which is exactly what the narrow layout wants. */
.lg-asset-library-shell:has(.ui-collection) { display: flex; flex: 1 1 auto; flex-direction: column; }
.lg-asset-library-shell:has(.ui-collection) > .lg-asset-library-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
/* The category identity, the busy line and the read-only note keep their height; only the library
   under them gives way to the fold. */
.lg-asset-library-shell:has(.ui-collection) > :not(.lg-asset-library-content) { flex: 0 0 auto; }

/* Two digits and a chevron: in the flowed filter row the size selector asks for no more room than
   that. */
.ui-asset-filters .ui-asset-filter-page-size { flex: 0 0 auto; min-width: 88px; }

/* The shared card grid (.ui-asset-* in shared.css) carries every library; a category adds
   nothing but its card width and the marks its own cards wear. */
.lg-icon-grid { --ui-asset-card-min: 132px; }
.lg-color-grid { --ui-asset-card-min: 144px; }
.lg-image-grid { --ui-asset-card-min: 176px; }
.lg-color-card-swatch { border: 1px solid var(--color-stroke); }
.lg-asset-role-badge, .symbol-source-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
    color: var(--color-accent-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-eyebrow);
}

.lg-asset-detail { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.lg-asset-detail-title { margin: 0; overflow-wrap: anywhere; }
.lg-asset-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lg-asset-preview-lg, .lg-icon-detail-preview, .lg-color-detail-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    overflow: hidden;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}
.lg-asset-preview-lg { aspect-ratio: 4 / 3; }
.lg-asset-preview-lg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lg-icon-detail-preview, .lg-color-detail-preview { flex-direction: column; gap: var(--space-3); }
.lg-asset-metadata { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; align-items: baseline; }
.lg-asset-metadata dt { color: var(--color-text-secondary); }
.lg-asset-metadata dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
/* An icon's search words stay discrete, so the operator can read one off and type it back in. */
.lg-icon-tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.lg-icon-tag {
    padding: 1px var(--space-2);
    border: 1px solid var(--color-stroke-subtle);
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    font-size: var(--font-size-eyebrow);
}
.lg-readonly-note { padding: var(--space-3); border-left: 2px solid var(--color-stroke); color: var(--color-text-secondary); font-size: var(--font-size-description); }

/* Create/edit mode is the shared .ui-collection-editor surface (shared.css): three libraries hand
   it the whole card and Symbols stands it in the catalog's column. What a library composes inside
   it is its own. */
.lg-asset-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
.lg-asset-editor-heading h3 { margin: 0 0 var(--space-2); }
.lg-asset-editor-fields { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.lg-asset-editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.lg-image-editor-grid, .lg-color-editor-grid, .lg-icon-editor-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); gap: var(--space-6); align-items: start; }
.lg-color-value-fields { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); gap: var(--space-3); }
.lg-color-picker { width: 72px; min-height: 34px; padding: var(--space-1); border: 1px solid var(--color-stroke); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; }
.lg-color-picker:focus-visible { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: var(--focus-ring-offset); }
.lg-color-editor-preview, .lg-icon-editor-preview { display: flex; align-items: center; justify-content: center; min-height: 280px; padding: var(--space-5); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-md); background: var(--color-surface-alt); }
.lg-color-editor-preview { flex-direction: column; gap: var(--space-4); }
.lg-color-preview-large { display: block; width: 112px; height: 112px; border: 1px solid var(--color-stroke); border-radius: var(--radius-lg); }

/* Native file input remains accessible while adopting the shared task-bar button surface. */
.lg-image-import { position: relative; display: inline-flex; overflow: hidden; cursor: pointer; }
.lg-image-import:focus-within { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: var(--focus-ring-offset); }
.lg-image-import-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.lg-image-import:has(.lg-image-import-input:disabled) { cursor: default; opacity: .55; }
.lg-image-import:has(.lg-image-import-input:disabled) .lg-image-import-input { cursor: default; }

/* Symbols: the established gallery is the collection, with one shared runtime inspector. Its five
   fields flow and wrap in the same row the three sibling libraries use; the gallery's own grid
   tracks belong to the Dashboard editor's rail, which is too narrow for fields to flow in. */
.ui-collection-list .symbol-gallery-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); }
.ui-collection-list .symbol-gallery-search { flex: 1 1 220px; }
.ui-collection-list .symbol-gallery-filters .ui-asset-filter-origin { min-width: 140px; }
.ui-collection-list .symbol-gallery-filters .ui-asset-filter-page-size { flex: 0 0 auto; min-width: 88px; }
.lg-symbol-slots-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
.lg-symbol-detail-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.lg-symbol-detail-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.lg-slot { margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.lg-slot-head { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); align-items: center; }
.lg-slot-grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.lg-slot-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.lg-slot-remove { flex: 0 0 auto; padding: var(--space-1) var(--space-3); }

/* The selected symbol is the workbench's focal instrument: one large, active surface followed by
   a compact I/O ledger, laid out down the shared inspector column above. Its sections span that
   column, so only their vertical rhythm is theirs to set. Gallery thumbnails remain the shared
   inert .symbol-preview component. */
.lg-symbol-inspector-head { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-stroke-subtle); }
.lg-symbol-inspector-identity { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.lg-symbol-taxonomy { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-description); }
.lg-symbol-taxonomy > span:not(:last-child)::after { content: "·"; margin-left: var(--space-2); color: var(--color-text-disabled); }
.lg-symbol-library { color: var(--color-accent-text); font-weight: var(--font-weight-semibold); }
.lg-symbol-description { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-description); line-height: 1.45; }
.lg-symbol-authoring-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-1); color: var(--color-text-secondary); font-family: var(--font-mono); font-size: var(--font-size-eyebrow); }
.lg-symbol-authoring-meta strong { margin-right: var(--space-1); color: var(--color-text); font-weight: var(--font-weight-medium); }
.lg-symbol-provenance { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-eyebrow); }
.lg-symbol-provenance > span { display: block; margin-top: var(--space-1); overflow-wrap: anywhere; }
.lg-symbol-provenance:not([open]) > span { display: none; }
.lg-symbol-inspector-head .lg-symbol-detail-actions { justify-content: flex-start; }
.lg-symbol-inspector-stage { position: relative; display: flex; align-items: center; justify-content: center; height: clamp(280px, 36vh, 390px); margin: var(--space-4) 0; overflow: hidden; border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-md); background-color: var(--color-surface-alt); background-image: radial-gradient(circle, var(--color-symbol-stage-grid) 1px, transparent 1px); background-size: 14px 14px; container-type: size; }
.lg-symbol-inspector-artwork { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; pointer-events: none; }
.lg-symbol-inspector-artwork > svg { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
/* Artwork that cannot be drawn stands in for the stage, so it keeps the stage's recessed frame
   and says its piece as the shared .ui-empty-state: an absent preview is an absence. */
.lg-symbol-inspector-blocker { min-height: 220px; margin: var(--space-4) 0; gap: var(--space-2); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-md); background: var(--color-surface-alt); }
.lg-symbol-inspector-blocker strong { color: var(--color-text); }
/* The sanitization note is the shared .ui-note-caution, only set flush with the column. */
.lg-symbol-inspector-warning { margin: 0 0 var(--space-4); }
.lg-symbol-inspector-warning summary { cursor: pointer; font-weight: var(--font-weight-medium); }
.lg-symbol-inspector-warning ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.lg-symbol-inspector-inputs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-stroke-subtle); }
.lg-symbol-inspector-inputs-head > div { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); }
.lg-symbol-inspector-inputs-head .ui-btn { flex: 0 0 auto; }
.lg-symbol-inspector-inputs { padding: 0 0 var(--space-2); }
.lg-symbol-inspector-input { padding: var(--space-4) 0; border-top: 1px solid var(--color-stroke-subtle); }
.lg-symbol-inspector-input.invalid { padding-left: var(--space-3); box-shadow: inset 2px 0 0 var(--color-caution); }
.lg-symbol-inspector-input-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.lg-symbol-inspector-input-head > span { flex: 0 0 auto; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: var(--font-size-eyebrow); }
.lg-symbol-inspector-input-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-description); font-variant-numeric: tabular-nums; }
.lg-symbol-inspector-input-meta code { min-width: 0; overflow: hidden; color: var(--color-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.lg-symbol-inspector-slot-error { margin-top: var(--space-3); color: var(--color-caution); font-size: var(--font-size-description); }
.lg-symbol-inspector-number { display: grid; grid-template-columns: minmax(112px, .42fr) minmax(140px, 1fr); gap: var(--space-3); align-items: end; }
.lg-symbol-inspector-number label { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); }
.lg-symbol-inspector-slider { min-height: 44px; justify-content: center; }
.lg-symbol-inspector-slider input[type="range"] { width: 100%; min-height: 44px; margin: 0; appearance: none; background: transparent; accent-color: var(--color-accent); cursor: pointer; }
.lg-symbol-inspector-slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--color-stroke); }
.lg-symbol-inspector-slider input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; appearance: none; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 1px var(--color-stroke); }
.lg-symbol-inspector-slider input[type="range"]:focus-visible { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: var(--focus-ring-offset); }
.lg-symbol-inspector-text { display: flex; flex-direction: column; gap: var(--space-1); }
.lg-symbol-inspector-color { display: grid; grid-template-columns: 76px minmax(120px, 1fr); gap: var(--space-3); align-items: end; }
.lg-symbol-inspector-color label { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); }
.lg-symbol-inspector-color input[type="color"] { width: 100%; height: 38px; padding: 3px; border: 1px solid var(--color-stroke); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.lg-symbol-inspector-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.lg-symbol-inspector-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-md) - 3px); }
.lg-symbol-presentation { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-md); background: var(--color-surface-alt); }
.lg-symbol-layout-grid { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(110px, .55fr)); gap: var(--space-3); }
.lg-symbol-anchors-heading { margin-top: var(--space-2); }
.lg-symbol-anchor-grid { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: var(--space-2); }
.lg-symbol-anchor-row { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(150px, 1.2fr); gap: var(--space-2); align-items: center; padding: var(--space-2); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-sm); background: var(--color-surface); }
.lg-symbol-anchor-row.enabled { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-stroke-subtle)); }
.lg-symbol-inspector-static { margin: 0 0 var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-alt); color: var(--color-text-secondary); text-align: center; }

@media (max-width: 760px) {
    .lg-slot-grid5 { grid-template-columns: 1fr 1fr; }
    .lg-symbol-inspector-number { grid-template-columns: 1fr; }
    .lg-symbol-inspector-inputs-head { align-items: stretch; flex-direction: column; }
    .lg-symbol-inspector-inputs-head .ui-btn { align-self: flex-start; }
    .lg-symbol-layout-grid { grid-template-columns: 1fr; }
    .lg-symbol-anchor-grid { grid-template-columns: 1fr; }
    .lg-symbol-anchor-row { grid-template-columns: 1fr; }
}

@container (max-width: 840px) {
    .lg-assets-overview-grid,
    .lg-image-editor-grid,
    .lg-color-editor-grid,
    .lg-icon-editor-grid { grid-template-columns: 1fr; }
    /* The shared layout stacks itself at this width (shared.css); what is left for the library is
       the height it was browsing in. Stacked, its two regions are one column, so the detail card
       takes its single scroll back. */
    .lg-asset-library-shell:has(.ui-collection) > .lg-asset-library-content { display: block; min-height: auto; }
}

@container (max-width: 520px) {
    .lg-asset-editor-heading,
    .lg-symbol-slots-heading { align-items: stretch; flex-direction: column; }
    .lg-asset-editor-heading > .ui-btn,
    .lg-symbol-slots-heading > .ui-btn { align-self: flex-start; }
    .lg-assets-overview-grid { grid-template-columns: 1fr; }
    .lg-assets-overview-card { grid-template-columns: auto minmax(0, 1fr) auto; }
    .lg-assets-overview-count { display: none; }
    .lg-color-value-fields,
    .lg-slot-head,
    .lg-slot-grid5,
    .lg-slot-grid2 { grid-template-columns: 1fr; }
    .lg-asset-metadata { grid-template-columns: 1fr; gap: var(--space-1); }
    .lg-asset-metadata dd { margin-bottom: var(--space-2); }
    /* Page buttons push to the edges rather than crowding the label in a narrow library pane. */
    .ui-asset-pagination { justify-content: space-between; gap: var(--space-2); }
}

/* ---- Browse… picker dialog ---- */
.lg-picker { max-height: 420px; overflow-y: auto; min-width: 360px; }
.lg-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; }
.lg-picker-sel { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- CodeMirror editor surface ---- */
.ui-codeeditor {
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    overflow: hidden;
}
.ui-codeeditor .cm-editor { background: transparent; }
.ui-codeeditor .cm-editor.cm-focused { outline: none; }