:root {
    --ink: #16212b;
    --ink-soft: #5d6877;
    --paper: #f3f6f9;
    --card: #ffffff;
    --line: #d4dde5;
    --line-strong: #9fb1c3;
    --brand: #205e7a;
    --brand-strong: #0f445c;
    --accent: #b3261e;
    --success: #23734d;
    --success-bg: #dff5e8;
    --inherit: #f1e8ff;
    --inherit-line: #b89ce9;
    --computed: #f8efc8;
    --computed-line: #d8bf57;
    --process: #f7f9fc;
    --muted-panel: #eef3f7;
    --shadow: 0 18px 40px rgba(22, 33, 43, 0.08);
    --radius: 18px;
    --status-empty: #c5ced8;
    --status-partial: #6f89c7;
    --status-computed: #2b8a5d;
    --status-error: #c1473d;
    --status-disabled: #9ba8b6;
    --layout-workspace-gap: 0.85rem;
    --layout-diagram-column-min: 420px;
    --layout-diagram-width: 650px;
    --rlt-data-font-family: "Times New Roman", "STIX Two Text", serif;
    --environment-accent: #238362;
    --environment-accent-hover: #1b6f54;
    --environment-text: #145d47;
    --environment-border: rgba(35, 131, 98, 0.42);
    --environment-bg: rgba(35, 131, 98, 0.08);
    --environment-bg-active: rgba(35, 131, 98, 0.16);
}

.rlt-schematic-export { position: relative; margin-left: auto; flex: 0 0 auto; }
.rlt-schematic-export > summary { list-style: none; cursor: pointer; }
.rlt-schematic-export > summary::-webkit-details-marker { display: none; }
.rlt-schematic-export[open] > summary .workspace-tool-chevron { transform: rotate(180deg); }
.rlt-schematic-export-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 252px; max-width: 75vw; padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 8px 24px rgba(22,33,43,.14); display: grid; gap: .45rem; }
.rlt-schematic-export-menu .diagram-export-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.rlt-schematic-export-menu .workspace-tool-button { width: 100%; justify-content: center; }
.rlt-schematic-export-menu small, [data-schematic-export-status] { font-size: .72rem; line-height: 1.4; color: var(--ink-soft); }
[data-schematic-export-status] { color: var(--brand); }
[data-schematic-export-status][hidden] { display: none; }

:root[data-rlt-table-font="sans"] {
    --rlt-data-font-family: "Segoe UI", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: "Segoe UI", Tahoma, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(32, 94, 122, 0.08), transparent 34%),
        linear-gradient(180deg, #f5f8fb 0%, #edf2f7 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
p,
dl,
dd {
    margin: 0;
}

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

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    padding: 0.6rem 0.78rem;
}

textarea {
    resize: vertical;
}

input[readonly] {
    cursor: default;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

label {
    display: grid;
    gap: 0.35rem;
}

label span,
.field-unit,
.muted,
.eyebrow {
    color: var(--ink-soft);
}

.eyebrow {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.button {
    appearance: none;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
    border-radius: 12px;
    padding: 0.62rem 0.95rem;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.button-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.button-primary:hover {
    background: var(--brand-strong);
}

.header-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
}

.header-save-button.is-project-saved {
    border-color: #9fb6c0;
    background: #e8f0f3;
    color: #31515f;
    box-shadow: none;
}

.header-save-button.is-project-saved:hover {
    background: #dce8ec;
}

.header-save-button.is-project-dirty {
    box-shadow: 0 0 0 2px rgba(32, 94, 122, 0.12);
}

.header-save-icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.55;
}

.button-danger {
    color: var(--accent);
    border-color: #d5a19c;
    background: #fff3f2;
}

.button-ghost {
    background: transparent;
}

.button-icon,
.button-tight {
    padding: 0.48rem 0.68rem;
    min-width: 2.4rem;
}

.button-icon-danger {
    color: var(--accent);
    border-color: #d5a19c;
    background: #fff3f2;
}

.app-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
}

.app-delete-button.is-icon-only {
    gap: 0;
    padding-inline: 0;
}

.app-delete-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.hidden {
    display: none !important;
}

.page-shell {
    min-height: 100vh;
    padding: 0.8rem;
    display: grid;
    gap: 1rem;
    align-content: start;
}

.site-header,
.section-heading,
.chain-toolbar,
.chain-meta,
.modal-header,
.modal-actions,
.weather-row,
.weather-action-row,
.version-row,
.guide-row,
.dashboard-project-row,
.header-cluster {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.site-header {
    flex-wrap: wrap;
}

.site-header > .header-cluster {
    min-width: 0;
    max-width: 100%;
    margin-inline-start: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.site-header > .header-cluster > * {
    min-width: 0;
    max-width: 100%;
}

.site-header > .header-cluster > .user-chip {
    overflow-wrap: anywhere;
}

.site-header > .header-cluster > form {
    margin: 0;
}

.brand-name {
    text-transform: none;
    letter-spacing: normal;
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
    flex: 0 0 auto;
    /* Größer sichtbar, aber mit unveränderter Boxhöhe und Seitenverhältnis. */
    transform: scale(1.1);
    transform-origin: left center;
}

.site-header {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.2rem;
}

.user-chip {
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: var(--muted-panel);
    color: var(--ink-soft);
    border: 1px solid var(--line);
}

.card,
.info-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.82rem 0.9rem;
}

.section-heading {
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.section-heading p {
    margin-top: 0.25rem;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2.4rem;
}

.login-brand h1 {
    font-size: clamp(2.6rem, 4.6vw, 4.4rem);
    line-height: 0.95;
}

.lede {
    max-width: 34rem;
    margin-top: 1rem;
    font-size: 1.06rem;
    color: var(--ink-soft);
}

.meta-stack {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.meta-stack div {
    display: flex;
    gap: 0.55rem;
}

.auth-panel {
    display: grid;
    gap: 1rem;
}

.auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.auth-card {
    display: grid;
    gap: 1rem;
}

.flash {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 0.8rem 0.95rem;
}

.workspace-flash {
    margin-top: 0.85rem;
}

.flash-success {
    border-color: #a1cbae;
    color: var(--success);
}

.flash-error {
    border-color: #d5a19c;
    color: var(--accent);
}

.flash-warning {
    border-color: #d5b276;
    background: #fff8e8;
    color: #7a5100;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 1rem;
}

.dashboard-project-list,
.stack-list,
.dashboard-info-stack {
    display: grid;
    gap: 0.75rem;
}

.dashboard-project-card,
.weather-item,
.guide-item,
.version-item {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfdff;
    padding: 0.85rem;
}

.weather-layer-item {
    position: relative;
    padding-top: 1rem;
}

.weather-layer-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0.85rem;
    right: 0.85rem;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--dataset-color, var(--brand));
}

.weather-detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.weather-detail-actions > div {
    display: grid;
    gap: 0.08rem;
}

.weather-detail-actions small {
    color: var(--ink-soft);
    font-size: 0.66rem;
}

.weather-layer-edit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.weather-layer-edit-toggle svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.weather-layer-edit-toggle i {
    font-style: normal;
    transition: transform 140ms ease;
}

.weather-layer-edit-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
}

.weather-stat-groups {
    display: grid;
    gap: 0.5rem;
}

.weather-stat-group {
    display: grid;
    gap: 0.28rem;
    padding: 0.42rem;
    border: 1px solid #d9e2e6;
    border-radius: 9px;
    background: #f8fafb;
}

.weather-stat-group h4 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.72rem;
}

.weather-stat-group h4 span {
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 500;
}

.hx-weather-layers-panel .weather-layer-item {
    padding: 0.72rem;
}

.hx-weather-layers-panel .weather-row,
.hx-weather-layers-panel .weather-action-row {
    gap: 0.45rem;
}

.hx-weather-layers-panel .weather-action-row {
    margin-top: 0.42rem;
}

.hx-weather-layers-panel .chain-detail-row {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
}

.hx-weather-layers-panel .stat-chip-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-project-card.is-selected {
    border-color: var(--brand);
    background: #eff8fd;
}

.dashboard-project-card h3,
.weather-item h3,
.guide-item h3,
.version-item h3 {
    font-size: 1rem;
}

.dashboard-project-row {
    align-items: flex-start;
}

.dashboard-project-meta,
.meta-list {
    display: grid;
    gap: 0.38rem;
}

.meta-list {
    grid-template-columns: minmax(110px, auto) 1fr;
}

.meta-list dt {
    color: var(--ink-soft);
}

.dashboard-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    gap: 1rem;
}

.dashboard-preview-frame {
    min-height: 820px;
    overflow: hidden;
}

.diagram-frame {
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background: transparent;
    min-height: clamp(430px, calc(100vh - 435px), 620px);
    overflow: auto;
    display: grid;
    place-items: center;
    padding: 0;
    width: min(100%, var(--layout-diagram-width));
    justify-self: end;
}

.diagram-frame svg {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
    background: #fff;
}

.hx-diagram-render-status {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(54px, 84px) auto;
    align-items: center;
    gap: 0.55rem;
    max-width: min(22rem, calc(100% - 1.5rem));
    padding: 0.48rem 0.65rem;
    border: 1px solid rgba(27, 77, 97, 0.2);
    border-radius: 0.55rem;
    background: rgba(250, 253, 254, 0.94);
    color: var(--ink-soft);
    box-shadow: 0 5px 18px rgba(19, 50, 63, 0.13);
    font-size: 0.78rem;
    line-height: 1.25;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

.hx-diagram-render-status[hidden] {
    display: none;
}

.hx-diagram-render-status[data-state="error"] {
    border-color: rgba(164, 60, 47, 0.35);
    color: var(--danger, #9f3429);
}

#diagram-retry-button {
    grid-column: 1 / -1;
    justify-self: end;
    pointer-events: auto;
}

#diagram-retry-button[hidden] {
    display: none;
}

.hx-diagram-render-progress {
    position: relative;
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(40, 101, 124, 0.16);
}

.hx-diagram-render-progress > span {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 46%;
    border-radius: inherit;
    background: var(--brand, #1f7897);
    transform: translateX(-105%);
}

.hx-diagram-render-status[data-state="rendering"] .hx-diagram-render-progress > span {
    animation: hx-diagram-render-progress 1.05s ease-in-out infinite;
}

.hx-diagram-render-status[data-state="pending"] .hx-diagram-render-progress > span {
    background: var(--gold, #b4891e);
    transform: translateX(58%);
}

@keyframes hx-diagram-render-progress {
    0% { transform: translateX(-105%); }
    55% { transform: translateX(105%); }
    100% { transform: translateX(230%); }
}

@media (prefers-reduced-motion: reduce) {
    .hx-diagram-render-status[data-state="rendering"] .hx-diagram-render-progress > span {
        animation-duration: 2.2s;
    }
}

.hx-layout-edit-button[aria-pressed="true"] {
    background: #d8edf4;
    color: var(--brand-strong);
    box-shadow: inset 0 -2px 0 var(--brand);
}

.hx-layout-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem;
    margin: 0.42rem 0 0.3rem;
    padding: 0.42rem 0.5rem;
    border: 1px solid #94bccd;
    border-radius: 10px;
    background: linear-gradient(90deg, #eef8fb, #f8fbfc);
    box-shadow: 0 3px 10px rgba(28, 83, 106, 0.08);
}

.hx-layout-toolbar[hidden] {
    display: none;
}

.hx-layout-toolbar-hint {
    color: var(--ink-soft);
    font-size: 0.67rem;
}

.hx-layout-toolbar strong {
    min-width: 150px;
    margin-right: auto;
    color: var(--brand-strong);
    font-size: 0.72rem;
}

.hx-layout-toolbar .workspace-tool-button,
.hx-layout-toolbar .button {
    min-height: 1.8rem;
}

.hx-analysis-coupling-control {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}

.hx-analysis-coupling-control > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    box-sizing: border-box;
    max-width: 12rem;
    height: 34px;
    min-height: 34px;
    padding: 0.38rem 0.52rem;
    list-style: none;
    cursor: pointer;
}

.hx-analysis-coupling-control > summary::marker {
    content: "";
}

.hx-analysis-coupling-control > summary::-webkit-details-marker {
    display: none;
}

.hx-analysis-coupling-control > summary .workspace-tool-icon {
    flex: 0 0 auto;
}

.hx-analysis-coupling-control > summary [data-hx-coupling-label] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-analysis-coupling-control[open] > summary {
    border-color: #89a8b5;
    background: #edf4f7;
    color: var(--brand-strong);
}

.hx-analysis-coupling-control.is-active:is([data-mode="single"], [data-mode="compare"]) > summary {
    border-color: #a87808;
    background: linear-gradient(180deg, #f8df91, #ebc454);
    color: #4e3700;
    box-shadow: inset 0 0 0 1px rgba(111, 76, 0, 0.1), 0 2px 6px rgba(126, 88, 8, 0.14);
}

.hx-analysis-coupling-menu {
    position: absolute;
    z-index: 48;
    top: calc(100% + 0.28rem);
    right: 0;
    display: grid;
    gap: 0.16rem;
    width: max-content;
    min-width: 11.5rem;
    max-width: min(16rem, calc(100vw - 1.5rem));
    padding: 0.28rem;
    border: 1px solid #cbd9df;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(17, 39, 51, 0.18);
}

.hx-analysis-coupling-menu button {
    appearance: none;
    width: 100%;
    min-height: 1.8rem;
    padding: 0.3rem 0.44rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #354b56;
    font-size: 0.67rem;
    font-weight: 680;
    text-align: left;
    cursor: pointer;
}

.hx-analysis-coupling-menu button:hover,
.hx-analysis-coupling-menu button:focus-visible {
    border-color: #c3d2d9;
    background: #edf4f7;
    color: var(--brand-strong);
    outline: 0;
}

.hx-analysis-coupling-menu button[aria-checked="true"] {
    border-color: #9db7c2;
    background: #e7f0f3;
    color: var(--brand-strong);
    box-shadow: inset 3px 0 0 var(--brand);
}

.hx-analysis-coupling-control.is-active .hx-analysis-coupling-menu button[aria-checked="true"]:is([data-hx-coupling-mode="single"], [data-hx-coupling-mode="compare"]) {
    border-color: #d2b25d;
    background: #fff3c2;
    color: #5c4500;
    box-shadow: inset 3px 0 0 #c99408;
}

.hx-diagram-pane.is-layout-editing .diagram-frame {
    box-shadow: inset 0 0 0 2px rgba(32, 94, 122, 0.22);
}

.hx-diagram-pane.is-layout-editing #diagram-container [data-hx-layout-key] {
    cursor: move;
    outline: 1.5px dashed rgba(31, 111, 143, 0.7);
    outline-offset: 3px;
    pointer-events: bounding-box;
    transition: filter 0.12s ease, outline-color 0.12s ease;
}

.hx-diagram-pane.is-layout-editing #diagram-container [data-hx-guide-label-kind] {
    cursor: move;
    outline: 1.5px dashed rgba(31, 111, 143, 0.7);
    outline-offset: 3px;
    pointer-events: bounding-box;
    transition: filter 0.12s ease, outline-color 0.12s ease;
}

.hx-diagram-pane.is-layout-editing #diagram-container [data-hx-layout-key]:hover,
.hx-diagram-pane.is-layout-editing #diagram-container [data-hx-layout-key].is-hx-layout-selected,
.hx-diagram-pane.is-layout-editing #diagram-container [data-hx-guide-label-kind]:hover,
.hx-diagram-pane.is-layout-editing #diagram-container [data-hx-guide-label-kind].is-hx-guide-label-selected {
    outline: 2px solid #1f789b;
    filter: drop-shadow(0 2px 2px rgba(25, 80, 103, 0.2));
}

/* A label edit opened from one RLT entity is deliberately exclusive. The
   global layout layers and guide labels stay locked until “Fertig”. */
.hx-diagram-pane.is-layout-editing.is-rlt-label-layout #diagram-container [data-hx-layout-key],
.hx-diagram-pane.is-layout-editing.is-rlt-label-layout #diagram-container [data-hx-guide-label-kind] {
    cursor: default;
    outline: 0;
    filter: none;
    pointer-events: none;
}

/* Im gezielten RLT-Modus ist genau eine Beschriftung aktiv. Unsichtbare
   Rasterpfade dürfen deren Treffbereich nicht mehr überdecken. */
.hx-diagram-pane.is-layout-editing.is-rlt-label-layout #diagram-container svg * {
    pointer-events: none !important;
}

.hx-diagram-pane.is-layout-editing.is-rlt-label-layout #diagram-container [data-hx-rlt-label-target].is-hx-rlt-label-target,
.hx-diagram-pane.is-layout-editing.is-rlt-label-layout #diagram-container [data-hx-rlt-label-target].is-hx-rlt-label-target * {
    cursor: move;
    pointer-events: all !important;
    touch-action: none;
}

.hx-rlt-label-hitbox {
    fill: rgba(20, 122, 165, 0.035);
    stroke: #147aa5;
    stroke-width: 1.35;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

.hx-diagram-render-status[data-state="warning"] {
    border-color: rgba(180, 137, 30, 0.42);
    background: rgba(255, 250, 231, 0.96);
    color: #71560d;
}

.hx-diagram-render-status[data-state="warning"] .hx-diagram-render-progress > span {
    width: 100%;
    background: var(--gold, #b4891e);
    transform: none;
}

.hx-layout-selection {
    position: absolute;
    z-index: 12;
    min-width: 12px;
    min-height: 12px;
    border: 2px solid #147aa5;
    border-radius: 4px;
    background: rgba(39, 151, 194, 0.035);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82), 0 4px 14px rgba(17, 67, 89, 0.16);
    pointer-events: none;
}

.hx-layout-selection-surface {
    position: absolute;
    inset: 0;
    cursor: move;
    pointer-events: auto;
    touch-action: none;
}

.hx-layout-selection-label {
    position: absolute;
    left: -2px;
    bottom: calc(100% + 4px);
    max-width: 180px;
    overflow: hidden;
    padding: 0.18rem 0.36rem;
    border-radius: 5px;
    background: #126a91;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.hx-layout-scale-handle {
    appearance: none;
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 4px;
    background: #126a91;
    box-shadow: 0 1px 5px rgba(17, 67, 89, 0.34);
    cursor: nwse-resize;
    pointer-events: auto;
    touch-action: none;
}

.hx-layout-scale-handle:focus-visible {
    outline: 2px solid rgba(18, 106, 145, 0.45);
    outline-offset: 2px;
}

body.is-resizing-hx-layout {
    cursor: move;
    user-select: none;
}

.diagram-card .diagram-frame {
    width: 100%;
    justify-self: stretch;
}

.diagram-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem 0.75rem;
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(193, 207, 218, 0.62);
}

.diagram-export-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
}

.diagram-preview-empty {
    min-height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--ink-soft);
    background: linear-gradient(180deg, #ffffff 0%, #f6fafc 100%);
    border-radius: 12px;
}

.header-project-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, auto));
    gap: 0.9rem;
    align-items: center;
    margin-left: auto;
}

.meta-strip-item {
    display: grid;
    gap: 0.22rem;
}

.meta-strip-item span {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.meta-strip-item strong {
    font-size: 1rem;
}

.project-inline-editable {
    min-width: 2.5rem;
    border-radius: 7px;
    cursor: text;
    transition: background 120ms ease, box-shadow 120ms ease;
}

.project-inline-editable:hover,
.project-inline-editable:focus-visible {
    background: #edf4f7;
    box-shadow: 0 0 0 3px #edf4f7;
    outline: 0;
}

.project-inline-editable.is-editing {
    background: transparent;
    box-shadow: none;
}

.project-inline-input {
    width: min(24rem, 100%);
    min-width: 7rem;
    height: 1.9em;
    margin: -0.2em 0;
    padding: 0.08em 0.28em;
    border-radius: 6px;
    font: inherit;
    font-weight: inherit;
}

.app-projects-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    white-space: nowrap;
}

.app-projects-link .workspace-tool-icon {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 1.7;
}

.project-info-panel {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 0.55rem;
    margin-top: -0.65rem;
    padding: 0.75rem 0.9rem 0.85rem;
    border: 1px solid #c8d7df;
    border-top: 3px solid var(--brand);
    border-radius: 0 0 14px 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 28px rgba(22, 33, 43, 0.09);
    transform-origin: top center;
}

.project-info-panel.is-open {
    animation: project-info-expand 170ms ease-out both;
}

.project-info-panel[hidden] {
    display: none;
}

.project-info-panel-header,
.project-info-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.project-info-panel-header h2 {
    margin-top: 0.08rem;
    font-size: 0.98rem;
}

.project-info-minimize {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: var(--brand-strong);
}

.project-info-minimize svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

@keyframes project-info-expand {
    from { opacity: 0; transform: translateY(-0.55rem) scaleY(0.96); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}

.project-info-form {
    display: grid;
    gap: 0.45rem;
}

.project-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(115px, 1fr));
    align-items: start;
    gap: 0.45rem;
}

.project-info-grid label {
    gap: 0.16rem;
    min-width: 0;
    font-size: 0.68rem;
}

.project-info-grid input,
.project-info-grid textarea {
    min-height: 2rem;
    padding: 0.34rem 0.48rem;
    border-radius: 7px;
    font-size: 0.76rem;
}

.project-info-notes {
    grid-column: 1 / -1;
}

.project-info-actions {
    justify-content: flex-end;
}

.app-process-status {
    position: fixed;
    top: 6rem;
    left: 50%;
    z-index: 120;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, auto);
    align-items: center;
    gap: 0.55rem;
    width: min(30rem, calc(100vw - 2rem));
    padding: 0.52rem 0.68rem;
    border: 1px solid #9fb9c5;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 30px rgba(19, 48, 61, 0.2);
    color: #29434f;
    font-size: 0.72rem;
    transform: translateX(-50%);
}

.app-process-status[hidden] {
    display: none;
}

.app-process-progress {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #dbe5e9;
}

.app-process-progress > span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
    animation: app-process-progress 1.15s ease-in-out infinite alternate;
}

@keyframes app-process-progress {
    from { transform: translateX(-12%); }
    to { transform: translateX(150%); }
}

.info-chip {
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--muted-panel);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.86rem;
}

.workspace-layout {
    --workspace-hx-min-width: 360px;
    display: grid;
    grid-template-columns: minmax(0, var(--workspace-editor-percent, 68%)) 14px minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.workspace-module-nav {
    position: sticky;
    top: 0.55rem;
    z-index: 38;
    display: grid;
    grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1.66fr);
    gap: 0.9rem;
    align-items: stretch;
    padding: 0.62rem;
    border: 1px solid rgba(159, 177, 195, 0.82);
    border-radius: 16px;
    background: rgba(247, 250, 252, 0.94);
    box-shadow: 0 10px 30px rgba(22, 33, 43, 0.11);
    backdrop-filter: blur(14px);
}

.workspace-module-nav-intro {
    display: grid;
    align-content: center;
    gap: 0.12rem;
    padding: 0.42rem 0.62rem;
}

.workspace-module-nav-intro strong {
    font-size: 0.92rem;
}

.workspace-module-nav .workspace-stack-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
}

.workspace-module-nav .workspace-stack-tabs-top {
    padding: 0;
    border: 0;
}

.workspace-module-tab {
    appearance: none;
    min-width: 0;
    min-height: 64px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
    padding: 0.62rem 0.78rem;
    border: 1px solid #cbd6df;
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.workspace-module-label-compact {
    display: none;
}

.workspace-module-tab:hover {
    border-color: #7c9cad;
    background: #f7fbfd;
    transform: translateY(-1px);
}

.workspace-module-tab:focus-visible {
    outline: 3px solid rgba(32, 94, 122, 0.2);
    outline-offset: 2px;
}

.workspace-module-tab.is-active {
    border-color: var(--brand);
    background: linear-gradient(135deg, #edf7fb, #ffffff 74%);
    box-shadow: inset 0 -4px 0 var(--brand), 0 5px 14px rgba(32, 94, 122, 0.12);
}

.workspace-module-tab > span:last-child {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.workspace-module-tab strong {
    font-size: 0.88rem;
    line-height: 1.15;
}

.workspace-module-tab small {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.68rem;
    line-height: 1.22;
    text-overflow: ellipsis;
}

.workspace-module-tab-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #edf2f5;
    color: #4e6979;
}

.workspace-module-tab.is-active .workspace-module-tab-icon {
    background: var(--brand);
    color: #ffffff;
}

.workspace-module-tab-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workspace-module-tab-icon .workspace-rlt-fan-icon {
    stroke-width: 1.35;
}

.workspace-module-tab-core {
    border-color: #b8cbd5;
    background: linear-gradient(145deg, #ffffff, #f7fafc);
}

.workspace-module-tab-core .workspace-module-tab-icon {
    background: #e4eff4;
    color: var(--brand-strong);
}

.workspace-rlt-fan-icon .workspace-rlt-fan-blade,
.workspace-rlt-fan-icon .workspace-rlt-fan-hub {
    fill: currentColor;
    stroke: none;
}

.workspace-layout > .editor-card {
    margin-right: calc(var(--layout-workspace-gap) / 2);
    min-width: 0;
}

.workspace-layout > .diagram-card {
    margin-left: calc(var(--layout-workspace-gap) / 2);
    min-width: 0;
}

.workspace-layout > .hx-diagram-pane {
    position: sticky;
    top: 5.75rem;
    align-self: start;
    max-height: calc(100vh - 6.35rem);
    overflow: auto;
    scrollbar-gutter: stable;
}

.workspace-layout.is-hx-pane-collapsed {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-layout.is-hx-pane-collapsed > .editor-card {
    margin-right: 0;
}

.workspace-layout.is-hx-pane-collapsed > .workspace-resizer,
.workspace-layout.is-hx-pane-collapsed > .hx-diagram-pane {
    display: none;
}

/* Ruhige, konsistente Werkzeugleiste für Wetterlabor und h,x-Diagramm. */
.workspace-tool-button {
    appearance: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-height: 34px;
    padding: 0.38rem 0.55rem;
    border: 0;
    border-radius: 8px;
    background: #eef3f6;
    color: #274b5e;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.workspace-tool-button:hover {
    background: #dfeaf0;
    color: var(--brand-strong);
}

.workspace-tool-button:focus-visible {
    outline: 2px solid rgba(32, 94, 122, 0.34);
    outline-offset: 2px;
}

.workspace-tool-button[aria-expanded="true"]:not(.hx-pane-collapse-button) {
    background: #dceaf0;
    color: var(--brand-strong);
    box-shadow: inset 0 -2px 0 var(--brand);
}

.workspace-tool-button.is-icon-only {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
}

.workspace-tool-button.is-format {
    min-width: 58px;
    background: transparent;
}

.workspace-tool-button.is-format:hover,
.workspace-tool-button.is-format:focus-visible {
    background: #e8f0f4;
}

.workspace-tool-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workspace-tool-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.16s ease;
}

.workspace-tool-button.is-disclosure[aria-expanded="true"] .workspace-tool-chevron {
    transform: rotate(180deg);
}

.workspace-tool-label {
    color: inherit;
}

.workspace-tool-label.is-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.weather-navigation-toggle-icon .is-expand {
    display: none;
}

#toggle-weather-navigation-button.is-collapsed .weather-navigation-toggle-icon .is-collapse {
    display: none;
}

#toggle-weather-navigation-button.is-collapsed .weather-navigation-toggle-icon .is-expand {
    display: initial;
}

.hx-pane-collapse-button svg,
.hx-pane-restore-tab svg {
    width: 22px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hx-pane-collapse-button .hx-diagram-toggle-axis,
.hx-pane-restore-tab .hx-diagram-toggle-axis {
    stroke-width: 1.55;
}

.hx-pane-collapse-button .hx-diagram-toggle-saturation,
.hx-pane-restore-tab .hx-diagram-toggle-saturation {
    stroke-width: 1.7;
}

.hx-diagram-toggle-direction {
    stroke-width: 1.65;
}

.workspace-tool-button.hx-pane-restore-tab {
    position: fixed;
    z-index: 48;
    top: 50%;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    height: 64px;
    min-height: 64px;
    padding: 0;
    border: 0;
    border-radius: 10px 0 0 10px;
    background: var(--brand-strong);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 68, 92, 0.28);
    transform: translateY(-50%);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
}

.hx-pane-restore-tab:hover,
.hx-pane-restore-tab:focus-visible {
    background: #0b3346;
    box-shadow: 0 10px 28px rgba(15, 68, 92, 0.34);
}

.workspace-resizer {
    position: sticky;
    top: 0.8rem;
    align-self: stretch;
    min-height: 240px;
    cursor: col-resize;
    touch-action: none;
    border-radius: 999px;
    outline: none;
    display: grid;
    place-items: center;
    z-index: 8;
}

.workspace-resizer::before {
    content: "";
    width: 4px;
    height: 100%;
    min-height: 180px;
    border-radius: inherit;
    background: #c8d4de;
    transition: width 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.workspace-resizer span {
    position: absolute;
    width: 10px;
    height: 54px;
    border: 1px solid #aebdca;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(22, 33, 43, 0.12);
}

.workspace-resizer span::before {
    content: "⋮";
    display: grid;
    place-items: center;
    height: 100%;
    color: #688094;
    font-size: 1rem;
    line-height: 1;
}

.workspace-resizer:hover::before,
.workspace-resizer:focus-visible::before,
.workspace-resizer.is-dragging::before {
    width: 6px;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(32, 94, 122, 0.12);
}

.workspace-resizer:focus-visible span {
    border-color: var(--brand);
}

body.is-resizing-workspace {
    cursor: col-resize;
    user-select: none;
}

.workspace-secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0.75rem;
    align-items: start;
}

.workspace-utility-card {
    padding: 0.85rem;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(22, 33, 43, 0.055);
}

.workspace-utility-card .section-heading {
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}

.workspace-utility-card .section-heading h2 {
    font-size: 1rem;
}

.workspace-utility-card .section-heading p {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.workspace-utility-card .stack-list {
    gap: 0.55rem;
}

.legend-row {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.76rem;
}

.legend-manual {
    background: var(--success-bg);
    border-color: #9ec7af;
}

.legend-inherited {
    background: var(--inherit);
    border-color: var(--inherit-line);
}

.legend-computed {
    background: var(--computed);
    border-color: var(--computed-line);
}

.legend-corrected {
    background: #fff1ef;
    border-color: #e3a299;
    color: var(--accent);
}

.chain-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    width: 100%;
    margin-bottom: 0.65rem;
}

.chain-toolbar-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
    gap: 0.48rem;
    align-items: stretch;
    width: 100%;
}

.chain-toolbar-side {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(130px, 0.55fr) minmax(150px, 0.65fr) minmax(260px, 1fr);
    gap: 0.55rem;
    align-items: end;
    width: 100%;
}

.chain-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-content: start;
    min-width: 0;
}

.chain-tab {
    padding-inline: 0.9rem;
    background: #f6f8fb;
}

.chain-tab.is-active {
    background: #c9e5ff;
    border-color: #287dcc;
    color: #124d80;
    box-shadow: inset 4px 0 0 #287dcc;
}

.chain-tab.is-active .chain-tab-copy small {
    color: inherit;
}

.weather-lab-empty-design {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .75rem;
}

.rlt-style-confirm-swatches:empty { display: none; }

.inline-color-suggestion {
    position: fixed;
    inset: auto;
    z-index: 100000;
    box-sizing: border-box;
    width: min(280px, calc(100vw - 16px));
    margin: 0;
    padding: .55rem .65rem;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 5px 18px #0003;
    font: 400 .78rem/1.4 var(--font-ui, system-ui, sans-serif);
    overflow: visible;
}
.inline-color-suggestion::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--card);
    border: solid var(--line-strong);
    border-width: 0 0 1px 1px;
    left: -5px;
    top: calc(50% - 5px);
    transform: rotate(45deg);
}
.inline-color-suggestion[data-side="left"]::before { left: auto; right: -5px; transform: rotate(225deg); }
.inline-color-suggestion[data-side="below"]::before { left: 20px; top: -5px; transform: rotate(135deg); }
.inline-color-suggestion p { display: flex; gap: .45rem; align-items: flex-start; margin: 0; }
.inline-color-suggestion i { flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; border: 1px solid #0003; }
.inline-color-suggestion > div { display: flex; justify-content: flex-end; gap: .35rem; margin-top: .4rem; }
.inline-color-suggestion .button { min-height: 27px; padding: .15rem .6rem; font-size: .74rem; }

.chain-name-label {
    min-width: 0;
}

.chain-inline-input {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.chain-inline-input span,
.chain-name-label span {
    font-size: 0.74rem;
    color: var(--ink-soft);
}

.chain-toggle-checkbox {
    align-self: center;
    margin: 0;
    min-width: 0;
}

.process-schematic-panel {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
    padding: 0.65rem 0.75rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfdff;
}

.coupling-panel {
    margin: 0.65rem 0 0.85rem;
    padding: 0.68rem 0.74rem;
    border: 1px solid #d7e0e6;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdfe 0%, #f5f9fb 100%);
}

.coupling-panel-head,
.coupling-card-head,
.coupling-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.coupling-panel-head h3,
.coupling-card h4 {
    margin: 0;
}

.coupling-panel-head p {
    margin: 0.18rem 0 0;
    color: #60717d;
    font-size: 0.78rem;
}

.coupling-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    align-items: start;
    gap: 0.55rem;
    margin-top: 0.58rem;
}

.coupling-panel.is-collapsed .coupling-list,
.coupling-panel.is-collapsed .coupling-panel-description {
    display: none;
}

.coupling-panel-toggle {
    flex: 0 0 auto;
}

.coupling-card {
    min-width: 0;
    padding: 0;
    border: 1px solid #cfdbe2;
    border-left: 3px solid #5c7c8a;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.coupling-card.is-room {
    border-left-color: #2a8f68;
}

.coupling-card.is-environment {
    border-left-color: #176b51;
    background: #fbfefc;
}

.coupling-card.is-environment.is-weather-coupled {
    border-left-color: #0f766e;
    box-shadow: inset 3px 0 0 rgba(15, 118, 110, 0.16);
}

.coupling-weather-binding {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.48rem 0.55rem;
    border: 1px solid #c9d8dc;
    border-radius: 9px;
    background: #f7fafb;
    color: #49616a;
}

.coupling-weather-binding.is-active {
    border-color: #75bcb5;
    background: #e9f7f5;
    color: #0c5e58;
}

.coupling-environment-assignment {
    display: grid;
    gap: 0.48rem;
    padding: 0.52rem;
    border: 1px solid #c9d8dc;
    border-radius: 9px;
    background: #f7fafb;
    color: #49616a;
}

.coupling-environment-assignment.is-coupled {
    border-color: #75bcb5;
    background: #e9f7f5;
    color: #0c5e58;
}

.coupling-environment-assignment > header {
    display: flex;
    align-items: center;
    gap: 0.48rem;
}

.coupling-environment-assignment > header > span:last-child {
    display: grid;
    gap: 0.02rem;
}

.coupling-environment-assignment > header small {
    color: #60747d;
    font-size: 0.68rem;
}

.coupling-environment-assignment.is-coupled > header small {
    padding: 0.12rem 0.34rem;
    border-radius: 999px;
    background: #176b51;
    color: #fff;
    font-weight: 750;
}

.coupling-environment-assignment-fields {
    display: grid;
    grid-template-columns: minmax(190px, 1.4fr) minmax(120px, 0.55fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 0.42rem;
}

.coupling-environment-assignment-fields > label {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    font-size: 0.7rem;
}

.coupling-environment-assignment-fields select {
    width: 100%;
    min-width: 0;
    height: 2rem;
    padding: 0.3rem 0.45rem;
    border-radius: 8px;
    font-size: 0.76rem;
}

.coupling-environment-assignment-actions {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
}

.coupling-environment-assignment-actions .button:first-child:not(:disabled) {
    border-color: #176b51;
    background: #176b51;
    color: #fff;
}

.coupling-weather-route-list {
    display: grid;
    gap: 0.3rem;
}

.coupling-environment-assignment > p {
    margin: 0;
    color: #60747d;
    font-size: 0.68rem;
    line-height: 1.35;
}

.coupling-weather-binding-icon {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 8px;
    background: rgba(15, 118, 110, 0.1);
    font-size: 1rem;
}

.coupling-weather-binding > div {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.coupling-weather-binding > div span {
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupling-weather-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.28rem;
    padding-top: 0.28rem;
    border-top: 1px solid rgba(73, 97, 106, 0.18);
}

.coupling-weather-route > span {
    display: grid;
    gap: 0.02rem;
    min-width: 0;
}

.coupling-weather-route small {
    color: #6b7f87;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.coupling-weather-route strong {
    overflow: hidden;
    color: #314b55;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupling-weather-route > i {
    color: #719099;
    font-style: normal;
}

.coupling-weather-route > em {
    padding: 0.12rem 0.34rem;
    border-radius: 999px;
    background: #e5ecef;
    color: #647780;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
}

.coupling-weather-route.is-active > em {
    background: #176b51;
    color: #fff;
}

.coupling-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.48rem;
}

.coupling-card-grid label {
    display: grid;
    gap: 4px;
    color: #52636f;
    font-size: 0.78rem;
}

.coupling-card-grid select,
.coupling-card-grid input,
.coupling-load-grid select,
.coupling-load-grid input,
.coupling-style-grid select,
.coupling-style-grid input {
    min-width: 0;
    height: 2rem;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
}

.coupling-card-head {
    min-height: 3.25rem;
    gap: 0.35rem;
    padding: 0.28rem 0.38rem 0.28rem 0.3rem;
}

.coupling-card-toggle {
    appearance: none;
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1.85rem minmax(100px, auto) auto auto minmax(0, 1fr) 1rem;
    gap: 0.42rem;
    align-items: center;
    padding: 0.18rem 0.25rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.coupling-card-toggle > .coupling-kind-icon {
    grid-column: 1;
}

.coupling-card-toggle > .coupling-card-title {
    grid-column: 2;
}

.coupling-card-toggle > .coupling-card-hx-status {
    grid-column: 3;
}

.coupling-card-toggle > .status-badge {
    grid-column: 4;
}

.coupling-card-toggle > .coupling-card-glance {
    grid-column: 5;
}

.coupling-card-toggle > .coupling-chevron {
    grid-column: 6;
}

.coupling-kind-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: #e7f5ee;
    color: #287556;
    font-weight: 800;
}

.coupling-card.is-environment .coupling-kind-icon {
    background: #dff2e9;
    color: #176b51;
}

.coupling-card-title {
    display: grid;
    min-width: 0;
}

.coupling-card-title small {
    color: var(--ink-soft);
    font-size: 0.62rem;
    line-height: 1.15;
}

.coupling-card-title strong {
    overflow: hidden;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupling-card-head .status-badge {
    min-height: 1.45rem;
    padding: 0.12rem 0.32rem;
    font-size: 0.62rem;
}

.coupling-card-glance {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    overflow: hidden;
}

.coupling-card-glance .inline-summary-chip {
    flex: 0 1 auto;
    grid-template-columns: auto auto;
    gap: 0.25rem;
    padding: 0.18rem 0.32rem;
    white-space: nowrap;
}

.coupling-card-glance .inline-summary-chip strong,
.coupling-card-glance .inline-summary-chip span {
    font-size: 0.64rem;
}

.coupling-glance-status {
    color: var(--ink-soft);
    font-size: 0.68rem;
}

.coupling-chevron {
    color: var(--ink-soft);
    text-align: center;
}

.coupling-card-actions {
    flex: 0 0 auto;
    gap: 0.32rem;
}

.coupling-card-actions .inline-checkbox {
    gap: 0.26rem;
    font-size: 0.72rem;
}

.coupling-card-actions .button {
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
}

.coupling-card-body {
    display: grid;
    gap: 0.58rem;
    padding: 0.58rem 0.66rem 0.66rem;
    border-top: 1px solid #e2eaf0;
    background: #fbfdfe;
}

.coupling-card-body[hidden] {
    display: none;
}

.coupling-card-grid-meta {
    grid-template-columns: minmax(150px, 1fr) minmax(145px, 0.8fr) minmax(145px, 0.7fr);
}

.coupling-state-selection {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
}

.coupling-load-grid,
.coupling-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0.48rem;
    padding: 0.52rem;
    border: 1px solid #dce6ed;
    border-radius: 9px;
    background: #ffffff;
}

.coupling-load-grid label,
.coupling-style-grid label {
    gap: 0.2rem;
    color: #52636f;
    font-size: 0.74rem;
}

.coupling-diagram-config {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.coupling-diagram-toggle {
    min-height: 1.8rem;
    padding: 0.22rem 0.42rem;
    border: 1px solid #d7e3eb;
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.75rem;
}

.coupling-style-details {
    flex: 1 1 240px;
    min-width: 0;
    border: 1px solid #d7e3eb;
    border-radius: 8px;
    background: #ffffff;
}

.coupling-style-details summary {
    padding: 0.35rem 0.52rem;
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.coupling-style-details .coupling-style-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 0.3rem 0.38rem;
    padding: 0.4rem;
    border: 0;
    border-top: 1px solid #e3eaf0;
    border-radius: 0;
}

.coupling-style-grid .rlt-compact-style-field {
    display: grid;
    gap: 0.14rem;
    font-size: 0.66rem;
}

.coupling-style-grid .rlt-compact-slider-pair input[type="range"] {
    height: 4px;
    min-height: 4px;
    padding: 0;
}

.coupling-style-grid .rlt-compact-slider-pair input[type="number"],
.coupling-style-grid .rlt-compact-color-field input[type="color"] {
    height: 28px;
    min-height: 28px;
    padding-block: 0.14rem;
}

.coupling-result-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.coupling-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.coupling-target-state {
    display: grid;
    gap: 0.34rem;
    padding: 0.48rem 0.55rem;
    border-left: 3px solid #2a8f68;
    border-radius: 7px;
    background: #eef8f3;
}

.coupling-target-state > strong {
    font-size: 0.75rem;
}

.coupling-target-state-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.coupling-target-state-head strong {
    font-size: 0.75rem;
}

.coupling-target-state-head span,
.coupling-target-comparison {
    color: #3f6b57;
    font-size: 0.7rem;
}

.coupling-target-comparison.is-deviation {
    color: #94630e;
}

.coupling-warnings {
    display: grid;
    gap: 0.25rem;
    color: #845b12;
    font-size: 0.74rem;
}

.coupling-empty {
    padding: 10px 12px;
    border: 1px dashed #c9d5dc;
    border-radius: 8px;
    color: #647681;
    background: rgba(255, 255, 255, 0.65);
}

@media (max-width: 900px) {
    .coupling-panel-head,
    .coupling-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .coupling-card-grid,
    .coupling-card-grid-meta,
    .coupling-state-selection {
        grid-template-columns: 1fr;
    }

    .coupling-card-toggle {
        grid-template-columns: 1.85rem minmax(90px, 1fr) auto 1rem;
    }

    .coupling-card-glance {
        display: none;
    }
}

.process-schematic-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.process-schematic-head .header-cluster {
    flex: 0 0 auto;
}

.process-schematic-head h3 {
    font-size: 1.02rem;
}

.process-schematic-head p {
    margin-top: 0.25rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.process-schematic-body {
    display: grid;
    gap: 0.55rem;
}

.process-schematic-panel.is-collapsed .process-schematic-body {
    display: none;
}

.process-schematic-head .button {
    min-width: 2.55rem;
    min-height: 2.38rem;
    padding: 0.48rem 0.7rem;
    font-size: 1.02rem;
}

.process-schematic-toggle {
    min-width: 2.55rem;
}

.process-schematic-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.flow-palette {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    position: relative;
}

.flow-palette-caption {
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.flow-palette-item {
    appearance: none;
    border: 1px dashed #9eb4c3;
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    padding: 0.55rem 0.8rem;
    font: inherit;
    font-weight: 600;
    cursor: grab;
}

.flow-palette-item-state {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.flow-palette-item-process {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.flow-palette-item.is-selected {
    border-color: #1f769f;
    border-style: solid;
    background: #e3f3fa;
    color: #174f6d;
    box-shadow: 0 0 0 3px rgba(31, 118, 159, 0.18);
}

.flow-palette-selection-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 32px;
    padding: 0.35rem 0.58rem;
    border: 1px solid #5f9eba;
    border-radius: 999px;
    background: #e8f5fa;
    color: #174f6d;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.flow-palette-selection-status:hover,
.flow-palette-selection-status:focus-visible {
    border-color: #276f92;
    background: #d9eef7;
    outline: none;
}

.process-schematic-frame.is-flow-palette-targeting .react-flow__node {
    cursor: crosshair;
}

.flow-palette-process-symbol {
    width: 32px;
    height: 40px;
    flex: 0 0 auto;
}

.flow-palette-process-symbol rect,
.flow-palette-process-symbol line,
.flow-palette-process-symbol path,
.flow-palette-process-symbol circle,
.flow-palette-process-symbol polygon {
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.flow-palette-process-symbol .symbol-fill {
    fill: #000000;
    stroke: none;
}

.flow-palette-browser-toggle {
    display: inline-flex;
    align-items: center;
}

.symbol-browser {
    position: absolute;
    z-index: 20;
    top: auto;
    bottom: calc(100% + 0.45rem);
    left: 0;
    width: min(780px, calc(100vw - 3rem));
    max-height: min(420px, 42vh);
    overflow: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.7rem;
    border: 1px solid #c9d7e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(35, 50, 70, 0.16);
}

.symbol-browser.hidden {
    display: none;
}

.symbol-browser-group {
    min-width: 0;
    display: grid;
    gap: 0.45rem;
    padding: 0.58rem;
    border: 1px solid #cbd8e1;
    border-radius: 9px;
    background: #f9fbfc;
}

.symbol-browser-group + .symbol-browser-group {
    padding-top: 0.58rem;
}

.symbol-browser-group.is-thermal {
    border-color: #9fc2d5;
    background: #f2f8fb;
    box-shadow: inset 3px 0 0 #27779f;
}

.symbol-browser-group.is-visual {
    border-color: #d5dce1;
    background: #fafbfc;
    box-shadow: inset 3px 0 0 #77858f;
}

.symbol-browser-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.symbol-browser-group-head h4 {
    margin: 0;
    color: #28465c;
    font-size: 0.86rem;
    font-weight: 750;
}

.symbol-browser-status {
    flex: 0 0 auto;
    padding: 0.16rem 0.42rem;
    border: 1px solid #bdd7c9;
    border-radius: 999px;
    background: #f1faf5;
    color: #2f6e50;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
}

.symbol-browser-status.is-extension {
    border-color: #d9c9aa;
    background: #fff9ed;
    color: #7a5b23;
}

.symbol-browser-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.45rem;
}

.symbol-browser-item {
    min-height: 3.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    border-style: solid;
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
}

.symbol-browser-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .symbol-browser-group-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }

    .symbol-browser-group-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Wissenschaftliches Jahresprofil mit eigenständigem, gemeinsam skaliertem Seitendiagramm. */
.weather-lab-annual-chart-layout {
    display: grid;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.weather-lab-annual-chart-layout > .weather-lab-svg {
    display: block;
    width: 100%;
    height: var(--weather-chart-height, 450px);
    min-width: 0;
}

.weather-lab-histogram-svg,
.weather-lab-duration-svg {
    border-left: 0;
    background: #fff;
}

.weather-lab-annual-chart-layout.is-stacked {
    gap: 0.42rem;
}

.weather-lab-annual-chart-layout.is-stacked > .weather-lab-svg {
    border: 0;
}

.weather-lab-duration-title,
.weather-duration-axis-label {
    fill: #111;
    font-family: var(--weather-chart-font-family, "Times New Roman", serif);
    font-size: var(--weather-chart-axis-title-font-size, var(--weather-chart-title-font-size, 12px));
    font-weight: 400;
}

.weather-duration-chart {
    fill: #000;
    font-family: var(--weather-chart-font-family, "Times New Roman", "STIX Two Text", serif);
    font-size: var(--weather-chart-font-size, 10.5px);
}

.weather-duration-reference-label {
    font-family: var(--weather-chart-font-family, "Times New Roman", serif);
    font-size: var(--weather-chart-legend-font-size, var(--weather-chart-font-size, 10.5px));
}

.weather-duration-background {
    fill: #fff;
    stroke: none;
}

.weather-duration-grid {
    stroke: #c8d1d6;
    stroke-width: 0.65;
    vector-effect: non-scaling-stroke;
}

.weather-duration-grid.is-minor {
    stroke: #e4e9ec;
    stroke-width: 0.45;
}

.weather-duration-axis,
.weather-duration-axes line {
    stroke: #111;
    stroke-width: 0.8;
    vector-effect: non-scaling-stroke;
}

.weather-duration-axes text,
.weather-duration-value-tick {
    fill: #111;
    font-family: var(--weather-chart-font-family, "Times New Roman", "STIX Two Text", serif);
    font-size: var(--weather-chart-font-size, 10px);
}

.weather-duration-histogram-tick text,
.weather-duration-histogram-percent-tick text,
.weather-duration-hours-tick text,
.weather-duration-days-tick text,
.weather-duration-percent-tick text { fill: #111; }

.weather-duration-histogram-bar,
.weather-duration-curve,
.weather-duration-reference {
    pointer-events: none;
}

.weather-lab-duration-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, max-content));
    align-items: end;
    gap: 0.4rem;
    flex: 1 1 520px;
}

.weather-lab-duration-controls > label {
    display: grid;
    gap: 0.16rem;
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 650;
}

.weather-lab-duration-controls select,
.weather-lab-duration-controls input[type="number"] {
    min-height: 2rem;
    padding: 0.3rem 0.42rem;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: #fff;
}

.weather-lab-duration-percentile.is-disabled {
    opacity: 0.45;
}

.weather-lab-hx-coupling {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 2.15rem;
    padding: 0.35rem 0.58rem;
    border: 1px solid #b8c7ce;
    border-radius: 9px;
    background: #ffffff;
    color: #315463;
    font-size: 0.7rem;
    font-weight: 750;
    cursor: pointer;
}

.weather-lab-hx-coupling:hover,
.weather-lab-hx-coupling:focus-visible {
    border-color: #7897a4;
    background: #edf4f7;
}

.weather-lab-hx-coupling svg,
.weather-lab-action-icon {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.weather-lab-hx-coupling.is-active {
    border-color: #a87808;
    background: linear-gradient(180deg, #f5d77e, #e8bd45);
    color: #493200;
    box-shadow: inset 0 0 0 1px rgba(111, 76, 0, 0.12), 0 2px 7px rgba(126, 88, 8, 0.18);
}

.weather-lab-hx-coupling.is-active:hover,
.weather-lab-hx-coupling.is-active:focus-visible {
    border-color: #8b6500;
    background: linear-gradient(180deg, #f7dc86, #e8bd45);
}

.weather-lab-environment-coupling {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 2.15rem;
    padding: 0.35rem 0.58rem;
    border: 1px solid #9bbab7;
    border-radius: 9px;
    background: #ffffff;
    color: #245f5a;
    font-size: 0.7rem;
    font-weight: 750;
    cursor: pointer;
}

.weather-lab-environment-coupling svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.weather-lab-environment-coupling:hover,
.weather-lab-environment-coupling:focus-visible {
    border-color: #4f948e;
    background: #eff8f7;
}

.weather-lab-environment-coupling.is-active {
    border-color: #145d47;
    background: linear-gradient(180deg, #238362, #176b51);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(7, 63, 58, 0.16), 0 2px 7px rgba(20, 93, 71, 0.24);
}

.weather-lab-environment-coupling.is-active:hover,
.weather-lab-environment-coupling.is-active:focus-visible {
    border-color: #0f4f3b;
    background: linear-gradient(180deg, #1f7558, #10543f);
}

.weather-lab-panel-collapse span {
    display: inline-block;
    transition: transform 140ms ease;
}

.weather-lab-panel.is-collapsed .weather-lab-panel-collapse span {
    transform: rotate(180deg);
}

.weather-lab-panel-head > .weather-lab-panel-collapse,
.weather-lab-panel-head > .weather-lab-panel-remove {
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 8px;
    line-height: 1;
}

.weather-lab-panel-series > summary i,
.weather-lab-panel-datasets > summary i {
    display: inline-block;
    font-style: normal;
    transition: transform 140ms ease;
}

.weather-lab-panel-series[open] > summary i,
.weather-lab-panel-datasets[open] > summary i {
    transform: rotate(90deg);
}

.weather-lab-acquisition-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.weather-lab-acquisition-toggle .weather-lab-action-chevron {
    color: currentColor;
    font-size: 1rem;
    transition: transform 140ms ease;
}

.weather-lab-acquisition-toggle[aria-expanded="true"] .weather-lab-action-chevron {
    transform: rotate(90deg);
}

.flow-palette-state-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid #205e7a;
    display: inline-block;
}

.flow-palette-item:active {
    cursor: grabbing;
}

.flow-palette-item:hover,
.flow-palette-item:focus-visible,
.symbol-browser-item:hover,
.symbol-browser-item:focus-visible {
    border-color: #4e8eae;
    background: #f3f9fc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(29, 105, 150, 0.12);
}

.flow-palette-browser-toggle[aria-expanded="true"] {
    border-color: #2c789f;
    background: #e7f3f9;
    color: #174f6d;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(29, 105, 150, 0.14), 0 0 0 3px rgba(29, 105, 150, 0.1);
}

.flow-palette-browser-toggle[aria-expanded="true"]::after {
    content: "▴";
    margin-left: 0.1rem;
    color: #2c789f;
    font-size: 0.72rem;
    line-height: 1;
}

.flow-palette-note {
    color: var(--ink-soft);
    font-size: 0.84rem;
}

.schematic-state-values-control {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    min-width: 0;
}

.schematic-state-values-control label {
    display: grid;
    gap: 0.12rem;
    font-size: 0.68rem;
    color: var(--ink-soft);
}

.schematic-state-values-control select {
    min-width: 5.6rem;
    height: 2rem;
    border: 1px solid #cbd8e2;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    padding: 0.16rem 0.35rem;
    font: inherit;
    font-size: 0.78rem;
}

.process-schematic-frame {
    width: 100%;
    min-width: 0;
    min-height: 260px;
    border: 1px solid #dbe5ee;
    border-radius: 10px;
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(94, 124, 143, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 124, 143, 0.045) 1px, transparent 1px);
    background-size: 20px 20px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    padding: 0.55rem 0.2rem 0.35rem;
}

.process-schematic-frame > svg {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
}

.process-schematic-empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    text-align: center;
}

.air-side-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin: 0 0 1rem;
}

.air-side-switches {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 0;
    min-width: 0;
}

.air-side-switches .button.is-active {
    background: #eef8fd;
    border-color: var(--brand);
    color: var(--brand);
}

.workspace-stack-tabs {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

.workspace-stack-tabs-top {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
}

.workspace-stack-tabs .button.is-active {
    background: #eef8fd;
    border-color: var(--brand);
    color: var(--brand);
}

.workspace-stack-card {
    padding-top: 0.2rem;
}

.workspace-stack-panel {
    min-width: 0;
}

.process-flow-shell {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 100%;
}

.process-flow-underlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.process-flow-underlay svg {
    width: 100%;
    height: 100%;
    display: block;
    min-width: 0;
}

.process-flow-preview-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.process-flow-preview-layer svg {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: visible;
}

.process-flow-preview {
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(35, 117, 162, 0.18));
}

.process-flow-preview.is-invalid {
    opacity: 0.82;
}

.process-flow-preview.is-invalid .process-flow-preview-state-marker,
.process-flow-preview.is-invalid .process-flow-preview-target {
    stroke: #c1473d;
}

.process-flow-preview.is-invalid .process-flow-preview-state-marker,
.process-flow-preview.is-invalid .process-flow-preview-target {
    fill: rgba(193, 71, 61, 0.12);
}

.process-flow-preview-target {
    fill: rgba(35, 117, 162, 0.1);
    stroke: #2375a2;
    stroke-width: 2.2;
    stroke-dasharray: 6 4;
}

.process-flow-preview-actual-symbol {
    overflow: visible;
}

.process-flow-preview-label-bg {
    fill: #2375a2;
    stroke: #ffffff;
    stroke-width: 2;
}

.process-flow-preview-label-bg.is-invalid {
    fill: #c1473d;
}

.process-flow-preview-label {
    fill: #ffffff;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.01em;
}

.process-flow-lane {
    stroke: #cfd8df;
    stroke-width: 2.2;
}

.process-flow-connector {
    stroke-linecap: round;
}

.process-flow-arrow {
    stroke: none;
}

.process-flow-connector-label {
    font-size: 11px;
    font-weight: 700;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.96);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.process-flow-lane-label {
    fill: #5d6877;
    font-size: 13px;
    font-weight: 600;
    paint-order: stroke fill;
    stroke: #ffffff;
    stroke-width: 6px;
    stroke-linejoin: round;
}

.flow-lane-handle {
    width: 100%;
    height: 44px;
    transform: translateY(-10px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: ns-resize;
    touch-action: none;
}

.flow-lane-handle:focus-visible {
    outline: 2px dashed rgba(29, 105, 150, 0.48);
    outline-offset: -8px;
}

.process-flow-drop-hint {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    z-index: 4;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    border: 1px solid #dbe6ee;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.process-flow-empty {
    min-height: 320px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--ink-soft);
}

.editor-mode-panel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfdff;
}

.editor-mode-panel h3,
.visual-editor-head h3 {
    font-size: 1rem;
}

.editor-mode-panel p,
.visual-editor-head p {
    margin-top: 0.22rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.editor-mode-switch {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.editor-mode-switch .button.is-active {
    background: #eef8fd;
    border-color: var(--brand);
    color: var(--brand);
}

.visual-editor-panel {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.visual-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.visual-editor-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.visual-summary-chip {
    display: inline-grid;
    gap: 0.06rem;
    padding: 0.45rem 0.62rem;
    border-radius: 12px;
    border: 1px solid #d8e4ec;
    background: #ffffff;
    min-width: 0;
}

.visual-summary-chip strong {
    font-size: 0.78rem;
    font-weight: 800;
}

.visual-summary-chip span {
    font-size: 0.72rem;
    color: var(--ink-soft);
}

.visual-editor-canvas {
    position: relative;
    min-height: 600px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
    overflow: hidden;
}

.visual-editor-canvas svg {
    display: block;
    width: 100%;
    height: auto;
}

.visual-editor-empty {
    min-height: 540px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--ink-soft);
    padding: 1.2rem;
}

.visual-editor-hint {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 3;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #d9e5ee;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.editor-svg-bg {
    fill: url(#editor-grid-fill);
}

.editor-svg-lane {
    stroke: #d7e2eb;
    stroke-width: 2;
    stroke-linecap: round;
}

.editor-svg-lane-label {
    fill: #5d7383;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.editor-svg-edge-main,
.editor-svg-edge-branch {
    fill: none;
    stroke: #86a0b3;
    stroke-width: 2.2;
}

.editor-svg-edge-branch {
    stroke-dasharray: 7 6;
}

.editor-svg-node {
    cursor: grab;
}

.editor-svg-node.is-dragging {
    cursor: grabbing;
}

.editor-svg-node-card {
    fill: #ffffff;
    stroke: #d4dee7;
    stroke-width: 1.3;
    rx: 18;
    ry: 18;
    filter: drop-shadow(0 10px 18px rgba(50, 74, 92, 0.1));
}

.editor-svg-node-card.process-card {
    rx: 16;
    ry: 16;
}

.editor-svg-node-accent {
    stroke: none;
}

.editor-svg-node-title {
    fill: #173042;
    font-size: 15px;
    font-weight: 700;
}

.editor-svg-node-subtitle {
    fill: #617786;
    font-size: 12px;
}

.editor-svg-node-meta {
    fill: #395266;
    font-size: 11px;
    font-weight: 600;
}

.editor-svg-node-badge {
    fill: #eef4f8;
    stroke: #d3dee7;
    stroke-width: 1;
    rx: 8;
    ry: 8;
}

.editor-svg-node-badge-text {
    fill: #577080;
    font-size: 10px;
    font-weight: 700;
}

.reactflow-host {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: transparent;
    contain: paint;
}

.reactflow-host .react-flow,
.reactflow-host .react-flow__container,
.reactflow-host .react-flow__viewport,
.reactflow-host .react-flow__renderer {
    background: transparent !important;
}

.reactflow-host .react-flow__pane {
    cursor: default;
}

.reactflow-host .react-flow__node.draggable {
    cursor: grab;
}

.reactflow-host .react-flow__node.dragging {
    cursor: grabbing;
}

.flow-state-node,
.flow-process-node,
.flow-heat-recovery-node,
.flow-mix-node {
    position: relative;
    min-width: 1px;
    min-height: 1px;
    pointer-events: auto;
}

.flow-state-node {
    width: 24px;
    height: 24px;
    display: block;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.flow-state-node.is-disabled {
    opacity: 0.4;
}

.flow-process-node.is-inactive,
.flow-heat-recovery-node.is-inactive,
.flow-mix-node.is-inactive {
    filter: grayscale(1);
}

.flow-process-node.is-inactive .flow-process-label,
.flow-process-node.is-inactive .flow-process-info,
.flow-heat-recovery-node.is-inactive .flow-heat-recovery-label,
.flow-heat-recovery-node.is-inactive .flow-heat-recovery-info,
.flow-mix-node.is-inactive .flow-mix-label,
.flow-mix-node.is-inactive .flow-mix-info {
    color: #747d84;
}

.flow-state-anchor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%) scale(var(--rlt-state-marker-scale, 1));
}

.flow-state-anchor::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    background: #ffffff;
    z-index: -1;
}

.flow-state-marker {
    width: 20px;
    height: 20px;
    display: block;
}

.flow-state-stack {
    position: absolute;
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    text-align: center;
    color: #214258;
    white-space: nowrap;
}

.flow-state-label {
    font-size: calc(0.82rem * var(--rlt-state-label-scale, 1));
    font-weight: 700;
    color: #214258;
}

.flow-state-values {
    display: grid;
    gap: 0.02rem;
    font-size: var(--rlt-info-text-size, 11.2px);
    line-height: 1.12;
    font-weight: 500;
    color: #526a7b;
}

.flow-state-node.is-label-top .flow-state-stack {
    bottom: calc(50% + 13px);
    flex-direction: column-reverse;
}

.flow-state-node.is-label-bottom .flow-state-stack {
    top: calc(50% + 13px);
}

.flow-state-node.is-label-left .flow-state-stack {
    left: auto;
    right: calc(50% + 15px);
    top: 50%;
    transform: translateY(-50%);
    align-items: flex-end;
    text-align: right;
}

.flow-process-node,
.flow-heat-recovery-node,
.flow-mix-node,
.flow-coupling-node {
    position: relative;
    overflow: visible;
}

.flow-process-symbol,
.flow-mix-symbol {
    width: var(--rlt-component-width, 28px);
    height: var(--rlt-component-height, 60px);
    display: block;
}

.flow-process-symbol-stack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: var(--rlt-component-height, 60px);
    background: transparent;
}

.flow-process-symbol-slot {
    width: var(--rlt-component-width, 28px);
    height: var(--rlt-component-height, 60px);
    flex: 0 0 auto;
}

.flow-process-label,
.flow-mix-label {
    font-size: calc(0.82rem * var(--rlt-process-label-scale, 1));
    font-weight: 700;
    color: #28465c;
    white-space: nowrap;
}

.flow-process-info,
.flow-mix-info {
    font-size: var(--rlt-info-text-size, 11.2px);
    line-height: 1.28;
    color: #4d6475;
    white-space: nowrap;
    text-align: center;
}

.flow-process-node {
    width: 44px;
    height: 44px;
}

.flow-heat-recovery-node {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.flow-heat-recovery-anchor {
    position: absolute;
    inset: 0;
}

.flow-heat-recovery-symbol {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.flow-heat-recovery-label,
.flow-heat-recovery-info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
}

.flow-heat-recovery-label {
    font-size: calc(0.82rem * var(--rlt-process-label-scale, 1));
    font-weight: 700;
    color: #28465c;
}

.flow-heat-recovery-info {
    font-size: var(--rlt-info-text-size, 11.2px);
    line-height: 1.28;
    color: #4d6475;
}

.flow-heat-recovery-info.is-side-exchange {
    left: calc(100% + 4px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    text-align: left;
}

.flow-heat-recovery-info.is-side-exchange > svg {
    flex: 0 0 14px;
}

.flow-coupling-label + .flow-coupling-info {
    margin-top: 6px;
}

.flow-heat-recovery-port-label {
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.02em;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.94);
    stroke-width: 2.4px;
    stroke-linejoin: round;
}

.flow-process-node.is-passive .flow-process-label,
.flow-process-node.is-passive .flow-process-info {
    color: #737f89;
}

.flow-process-node.is-ghost .flow-process-anchor,
.flow-process-node.is-ghost .flow-process-label,
.flow-process-node.is-ghost .flow-process-info {
    opacity: 0;
}

.flow-process-anchor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max-content;
    height: var(--rlt-component-height, 60px);
    transform: translate(-50%, -50%);
}

.flow-process-label,
.flow-process-info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.flow-process-node.is-info-top .flow-process-label {
    bottom: calc(50% + var(--rlt-component-label-offset, 34px));
}

.flow-process-node.is-info-top .flow-process-info {
    bottom: calc(50% + var(--rlt-component-info-offset, 50px));
}

.flow-process-node.is-info-bottom .flow-process-label {
    top: calc(50% + var(--rlt-component-label-offset, 34px));
}

.flow-process-node.is-info-bottom .flow-process-info {
    top: calc(50% + var(--rlt-component-info-offset, 50px));
}

.flow-process-node.is-info-right .flow-process-label,
.flow-process-node.is-info-right .flow-process-info {
    left: calc(50% + 38px);
    transform: none;
    text-align: left;
}

.flow-process-node.is-info-right .flow-process-label {
    top: calc(50% - 1.1rem);
}

.flow-process-node.is-info-right .flow-process-info {
    top: calc(50% + 0.05rem);
}

.flow-node-delete {
    position: absolute;
    right: -0.58rem;
    top: -0.58rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.12rem;
    height: 1.12rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #c6d0d8;
    background: #ffffff;
    color: var(--accent);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(56, 72, 86, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.82);
    transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.flow-process-node.flow-node-selected .flow-node-delete,
.flow-process-node:focus-within .flow-node-delete,
.react-flow__node:focus-within .flow-process-node .flow-node-delete {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.flow-node-delete:hover {
    border-color: #d5a19c;
    color: #9e352d;
    background: #fff3f2;
}

.flow-node-delete .app-delete-icon {
    width: 0.76rem;
    height: 0.76rem;
    stroke-width: 1.85;
}

.flow-mix-node {
    width: 44px;
    height: 44px;
}

.flow-mix-symbol {
    width: var(--rlt-component-width, 28px);
    height: var(--rlt-component-height, 60px);
}

.flow-mix-anchor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--rlt-component-width, 28px);
    height: var(--rlt-component-height, 60px);
    transform: translate(-50%, -50%);
}

.flow-mix-stack {
    position: absolute;
    left: 50%;
    min-width: 170px;
    transform: translateX(-50%);
    display: grid;
    gap: 0.15rem;
    margin-left: 0;
    text-align: center;
}

.flow-mix-label,
.flow-mix-info {
    text-align: center;
}

.flow-mix-node.is-info-top .flow-mix-stack {
    bottom: calc(50% + var(--rlt-component-label-offset, 34px));
}

.flow-mix-node.is-info-bottom .flow-mix-stack {
    top: calc(50% + var(--rlt-component-label-offset, 34px));
}

.flow-coupling-node {
    width: 100%;
    height: 100%;
    min-width: 56px;
    min-height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #78838b;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

.flow-coupling-node.is-environment {
    min-width: 56px;
    min-height: 46px;
    border-color: #78838b;
    border-style: solid;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    color: #78838b;
}

.flow-coupling-icon {
    width: min(52px, calc(100% - 8px));
    height: 36px;
    display: grid;
    place-items: center;
}

.flow-coupling-symbol {
    display: block;
    width: 52px;
    max-width: 100%;
    height: 34px;
}

/* Only the internal balance glyphs use the coupling accent; the node and
   its boundary/airflow lines retain their neutral presentation. */
.flow-coupling-symbol .flow-coupling-symbol-accent {
    stroke: var(--environment-accent, #238362);
}

.flow-coupling-copy {
    position: absolute;
    top: 50%;
    width: 142px;
    min-width: 118px;
    max-width: 142px;
    padding: 0.18rem 0.3rem;
    transform: translateY(-50%);
    display: grid;
    gap: 0.04rem;
    border-radius: 7px;
    border: 0;
    background: rgba(250, 252, 253, 0.94);
    pointer-events: none;
}

.flow-coupling-node.is-environment .flow-coupling-copy {
    border: 0;
    background: rgba(250, 252, 253, 0.94);
}

.flow-coupling-node.is-environment .flow-coupling-label {
    color: #176b51;
    font-size: calc(0.72rem * var(--rlt-process-label-scale, 1));
}

.flow-coupling-node.is-environment .flow-coupling-info {
    color: #4b6d60;
    font-size: var(--rlt-info-text-size, 11.2px);
}

.flow-coupling-node.is-copy-left .flow-coupling-copy,
.flow-coupling-node.is-room:not(.is-copy-right) .flow-coupling-copy {
    left: auto;
    right: calc(100% + 12px);
    text-align: right;
}

.flow-coupling-node.is-copy-right .flow-coupling-copy,
.flow-coupling-node.is-environment:not(.is-copy-left) .flow-coupling-copy {
    left: calc(100% + 12px);
    right: auto;
    text-align: left;
}

.flow-coupling-label {
    max-width: 100%;
    overflow: hidden;
    color: #28465c;
    font-size: calc(0.72rem * var(--rlt-process-label-scale, 1));
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-coupling-info {
    max-width: 100%;
    overflow: hidden;
    color: #4d6475;
    font-size: var(--rlt-info-text-size, 11.2px);
    line-height: 1.25;
    white-space: nowrap;
}

.flow-coupling-info > div {
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-node-selected {
    outline: 2px solid rgba(38, 124, 173, 0.34);
    outline-offset: 4px;
    border-radius: 16px;
}

.flow-hidden-handle {
    width: 8px;
    height: 8px;
    opacity: 0;
    border: none;
    background: transparent;
}

.flow-state-handle {
    width: 10px;
    height: 10px;
    border: 1.5px solid #8ea4b5;
    background: #ffffff;
    opacity: 0.28;
    transition: opacity 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
}

.flow-state-node:hover .flow-state-handle,
.flow-node-selected .flow-state-handle {
    opacity: 0.9;
    border-color: #1d6996;
    transform: scale(1.06);
}

.process-flow-preview-state-marker {
    fill: rgba(255, 255, 255, 0.82);
    stroke: #2375a2;
    stroke-width: 1.8;
    stroke-dasharray: 3 2;
}

.process-flow-preview-symbol {
    fill: rgba(255, 255, 255, 0.92);
    stroke: #9aa7b2;
    stroke-width: 1.6;
}

.process-flow-preview-diagonal {
    stroke: #9aa7b2;
    stroke-width: 1.6;
}

.table-editor-panel {
    display: grid;
    gap: 0.6rem;
    font-family: var(--rlt-data-font-family);
    --chain-list-gap: 0.14rem;
    --chain-base-table-min-width: 620px;
    --chain-side-card-width: 272px;
    --chain-extra-table-width: 300px;
    --chain-inline-gap: 0.5rem;
    --chain-head-font-size: 0.76rem;
    --chain-head-pad-y: 0.22rem;
    --chain-head-pad-x: 0.32rem;
    --chain-head-radius: 12px;
    --chain-row-radius: 12px;
    --chain-col-checkbox: 36px;
    --chain-col-action: 32px;
    --chain-col-label: 122px;
    --chain-col-field: 62px;
    --chain-col-status: 76px;
    --chain-state-label-width: 126px;
    --chain-process-label-width: 126px;
    --chain-state-row-height: 2.15rem;
    --chain-state-row-pad-x: 0.3rem;
    --chain-process-row-height: 1.18rem;
    --chain-process-row-pad-x: 0.3rem;
    --chain-field-height: 1.72rem;
    --chain-field-radius: 9px;
    --chain-value-font-size: 0.8rem;
    --chain-label-input-font-size: 0.86rem;
    --chain-button-size: 1.72rem;
    --chain-status-height: 1.72rem;
    --chain-status-font-size: 0.68rem;
    --chain-symbol-badge-width: 1.78rem;
    --chain-symbol-font-size: 0.69rem;
    --chain-process-label-font-size: 0.68rem;
    --chain-process-arrow-size: 0.8rem;
    --chain-constant-size: 16px;
    --chain-inline-status-height: 1.16rem;
    --chain-inline-status-font-size: 0.6rem;
    --chain-process-card-pad-y: 0.3rem;
    --chain-process-card-pad-x: 0.36rem;
    --chain-process-caption-size: 0.61rem;
    --chain-process-card-input-height: 1.5rem;
    --chain-process-card-button-size: 1.52rem;
    --chain-process-card-text-size: 0.68rem;
    --chain-grid-columns:
        var(--chain-col-checkbox)
        var(--chain-col-action)
        minmax(var(--chain-col-label), 0.82fr)
        repeat(4, minmax(var(--chain-col-field), 0.42fr))
        minmax(var(--chain-col-status), 0.46fr);
}

.layout-tuner {
    border: 1px solid #d8e3eb;
    border-radius: 14px;
    background: #f8fbfd;
    overflow: hidden;
}

.layout-tuner summary {
    list-style: none;
}

.layout-tuner summary::-webkit-details-marker {
    display: none;
}

.layout-tuner-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.72rem 0.84rem;
    cursor: pointer;
}

.layout-tuner-summary-copy {
    display: grid;
    gap: 0.16rem;
}

.layout-tuner-summary-copy strong {
    font-size: 0.88rem;
}

.layout-tuner-summary-copy span {
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.3;
}

.layout-tuner-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.layout-tuner-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0 0.84rem 0.68rem;
    flex-wrap: wrap;
}

.layout-tuner-toolbar p {
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.35;
}

.layout-tuner-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
}

.layout-tuner-groups {
    display: grid;
    gap: 0.6rem;
    padding: 0 0.84rem 0.84rem;
}

.layout-tuner-group {
    border: 1px solid #dce6ee;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.layout-tuner-group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.62rem 0.72rem;
    cursor: pointer;
}

.layout-tuner-group-summary strong {
    display: block;
    font-size: 0.82rem;
}

.layout-tuner-group-summary span {
    display: block;
    margin-top: 0.12rem;
    color: var(--ink-soft);
    font-size: 0.74rem;
    line-height: 1.3;
}

.layout-tuner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem 0.72rem;
    padding: 0 0.72rem 0.72rem;
}

.layout-tuner-control {
    display: grid;
    gap: 0.34rem;
    min-width: 0;
}

.layout-tuner-control-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    font-size: 0.76rem;
}

.layout-tuner-control-head span {
    color: var(--ink);
}

.layout-tuner-control-head output {
    color: var(--brand);
    font-weight: 700;
    white-space: nowrap;
}

.layout-tuner-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 0.55rem;
    align-items: center;
}

.layout-tuner-inputs input[type="range"] {
    padding: 0;
}

.layout-tuner-number {
    padding: 0.38rem 0.46rem;
    text-align: right;
}

.modal-label-line {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.mixed-note {
    font-style: normal;
    font-size: 0.74rem;
    color: var(--accent);
}

.chain-list-head {
    display: grid;
    grid-template-columns: minmax(220px, 0.95fr) minmax(360px, 1.25fr) minmax(260px, 1fr);
    gap: 0.9rem;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 4;
    background: #f6fafc;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.75rem;
}

.chain-list-head-state,
.chain-list-head-process {
    display: grid;
    gap: 0.16rem;
}

.chain-list-head-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(88px, 1fr));
    gap: 0.5rem;
    align-items: end;
}

.chain-list-head-title {
    font-size: 0.86rem;
    font-weight: 800;
}

.chain-list-head-note {
    font-size: 0.75rem;
    color: var(--ink-soft);
    line-height: 1.3;
}

.chain-list-head-fields span {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-align: center;
}

.chain-list {
    display: grid;
    gap: 0.6rem;
}

.chain-entry {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}

.chain-entry-process {
    background: linear-gradient(180deg, #f8fbfd 0%, #f3f8fb 100%);
}

.chain-main-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.82fr) auto;
    gap: 0.72rem;
    align-items: stretch;
    padding: 0.78rem 0.85rem;
}

.state-row-core {
    display: grid;
    grid-template-columns: 32px 84px 42px minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    min-width: 0;
}

.state-row-main {
    display: grid;
    gap: 0.46rem;
    min-width: 0;
}

.state-field-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(88px, 1fr));
    gap: 0.48rem;
}

.state-label-input input,
.process-label-input input {
    padding-inline: 0.7rem;
}

.state-row-side,
.process-bridge-side {
    display: grid;
    gap: 0.55rem;
    align-content: start;
    min-width: 0;
    padding: 0.68rem 0.78rem;
    border-radius: 15px;
    border: 1px solid #d8e4ec;
    background: #ffffff;
}

.state-row-side-top,
.process-bridge-side-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: start;
}

.state-row-note {
    align-self: center;
    font-size: 0.74rem;
    color: var(--ink-soft);
    text-align: right;
}

.row-action-stack {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.35rem;
    align-content: start;
    justify-content: end;
}

.process-bridge-row {
    display: grid;
    grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    padding: 0.6rem 0.85rem;
}

.process-bridge-strip {
    display: grid;
    gap: 0.55rem;
    align-content: start;
    padding: 0.65rem 0.72rem;
    border-radius: 15px;
    border: 1px dashed #cfdde8;
    background: rgba(255, 255, 255, 0.86);
}

.process-bridge-header {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.process-constant-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 38px));
    gap: 0.4rem;
    justify-content: start;
}

.process-constant-toggle {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.18rem;
    cursor: pointer;
    user-select: none;
}

.process-constant-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.process-constant-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-height: 30px;
    border-radius: 10px;
    border: 1px dashed #aebdca;
    background: #ffffff;
    color: var(--ink-soft);
    font-weight: 700;
    font-size: 0.9rem;
}

.process-constant-field {
    font-size: 0.68rem;
    color: var(--ink-soft);
    line-height: 1;
}

.process-constant-toggle.is-active .process-constant-mark {
    background: #edf0ff;
    border-style: solid;
    border-color: #7d90cf;
    color: #31498a;
}

.process-constant-toggle.has-delta .process-constant-mark {
    background: #fff3cf;
    border-style: solid;
    border-color: #e2ae39;
    color: #6a4a00;
    font-weight: 600;
}

.process-constant-toggle.is-disabled {
    cursor: default;
    opacity: 0.65;
}

.process-constant-note {
    font-size: 0.76rem;
    color: var(--ink-soft);
    line-height: 1.35;
}

.process-bridge-side-label {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.process-bridge-caption {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.process-bridge-side-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.inline-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    align-items: flex-start;
}

.inline-summary-chip {
    display: inline-grid;
    gap: 0.06rem;
    padding: 0.35rem 0.52rem;
    border-radius: 11px;
    border: 1px solid #d9e4ec;
    background: #f7fbfe;
    min-width: 0;
}

.inline-summary-chip strong {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--ink-soft);
}

.inline-summary-chip span {
    font-size: 0.77rem;
    font-variant-numeric: tabular-nums;
}

.inline-summary-empty {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.process-bridge-row.is-mirrored .process-bridge-side {
    background: #f8fbfd;
}

.chain-list-head {
    display: grid;
    grid-template-columns: 22px 62px 28px minmax(74px, 86px) repeat(4, minmax(50px, 0.56fr)) minmax(76px, 84px) repeat(4, 28px);
    gap: 0.28rem;
    align-items: center;
    width: calc(100% - 292px);
    max-width: calc(100% - 292px);
    padding: 0.35rem 0.5rem;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.chain-list {
    display: grid;
    gap: 0.18rem;
    align-items: start;
}

.chain-entry,
.chain-entry-process {
    border: none;
    background: transparent;
    overflow: visible;
}

.chain-list-head {
    grid-template-columns: var(--chain-grid-columns);
    gap: 0.22rem;
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.18rem;
    padding: var(--chain-head-pad-y) var(--chain-head-pad-x);
    border-radius: var(--chain-head-radius);
}

.chain-list-head span {
    font-size: var(--chain-head-font-size);
    font-weight: 700;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.chain-list-head .chain-head-empty {
    min-height: 1.5rem;
    justify-self: center;
}

.chain-list-head .chain-main-heading {
    display: grid;
    min-width: 0;
    gap: 0.04rem;
    justify-items: center;
    align-content: center;
    text-align: center;
    line-height: 1.05;
}

.chain-list-head .chain-main-heading b {
    max-width: 100%;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.66rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chain-list-head .chain-main-heading small {
    display: block;
    max-width: 100%;
    min-height: 0.5rem;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.5rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chain-list {
    gap: var(--chain-list-gap);
    align-items: start;
}

.chain-extra-toggle {
    flex: 0 0 auto;
    width: 2.35rem;
    min-width: 2.35rem;
    min-height: 2.25rem;
    padding-inline: 0;
    font-size: 1.15rem;
}

.chain-extra-toggle.is-active {
    background: #edf5ff;
    border-color: #8eb5dc;
    color: #245f92;
}

.chain-table-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--chain-list-gap) 0.5rem;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 0.08rem;
    min-height: 0;
}

.rlt-state-process-body,
.table-editor-panel,
.chain-list {
    min-height: 0;
    height: auto;
}

.chain-table-shell.is-extra-open {
    grid-template-columns: minmax(0, 1fr) var(--chain-extra-table-width);
}

.chain-table-shell .chain-list-head {
    grid-column: 1;
}

.chain-extra-head {
    display: none;
    grid-column: 2;
    align-items: center;
    min-height: calc(var(--chain-head-font-size) + (2 * var(--chain-head-pad-y)));
    padding: var(--chain-head-pad-y) var(--chain-head-pad-x);
    border: 1px solid #d8e4ec;
    border-radius: var(--chain-head-radius);
    background: #f8fbfd;
}

.chain-table-shell.is-extra-open .chain-extra-head {
    display: grid;
}

.chain-extra-head span {
    font-size: var(--chain-head-font-size);
    font-weight: 700;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chain-list {
    grid-column: 1 / -1;
}

.chain-entry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    align-items: stretch;
}

.chain-table-shell.is-extra-open .chain-entry-grid {
    grid-template-columns: minmax(0, 1fr) var(--chain-extra-table-width);
}

.chain-extra-row {
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.22rem;
    align-items: center;
    min-width: 0;
    padding: 0.18rem 0.32rem;
    border: 1px solid #d8e2ea;
    border-radius: var(--chain-row-radius);
    background: #f8fbfd;
}

.chain-table-shell.is-extra-open .chain-extra-row {
    display: grid;
}

.chain-extra-row-state {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: calc(var(--chain-state-row-height) + var(--chain-state-row-height) + 0.22rem);
}

.chain-extra-row-process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: var(--chain-process-row-height);
    padding-top: 0.04rem;
    padding-bottom: 0.04rem;
    border-color: #d8e2ea;
    background: #f8fbfd;
}

.chain-extra-row-process .chain-extra-cell {
    min-height: calc(var(--chain-process-row-height) - 0.08rem);
    padding: 0.3rem 0.16rem 0.06rem;
}

.chain-extra-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-width: 0;
    min-height: calc(var(--chain-process-row-height) - 0.12rem);
    padding: 0 0.14rem;
    border: 1px solid #d8e2ea;
    border-radius: 7px;
    background: #ffffff;
    color: var(--ink-soft);
    line-height: 1;
    overflow: hidden;
}

.chain-extra-cell.has-value {
    border-color: #e8bd4d;
    background: #fff3cf;
    color: #5b4300;
}

.chain-extra-row-state .chain-extra-cell {
    min-height: calc(var(--chain-state-row-height) - 0.48rem);
    padding: 0.42rem 0.2rem 0.14rem;
}

.chain-extra-cell span {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chain-extra-symbol {
    position: absolute;
    top: 0.16rem;
    right: 0.22rem;
    font-size: 0.52rem;
    font-weight: 500;
    color: #7b8792;
    line-height: 1;
}

.chain-extra-cell.has-value .chain-extra-symbol {
    color: #7b5a00;
}

.chain-extra-value {
    font-size: 0.62rem;
    font-weight: 400;
    color: #6c7782;
    font-variant-numeric: tabular-nums;
}

.chain-extra-cell.has-value .chain-extra-value {
    color: #4d3900;
}

.chain-entry-layout,
.process-inline-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--chain-side-card-width);
    gap: var(--chain-inline-gap);
    align-items: center;
}

.chain-main-row,
.process-inline-row {
    display: grid;
    grid-template-columns: var(--chain-grid-columns);
    gap: 0.22rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--chain-row-radius);
    background: #ffffff;
}

.chain-main-row {
    padding: 0.18rem var(--chain-state-row-pad-x);
    min-height: var(--chain-state-row-height);
}

.process-inline-row {
    padding: 0.02rem var(--chain-process-row-pad-x);
    min-height: var(--chain-process-row-height);
    border-color: #d8e2ea;
    background: #f8fbfd;
}

.symbol-cell {
    justify-self: start;
}

.state-label-input input,
.process-label-input input {
    height: var(--chain-field-height);
    padding: 0 0.48rem;
}

.state-label-input {
    width: 100%;
    max-width: var(--chain-state-label-width);
}

.process-label-input {
    width: 100%;
    max-width: var(--chain-process-label-width);
}

.value-cell {
    min-width: 0;
    width: 100%;
    max-width: var(--chain-col-field);
    justify-self: start;
}

.value-cell input {
    height: var(--chain-field-height);
    padding: 0 0.32rem;
    border-radius: var(--chain-field-radius);
}

.status-badge {
    min-height: var(--chain-status-height);
    padding: 0.18rem 0.42rem;
    font-size: var(--chain-status-font-size);
}

.chain-main-row .button.button-tight,
.chain-main-row .button.button-icon,
.process-inline-row .button.button-tight,
.process-inline-row .button.button-icon {
    min-width: var(--chain-button-size);
    height: var(--chain-button-size);
    padding: 0;
}

.process-schematic-head .button.button-tight,
.process-schematic-head .button.process-schematic-toggle {
    min-width: 2.55rem;
    min-height: 2.38rem;
    height: auto;
    padding: 0.48rem 0.7rem;
    font-size: 1.02rem;
}

.chain-detail-row {
    margin-top: 0.2rem;
    border: 1px solid #e6ecf2;
    border-radius: 13px;
    background: #fbfdff;
    padding: 0.68rem 0.76rem 0.78rem;
    display: grid;
    gap: 0.65rem;
}

.process-inline-symbol {
    display: inline-flex;
    align-items: center;
    gap: 0.16rem;
    min-width: 0;
}

.process-inline-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    color: var(--brand);
    font-size: var(--chain-process-arrow-size);
    line-height: 1;
}

.process-inline-arrow::before {
    content: "→";
}

.process-inline-label {
    min-width: 0;
    width: 100%;
    max-width: var(--chain-process-label-width);
    font-size: var(--chain-process-label-font-size);
    color: var(--ink-soft);
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.process-inline-spacer {
    display: block;
    width: 100%;
    min-height: 1px;
}

.process-constant-toggle {
    gap: 0;
    justify-self: start;
    display: block;
    width: 100%;
    max-width: var(--chain-col-field);
    min-width: 0;
}

.process-constant-mark {
    width: 100%;
    min-height: var(--chain-constant-size);
    border-radius: 5px;
    padding: 0 0.12rem;
    font-size: var(--chain-inline-status-font-size);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.process-inline-status {
    min-height: var(--chain-inline-status-height);
    padding: 0.06rem 0.24rem;
    font-size: var(--chain-inline-status-font-size);
    border-radius: 999px;
}

.process-side-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "caption label actions"
        "metric metric metric";
    gap: 0.18rem 0.28rem;
    min-width: 0;
    align-items: center;
    align-self: center;
    padding: var(--chain-process-card-pad-y) var(--chain-process-card-pad-x) calc(var(--chain-process-card-pad-y) + 0.02rem);
    border-radius: var(--chain-row-radius);
    border: 1px solid #d8e4ec;
    background: #ffffff;
}

.process-side-caption {
    grid-area: caption;
    font-size: var(--chain-process-caption-size);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.process-side-actions {
    grid-area: actions;
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    flex-wrap: nowrap;
    justify-self: end;
}

.process-side-card .process-label-input {
    grid-area: label;
    max-width: none;
}

.process-side-text {
    grid-area: metric;
    font-size: var(--chain-process-card-text-size);
    color: var(--ink-soft);
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chain-entry-process.is-mirrored .process-side-card {
    background: #f8fbfd;
}

.row-toggle,
.row-active {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.row-active input,
.checkbox-label input,
.inline-checkbox input {
    width: auto;
    margin: 0;
}

.state-path-indicator {
    justify-content: center;
    color: #3d8b68;
    font-size: 0.62rem;
}

.chain-entry-state.is-process-bypassed .chain-main-row,
.chain-entry-state.is-process-bypassed .chain-extra-row,
.chain-entry-process.is-process-inactive .chain-main-row,
.chain-entry-process.is-process-inactive .chain-extra-row {
    color: #7b848b;
    background: #f2f4f5;
}

.chain-entry-state.is-process-bypassed input,
.chain-entry-process.is-process-inactive input,
.chain-entry-process.is-process-inactive select,
.chain-entry-state.is-process-bypassed .status-badge,
.chain-entry-process.is-process-inactive .status-badge {
    color: #747c82;
    border-color: #cbd0d3;
    background: #eef0f1;
}

.symbol-cell,
.process-symbol-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
}

.symbol-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--chain-symbol-badge-width);
    padding: 0.08rem 0.3rem;
    border-radius: 999px;
    background: #eef5fb;
    color: var(--brand);
    font-size: var(--chain-symbol-font-size);
    font-weight: 700;
}

.chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .chain-main-row,
.chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .chain-extra-row {
    border-color: #7cbda5;
    background: #dff2e9;
    box-shadow: inset 3px 0 0 #176b51;
}

.chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .state-label-input input,
.chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .value-cell input {
    border-color: #a9d3c3;
    background: rgba(255, 255, 255, 0.78);
}

.chain-entry-state.is-environment-boundary:not(.is-process-bypassed) .chain-main-row,
.chain-entry-state.is-environment-boundary:not(.is-process-bypassed) .chain-extra-row {
    border-color: #8fc8b2;
    box-shadow: inset 3px 0 0 #176b51;
}

.chain-entry-state.is-environment-boundary:not(.is-environment-coupled):not(.is-process-bypassed) .chain-main-row,
.chain-entry-state.is-environment-boundary:not(.is-environment-coupled):not(.is-process-bypassed) .chain-extra-row {
    background: #eef8f3;
}

.chain-entry-state.is-environment-exhaust:not(.is-process-bypassed) .chain-main-row,
.chain-entry-state.is-environment-exhaust:not(.is-process-bypassed) .chain-extra-row {
    box-shadow: inset 3px 0 0 #0f5a43;
}

.rlt-row-options > summary.is-environment-boundary {
    border-color: #63a98f;
    background: #dff2e9;
    color: #176b51;
}

.rlt-row-boundary-status {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    margin: 0.04rem 0.04rem 0.18rem;
    padding: 0.34rem 0.4rem;
    border-radius: 7px;
    background: #e7f5ee;
    color: #176b51;
}

.rlt-row-boundary-status > span {
    min-width: 0;
    display: grid;
    gap: 0.02rem;
}

.rlt-row-boundary-status strong,
.rlt-row-boundary-status small {
    line-height: 1.15;
}

.rlt-row-boundary-status strong {
    font-size: 0.68rem;
}

.rlt-row-boundary-status small {
    color: #517064;
    font-size: 0.56rem;
}

.rlt-table-preview {
    display: inline-flex;
    width: 32px;
    height: 28px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    overflow: visible;
}

.rlt-table-preview svg {
    display: block;
    width: 28px;
    height: 28px;
    overflow: visible;
}

.rlt-process-preview svg {
    width: 32px;
    height: 26px;
}

.state-marker-preview,
.process-line-preview {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid var(--brand);
    display: inline-block;
    background: transparent;
}

.process-line-preview {
    width: 26px;
    height: 0;
    border-radius: 0;
    border-width: 0 0 3px;
    position: relative;
}

.process-line-preview::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    border-left: 8px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.symbol-label {
    font-weight: 700;
}

.label-input {
    min-width: 0;
}

.label-input input {
    padding-inline: 0.48rem;
}

.value-cell {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.value-cell-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--ink-soft);
}

.value-symbol {
    font-weight: 800;
    color: var(--ink);
}

.value-unit {
    white-space: nowrap;
}

.value-cell input {
    padding: 0 0.32rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: var(--chain-value-font-size);
}

.value-cell-meta {
    font-size: 0.72rem;
    color: var(--ink-soft);
    min-height: 1em;
    line-height: 1.15;
}

.value-source-manual input {
    background: var(--success-bg);
    border-color: #89bc9d;
    font-weight: 700;
}

.rlt-semantic-input.is-entered-value input,
input[data-rlt-semantic-input].is-entered-value {
    border-color: #89bc9d;
    background: var(--success-bg);
    color: #111111;
    font-weight: 700;
}

/* The background communicates the value source. Text itself remains black
   throughout the RLT table and all coloured data-entry fields. */
.rlt-lab-shell .chain-table-shell input,
.rlt-lab-shell .chain-table-shell select,
.rlt-lab-shell .rlt-semantic-input input,
.rlt-lab-shell input[data-rlt-semantic-input],
.rlt-node-popover .rlt-semantic-input input {
    color: #111111;
    -webkit-text-fill-color: #111111;
}

.rlt-lab-shell .rlt-semantic-input,
.rlt-lab-shell .rlt-semantic-input input,
.rlt-lab-shell input[data-rlt-semantic-input] {
    font-family: var(--rlt-data-font-family);
}

.value-source-inherited input {
    background: var(--inherit);
    border-color: var(--inherit-line);
}

.value-source-inherited_missing input {
    background: #faf0ff;
    border-color: #d2b8ff;
    color: #8d5ac7;
}

.value-source-computed input {
    background: var(--computed);
    border-color: var(--computed-line);
}

.value-source-weather_design input,
.rlt-node-popover-field.value-source-weather_design input,
.chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .value-source-weather_design input {
    border-color: #9d86cf;
    background: #eee7fb;
    color: #111111;
    -webkit-text-fill-color: #111111;
    box-shadow: inset 0 0 0 1px rgba(111, 82, 167, 0.08);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--chain-status-height);
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: var(--chain-status-font-size);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-align: center;
}

.process-side-actions .button.button-tight {
    min-width: var(--chain-process-card-button-size);
    height: var(--chain-process-card-button-size);
}

.process-inline-status {
    min-height: var(--chain-inline-status-height);
    padding: 0.06rem 0.24rem;
    font-size: var(--chain-inline-status-font-size);
}

.chain-main-row .state-label-input input {
    padding-inline: 0.48rem;
    font-size: var(--chain-label-input-font-size);
}

.chain-main-row .process-label-input input {
    font-size: var(--chain-process-label-font-size);
}

.process-side-card .process-label-input input {
    height: var(--chain-process-card-input-height);
    font-size: var(--chain-label-input-font-size);
}


.flow-state-field-card {
    display: grid;
    gap: 0.34rem;
}

.flow-state-field-card input {
    width: 100%;
}

.field-source-note {
    color: var(--ink-soft);
    font-size: 0.76rem;
    min-height: 1rem;
}

.flow-state-modal-status {
    margin-top: 0.55rem;
    color: var(--ink-soft);
    font-size: 0.84rem;
    line-height: 1.35;
}

.status-empty {
    background: #eef3f7;
    border-color: #cdd8e2;
    color: var(--ink-soft);
}

.status-partial {
    background: #eef3f7;
    border-color: #cdd8e2;
    color: var(--ink-soft);
}

.status-computed {
    background: #eef3f7;
    border-color: #cdd8e2;
    color: var(--ink-soft);
}

.status-error {
    background: #eef3f7;
    border-color: #cdd8e2;
    color: var(--ink-soft);
}

.status-disabled {
    background: #eef3f7;
    border-color: #cdd8e2;
    color: var(--ink-soft);
}

.status-corrected {
    background: #fff1ef;
    border-color: #e3a299;
    color: var(--accent);
}

.detail-values {
    display: grid;
    grid-template-columns: repeat(8, minmax(92px, 1fr));
    gap: 0.45rem;
}

.detail-chip {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.48rem 0.6rem;
    background: #fff;
}

.detail-chip-wide {
    grid-column: 1 / -1;
}

.detail-chip-wide strong {
    font-size: 0.86rem;
    line-height: 1.35;
    white-space: normal;
}

.detail-chip strong,
.stats-table strong {
    display: block;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.detail-chip span,
.detail-message,
.stats-table span,
.subtle-note {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.calculation-body {
    display: grid;
    gap: 0.9rem;
}

.calc-step {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfdff;
    padding: 0.85rem 0.95rem;
}

.calc-step h4 {
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
}

.calc-formula {
    font-family: "Cambria Math", "Times New Roman", serif;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink);
}

.sci-symbol,
.calc-formula var,
.chain-extra-symbol var,
.detail-chip var {
    font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
    font-style: italic;
}

.sci-symbol sub,
.calc-formula sub,
.chain-extra-symbol sub,
.detail-chip sub {
    font-style: normal;
}

math.sci-math {
    display: inline-block;
    margin-inline: 0.08em;
    font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
    font-size: 1em;
    vertical-align: -0.16em;
}

.detail-message {
    line-height: 1.4;
}

.upload-form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.weather-action-row,
.guide-row {
    flex-wrap: wrap;
}

.guide-point-row {
    display: grid;
    grid-template-columns: 48px repeat(2, minmax(0, 1fr)) repeat(2, minmax(92px, 0.9fr)) minmax(96px, 0.7fr) 42px 42px;
    gap: 0.45rem;
    align-items: center;
}

.stat-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.stat-chip-button {
    display: grid;
    gap: 0.16rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 0.5rem 0.6rem;
    text-align: left;
}

.stat-chip-button.is-active {
    border-color: var(--brand);
    background: #eef8fd;
}

.stat-chip-button.is-selected {
    box-shadow: inset 0 0 0 1px var(--brand);
}

.weather-stat-config {
    display: grid;
    gap: 0.75rem;
    border: 1px solid #d8e2ec;
    border-radius: 14px;
    background: #f8fbfe;
    padding: 0.8rem;
}

.weather-stat-config-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.weather-stat-config-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: end;
}

.weather-stat-config-grid-point {
    grid-template-columns: minmax(180px, 1.5fr) repeat(6, minmax(0, 1fr));
}

.chain-head-spacer {
    visibility: hidden;
}

.input-corrected {
    animation: corrected-input 2s ease;
}

@keyframes corrected-input {
    0% {
        background: #ffd9d4;
        border-color: #df7568;
    }
    62% {
        background: #ffd9d4;
        border-color: #df7568;
    }
    100% {
        background: var(--success-bg);
        border-color: #89bc9d;
    }
}

.weather-mode-chip,
.mini-chip {
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #f7fafc;
    font-size: 0.76rem;
    color: var(--ink-soft);
}

.mini-chip-warning {
    border-color: #d69e42;
    background: #fff5df;
    color: #7c4b00;
}

.weather-quality-warning,
.weather-quality-ok,
.weather-design-values {
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.45;
}

.weather-quality-warning {
    border: 1px solid #e3bd72;
    background: #fff8e8;
    color: #67430b;
}

.weather-quality-warning strong {
    display: block;
    margin-bottom: 0.2rem;
}

.weather-quality-ok {
    border: 1px solid #9bc9ae;
    background: #edf8f1;
    color: #24583a;
}

.weather-design-values {
    display: flex;
    align-items: center;
    gap: 0.6rem 1rem;
    flex-wrap: wrap;
    border: 1px solid #cad8e5;
    background: #f7fafc;
}

.weather-design-values small {
    flex-basis: 100%;
    color: var(--ink-soft);
}

.stats-table {
    display: grid;
    gap: 0.55rem;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
}

.stats-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
}

.checkbox-label,
.inline-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.site-footer {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
    padding: 0;
    display: grid;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.84rem;
}

.site-footer a {
    color: var(--brand);
}

.site-footer .button-primary {
    color: #ffffff;
}

.site-footer-compact {
    font-size: 0.8rem;
}

.site-footer-app-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 0;
    padding: 0.3rem 0.75rem;
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.76rem;
}

.site-footer-app-compact nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
}

.site-footer-app-compact a {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0 0.25rem;
    font-weight: 700;
    text-decoration: none;
}

.site-footer-app-compact a:hover,
.site-footer-app-compact a:focus-visible {
    text-decoration: underline;
}

.site-footer-profile {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    gap: clamp(1.1rem, 2.4vw, 2rem);
    align-items: center;
    padding: clamp(1rem, 2.2vw, 1.65rem);
    background: linear-gradient(135deg, #edf4f7 0%, #ffffff 64%);
    border-bottom: 1px solid var(--line);
}

.site-footer-profile figure {
    margin: 0;
}

.site-footer-profile figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 52% 39%;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(22, 33, 43, 0.16);
}

.site-footer-profile figcaption {
    margin-top: 0.38rem;
    color: #697681;
    font-size: 0.66rem;
}

.site-footer-profile h2 {
    margin: 0.16rem 0 0.7rem;
    color: var(--ink);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.site-footer-profile p:not(.eyebrow) {
    max-width: 78ch;
    margin: 0.42rem 0;
    line-height: 1.55;
}

.site-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.site-footer-meta {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(240px, 1fr) minmax(280px, 1.25fr);
    gap: 1.15rem;
    padding: 1rem 1.2rem;
}

.site-footer-meta > section,
.site-footer-imprint {
    min-width: 0;
    padding: 0.2rem 0.7rem;
    border-left: 3px solid #d7e2e8;
}

.site-footer h3 {
    margin-bottom: 0.48rem;
    color: var(--ink);
    font-size: 0.84rem;
}

.site-footer address {
    font-style: normal;
    line-height: 1.55;
}

.site-footer-license img {
    display: block;
    width: 112px;
    max-width: 100%;
    height: auto;
    margin-bottom: 0.45rem;
}

.site-footer-license p {
    margin: 0;
    line-height: 1.45;
}

.site-footer-imprint > summary {
    color: var(--brand-strong);
    font-weight: 750;
    cursor: pointer;
}

.site-footer-imprint > div {
    padding-top: 0.48rem;
    line-height: 1.45;
}

.site-footer-imprint p {
    margin: 0.3rem 0;
}

.site-footer-disclaimer {
    margin: 0;
    padding: 0.75rem 1.2rem;
    border-top: 1px solid var(--line);
    background: #f7f9fb;
    font-size: 0.75rem;
    line-height: 1.45;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(21, 31, 43, 0.42);
}

.modal-panel {
    position: relative;
    width: min(920px, calc(100vw - 2rem));
    margin: 5vh auto;
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 28px 55px rgba(22, 33, 43, 0.22);
    padding: 1rem;
}

.modal-panel-wide {
    width: min(1180px, calc(100vw - 2rem));
}

.modal-form,
.modal-subgrid {
    display: grid;
    gap: 1rem;
}

.modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.modal-grid-span-2 {
    grid-column: span 2;
}

.modal-subgrid {
    border-top: 1px solid #e6ecf2;
    padding-top: 0.9rem;
}

.diagram-export-panel {
    width: min(640px, calc(100vw - 2rem));
}

.diagram-export-panel .modal-header {
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #e3e9ed;
}

.diagram-export-panel .modal-header h3,
.diagram-export-panel .modal-header p,
.diagram-export-panel form > p {
    margin-block: 0;
}

.diagram-export-panel .modal-form {
    gap: 0.75rem;
    padding-top: 0.72rem;
}

.diagram-export-mode-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
    min-width: 0;
    margin: 0;
    padding: 0.62rem;
    border: 1px solid #d4dfe4;
    border-radius: 12px;
    background: #f7f9fa;
}

.diagram-export-mode-group > legend {
    padding: 0 0.24rem;
    color: #284b5a;
    font-size: 0.73rem;
    font-weight: 750;
}

.diagram-export-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.48rem;
    min-width: 0;
    padding: 0.58rem;
    border: 1px solid #cbd8de;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.diagram-export-choice:has(input:checked) {
    border-color: #4f91ad;
    background: #edf7fb;
    box-shadow: inset 0 0 0 1px rgba(30, 105, 136, 0.14);
}

.diagram-export-choice input {
    margin: 0.16rem 0 0;
    accent-color: var(--brand);
}

.diagram-export-choice > span {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.diagram-export-choice strong {
    color: #193946;
    font-size: 0.76rem;
}

.diagram-export-choice small,
.diagram-export-dpi-field small {
    color: var(--ink-soft);
    font-size: 0.67rem;
    line-height: 1.35;
}

.diagram-export-vector-warning {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.48rem 0.58rem;
    border: 1px solid #dfbc69;
    border-radius: 8px;
    background: #fff8df;
    color: #684b05;
    font-size: 0.68rem;
    line-height: 1.4;
}

.diagram-export-dpi-field {
    display: grid;
    grid-template-columns: minmax(120px, 0.45fr) minmax(180px, 0.55fr);
    align-items: center;
    gap: 0.28rem 0.65rem;
    padding: 0.58rem 0.64rem;
    border: 1px solid #d4dfe4;
    border-radius: 10px;
    background: #fff;
}

.diagram-export-dpi-field > span {
    color: #284b5a;
    font-size: 0.72rem;
    font-weight: 750;
}

.diagram-export-dpi-field select {
    width: 100%;
    min-height: 34px;
}

.diagram-export-dpi-field small {
    grid-column: 1 / -1;
}

.diagram-export-dpi-field select:disabled {
    opacity: 0.55;
}

.diagram-export-actions {
    padding-top: 0.65rem;
    border-top: 1px solid #e3e9ed;
}

.diagram-export-progress {
    display: grid;
    grid-template-columns: minmax(100px, 0.75fr) auto;
    align-items: center;
    gap: 0.55rem;
    color: #284b5a;
    font-size: 0.7rem;
    font-weight: 700;
}

.diagram-export-progress[hidden] {
    display: none;
}

.diagram-export-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce7eb;
}

.diagram-export-progress-track > span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2a7899, #6eb5cf);
    animation: diagram-export-progress 1.05s ease-in-out infinite alternate;
}

.diagram-export-modal.is-busy .modal-backdrop {
    pointer-events: none;
}

@keyframes diagram-export-progress {
    from { transform: translateX(-10%); }
    to { transform: translateX(148%); }
}

@media (max-width: 560px) {
    .diagram-export-mode-group,
    .diagram-export-dpi-field {
        grid-template-columns: minmax(0, 1fr);
    }

    .diagram-export-vector-warning,
    .diagram-export-dpi-field small {
        grid-column: 1;
    }
}

.modal-subgrid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.reference-method-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: 1rem;
    align-items: end;
}

.reference-method-label {
    min-width: 0;
}

.reference-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.2fr);
    gap: 1rem;
}

.formula-card {
    display: grid;
    gap: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
    padding: 1rem;
}

.formula-card h4 {
    font-size: 1rem;
}

.formula-card math {
    font-size: 1.05rem;
    overflow-x: auto;
}

.process-config-note {
    padding: 0.78rem 0.9rem;
    border-radius: 14px;
    background: #f6f9fc;
    border: 1px solid #e0e7ef;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.process-config-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.process-config-summary-item {
    display: grid;
    gap: 0.28rem;
    padding: 0.72rem 0.8rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e0e8ef;
}

.process-config-summary-item span {
    color: var(--ink-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.process-config-summary-item strong {
    font-size: 1rem;
    font-weight: 600;
}

.reference-chart-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    border: 1px solid #dce6ef;
    border-radius: 14px;
    background: #fff;
    padding: 0.55rem;
}

.reference-chart-frame img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1600px) {
    .dashboard-preview-grid {
        grid-template-columns: 1fr;
    }

    .diagram-frame,
    .dashboard-preview-frame {
        min-height: 600px;
    }

    .diagram-frame {
        width: min(100%, var(--layout-diagram-width));
        justify-self: center;
    }
}

@media (max-width: 1180px) {
    .login-shell,
    .auth-grid,
    .dashboard-layout,
    .dashboard-preview-grid {
        grid-template-columns: 1fr;
    }

    .site-header,
    .section-heading,
    .header-cluster,
    .chain-toolbar-main,
    .chain-toolbar-side,
    .editor-mode-panel,
    .layout-tuner-summary,
    .layout-tuner-toolbar,
    .visual-editor-head,
    .upload-form,
    .modal-header,
    .modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .project-meta-strip {
        grid-template-columns: 1fr;
    }

    .header-project-meta,
    .chain-toolbar-side {
        grid-template-columns: 1fr;
    }

    .chain-toolbar-main {
        grid-template-columns: 1fr;
    }

    .layout-tuner-grid,
    .layout-tuner-inputs {
        grid-template-columns: 1fr;
    }

    .editor-mode-switch {
        justify-content: stretch;
    }

    .visual-editor-summary {
        justify-content: flex-start;
    }

    .chain-list-head {
        display: none;
    }

    .air-side-switch-row {
        align-items: flex-start;
    }

    .chain-table-shell,
    .chain-table-shell.is-extra-open,
    .chain-table-shell.is-extra-open .chain-entry-grid {
        grid-template-columns: 1fr;
    }

    .chain-extra-head {
        display: none !important;
    }

    .chain-table-shell.is-extra-open .chain-extra-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chain-list {
        grid-template-columns: 1fr;
    }

    .chain-entry-process-side {
        grid-column: 1;
        grid-row: auto;
    }

    .process-config-summary,
    .chain-main-row,
    .process-inline-row,
    .process-bridge-row,
    .process-bridge-strip,
    .process-bridge-side,
    .chain-entry-layout,
    .process-inline-layout,
    .guide-point-row,
    .detail-values,
    .stats-row,
    .stats-toggle-grid,
    .weather-stat-config-grid,
    .modal-grid,
    .reference-method-row,
    .reference-layout {
        grid-template-columns: 1fr;
    }

    .process-bridge-side-actions {
        justify-content: flex-start;
    }

    .process-side-card {
        grid-column: 1;
    }

    .workspace-module-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .workspace-module-nav-intro {
        display: none;
    }

    .site-footer-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer-imprint {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .brand-logo {
        width: 70px;
        height: 70px;
    }

    .workspace-module-nav {
        top: 0.25rem;
        padding: 0.42rem;
    }

    .workspace-module-nav .workspace-stack-tabs {
        grid-template-columns: repeat(5, minmax(108px, 1fr));
        overflow-x: auto;
        gap: 0.35rem;
    }

    .workspace-module-tab {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 0.38rem;
        min-height: 54px;
        padding: 0.46rem;
    }

    .workspace-module-tab-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .workspace-module-tab-icon svg {
        width: 19px;
        height: 19px;
    }

    .workspace-module-tab strong {
        font-size: 0.76rem;
    }

    .workspace-module-tab small {
        display: none;
    }

    .workspace-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .workspace-resizer {
        display: none;
    }

    .workspace-layout > .editor-card,
    .workspace-layout > .diagram-card {
        margin-left: 0;
        margin-right: 0;
    }

    .workspace-layout > .hx-diagram-pane {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .site-footer-profile,
    .site-footer-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer-profile figure {
        width: min(240px, 100%);
    }

    .site-footer-imprint {
        grid-column: auto;
    }
}

/* RLT-Auslegung ---------------------------------------------------------- */

.rlt-workspace-panel,
.rlt-lab-shell,
.rlt-lab-workbench,
.rlt-lab-main {
    width: 100%;
    min-width: 0;
}

.rlt-workspace-panel {
    container-type: inline-size;
    padding-top: 0.2rem;
}

.rlt-lab-shell {
    position: relative;
    display: grid;
    gap: 0.9rem;
    color: #20313a;
}

.rlt-lab-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #b7ceda;
    border-radius: 16px;
    background:
        linear-gradient(120deg, rgba(32, 94, 122, 0.08), rgba(255, 255, 255, 0.7)),
        #f8fbfc;
}

.rlt-lab-hero > div {
    display: grid;
    gap: 0.2rem;
    max-width: 72ch;
}

.rlt-lab-hero h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.rlt-lab-hero p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.4;
}

.rlt-lab-workbench {
    display: grid;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.rlt-navigation-panel {
    position: sticky;
    top: 5.75rem;
    grid-column: 1;
    align-self: start;
    min-width: 0;
    max-height: calc(100vh - 6.35rem);
    max-height: calc(100dvh - 6.35rem);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 1px solid #c8d3d8;
    border-radius: 14px;
    background: #f7f9fa;
    box-shadow: 0 4px 15px rgba(28, 55, 68, 0.05);
}

.rlt-navigation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.62rem;
    border-bottom: 1px solid #d5dfe3;
    border-radius: 13px 13px 0 0;
    background: #edf2f4;
}

.rlt-navigation-head > div {
    display: grid;
    gap: 0.03rem;
}

.rlt-navigation-head strong {
    font-size: 0.84rem;
}

.rlt-navigation-panel-toggle {
    flex: 0 0 auto;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0.28rem;
    border: 1px solid #b7c6cd;
    border-radius: 8px;
    background: #fff;
}

.rlt-navigation-toggle-icon {
    width: 18px;
    height: 18px;
}

.rlt-navigation-content {
    display: grid;
    gap: 0.62rem;
    padding: 0.62rem;
}

.rlt-chain-selection,
.rlt-sidebar-section {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.rlt-chain-selection {
    display: grid;
    gap: 0.48rem;
    padding: 0.58rem;
}

.rlt-sidebar-entity-group {
    min-width: 0;
    display: grid;
    gap: 0.4rem;
    padding: 0.5rem;
    border: 1px solid #d8e2e7;
    border-radius: 10px;
    background: #fbfcfd;
}

.rlt-sidebar-entity-group.is-device-group {
    border-color: #bcd2dc;
    background: linear-gradient(145deg, #f8fbfc, #eef5f8);
}

.rlt-sidebar-entity-group.is-case-group {
    border-color: #d8dee4;
    background: #fff;
}

.rlt-sidebar-entity-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.rlt-sidebar-entity-heading > span:first-child {
    min-width: 0;
    display: grid;
    gap: 0.02rem;
}

.rlt-sidebar-entity-heading strong {
    color: #244957;
    font-size: 0.72rem;
}

.rlt-sidebar-entity-heading small {
    color: var(--ink-soft);
    font-size: 0.58rem;
}

.rlt-sidebar-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.rlt-sidebar-section-title strong {
    font-size: 0.78rem;
}

.rlt-lab-shell .chain-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.38rem;
}

.rlt-lab-shell .chain-tab-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 0.3rem;
    align-items: stretch;
    min-width: 0;
}

.rlt-lab-shell .chain-tab {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.5rem;
    border-color: #d4dee4;
    border-radius: 9px;
    text-align: left;
}

.rlt-lab-shell .chain-tab-marker {
    width: 4px;
    height: 26px;
    border-radius: 999px;
    background: var(--chain-tab-color, var(--brand));
}

.chain-tab-copy {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.chain-tab-copy strong,
.chain-tab-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chain-tab-copy strong {
    font-size: 0.76rem;
}

.chain-tab-copy small {
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 500;
}

.rlt-hx-visibility-toggle {
    appearance: none;
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.28rem 0.32rem;
    border: 1px solid #cfd9df;
    border-radius: 9px;
    background: #f7fafb;
    color: #566a74;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.rlt-hx-visibility-toggle:hover,
.rlt-hx-visibility-toggle:focus-visible {
    border-color: #8299a4;
    background: #eef4f6;
    color: #304f5d;
}

.rlt-hx-visibility-toggle:focus-visible {
    outline: 2px solid #315f73;
    outline-offset: 2px;
}

.rlt-hx-visibility-toggle:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.rlt-hx-visibility-toggle.is-hx-selected:not(.is-hx-visible) {
    border-color: #8fa7b2;
    background: #edf3f6;
    color: #365866;
    box-shadow: inset 0 -2px 0 rgba(79, 112, 126, 0.18);
}

.rlt-hx-visibility-toggle.is-hx-visible {
    border-color: #c49318;
    background: linear-gradient(180deg, #f8dfa0, #eac15b);
    color: #513b00;
    box-shadow: inset 0 -2px 0 #b77d00, 0 1px 3px rgba(126, 88, 8, 0.16);
}

.rlt-hx-visibility-toggle.is-partial:not(.is-hx-visible) {
    background: linear-gradient(135deg, #edf3f6 0 48%, #cad8de 48% 52%, #edf3f6 52% 100%);
}

.rlt-hx-visibility-toggle.is-hx-visible.is-partial {
    background: linear-gradient(135deg, #f8dfa0 0 47%, #e5b947 47% 53%, #f3d47d 53% 100%);
}

.rlt-hx-visibility-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rlt-hx-toggle-copy {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
    text-align: left;
}

.rlt-hx-toggle-copy strong,
.rlt-hx-toggle-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rlt-hx-toggle-copy strong {
    font-size: 0.58rem;
    font-weight: 780;
}

.rlt-hx-toggle-copy small {
    font-size: 0.56rem;
    font-weight: 720;
}

.rlt-chain-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
}

.rlt-chain-actions #add-chain-button {
    grid-column: 1 / -1;
}

.rlt-chain-actions .button {
    min-width: 0;
    min-height: 32px;
    padding: 0.34rem 0.42rem;
    font-size: 0.69rem;
}

.rlt-preset-menu {
    position: relative;
    z-index: 58;
    justify-self: stretch;
    width: 100%;
}

.rlt-preset-menu > summary {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.34rem 0.48rem;
    list-style: none;
    border-color: #b9ccd5;
    background: #f7fafb;
    color: #315767;
    font-size: 0.69rem;
}

.rlt-preset-menu > summary::-webkit-details-marker {
    display: none;
}

.rlt-preset-menu > summary .workspace-tool-chevron {
    width: 13px;
    height: 13px;
    transition: transform 0.16s ease;
}

.rlt-preset-menu[open] > summary {
    border-color: #7da4b6;
    background: #eaf4f7;
    color: var(--brand-strong);
}

.rlt-preset-menu[open] > summary .workspace-tool-chevron {
    transform: rotate(180deg);
}

.rlt-preset-menu-panel {
    position: fixed;
    z-index: 92;
    top: var(--rlt-preset-menu-top, 6rem);
    left: var(--rlt-preset-menu-left, 18rem);
    box-sizing: border-box;
    width: var(--rlt-preset-menu-width, 280px);
    max-width: calc(100vw - 1rem);
    max-height: var(--rlt-preset-menu-max-height, calc(100dvh - 2rem));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0.48rem;
    overflow: auto;
    padding: 0.58rem;
    border: 1px solid #b9ccd5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(22, 52, 65, 0.2);
}

.rlt-preset-menu-panel::before {
    content: "";
    position: absolute;
    top: 16px;
    left: -6px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #b9ccd5;
    border-left: 1px solid #b9ccd5;
    background: #fff;
    transform: rotate(45deg);
}

.rlt-preset-menu-panel.is-below::before {
    top: -6px;
    left: 18px;
    transform: rotate(135deg);
}

.rlt-preset-menu-panel > header {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.06rem;
    padding-bottom: 0.38rem;
    border-bottom: 1px solid #e1e8ec;
}

.rlt-preset-menu-panel > header strong {
    font-size: 0.76rem;
}

.rlt-preset-menu-panel > header small {
    color: var(--ink-soft);
    font-size: 0.62rem;
}

.rlt-preset-menu-panel .chain-inline-input {
    min-width: 0;
}

.rlt-preset-menu-panel select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    overflow: hidden;
    padding: 0.28rem 2rem 0.28rem 0.5rem;
    background: #ffffff;
    color: var(--ink);
    font-size: 0.72rem;
    line-height: 1.2;
    text-overflow: ellipsis;
}

.rlt-preset-menu-panel select option {
    background: #ffffff;
    color: var(--ink);
}

.rlt-preset-menu-panel .button {
    width: 100%;
    min-height: 32px;
    padding: 0.34rem 0.54rem;
    white-space: nowrap;
    font-size: 0.69rem;
}

.rlt-sidebar-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.62rem;
    list-style: none;
    cursor: pointer;
}

.rlt-sidebar-section > summary::-webkit-details-marker {
    display: none;
}

.rlt-sidebar-section > summary strong {
    font-size: 0.76rem;
}

.rlt-sidebar-section[open] .weather-lab-disclosure-chevron {
    transform: rotate(90deg);
}

.rlt-foundation-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
    padding: 0 0.58rem 0.55rem;
}

.rlt-foundation-fields .chain-toggle-checkbox {
    grid-column: 1 / -1;
}

.rlt-foundation-fields input[type="text"],
.rlt-foundation-fields select,
.rlt-weather-pressure-readout output {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0.4rem 0.48rem;
    border-radius: 8px;
    font-size: 0.74rem;
}

.rlt-weather-pressure-readout output {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d5dfe4;
    background: #f4f8fa;
    color: #294b5c;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupling-volume-flow-override small {
    color: var(--ink-soft);
    font-size: 0.62rem;
    line-height: 1.25;
}

.rlt-schematic-indicator-toggles {
    display: block;
    gap: 0.38rem;
    padding: 0.36rem 0.46rem;
    border: 1px solid #dbe4e9;
    border-radius: 9px;
    background: #f8fbfc;
}

.rlt-exchange-swatches {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.rlt-schematic-indicator-toggles .inline-checkbox,
.rlt-schematic-indicator-toggles .inline-checkbox span {
    display: flex;
    align-items: center;
    gap: 0.34rem;
    margin: 0;
}

.rlt-exchange-swatch {
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: #147b8f;
}

.rlt-exchange-swatch.is-heat {
    background: #b93632;
}

.rlt-foundation-fields .inline-checkbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.42rem;
    font-size: 0.7rem;
    line-height: 1.25;
}

.rlt-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    padding: 0.5rem 0.58rem 0.58rem;
    border-top: 1px solid #e3e9ed;
}

.rlt-status-legend .legend-chip {
    padding: 0.14rem 0.4rem;
    font-size: 0.62rem;
}

.rlt-lab-main {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.68rem;
    padding: 0.55rem;
    border: 1px solid #c2ccd1;
    border-radius: 15px;
    background: #f4f6f7;
}

.rlt-lab-toolbar {
    position: relative;
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    gap: 0.48rem;
    align-items: end;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.rlt-active-chain-name {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.rlt-active-chain-name input {
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    min-height: 34px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
}

.rlt-active-chain-summary {
    align-self: center;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: #edf3f6;
    color: var(--ink-soft);
    font-size: 0.68rem;
    white-space: nowrap;
}

.rlt-lab-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
}

.rlt-layout-options {
    position: relative;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.rlt-layout-options > summary {
    list-style: none;
}

.rlt-layout-options > summary::-webkit-details-marker {
    display: none;
}

.rlt-layout-options[open] > summary {
    background: #dceaf0;
    color: var(--brand-strong);
    box-shadow: inset 0 -2px 0 var(--brand);
}

.rlt-layout-options-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.45rem);
    right: 0;
    width: min(720px, calc(100vw - 4rem));
    max-height: min(720px, calc(100vh - 10rem));
    overflow: auto;
    padding: 0.72rem;
    border: 1px solid #c7d5dd;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(22, 50, 64, 0.2);
}

.rlt-layout-options-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.62rem;
    border-bottom: 1px solid var(--line);
}

.rlt-layout-options-head > div:first-child {
    display: grid;
    gap: 0.12rem;
}

.rlt-layout-options-head strong {
    font-size: 0.88rem;
}

.rlt-layout-options-head span {
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.rlt-layout-options .layout-tuner-toolbar,
.rlt-layout-options .layout-tuner-groups {
    padding-left: 0;
    padding-right: 0;
}

.rlt-layout-options .layout-tuner-groups {
    padding-bottom: 0;
}

/* Compact RLT navigation and option surfaces --------------------------- */

.rlt-device-selector-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.34rem;
    min-width: 0;
}

.rlt-device-select-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 0.34rem;
    align-items: end;
    min-width: 0;
}

.rlt-device-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.34rem;
    align-items: stretch;
}

.rlt-delete-device-button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
}

.rlt-delete-device-button .app-delete-icon {
    flex: 0 0 auto;
}

.rlt-delete-device-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.rlt-device-select-line > .chain-inline-input {
    min-width: 0;
}

.rlt-device-selector-row select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding-block: 0.28rem;
    border-radius: 8px;
    font-size: 0.72rem;
}

.rlt-device-select-line > .rlt-device-hx-toggle {
    height: 40px;
    min-height: 40px;
}

.rlt-create-device-button {
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    padding: 0.34rem 0.42rem;
    border: 1px solid #a9c6d3;
    border-radius: 9px;
    background: linear-gradient(145deg, #f7fbfd, #eaf3f7);
    color: #234c60;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(24, 58, 74, 0.06);
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.rlt-create-device-button:hover,
.rlt-create-device-button:focus-visible {
    border-color: #6f9fb3;
    background: linear-gradient(145deg, #fff, #dcecf3);
    box-shadow: 0 3px 9px rgba(24, 58, 74, 0.12);
    outline: none;
}

.rlt-create-device-button:active {
    transform: translateY(1px);
}

.rlt-create-device-button > svg {
    width: 25px;
    height: 25px;
    justify-self: center;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.rlt-create-device-button > span {
    min-width: 0;
    display: grid;
    gap: 0.02rem;
}

.rlt-create-device-button strong,
.rlt-create-device-button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rlt-create-device-button strong {
    font-size: 0.7rem;
    line-height: 1.15;
}

.rlt-create-device-button small {
    color: #637a85;
    font-size: 0.58rem;
    font-weight: 550;
    line-height: 1.15;
}

.rlt-lab-toolbar {
    --rlt-toolbar-control-height: 46px;
    grid-template-columns: minmax(136px, 0.82fr) minmax(150px, 1fr) minmax(190px, 0.9fr) minmax(76px, auto);
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.42rem;
}

.rlt-active-context {
    min-width: 0;
    height: var(--rlt-toolbar-control-height);
    min-height: var(--rlt-toolbar-control-height);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 0.38rem;
    padding: 0.24rem 0.4rem;
    border: 1px solid #d8e3e8;
    border-radius: 8px;
    background: #f7fafb;
}

.rlt-active-context-icon {
    width: 27px;
    height: 27px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    background: #e3eff4;
    color: var(--brand-strong);
}

.rlt-active-context-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.rlt-active-context-copy {
    min-width: 0;
    display: grid;
    gap: 0.02rem;
}

.rlt-active-context-copy small {
    color: var(--ink-soft);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1.1;
    text-transform: uppercase;
}

.rlt-active-context-copy strong,
.rlt-active-context-copy input {
    overflow: hidden;
    color: #263c48;
    font-size: 0.72rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rlt-active-context-copy input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 22px;
    min-height: 22px;
    margin-left: -0.28rem;
    padding: 0.1rem 0.28rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    cursor: text;
}

.rlt-active-context-copy input:hover {
    border-color: #d5e0e5;
    background: #edf3f5;
}

.rlt-active-context-copy input:focus,
.rlt-active-context-copy input:focus-visible {
    border-color: var(--brand);
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(32, 94, 122, 0.14);
}

.rlt-active-chain-name {
    box-sizing: border-box;
    height: var(--rlt-toolbar-control-height);
    min-height: var(--rlt-toolbar-control-height);
    align-content: center;
    gap: 0.02rem;
    padding: 0.24rem 0.4rem;
    border: 1px solid #d8e3e8;
    border-radius: 8px;
    background: #f7fafb;
}

.rlt-active-chain-name > span {
    color: var(--ink-soft);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1.1;
    text-transform: uppercase;
}

.rlt-active-chain-name input {
    box-sizing: border-box;
    height: 22px;
    min-height: 22px;
    margin-left: -0.28rem;
    padding: 0.1rem 0.28rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #263c48;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
}

.rlt-active-chain-name input:hover {
    border-color: #d5e0e5;
    background: #edf3f5;
}

.rlt-active-chain-name input:focus,
.rlt-active-chain-name input:focus-visible {
    border-color: var(--brand);
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(32, 94, 122, 0.14);
}

.rlt-active-status-strip {
    box-sizing: border-box;
    height: var(--rlt-toolbar-control-height);
    min-width: 0;
    min-height: var(--rlt-toolbar-control-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.28rem;
    padding: 0.28rem 0.34rem;
    overflow: hidden;
    border: 1px solid #d8e3e8;
    border-radius: 8px;
    background: #f7fafb;
}

.rlt-active-chain-summary,
.rlt-active-calculation-status {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.22rem 0.42rem;
    border: 1px solid #d8e2e7;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.rlt-active-chain-summary {
    min-width: 0;
    overflow: hidden;
    background: #f3f7f9;
    color: #526973;
    text-overflow: ellipsis;
}

.rlt-active-calculation-status {
    background: #f4f6f7;
    color: #62727a;
}

.rlt-active-calculation-status > i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(98, 114, 122, 0.12);
}

.rlt-active-calculation-status.is-pending {
    border-color: #d7dee2;
    background: #f5f7f8;
    color: #68777e;
}

.rlt-active-calculation-status.is-ready {
    border-color: #75b79d;
    background: #e4f3ec;
    color: #145d47;
}

.rlt-active-calculation-status.is-error {
    border-color: #dba5a8;
    background: #fff0f1;
    color: #9a2d32;
}

.rlt-lab-toolbar-actions,
.rlt-lab-toolbar-actions > .rlt-layout-options {
    height: var(--rlt-toolbar-control-height);
    min-height: var(--rlt-toolbar-control-height);
}

.rlt-lab-toolbar-actions > .rlt-layout-options > summary.workspace-tool-button {
    min-height: var(--rlt-toolbar-control-height);
    height: var(--rlt-toolbar-control-height);
    padding-inline: 0.55rem;
}

.rlt-layout-options-panel {
    width: min(680px, calc(100vw - 3rem));
    max-height: min(690px, calc(100vh - 8rem));
    max-height: min(690px, calc(100dvh - 8rem));
    padding: 0.56rem;
    border-radius: 12px;
}

.rlt-layout-options-head {
    position: sticky;
    z-index: 3;
    top: -0.56rem;
    align-items: center;
    margin: -0.56rem -0.56rem 0.38rem;
    padding: 0.5rem 0.56rem 0.42rem;
    border-radius: 12px 12px 0 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
}

.rlt-layout-options-head > div:first-child {
    gap: 0.06rem;
}

.rlt-layout-options-head strong {
    font-size: 0.82rem;
}

.rlt-layout-options-head span {
    font-size: 0.63rem;
    line-height: 1.2;
}

.rlt-options-intro {
    margin: 0 0 0.34rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid #dce5ea;
    border-radius: 7px;
    background: #f7fafb;
    color: #60727b;
    font-size: 0.61rem;
    line-height: 1.25;
}

.rlt-options-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.14rem;
    margin-bottom: 0.38rem;
    padding: 0.16rem;
    border: 1px solid #cbd6dc;
    border-radius: 9px;
    background: #eaf0f2;
    box-shadow: inset 0 1px 2px rgba(23, 49, 61, 0.04);
}

.rlt-options-tabs > button {
    appearance: none;
    min-width: 0;
    min-height: 29px;
    padding: 0.24rem 0.3rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #40545d;
    font: inherit;
    font-size: 0.63rem;
    font-weight: 750;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.rlt-options-tabs > button:hover,
.rlt-options-tabs > button:focus-visible {
    border-color: #b6c8d0;
    background: rgba(255, 255, 255, 0.68);
    color: var(--brand-strong);
    outline: none;
}

.rlt-options-tabs > button[aria-selected="true"],
.rlt-options-tabs > button.is-active {
    border-color: #a8bec8;
    background: #fff;
    color: var(--brand-strong);
    box-shadow: inset 0 -2px 0 var(--brand), 0 1px 2px rgba(24, 54, 67, 0.1);
}

.rlt-options-pane {
    display: none;
    min-width: 0;
}

.rlt-options-pane.is-active:not([hidden]) {
    display: grid;
    gap: 0.34rem;
}

.rlt-layout-options .layout-tuner-groups {
    display: block;
}

.rlt-options-category {
    margin: 0;
    border-color: #d8e3e8;
    border-radius: 9px;
    background: #fff;
}

.rlt-options-category .layout-tuner-group-summary {
    min-height: 34px;
    padding: 0.32rem 0.42rem;
    cursor: default;
}

.rlt-options-category .layout-tuner-group-summary > div {
    min-width: 0;
}

.rlt-options-category .layout-tuner-group-summary strong {
    font-size: 0.68rem;
}

.rlt-options-category .layout-tuner-group-summary span {
    margin-top: 0.02rem;
    font-size: 0.57rem;
    line-height: 1.2;
}

.rlt-options-category .layout-tuner-group-summary .hx-appearance-reset,
.rlt-options-slider-grid .layout-tuner-control-head .hx-appearance-reset {
    flex: 0 0 auto;
}

.rlt-options-slider-grid.layout-tuner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem 0.46rem;
    padding: 0.18rem 0.42rem 0.42rem;
}

.rlt-options-slider-grid .layout-tuner-control {
    gap: 0.12rem;
    padding: 0.24rem 0.3rem;
    border: 1px solid #e2e9ed;
    border-radius: 7px;
    background: #f9fbfc;
}

.rlt-options-slider-grid .layout-tuner-control-head {
    min-height: 18px;
    gap: 0.28rem;
    font-size: 0.62rem;
    font-weight: 650;
}

.rlt-options-slider-grid .layout-tuner-control-head .hx-appearance-reset {
    width: 18px;
    height: 18px;
    font-size: 0.68rem;
}

.rlt-options-slider-grid .layout-tuner-inputs {
    grid-template-columns: minmax(54px, 1fr) 3.35rem auto;
    gap: 0.22rem;
    min-height: 28px;
}

.rlt-options-slider-grid .layout-tuner-inputs input[type="range"] {
    min-width: 0;
    width: 100%;
    margin: 0;
    accent-color: var(--brand);
}

.rlt-options-slider-grid .layout-tuner-number {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    min-height: 28px;
    padding: 0.15rem 0.24rem;
    border-radius: 6px;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
}

.rlt-options-slider-grid .layout-tuner-inputs output {
    min-width: 3.2em;
    color: #50656f;
    font-size: 0.58rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.rlt-options-select-grid {
    grid-template-columns: minmax(190px, 1fr);
}

.rlt-options-select-grid select {
    min-height: 34px;
    padding: 0.38rem 2rem 0.38rem 0.52rem;
    border-radius: 8px;
    font-family: var(--rlt-data-font-family);
    font-size: 0.78rem;
}

.rlt-options-info-card,
.rlt-options-action-card,
.rlt-coupling-option-card {
    min-width: 0;
    display: grid;
    align-items: center;
    gap: 0.42rem;
    padding: 0.38rem 0.44rem;
    border: 1px solid #dbe5ea;
    border-radius: 8px;
    background: #f7fafb;
}

.rlt-options-info-card {
    grid-template-columns: 28px minmax(0, 1fr);
}

.rlt-options-info-icon,
.rlt-coupling-option-icon {
    width: 27px;
    height: 27px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    background: #e4eff4;
    color: var(--brand-strong);
    font-size: 0.86rem;
    font-weight: 800;
}

.rlt-options-info-card > span:last-child,
.rlt-options-action-card > span:first-child,
.rlt-coupling-option-card > span:not(.rlt-coupling-option-icon) {
    min-width: 0;
    display: grid;
    gap: 0.05rem;
}

.rlt-options-info-card strong,
.rlt-options-action-card strong,
.rlt-coupling-option-card strong {
    color: #2a404b;
    font-size: 0.65rem;
    line-height: 1.2;
}

.rlt-options-info-card small,
.rlt-options-action-card small,
.rlt-coupling-option-card small {
    color: var(--ink-soft);
    font-size: 0.58rem;
    line-height: 1.25;
}

.rlt-options-action-card {
    grid-template-columns: minmax(0, 1fr) auto;
}

.rlt-options-action-card .button,
.rlt-options-action-card .workspace-tool-button {
    min-height: 29px;
    padding: 0.28rem 0.46rem;
    font-size: 0.63rem;
}

.rlt-coupling-option-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.32rem;
}

.rlt-coupling-option-card {
    grid-template-columns: 27px minmax(0, 1fr);
}

.rlt-coupling-option-card > .workspace-tool-button {
    grid-column: 2;
    justify-self: end;
    height: 32px;
    min-height: 32px;
}

.rlt-coupling-option-card.is-environment {
    border-color: #76af9a;
    background: #f7faf8;
    box-shadow: inset 3px 0 0 #176b51;
}

.rlt-coupling-option-card.is-environment .rlt-coupling-option-icon {
    background: #176b51;
    color: #fff;
}

.rlt-coupling-option-card.is-room {
    border-color: #b8cdd7;
    background: linear-gradient(145deg, #f7fafb, #eaf3f7);
}

.rlt-coupling-option-card.is-hx {
    grid-column: 1 / -1;
    border-color: #d0aa41;
    background: linear-gradient(145deg, #fff9dd, #fff1ad);
    box-shadow: inset 3px 0 0 #c58b00;
}

.rlt-coupling-option-card.is-hx .rlt-coupling-option-icon {
    background: #d59a05;
    color: #fff;
}

.rlt-layout-options-footer {
    position: sticky;
    z-index: 3;
    bottom: -0.56rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.34rem;
    margin: 0.42rem -0.56rem -0.56rem;
    padding: 0.42rem 0.56rem;
    border-top: 1px solid #dbe4e9;
    border-radius: 0 0 12px 12px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
}

.rlt-layout-options-footer .button {
    min-height: 30px;
    padding: 0.28rem 0.5rem;
    font-size: 0.64rem;
}

.rlt-bulk-style-panel {
    width: min(640px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: 1rem auto;
    padding: 0.6rem;
    border-radius: 13px;
}

.rlt-bulk-style-panel > .modal-header {
    position: sticky;
    z-index: 3;
    top: -0.6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: -0.6rem -0.6rem 0.38rem;
    padding: 0.5rem 0.6rem 0.42rem;
    border-bottom: 1px solid #dce5ea;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
}

.rlt-bulk-style-panel > .modal-header h3 {
    margin: 0.04rem 0 0;
    font-size: 0.84rem;
}

.rlt-bulk-style-panel .modal-form {
    gap: 0.38rem;
}

.rlt-bulk-style-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rlt-bulk-style-pane {
    display: none;
    min-width: 0;
}

.rlt-bulk-style-pane.is-active:not([hidden]) {
    display: block;
}

.rlt-bulk-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem 0.46rem;
    padding: 0.42rem;
    border: 1px solid #d8e3e8;
    border-radius: 9px;
    background: #f9fbfc;
}

.rlt-bulk-style-grid > .rlt-compact-style-field,
.rlt-bulk-style-grid > .rlt-bulk-checkbox {
    min-width: 0;
    padding: 0.24rem 0.3rem;
    border: 1px solid #e2e9ed;
    border-radius: 7px;
    background: #fff;
}

.rlt-bulk-style-grid select {
    width: 100%;
    min-width: 0;
    height: 28px;
    min-height: 28px;
    padding-block: 0.18rem;
    border-radius: 6px;
    font-size: 0.64rem;
}

.rlt-bulk-style-grid .rlt-bulk-checkbox {
    min-height: 28px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.34rem;
    color: #40545d;
    font-size: 0.64rem;
}

.rlt-bulk-style-panel .modal-actions {
    position: sticky;
    z-index: 3;
    bottom: -0.6rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.34rem;
    margin: 0.04rem -0.6rem -0.6rem;
    padding: 0.42rem 0.6rem;
    border-top: 1px solid #dbe4e9;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
}

.rlt-bulk-style-panel .modal-actions .button {
    min-height: 30px;
    padding: 0.28rem 0.52rem;
    font-size: 0.64rem;
}

.rlt-work-card,
.rlt-lab-shell .process-schematic-panel,
.rlt-lab-shell .coupling-panel {
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: visible;
    border: 1px solid #d1dce2;
    border-radius: 13px;
    background: #fff;
}

.rlt-work-card-head,
.rlt-lab-shell .process-schematic-head,
.rlt-lab-shell .coupling-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.48rem 0.55rem;
    border-bottom: 1px solid #e0e7eb;
    border-radius: 12px 12px 0 0;
    background: #f9fbfc;
}

.rlt-work-card.is-collapsed > .rlt-work-card-head,
.rlt-lab-shell .process-schematic-panel.is-collapsed > .process-schematic-head,
.rlt-lab-shell .coupling-panel.is-collapsed > .coupling-panel-head {
    border-bottom: 0;
    border-radius: 12px;
}

.rlt-work-card-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.rlt-work-card-title > div {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.rlt-work-card-title h3 {
    margin: 0;
    font-size: 0.88rem;
}

.rlt-work-card-summary {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.66rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rlt-work-card-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e8f1f5;
    color: var(--brand-strong);
}

.rlt-work-card-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rlt-work-card-body,
.rlt-lab-shell .process-schematic-body {
    padding: 0.55rem;
}

.rlt-resizable-panel.is-height-managed:not(.is-collapsed) {
    height: var(--rlt-panel-height);
    display: flex;
    flex-direction: column;
}

.rlt-resizable-panel.is-height-managed:not(.is-collapsed) > .rlt-work-card-head {
    flex: 0 0 auto;
}

.rlt-resizable-panel.is-height-managed:not(.is-collapsed) > .rlt-work-card-body {
    flex: 1 1 auto;
    min-height: 0;
}

.rlt-resizable-panel.is-height-managed:not(.is-collapsed) > .rlt-state-process-body,
.rlt-resizable-panel.is-height-managed:not(.is-collapsed) > .coupling-list {
    overflow: auto;
    overscroll-behavior: contain;
}

.rlt-resizable-panel.is-height-managed:not(.is-collapsed) > .process-schematic-body {
    grid-template-rows: auto minmax(0, 1fr);
}

.rlt-resizable-panel.is-height-managed:not(.is-collapsed) .process-schematic-frame {
    height: 100%;
    min-height: 0;
}

.rlt-panel-height-resizer {
    flex: 0 0 14px;
    height: 14px;
    min-height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    border-top: 1px solid #dbe3e7;
    border-radius: 0 0 12px 12px;
    background: #f7f9fa;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
}

.rlt-panel-height-resizer > span {
    width: 3.2rem;
    height: 4px;
    border-radius: 999px;
    background: #9eafb7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.rlt-panel-height-resizer:is(:hover, :focus-visible),
.rlt-resizable-panel.is-resizing-height > .rlt-panel-height-resizer {
    background: #edf5f8;
    outline: none;
}

.rlt-panel-height-resizer:is(:hover, :focus-visible) > span,
.rlt-resizable-panel.is-resizing-height > .rlt-panel-height-resizer > span {
    background: var(--brand);
}

.rlt-resizable-panel.is-collapsed > .rlt-panel-height-resizer {
    display: none;
}

.rlt-state-process-panel.is-collapsed .rlt-state-process-body,
.rlt-lab-shell .coupling-panel.is-collapsed .coupling-list {
    display: none;
}

.rlt-lab-shell .coupling-panel.is-collapsed .coupling-panel-description {
    display: inline;
}

.rlt-disclosure-button .workspace-tool-chevron {
    transition: transform 0.16s ease;
}

.rlt-disclosure-button[aria-expanded="false"] .workspace-tool-chevron {
    transform: rotate(-90deg);
}

.rlt-lab-shell .process-schematic-head .workspace-tool-button {
    min-width: unset;
    min-height: 34px;
    height: 34px;
    padding: 0.38rem 0.55rem;
    font-size: 0.74rem;
}

.rlt-lab-shell .process-schematic-head .workspace-tool-button.is-icon-only {
    width: 34px;
    min-width: 34px;
    padding: 0;
}

.rlt-lab-shell .process-schematic-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.55rem;
    align-items: end;
    padding: 0;
}

.rlt-lab-shell .flow-palette-caption {
    display: none;
    font-size: 0.65rem;
}

.rlt-lab-shell .flow-palette-item {
    min-height: 32px;
    padding: 0.36rem 0.55rem;
    border-radius: 8px;
    font-size: 0.72rem;
}

.rlt-lab-shell .symbol-browser {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    max-height: min(390px, 46vh);
    margin-top: 0.1rem;
}

.rlt-schematic-style-popover {
    position: fixed;
    z-index: 64;
    top: var(--rlt-schematic-options-top, 6rem);
    left: var(--rlt-schematic-options-left, 1rem);
    width: var(--rlt-schematic-options-width, min(680px, calc(100vw - 2rem)));
    max-width: calc(100vw - 1.25rem);
    max-height: var(--rlt-schematic-options-max-height, calc(100dvh - 7rem));
}

.rlt-schematic-style-popover.hidden {
    display: none;
}

.rlt-schematic-style-popover .rlt-schematic-style-panel {
    position: relative;
    width: 100%;
    max-width: none;
    max-height: inherit;
    overflow: auto;
    border: 1px solid #b8cbd4;
    box-shadow: 0 18px 48px rgba(18, 45, 58, 0.24);
}

.rlt-schematic-style-popover.is-floating-over-hx .rlt-schematic-style-panel {
    border-color: #9fb9c5;
}

.rlt-schematic-help {
    position: relative;
    align-self: end;
}

.rlt-schematic-help > summary {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0.36rem 0.55rem;
    border: 1px solid #cbd8df;
    border-radius: 8px;
    background: #f7fafb;
    color: #38586a;
    font-size: 0.7rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.rlt-schematic-help > summary::-webkit-details-marker {
    display: none;
}

.rlt-schematic-help p {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.4rem);
    right: 0;
    width: min(360px, calc(100vw - 4rem));
    margin: 0;
    padding: 0.6rem;
    border: 1px solid #cbd8df;
    border-radius: 10px;
    background: #fff;
    color: var(--ink-soft);
    box-shadow: 0 12px 28px rgba(22, 50, 64, 0.16);
    font-size: 0.72rem;
    line-height: 1.4;
}

.rlt-lab-shell .process-schematic-frame {
    min-height: 220px;
    margin-top: 0.52rem;
}

.rlt-lab-shell .table-editor-panel {
    gap: 0.42rem;
}

.rlt-lab-shell .air-side-switch-row {
    margin: 0;
    padding-bottom: 0.42rem;
    border-bottom: 1px solid #e4eaee;
}

.rlt-lab-shell .air-side-switches {
    gap: 0.35rem;
}

.rlt-lab-shell .air-side-switches .button {
    min-height: 32px;
    padding: 0.35rem 0.55rem;
    font-size: 0.72rem;
}

.rlt-table-column-picker,
.rlt-row-options,
.rlt-bulk-options {
    position: relative;
}

.rlt-table-column-picker > summary,
.rlt-row-options > summary,
.rlt-bulk-options > summary {
    list-style: none;
}

.rlt-table-column-picker > summary::-webkit-details-marker,
.rlt-row-options > summary::-webkit-details-marker,
.rlt-bulk-options > summary::-webkit-details-marker {
    display: none;
}

.rlt-bulk-options[open] {
    z-index: 45;
}

.rlt-bulk-options[open] > summary {
    border-color: #7fa9bc;
    background: #e9f3f7;
    color: var(--brand-strong);
}

.rlt-bulk-chevron {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    transition: transform 0.15s ease;
}

.rlt-bulk-options[open] .rlt-bulk-chevron {
    transform: rotate(180deg);
}

.rlt-bulk-options-menu {
    position: absolute;
    z-index: 48;
    top: calc(100% + 0.36rem);
    right: 0;
    width: min(260px, calc(100vw - 2rem));
    display: grid;
    gap: 0.18rem;
    padding: 0.42rem;
    border: 1px solid #c9d8e1;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(19, 48, 62, 0.18);
}

.rlt-bulk-options-menu header {
    display: grid;
    gap: 0.04rem;
    padding: 0.16rem 0.2rem 0.28rem;
    border-bottom: 1px solid #e1e8ec;
}

.rlt-bulk-options-menu header strong {
    font-size: 0.76rem;
}

.rlt-bulk-options-menu header small {
    color: var(--ink-soft);
    font-size: 0.62rem;
}

.rlt-bulk-options-menu > button {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.34rem 0.42rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.7rem;
    text-align: left;
    cursor: pointer;
}

.rlt-bulk-options-menu > button:hover,
.rlt-bulk-options-menu > button:focus-visible {
    background: #edf5f8;
    outline: none;
}

.rlt-table-column-picker > summary {
    min-height: 34px;
    height: 34px;
}

.rlt-table-column-menu {
    position: absolute;
    z-index: 42;
    top: calc(100% + 0.38rem);
    right: 0;
    width: min(410px, calc(100vw - 2rem));
    padding: 0.62rem;
    border: 1px solid #c9d8e1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(19, 48, 62, 0.18);
}

.rlt-table-column-menu header {
    display: grid;
    gap: 0.1rem;
    margin-bottom: 0.5rem;
}

.rlt-table-column-menu header strong {
    font-size: 0.8rem;
}

.rlt-table-column-menu header small {
    color: var(--ink-soft);
    font-size: 0.68rem;
    line-height: 1.3;
}

.rlt-table-column-presets {
    display: flex;
    gap: 0.34rem;
    margin-bottom: 0.48rem;
}

.rlt-table-column-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.26rem 0.48rem;
}

.rlt-table-column-grid .inline-checkbox {
    min-height: 30px;
    padding: 0.28rem 0.38rem;
    border: 1px solid #dde6eb;
    border-radius: 8px;
    background: #f9fbfc;
    font-size: 0.7rem;
}

.rlt-row-options {
    z-index: 6;
    justify-self: start;
}

.rlt-row-options.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--chain-button-size);
    width: var(--chain-button-size);
    height: var(--chain-button-size);
    min-height: var(--chain-button-size);
    padding: 0;
    border-color: #cbd8df;
    background: #f7fafb;
    color: #335a6d;
    cursor: pointer;
}

.rlt-row-options.button:hover,
.rlt-row-options.button:focus-visible,
.rlt-row-options.button[aria-expanded="true"] {
    border-color: #7fa9bc;
    background: #e9f3f7;
    color: var(--brand-strong);
}

.rlt-row-options[open] {
    z-index: 35;
}

.rlt-row-options > summary.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--chain-button-size);
    width: var(--chain-button-size);
    height: var(--chain-button-size);
    padding: 0;
    border-color: #cbd8df;
    background: #f7fafb;
    color: #335a6d;
    cursor: pointer;
}

.rlt-row-options[open] > summary.button {
    border-color: #7fa9bc;
    background: #e9f3f7;
    color: var(--brand-strong);
}

.rlt-row-action-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rlt-row-options-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.3rem);
    left: 0;
    display: grid;
    width: 205px;
    padding: 0.32rem;
    border: 1px solid #c9d8e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(21, 48, 61, 0.18);
}

.rlt-row-options-menu.has-environment-assignment {
    width: min(390px, calc(100vw - 2rem));
    gap: 0.12rem;
}

.rlt-environment-assignment {
    display: grid;
    gap: 0.34rem;
    margin: 0.12rem 0 0.24rem;
    padding: 0.42rem;
    border: 1px solid #cbdde1;
    border-radius: 8px;
    background: #f7fafb;
}

.rlt-environment-assignment.is-coupled {
    border-color: #71b69d;
    background: #e8f6f0;
}

.rlt-environment-assignment > header {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    color: #315c68;
}

.rlt-environment-assignment.is-coupled > header {
    color: #176b51;
}

.rlt-environment-assignment > header > span {
    display: grid;
    gap: 0.02rem;
}

.rlt-environment-assignment > header small {
    color: #637780;
    font-size: 0.6rem;
}

.rlt-environment-assignment.is-coupled > header small {
    padding: 0.1rem 0.3rem;
    border-radius: 999px;
    background: #176b51;
    color: #fff;
    font-weight: 750;
}

.rlt-environment-assignment > label,
.rlt-environment-assignment-grid > label {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    color: #526771;
    font-size: 0.62rem;
}

.rlt-environment-assignment select {
    width: 100%;
    min-width: 0;
    height: 1.75rem;
    padding: 0.2rem 0.34rem;
    border-radius: 6px;
    font-size: 0.68rem;
}

.rlt-environment-assignment-grid {
    display: grid;
    grid-template-columns: minmax(105px, 1fr) auto auto;
    align-items: end;
    gap: 0.28rem;
}

.rlt-row-options-menu .rlt-environment-assignment-grid > button {
    width: auto;
    min-height: 1.75rem;
    padding: 0.22rem 0.48rem;
    border: 1px solid #b9cbd2;
    background: #fff;
    font-size: 0.66rem;
}

.rlt-row-options-menu .rlt-environment-assignment-grid > .rlt-environment-assignment-apply:not(:disabled) {
    border-color: #176b51;
    background: #176b51;
    color: #fff;
}

.rlt-row-options-menu .rlt-environment-assignment-grid > .rlt-environment-assignment-clear {
    color: #7f3940;
}

.rlt-environment-assignment-route {
    display: grid;
    gap: 0.05rem;
    margin: 0;
    padding-top: 0.28rem;
    border-top: 1px solid rgba(70, 96, 105, 0.16);
    color: #38545f;
    font-size: 0.61rem;
    line-height: 1.3;
}

.rlt-environment-assignment-route small {
    color: #6b7f87;
    font-size: 0.54rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rlt-environment-assignment-note {
    margin: 0;
    color: #667982;
    font-size: 0.59rem;
    line-height: 1.3;
}

.rlt-row-options-menu button {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 0.48rem;
    padding: 0.36rem 0.48rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.72rem;
    text-align: left;
    cursor: pointer;
}

.rlt-row-options-menu button:hover,
.rlt-row-options-menu button:focus-visible {
    background: #edf5f8;
    outline: none;
}

.rlt-row-options-menu button.is-environment-coupled {
    color: #fff;
    background: #176b51;
}

.rlt-row-options-menu button.is-environment-coupled:hover,
.rlt-row-options-menu button.is-environment-coupled:focus-visible {
    background: #10543f;
}

.rlt-row-options-menu button.is-danger {
    color: #9a2d32;
}

.rlt-row-options-menu button.is-danger:hover,
.rlt-row-options-menu button.is-danger:focus-visible {
    background: #fff0f1;
}

.rlt-row-options-menu button:disabled {
    opacity: 0.42;
    cursor: default;
}

.rlt-row-menu-glyph {
    width: 15px;
    flex: 0 0 15px;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}

.rlt-info-button {
    color: #315e73;
    border-color: #c6d6de;
    background: #f7fafb;
}

.chain-table-shell:has(.rlt-row-options[open]) {
    padding-bottom: 8.5rem;
}

.chain-table-shell:has(.rlt-row-options[open] .rlt-row-options-menu.has-environment-assignment) {
    padding-bottom: 15rem;
}

.chain-table-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(var(--chain-base-table-min-width), 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.chain-table-shell.is-extra-open {
    /* Calculated values only need room for their number. The scientific
       symbol and unit live once in the aligned header above. */
    --chain-extra-table-width: calc(var(--rlt-extra-column-count, 1) * 76px);
    grid-template-columns: minmax(var(--chain-base-table-min-width), 1fr) var(--chain-extra-table-width);
}

.chain-table-shell .chain-list-head {
    display: grid;
    min-width: var(--chain-base-table-min-width);
}

.chain-table-shell .chain-list {
    min-width: var(--chain-base-table-min-width);
}

.chain-table-shell .chain-entry-grid {
    grid-template-columns: minmax(var(--chain-base-table-min-width), 1fr);
}

.chain-table-shell.is-extra-open .chain-entry-grid {
    grid-template-columns: minmax(var(--chain-base-table-min-width), 1fr) var(--chain-extra-table-width);
}

.chain-table-shell .chain-main-row,
.chain-table-shell .process-main-row {
    grid-template-columns: var(--chain-grid-columns);
}

.chain-extra-head,
.chain-extra-row,
.chain-extra-row-state,
.chain-extra-row-process {
    grid-template-columns: repeat(var(--rlt-extra-column-count, 1), minmax(68px, 1fr));
}

.chain-extra-row-state,
.chain-extra-row-process {
    min-height: var(--chain-state-row-height);
    padding: 0.18rem 0.24rem;
    border-radius: 5px;
}

.chain-extra-row-process {
    min-height: var(--chain-process-row-height);
}

.chain-extra-head {
    gap: 0.16rem;
    padding-inline: 0.18rem;
}

.chain-extra-heading {
    display: grid;
    min-width: 0;
    gap: 0.04rem;
    justify-items: center;
    text-align: center;
    line-height: 1.05;
}

.chain-extra-heading b {
    color: var(--ink);
    font-size: calc(var(--chain-head-font-size) + 0.08rem);
    font-weight: 650;
}

.chain-extra-heading small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: max(0.58rem, calc(var(--chain-head-font-size) - 0.04rem));
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chain-extra-row {
    gap: 0.16rem;
    padding-inline: 0.18rem;
}

.chain-extra-cell {
    padding-inline: 0.16rem;
}

.chain-extra-row-state .chain-extra-cell,
.chain-extra-row-process .chain-extra-cell {
    padding-block: 0.08rem;
}

.chain-extra-value {
    width: 100%;
    font-size: var(--chain-value-font-size);
    font-weight: 560;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.chain-main-row,
.process-main-row,
.chain-extra-row {
    border-radius: 5px;
}

@media (max-width: 620px) {
    .table-editor-panel {
        --chain-base-table-min-width: 690px;
        /* Project-specific desktop tuning is stored as inline custom
           properties.  Mobile needs independent touch-safe columns. */
        --chain-col-checkbox: 44px !important;
        --chain-col-action: 40px !important;
        --chain-col-label: 120px !important;
        --chain-col-field: 70px !important;
        --chain-col-status: 80px !important;
    }
}

.chain-entry + .chain-entry .chain-main-row,
.chain-entry + .chain-entry .chain-extra-row {
    border-top-color: #e5ebef;
}

.rlt-node-popover {
    position: fixed;
    font-family: var(--rlt-data-font-family);
    z-index: 120;
    width: min(440px, calc(100vw - 20px));
    max-height: min(78vh, 680px);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.68rem;
    border: 1px solid #aebfca;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.985);
    color: var(--ink);
    box-shadow: 0 18px 44px rgba(16, 42, 56, 0.24);
    backdrop-filter: blur(8px);
    overflow: hidden;
}

.rlt-node-popover::before {
    content: "";
    position: absolute;
    left: var(--rlt-popover-arrow-x, 50%);
    top: -7px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #aebfca;
    border-left: 1px solid #aebfca;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
}

.rlt-node-popover.is-above::before {
    top: auto;
    bottom: -7px;
    border: 0;
    border-right: 1px solid #aebfca;
    border-bottom: 1px solid #aebfca;
}

.rlt-node-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding-bottom: 0.42rem;
    border-bottom: 1px solid #e0e7eb;
}

.rlt-node-popover-head > div {
    min-width: 0;
    display: grid;
    gap: 0.04rem;
}

.rlt-node-popover-head small {
    color: var(--ink-soft);
    font-size: 0.65rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.rlt-node-popover-head strong {
    overflow: hidden;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rlt-node-popover-head > button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: #f0f4f6;
    color: #405b69;
    font-size: 1.05rem;
    cursor: pointer;
}

.rlt-node-popover-head.is-environment {
    color: #176b51;
}

.rlt-node-popover-head.is-environment .status-badge {
    margin-left: auto;
    border-color: #8fc8b2;
    background: #e7f5ee;
    color: #176b51;
}

.rlt-coupling-popover-pane {
    gap: 0.4rem;
}

.rlt-environment-boundary-intro {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.42rem 0.48rem;
    border: 1px solid #a7d1c1;
    border-radius: 9px;
    background: #eaf7f1;
    color: #176b51;
}

.rlt-environment-boundary-intro > svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.rlt-environment-boundary-intro > span {
    min-width: 0;
    display: grid;
    gap: 0.04rem;
}

.rlt-environment-boundary-intro strong {
    font-size: 0.76rem;
}

.rlt-environment-boundary-intro small {
    color: #4b6d60;
    font-size: 0.62rem;
    line-height: 1.3;
}

.rlt-environment-boundary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
}

.rlt-environment-boundary-grid label {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
    color: #526771;
    font-size: 0.64rem;
}

.rlt-environment-boundary-grid select {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0.24rem 0.38rem;
    border-radius: 7px;
    font-size: 0.7rem;
}

.rlt-environment-boundary-routes {
    display: grid;
    gap: 0.24rem;
}

.rlt-environment-boundary-route {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(72px, 0.65fr) auto minmax(100px, 1fr);
    align-items: center;
    gap: 0.28rem;
    padding: 0.3rem 0.38rem;
    border: 1px solid #d8e4df;
    border-radius: 8px;
    background: #fafcfb;
    color: #587067;
}

.rlt-environment-boundary-route.is-assigned {
    border-color: #91c8b4;
    background: #eff8f4;
    color: #176b51;
}

.rlt-environment-boundary-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #dff2e9;
}

.rlt-environment-boundary-icon svg {
    width: 15px;
    height: 15px;
}

.rlt-environment-boundary-route > span:not(.rlt-environment-boundary-icon) {
    min-width: 0;
    display: grid;
    gap: 0.02rem;
}

.rlt-environment-boundary-route small {
    color: #6a7e76;
    font-size: 0.54rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.rlt-environment-boundary-route strong {
    overflow: hidden;
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rlt-environment-boundary-route > i {
    color: #5a927c;
    font-style: normal;
}

.rlt-coupling-popover-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.rlt-node-popover .coupling-environment-assignment {
    gap: 0.34rem;
    padding: 0.42rem;
}

.rlt-node-popover .coupling-environment-assignment-fields {
    grid-template-columns: minmax(0, 1.35fr) minmax(88px, 0.65fr);
    gap: 0.3rem;
}

.rlt-node-popover .coupling-environment-assignment-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.rlt-node-popover .coupling-weather-route {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.rlt-node-popover .coupling-weather-route > em {
    grid-column: 1 / -1;
    justify-self: end;
}

.rlt-node-popover .coupling-diagram-config {
    padding: 0.42rem;
    border: 1px solid #d9e3e8;
    border-radius: 9px;
    background: #fafcfd;
}

@media (max-width: 520px) {
    .rlt-environment-boundary-grid,
    .rlt-node-popover .coupling-environment-assignment-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .rlt-environment-boundary-route {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .rlt-environment-boundary-route > i {
        display: none;
    }
}

.rlt-node-popover-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: end;
}

.rlt-node-popover-primary.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.rlt-node-popover-primary > label:first-child,
.rlt-node-popover-field {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
    color: var(--ink-soft);
    font-size: 0.67rem;
}

.rlt-node-popover-primary input[type="text"],
.rlt-node-popover-field input,
.rlt-node-popover-field select {
    width: 100%;
    height: 32px;
    padding: 0.34rem 0.46rem;
    border-radius: 8px;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.rlt-node-popover-field input[type="color"] {
    min-height: 32px;
    padding: 0.18rem;
}

.rlt-node-popover-primary .inline-checkbox {
    min-height: 32px;
    padding: 0.36rem 0.44rem;
    border: 1px solid #d9e3e8;
    border-radius: 8px;
    background: #f8fbfc;
    font-size: 0.68rem;
}

.rlt-node-popover-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.rlt-compact-style-field {
    min-width: 0;
    display: grid;
    align-content: end;
    gap: 0.14rem;
    color: var(--ink-soft);
    font-size: 0.64rem;
}

.rlt-compact-style-field > span:first-child {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.18rem;
    overflow: hidden;
    font-weight: 650;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rlt-compact-style-field > span:first-child small {
    font-size: 0.56rem;
    font-weight: 500;
}

.rlt-compact-slider-pair {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(54px, 1fr) 3.35rem;
    align-items: center;
    gap: 0.22rem;
    min-height: 28px;
}

.rlt-compact-slider-pair input[type="range"] {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    accent-color: var(--brand);
}

.rlt-compact-slider-pair input[type="number"] {
    min-width: 0;
    width: 100%;
    height: 28px;
    min-height: 28px;
    padding: 0.16rem 0.24rem;
    border-radius: 6px;
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.rlt-compact-color-field > input[type="color"],
.rlt-compact-color-field > .hx-color-control {
    width: 100%;
    height: 28px;
    min-height: 28px;
}

.rlt-compact-color-field .hx-color-control > input[type="color"] {
    min-width: 0;
    width: 100%;
    height: 28px;
    min-height: 28px;
    padding: 0.1rem;
    border-radius: 6px;
}

.rlt-compact-color-field .hx-color-control-action {
    flex-basis: 28px;
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 6px;
}

.rlt-node-popover-tabs {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    flex: 0 0 auto;
}

.rlt-node-popover-pane {
    display: grid;
    gap: 0.48rem;
    min-height: 0;
    overflow-y: auto;
    padding: 0.02rem 0.08rem 0.08rem;
    overscroll-behavior: contain;
}

.rlt-node-popover-style-grid,
.rlt-node-popover-parameter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 0.38rem;
    align-items: end;
}

.rlt-wrg-bypass-control {
    grid-column: 1 / -1;
    padding: 0.34rem 0.4rem;
    border: 1px solid #d9e3e8;
    border-radius: 8px;
    background: #f8fbfc;
}

.rlt-wrg-bypass-control > small {
    color: var(--ink-soft);
    font-size: 0.59rem;
    line-height: 1.25;
}

.rlt-wrg-bypass-buttons {
    display: grid;
    grid-template-columns: 0.55fr 1fr 1fr;
    gap: 0.2rem;
}

.rlt-wrg-bypass-buttons button {
    min-width: 0;
    min-height: 30px;
    padding: 0.24rem 0.32rem;
    border: 1px solid #cbd8df;
    border-radius: 7px;
    background: #fff;
    color: #243741;
    font: inherit;
    font-size: 0.63rem;
    cursor: pointer;
}

.rlt-wrg-bypass-buttons button.is-active {
    border-color: #4b91ad;
    background: #dceff6;
    color: #123f53;
    box-shadow: inset 0 -2px 0 #4b91ad;
    font-weight: 700;
}

.rlt-node-popover-identity-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 0.8fr);
    gap: 0.3rem;
    align-items: end;
    padding: 0.38rem;
    border: 1px solid #dce5e9;
    border-radius: 9px;
    background: #f8fbfc;
}

.rlt-node-popover-identity-grid .rlt-node-popover-field > strong,
.rlt-node-popover-static-value {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0.34rem 0.46rem;
    border: 1px solid #dce5e9;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 0.72rem;
    line-height: 1.15;
}

.rlt-node-popover-topology-intro {
    display: grid;
    gap: 0.1rem;
    padding: 0.4rem 0.48rem;
    border: 1px solid #cfe0e6;
    border-radius: 9px;
    background: #f2f8fa;
}

.rlt-node-popover-topology-intro strong {
    font-size: 0.72rem;
}

.rlt-node-popover-topology-intro small {
    color: var(--ink-soft);
    font-size: 0.63rem;
    line-height: 1.3;
}

.rlt-node-popover-topology-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.38rem;
}

.rlt-node-popover-topology-card {
    min-width: 0;
    display: grid;
    gap: 0.34rem;
    padding: 0.42rem;
    border: 1px solid #dce5e9;
    border-radius: 9px;
    background: #fbfcfd;
}

.rlt-node-popover-topology-card > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
}

.rlt-node-popover-topology-card > header strong {
    font-size: 0.7rem;
}

.rlt-node-popover-topology-card > header small {
    color: var(--ink-soft);
    font-size: 0.59rem;
}

.schematic-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem 0.46rem;
}

#schematic-style-modal .modal-panel {
    width: 100%;
    max-width: none;
    max-height: inherit;
}

#schematic-style-modal .modal-form {
    gap: 0.58rem;
}

.rlt-node-popover-style-grid .inline-checkbox,
.rlt-node-popover-parameter-grid .inline-checkbox {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.34rem 0.42rem;
    border: 1px solid #d9e3e8;
    border-radius: 8px;
    background: #f8fbfc;
    color: var(--ink-soft);
    font-size: 0.67rem;
}

.rlt-node-popover-style-grid .inline-checkbox input,
.rlt-node-popover-parameter-grid .inline-checkbox input {
    width: auto;
    height: auto;
    margin: 0;
}

.rlt-node-popover-calculation {
    display: grid;
    gap: 0.36rem;
}

.rlt-node-popover-calculation .calc-step {
    margin: 0;
    padding: 0.44rem 0.5rem;
    border: 1px solid #dce5e9;
    border-radius: 8px;
    background: #fbfcfd;
}

.rlt-node-popover-calculation .calc-step h4 {
    margin: 0 0 0.16rem;
    font-size: 0.7rem;
}

.rlt-node-popover-calculation .calc-formula {
    overflow-wrap: anywhere;
    font-size: 0.68rem;
}

.rlt-node-popover-action-card {
    display: grid;
    gap: 0.4rem;
    padding: 0.56rem;
    border: 1px solid #ecd3d3;
    border-radius: 9px;
    background: #fff8f8;
}

.rlt-node-popover-action-card strong,
.rlt-node-popover-action-card p {
    margin: 0;
}

.rlt-node-popover-action-card p {
    color: var(--ink-soft);
    font-size: 0.69rem;
    line-height: 1.35;
}

.rlt-node-popover-action-card .button {
    justify-self: end;
}

.rlt-node-popover-process-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.rlt-node-popover-process-summary span {
    padding: 0.2rem 0.4rem;
    border: 1px solid #d7e2e8;
    border-radius: 999px;
    background: #f7fafb;
    color: var(--ink-soft);
    font-size: 0.65rem;
}

.rlt-node-popover-process-specific {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.08rem;
    padding-top: 0.48rem;
    border-top: 1px solid #e1e8ec;
}

.rlt-node-popover-process-specific > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.rlt-node-popover-process-specific > header strong {
    font-size: 0.72rem;
}

.rlt-node-popover-process-specific > header small {
    color: var(--ink-soft);
    font-size: 0.63rem;
}

.rlt-node-popover-subgroup {
    display: grid;
    gap: 0.38rem;
    padding: 0.42rem;
    border: 1px solid #e0e8ec;
    border-radius: 9px;
    background: #fafcfd;
}

.rlt-node-popover-subgroup > .inline-checkbox {
    display: flex;
    align-items: center;
    gap: 0.34rem;
    color: var(--ink-soft);
    font-size: 0.68rem;
}

.rlt-node-popover-subgroup > .inline-checkbox input {
    margin: 0;
}

.rlt-node-popover-style-grid.is-disabled {
    opacity: 0.56;
}

.rlt-node-popover-umluft-style-list {
    display: grid;
    gap: 0.36rem;
}

.rlt-node-popover-umluft-style-list > article {
    display: grid;
    grid-template-columns: minmax(76px, 0.7fr) minmax(88px, 0.72fr) minmax(150px, 1.5fr);
    gap: 0.38rem;
    align-items: end;
    padding: 0.38rem 0.42rem;
    border: 1px solid #e0e8ec;
    border-radius: 9px;
    background: #fafcfd;
}

.rlt-node-popover-umluft-style-list > article > strong {
    align-self: center;
    color: var(--ink-soft);
    font-size: 0.67rem;
}

@media (max-width: 620px) {
    .rlt-node-popover-umluft-style-list > article {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rlt-node-popover-status {
    display: flex;
    align-items: center;
    gap: 0.44rem;
    min-width: 0;
    color: var(--ink-soft);
    font-size: 0.67rem;
    line-height: 1.3;
}

.rlt-node-popover-status > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rlt-node-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.34rem;
    padding-top: 0.12rem;
}

.rlt-node-popover-actions .button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.34rem 0.52rem;
    font-size: 0.69rem;
}

.rlt-node-popover-actions .rlt-popover-action-button {
    min-height: 32px;
    padding: 0.34rem 0.52rem;
    font-size: 0.69rem;
}

.rlt-node-popover-actions .rlt-popover-action-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.rlt-node-popover-actions .rlt-popover-action-button .workspace-tool-icon {
    width: 16px;
    height: 16px;
}

.rlt-label-position-actions {
    align-items: center;
}

.rlt-label-position-actions .rlt-label-position-button {
    margin-right: auto;
    border-color: #9bbdca;
    background: #eef7fa;
    color: #155f7d;
}

.rlt-label-position-button .rlt-row-action-icon {
    width: 16px;
    height: 16px;
}

.rlt-node-popover-note {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.75rem;
    line-height: 1.4;
}

.rlt-lab-shell.is-navigation-collapsed .rlt-lab-workbench {
    grid-template-columns: minmax(0, 1fr);
}

.rlt-lab-shell.is-navigation-collapsed .rlt-navigation-panel {
    display: none;
}

.rlt-lab-shell.is-navigation-collapsed .rlt-lab-main {
    grid-column: 1;
}

.workspace-tool-button.rlt-navigation-restore-tab {
    position: fixed;
    z-index: 48;
    top: 50%;
    left: 0;
    display: none;
    width: 30px;
    min-width: 30px;
    height: 64px;
    min-height: 64px;
    padding: 0;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: var(--brand-strong);
    color: #fff;
    box-shadow: 0 8px 24px rgba(15, 68, 92, 0.28);
    transform: translateY(-50%);
}

.rlt-lab-shell.is-navigation-collapsed .rlt-navigation-restore-tab {
    display: inline-flex;
}

@container (max-width: 820px) {
    .rlt-lab-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .rlt-navigation-panel,
    .rlt-lab-main {
        grid-column: 1;
    }

    .rlt-navigation-panel {
        position: static;
        grid-row: 1;
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
        scrollbar-gutter: auto;
    }

    .rlt-lab-main {
        grid-row: 2;
    }

    .rlt-lab-toolbar {
        grid-template-columns: minmax(116px, 0.82fr) minmax(130px, 1fr) minmax(170px, 0.9fr) minmax(76px, auto);
        align-items: stretch;
    }

    .rlt-active-context {
        grid-column: 1;
        grid-row: 1;
    }

    .rlt-active-chain-name {
        grid-column: 2;
        grid-row: 1;
    }

    .rlt-active-status-strip {
        grid-column: 3;
        grid-row: 1;
    }

    .rlt-lab-toolbar-actions {
        grid-column: 4;
        grid-row: 1;
    }

    .rlt-lab-shell .process-schematic-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rlt-schematic-help {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@container (max-width: 520px) {
    .rlt-lab-hero {
        padding: 0.72rem;
    }

    .rlt-navigation-content,
    .rlt-lab-main,
    .rlt-work-card-body,
    .rlt-lab-shell .process-schematic-body {
        padding: 0.44rem;
    }

    .rlt-lab-toolbar {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .rlt-active-context,
    .rlt-active-chain-name,
    .rlt-active-status-strip,
    .rlt-lab-toolbar-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .rlt-lab-toolbar-actions {
        justify-content: flex-start;
    }

    .rlt-options-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rlt-options-slider-grid.layout-tuner-grid,
    .rlt-bulk-style-grid,
    .rlt-coupling-option-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .rlt-options-action-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .rlt-options-action-card .button {
        justify-self: stretch;
    }

    .rlt-work-card-head,
    .rlt-lab-shell .process-schematic-head,
    .rlt-lab-shell .coupling-panel-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .rlt-work-card-head .header-cluster {
        width: 100%;
        justify-content: flex-end;
    }

    .rlt-lab-shell .process-schematic-toolbar {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .rlt-lab-shell .schematic-state-values-control {
        justify-content: flex-start;
    }
}

@media (max-width: 1180px) {
    .workspace-layout.is-rlt-active {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    .workspace-layout.is-rlt-active > .editor-card,
    .workspace-layout.is-rlt-active > .diagram-card {
        margin-left: 0;
        margin-right: 0;
    }

    .workspace-layout.is-rlt-active > .workspace-resizer {
        display: none;
    }

    .workspace-layout.is-rlt-active > .hx-diagram-pane {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* Wetterlabor ------------------------------------------------------------ */

.workspace-stack-panel[data-workspace-panel="weather"],
.workspace-stack-panel[data-workspace-panel="weather"] .weather-lab,
.workspace-stack-panel[data-workspace-panel="weather"] .weather-lab-main,
.workspace-stack-panel[data-workspace-panel="weather"] .weather-lab-panel-grid {
    width: 100%;
    min-width: 0;
}

.workspace-stack-panel[data-workspace-panel="weather"] {
    position: relative;
}

.weather-shell-toolbar {
    position: absolute;
    z-index: 18;
    top: 7.1rem;
    left: calc(270px + 0.2rem);
    width: 0;
    height: 0;
}

.weather-shell-toolbar .workspace-tool-button {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 26px;
    width: 26px;
    height: 46px;
    padding: 0;
    border: 1px solid #b8c8d0;
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: #fff;
    box-shadow: 4px 2px 10px rgba(22, 50, 64, 0.1);
    transform: translateX(-1px);
}

.weather-shell-toolbar .workspace-tool-button:hover,
.weather-shell-toolbar .workspace-tool-button[aria-expanded="true"] {
    border-color: #aac1cc;
}

.workspace-stack-panel[data-workspace-panel="weather"].is-weather-navigation-collapsed .weather-shell-toolbar {
    left: 0;
}

.weather-shell-toolbar .weather-navigation-toggle-icon {
    width: 19px;
    height: 19px;
}

.weather-overlay-close-button {
    align-self: center;
}

.weather-lab.is-navigation-collapsed .weather-lab-workbench {
    grid-template-columns: minmax(0, 1fr);
}

.weather-lab.is-navigation-collapsed .weather-lab-navigation-panel {
    display: none;
}

.weather-lab.is-navigation-collapsed .weather-lab-acquisition-slot {
    display: none;
}

.weather-lab.is-navigation-collapsed .weather-lab-main {
    grid-column: 1;
    grid-row: 1;
}

.workspace-tool-button.weather-navigation-restore-tab {
    position: fixed;
    z-index: 48;
    top: 50%;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    height: 64px;
    min-height: 64px;
    padding: 0;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: var(--brand-strong);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 68, 92, 0.28);
    transform: translateY(-50%);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
}

.weather-lab.is-navigation-collapsed .weather-navigation-restore-tab {
    display: inline-flex;
}

.weather-navigation-restore-tab .weather-navigation-toggle-icon {
    width: 20px;
    height: 24px;
}

.weather-navigation-restore-tab .weather-navigation-chevron.is-collapse {
    display: none;
}

.weather-navigation-restore-tab .weather-navigation-chevron.is-expand {
    display: initial;
}

.weather-navigation-restore-tab:hover,
.weather-navigation-restore-tab:focus-visible {
    background: #0b3346;
    box-shadow: 0 10px 28px rgba(15, 68, 92, 0.34);
}

.hx-weather-layers-panel {
    display: grid;
    gap: 0;
    margin-top: 0.55rem;
    overflow: hidden;
    border: 1px solid #d3dfe5;
    border-radius: 12px;
    background: #f8fafb;
}

.hx-weather-layers-trigger {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 42px;
    padding: 0.48rem 0.65rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
}

.hx-weather-layers-trigger small {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-weather-layers-trigger[aria-expanded="true"] {
    border-bottom: 1px solid #d3dfe5;
    background: #eef4f6;
}

.hx-weather-layers-trigger[aria-expanded="true"] .workspace-tool-chevron {
    transform: rotate(90deg);
}

.weather-overlay-drawer {
    display: grid;
    grid-template-rows: auto auto;
    width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.weather-overlay-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem;
    border-bottom: 1px solid var(--line);
    background: #f7fafb;
}

.weather-overlay-drawer-head > div {
    display: grid;
    gap: 0.12rem;
}

.weather-overlay-drawer-head h3,
.weather-overlay-drawer-head p {
    margin: 0;
}

.weather-overlay-drawer-head p:last-child {
    color: var(--ink-soft);
    font-size: 0.76rem;
}

.weather-overlay-drawer > .stack-list {
    overflow: visible;
    padding: 0.6rem;
}

.hx-layer-drawer-list {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 0.45rem;
}

.hx-layer-drawer-item {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.58rem;
    border: 1px solid #dbe4e8;
    border-radius: 9px;
    background: #f9fbfc;
}

.hx-layer-drawer-item.is-available {
    border-color: #c7dbe3;
    background: #f7fbfd;
}

.hx-layer-drawer-copy {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 0.48rem;
    align-items: center;
    min-width: 0;
}

.hx-layer-drawer-copy > span:nth-child(2) {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.hx-layer-drawer-copy strong,
.hx-layer-drawer-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-layer-drawer-copy strong {
    color: #263c48;
    font-size: 0.74rem;
}

.hx-layer-drawer-copy small,
.hx-layer-drawer-status {
    color: var(--ink-soft);
    font-size: 0.62rem;
}

.hx-layer-drawer-status {
    padding: 0.16rem 0.34rem;
    border-radius: 999px;
    background: #edf1f3;
    white-space: nowrap;
}

.hx-layer-drawer-item.is-available .hx-layer-drawer-status {
    background: #e2f0f4;
    color: var(--brand-strong);
}

.hx-layer-drawer-symbol {
    position: relative;
    width: 25px;
    height: 22px;
}

.hx-layer-drawer-symbol i {
    position: absolute;
    left: 3px;
    width: 18px;
    height: 8px;
    border: 1px solid #8098a4;
    border-radius: 3px;
    background: #fff;
    transform: rotate(30deg) skewX(-18deg);
}

.hx-layer-drawer-symbol i:nth-child(1) { top: 1px; }
.hx-layer-drawer-symbol i:nth-child(2) { top: 6px; }
.hx-layer-drawer-symbol i:nth-child(3) { top: 11px; }

.hx-layer-drawer-item.is-available .hx-layer-drawer-symbol i {
    border-color: #4f879f;
    background: #e8f4f8;
}

.hx-layer-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.hx-layer-drawer-actions .button {
    min-height: 1.8rem;
    padding: 0.28rem 0.48rem;
    font-size: 0.65rem;
}

.hx-layer-drawer-actions .button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

@media (max-width: 680px) {
    .hx-layer-drawer-copy {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .hx-layer-drawer-status {
        grid-column: 2;
        justify-self: start;
    }
}

body.is-weather-overlay-open::before {
    content: none;
}

.weather-lab {
    container-type: inline-size;
    min-width: 0;
    color: #20313a;
}

.weather-lab-loading {
    display: grid;
    gap: 0.3rem;
    padding: 1.2rem;
    border: 1px dashed var(--line-strong);
    border-radius: 14px;
    color: var(--ink-soft);
}

.weather-lab-shell {
    display: grid;
    gap: 0.9rem;
}

.weather-lab-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #b7ceda;
    border-radius: 16px;
    background:
        linear-gradient(120deg, rgba(32, 94, 122, 0.08), rgba(255, 255, 255, 0.7)),
        #f8fbfc;
}

.weather-lab-hero > div:first-child {
    display: grid;
    gap: 0.26rem;
    max-width: 68ch;
}

.weather-lab-hero h2 {
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.weather-lab-hero p:last-child {
    color: var(--ink-soft);
    line-height: 1.45;
}

.weather-lab-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.weather-lab-upload {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.weather-lab-upload-status {
    max-width: 280px;
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.weather-lab-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0.2rem;
    margin: -0.55rem -0.55rem 0;
    padding: 0.42rem 0.42rem 0;
    border: 0;
    border-bottom: 1px solid #b9c5ca;
    border-radius: 14px 14px 0 0;
    background: #e6ebed;
}

.weather-lab-mode-tabs button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 45px;
    margin-bottom: -1px;
    padding: 0.48rem 0.68rem;
    border: 1px solid transparent;
    border-bottom: 1px solid #b9c5ca;
    border-radius: 10px 10px 0 0;
    background: rgba(255, 255, 255, 0.66);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.weather-lab-mode-tabs button.is-single .weather-lab-mode-icon {
    color: #65747c;
}

.weather-lab-mode-tabs button.is-compare .weather-lab-mode-icon {
    color: var(--brand);
}

.weather-lab-mode-tabs button.is-active.is-single {
    border-color: #9eaaaf;
    border-bottom-color: #f3f5f6;
    background: #f3f5f6;
    box-shadow: inset 0 3px 0 #7b888e;
}

.weather-lab-mode-tabs button.is-active.is-compare {
    border-color: var(--brand);
    border-bottom-color: #f2f8fb;
    background: #f2f8fb;
    box-shadow: inset 0 3px 0 var(--brand);
}

/* Selection is independent of gold h,x and green environmental coupling.
   An outline does not replace their backgrounds or inset status stripes. */
.weather-lab-mode-tabs button[aria-selected="true"] {
    outline: 2px solid #287ab1;
    outline-offset: -2px;
    position: relative;
    z-index: 1;
}
.weather-lab-mode-tabs button:focus-visible {
    outline: 2px solid #287ab1;
    outline-offset: 2px;
}

.weather-lab-shell.is-hx-coupled-single .weather-lab-mode-tabs button[data-weather-analysis-mode="single"],
.weather-lab-shell.is-hx-coupled-compare .weather-lab-mode-tabs button[data-weather-analysis-mode="compare"] {
    border-color: #c59a27;
    border-bottom-color: #fff7d6;
    background: linear-gradient(180deg, #fff4bf, #f4d978);
    color: #4f3a00;
    box-shadow: inset 0 3px 0 #bf8900, 0 1px 3px rgba(126, 88, 8, 0.12);
}

.weather-lab-shell.is-hx-coupled-single .weather-lab-mode-tabs button[data-weather-analysis-mode="single"] .weather-lab-mode-icon,
.weather-lab-shell.is-hx-coupled-compare .weather-lab-mode-tabs button[data-weather-analysis-mode="compare"] .weather-lab-mode-icon {
    color: #735300;
}

.weather-lab-shell.is-environment-coupled-single .weather-lab-mode-tabs button[data-weather-analysis-mode="single"],
.weather-lab-shell.is-environment-coupled-compare .weather-lab-mode-tabs button[data-weather-analysis-mode="compare"] {
    border-color: #176b51;
    box-shadow: inset 0 -3px 0 #0f766e, 0 1px 3px rgba(15, 118, 110, 0.12);
}

.weather-lab-shell.is-environment-coupled-single:not(.is-hx-coupled-single) .weather-lab-mode-tabs button[data-weather-analysis-mode="single"],
.weather-lab-shell.is-environment-coupled-compare:not(.is-hx-coupled-compare) .weather-lab-mode-tabs button[data-weather-analysis-mode="compare"] {
    border-color: #145d47;
    border-bottom-color: #176b51;
    background: linear-gradient(180deg, #238362, #176b51);
    color: #fff;
    box-shadow: inset 0 -3px 0 #0f4f3b, 0 1px 3px rgba(20, 93, 71, 0.18);
}

.weather-lab-shell.is-environment-coupled-single:not(.is-hx-coupled-single) .weather-lab-mode-tabs button[data-weather-analysis-mode="single"] .weather-lab-mode-icon,
.weather-lab-shell.is-environment-coupled-compare:not(.is-hx-coupled-compare) .weather-lab-mode-tabs button[data-weather-analysis-mode="compare"] .weather-lab-mode-icon {
    color: #fff;
}

.weather-lab-shell.is-hx-coupled-single.is-environment-coupled-single .weather-lab-mode-tabs button[data-weather-analysis-mode="single"],
.weather-lab-shell.is-hx-coupled-compare.is-environment-coupled-compare .weather-lab-mode-tabs button[data-weather-analysis-mode="compare"] {
    border-color: #c59a27;
    box-shadow: inset 0 3px 0 #bf8900, inset 0 -3px 0 #0f766e, 0 1px 3px rgba(77, 92, 64, 0.14);
}

.weather-lab-mode-icon {
    width: 1.55rem;
    height: 1.55rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.weather-lab-mode-tabs button > span {
    display: grid;
    gap: 0.04rem;
    min-width: 0;
}

.weather-lab-mode-tabs small {
    display: none;
}

.weather-lab-acquisition-slot {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.weather-lab-acquisition-slot.is-open {
    grid-column: 1 / -1;
}

.weather-lab-acquisition {
    display: grid;
    min-width: 0;
    overflow: visible;
    border: 1px solid #b7ceda;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(30, 67, 82, 0.05);
}

.weather-lab-acquisition.is-open {
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
}

.weather-lab-acquisition > header {
    display: grid;
    min-width: 0;
    padding: 0;
    background: #eef5f7;
}

.weather-lab-acquisition.is-open > header {
    border-right: 1px solid #b7ceda;
    border-radius: 13px 0 0 13px;
}

.weather-lab-acquisition.is-collapsed > header {
    border-radius: 13px;
}

.weather-lab-acquisition-toggle {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 0.52rem !important;
    width: 100%;
    min-height: 58px;
    padding: 0.55rem 0.65rem !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    color: var(--brand-strong) !important;
    text-align: left !important;
    cursor: pointer;
}

.weather-lab-acquisition-toggle > span:nth-child(2) {
    display: grid;
    gap: 0.02rem;
}

.weather-lab-acquisition-toggle small {
    color: var(--ink-soft);
    font-size: 0.63rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.weather-lab-acquisition-toggle strong {
    font-size: 0.8rem;
}

.weather-lab-acquisition-body {
    display: grid;
    min-width: 0;
    padding: 0.45rem 0;
}

.weather-lab-acquisition-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 0.85rem 0.4rem;
    border-bottom: 1px solid var(--line);
}

.weather-lab-online-provider-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.weather-lab-acquisition-modes button,
.weather-lab-online-provider-tabs .weather-provider-tab {
    display: grid;
    gap: 0.05rem;
    padding: 0.48rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.weather-lab-online-provider-tabs .weather-provider-tab {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-width: min(250px, 100%);
    padding: 0.55rem 2.55rem 0.55rem 0.55rem;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #f5f8fa);
    box-shadow: 0 4px 14px rgba(22, 50, 64, 0.06);
}

.weather-provider-tab-shell {
    position: relative;
    flex: 0 1 auto;
}

.weather-provider-tab-copy {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.weather-provider-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #236e8b, #164f68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 8px rgba(28, 82, 105, 0.2);
}

.weather-provider-icon.is-tmyx {
    background: linear-gradient(145deg, #7250a8, #493276);
}

.weather-provider-icon.is-dwd {
    background: linear-gradient(145deg, #d08a24, #9b5b12);
}

.weather-provider-icon svg {
    width: 2.35rem;
    height: 2.35rem;
    overflow: visible;
}

.weather-provider-icon path,
.weather-provider-icon circle {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.weather-provider-icon .provider-icon-card,
.weather-provider-icon .provider-icon-building,
.weather-provider-icon .provider-icon-map {
    fill: rgba(255, 255, 255, 0.12);
}

.weather-provider-icon .provider-icon-windows {
    fill: rgba(255, 255, 255, 0.7);
    stroke-width: 1;
}

.weather-provider-icon text {
    fill: currentColor;
    stroke: none;
    font: 800 8px/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: 0.5px;
}

.weather-provider-info-mark {
    appearance: none;
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 0.55rem;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid #bfd0d8;
    border-radius: 50%;
    color: #426370 !important;
    font: 800 0.76rem/1 Georgia, serif !important;
    background: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    padding: 0;
    transform: translateY(-50%);
}

.weather-provider-info-mark:hover,
.weather-provider-info-mark:focus-visible,
.weather-provider-info-mark[aria-expanded="true"] {
    border-color: var(--brand);
    background: #eaf5f8;
    color: var(--brand-strong) !important;
    outline: none;
}

.weather-provider-info-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.38rem);
    right: 0;
    display: grid;
    gap: 0.38rem;
    width: min(290px, calc(100vw - 2rem));
    padding: 0.65rem;
    border: 1px solid #b8cbd4;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(24, 54, 68, 0.18);
}

.weather-provider-info-popover strong {
    font-size: 0.78rem;
}

.weather-provider-info-popover p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.7rem;
    line-height: 1.42;
}

.weather-provider-external-link {
    appearance: none;
    justify-self: start;
    padding: 0.34rem 0.52rem;
    border: 1px solid #9fb9c5;
    border-radius: 7px;
    background: #edf6f8;
    color: var(--brand-strong);
    font: 700 0.68rem/1 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}

.weather-lab-acquisition-modes button.is-active,
.weather-provider-tab-shell.is-active > .weather-provider-tab {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 9%, #fff);
    box-shadow: inset 0 -2px 0 var(--brand);
}

.weather-lab-acquisition-modes button span,
.weather-lab-online-provider-tabs span {
    color: var(--ink-soft);
    font-size: 0.66rem;
}

.weather-lab-acquisition-local {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem 1rem;
    padding: 0.78rem 0.85rem;
}

.weather-lab-acquisition-local .weather-lab-upload {
    min-width: 0;
    flex-wrap: wrap;
}

.weather-lab-acquisition-local p,
.weather-lab-source-footnote,
.weather-lab-dwd-notice p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.72rem;
    line-height: 1.45;
}

.weather-lab-online-provider-tabs {
    padding: 0.55rem 0.85rem 0;
}

.weather-lab-online-source-pane {
    display: grid;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem 0.85rem;
}

.weather-lab-source-tools,
.weather-lab-source-search,
.weather-lab-dwd-actions {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.weather-lab-source-tools {
    justify-content: space-between;
}

.weather-lab-source-search {
    flex: 1 1 680px;
}

.weather-lab-source-search label {
    display: grid;
    flex: 1 1 300px;
    gap: 0.18rem;
    min-width: 180px;
}

.weather-lab-source-search label > span,
.weather-lab-selected-source label > span,
.weather-lab-coordinate-fields label > span {
    color: var(--ink-soft);
    font-size: 0.67rem;
    font-weight: 700;
}

.weather-lab-source-search input,
.weather-lab-selected-source input,
.weather-lab-coordinate-fields input {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #fff;
}

.weather-lab-provider-note {
    max-width: 330px;
    color: var(--ink-soft);
    font-size: 0.7rem;
}

.weather-lab-provider-reference {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex: 0 1 auto;
}

.weather-lab-official-source-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.32rem 0.48rem 0.32rem 0.38rem;
    border: 1px solid color-mix(in srgb, var(--weather-provider-accent, #2c7fa0) 42%, var(--line));
    border-radius: 11px;
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--weather-provider-accent, #2c7fa0) 8%, #fff));
    color: var(--ink);
    box-shadow: 0 3px 12px rgba(35, 62, 74, 0.08);
    cursor: pointer;
    text-align: left;
}

.weather-lab-official-source-link:hover,
.weather-lab-official-source-link:focus-visible {
    border-color: var(--weather-provider-accent, #2c7fa0);
    box-shadow: 0 5px 16px rgba(35, 62, 74, 0.15);
    transform: translateY(-1px);
}

.weather-lab-official-source-link > span:not(.weather-lab-provider-icon):not(.weather-lab-external-arrow) {
    display: grid;
    line-height: 1.05;
}

.weather-lab-official-source-link strong {
    font-size: 0.74rem;
}

.weather-lab-official-source-link small {
    color: var(--ink-soft);
    font-size: 0.6rem;
}

.weather-lab-official-source-link .weather-lab-provider-icon {
    width: 34px;
    min-width: 34px;
    height: 30px;
}

.weather-lab-external-arrow {
    color: var(--weather-provider-accent, #2c7fa0);
    font-size: 1rem;
    font-weight: 800;
}

.weather-lab-source-browser {
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(320px, 0.85fr);
    min-height: 310px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.weather-lab-source-map {
    position: relative;
    z-index: 0;
    min-height: 310px;
    background:
        radial-gradient(circle at 35% 42%, rgba(64, 140, 166, 0.22), transparent 2px),
        linear-gradient(135deg, #eef6f8, #e4eef2);
}

.weather-lab-map-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0.25rem;
    padding: 1rem;
    color: var(--ink-soft);
    text-align: center;
}

.weather-lab-map-fallback strong {
    color: var(--ink);
}

.weather-lab-map-fallback span {
    max-width: 40ch;
    font-size: 0.72rem;
}

.weather-lab-map-popup > div {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.4rem;
}

.weather-lab-map-popup button {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--brand-strong);
    font-size: 0.68rem;
    text-align: left;
    cursor: pointer;
}

.weather-lab-source-list {
    max-height: 380px;
    overflow: auto;
    border-left: 1px solid var(--line);
    background: #fbfcfd;
}

.weather-lab-source-results {
    display: grid;
    gap: 1px;
    background: var(--line);
}

.weather-lab-source-result-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.65rem;
    margin: 0;
    padding: 0.46rem 0.62rem;
    border-bottom: 1px solid var(--line);
    background: #eef6f8;
    color: var(--ink-soft);
    font-size: 0.68rem;
}

.weather-lab-source-load-more {
    display: block;
    width: calc(100% - 1.2rem);
    margin: 0.6rem;
}

.weather-lab-source-station {
    display: grid;
    grid-template-columns: auto 4px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.58rem 0.62rem;
    background: #fff;
    cursor: pointer;
}

.weather-lab-source-station:hover {
    background: #f4f9fb;
}

.weather-lab-source-station.is-selected {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--brand);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--brand) 7%, #fff);
}

.weather-lab-source-station-marker {
    align-self: stretch;
    width: 4px;
    min-height: 28px;
    border-radius: 4px;
    background: #5db3cf;
}

.weather-lab-source-station > span:nth-of-type(2) {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.weather-lab-source-station strong,
.weather-lab-source-station small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-source-station small {
    color: var(--ink-soft);
    font-size: 0.66rem;
}

.weather-lab-source-station em,
.weather-lab-provider-badge {
    padding: 0.18rem 0.32rem;
    border-radius: 999px;
    background: #e5f1f5;
    color: #285e74;
    font-size: 0.61rem;
    font-style: normal;
    font-weight: 800;
}

.weather-lab-source-message {
    display: grid;
    place-content: center;
    gap: 0.2rem;
    min-height: 100%;
    padding: 1rem;
    color: var(--ink-soft);
    text-align: center;
}

.weather-lab-source-message span {
    font-size: 0.72rem;
}

.weather-lab-source-message.is-error strong {
    color: #a12f32;
}

.weather-lab-selected-source {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.65fr) auto;
    align-items: end;
    gap: 0.65rem;
    padding: 0.65rem;
    border: 1px solid #b7ceda;
    border-radius: 11px;
    background: #f7fbfc;
}

.weather-lab-selected-source > div,
.weather-lab-selected-source label {
    display: grid;
    gap: 0.12rem;
}

.weather-lab-selected-source span,
.weather-lab-selected-source small {
    color: var(--ink-soft);
    font-size: 0.66rem;
}

.weather-lab-selected-source.is-empty {
    grid-template-columns: 1fr;
}

.weather-lab-dwd-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem;
    border: 1px solid #edcf8e;
    border-radius: 11px;
    background: #fffaf0;
}

.weather-lab-dwd-notice > div {
    display: grid;
    gap: 0.18rem;
}

.weather-lab-provider-badge {
    flex: 0 0 auto;
    background: #f6d77e;
    color: #644c0b;
}

.weather-lab-dwd-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr);
    gap: 0.65rem;
}

.weather-lab-dwd-grid > section {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.weather-lab-coordinate-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.55rem;
}

.weather-lab-coordinate-fields label {
    display: grid;
    gap: 0.15rem;
}

.weather-lab-coordinate-fields > span {
    grid-column: 1 / -1;
    color: #35724f;
    font-size: 0.67rem;
}

.weather-lab-coordinate-fields > span.is-invalid {
    color: #a12f32;
}

.weather-lab-try-variants header {
    display: grid;
    gap: 0.12rem;
    padding: 0.55rem;
    border-bottom: 1px solid var(--line);
}

.weather-lab-try-variants header span {
    color: var(--ink-soft);
    font-size: 0.68rem;
}

.weather-lab-try-variants > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
}

.weather-lab-try-variants label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem;
    background: #fff;
    cursor: pointer;
}

.weather-lab-try-variants label.is-selected {
    background: color-mix(in srgb, var(--brand) 8%, #fff);
    box-shadow: inset 3px 0 0 var(--brand);
}

.weather-lab-try-variants label span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.08rem 0.4rem;
}

.weather-lab-try-variants label small {
    grid-column: 1 / -1;
    color: var(--ink-soft);
    font-size: 0.62rem;
}

.weather-lab-try-variants label em {
    color: var(--ink-soft);
    font-size: 0.67rem;
    font-style: normal;
}

.weather-lab-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.weather-lab-workbench {
    display: grid;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0.85rem;
    align-items: start;
}

.weather-lab-navigation-panel {
    position: sticky;
    top: 5.75rem;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    max-height: calc(100vh - 6.35rem);
    max-height: calc(100dvh - 6.35rem);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 1px solid #c8d3d8;
    border-radius: 14px;
    background: #f7f9fa;
    box-shadow: 0 4px 15px rgba(28, 55, 68, 0.05);
}

.weather-lab-navigation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.62rem;
    border-bottom: 1px solid #d5dfe3;
    border-radius: 13px 13px 0 0;
    background: #edf2f4;
}

.weather-lab-navigation-head > div {
    display: grid;
    gap: 0.03rem;
}

.weather-lab-navigation-head strong {
    font-size: 0.84rem;
}

.weather-navigation-panel-toggle {
    flex: 0 0 auto;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0.28rem;
    border-color: #b7c6cd;
    border-radius: 8px;
    background: #fff;
}

.weather-navigation-panel-toggle .workspace-tool-icon {
    width: 18px;
    height: 18px;
}

.weather-lab-navigation-content {
    display: grid;
    gap: 0.62rem;
    padding: 0.62rem;
}

.weather-lab-workbench.is-acquisition-open .weather-lab-navigation-panel,
.weather-lab-workbench.is-acquisition-open .weather-lab-main {
    grid-row: 2;
}

.weather-lab-sidebar {
    display: grid;
    gap: 0.75rem;
    position: static;
    min-width: 0;
}

.weather-lab-sidebar > section,
.weather-lab-sidebar-section,
.weather-lab-filters,
.weather-lab-design,
.weather-lab-toolbar {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.weather-lab-sidebar-section {
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.weather-lab-sidebar-section > summary {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.72rem;
    cursor: pointer;
}

.weather-lab-sidebar-section > summary span,
.weather-lab-sidebar-hint {
    color: var(--ink-soft);
    font-size: 0.7rem;
}

.weather-lab-dataset-section > summary > span {
    display: none;
}

.weather-lab-sidebar-section > .weather-lab-datasets,
.weather-lab-sidebar-section > .weather-lab-empty-compact,
.weather-lab-sidebar-hint,
.weather-lab-diagram-picker {
    margin: 0 0.72rem 0.72rem;
}

.weather-lab-comparison-selection-hint {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.42rem 0.5rem;
    border: 1px solid #b9cbd3;
    border-radius: 8px;
    background: #f5f8fa;
}

.weather-lab-comparison-selection-hint strong {
    color: #163f52;
    font-size: 0.7rem;
}

.weather-lab-comparison-selection-hint span {
    white-space: nowrap;
}

.weather-lab-diagram-picker {
    display: grid;
    gap: 0.45rem;
}

.weather-lab-sidebar > section {
    padding: 0.75rem;
}

.weather-lab-sidebar-title,
.weather-lab-section-head,
.weather-lab-toolbar,
.weather-lab-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.weather-lab-sidebar-title {
    margin-bottom: 0.55rem;
}

.weather-lab-sidebar-title h3,
.weather-lab-notebook-functions h3 {
    font-size: 0.93rem;
}

.weather-lab-sidebar-title > span {
    display: grid;
    place-items: center;
    min-width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    background: var(--muted-panel);
    color: var(--brand-strong);
    font-size: 0.76rem;
    font-weight: 700;
}

.weather-lab-datasets {
    display: grid;
    gap: 0.34rem;
}

.weather-lab-dataset {
    --weather-dataset-options-width: 5rem;
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) var(--weather-dataset-options-width);
    gap: 0.24rem 0.38rem;
    align-items: center;
    padding: 0.58rem 0.46rem 0.42rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfd;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.weather-lab-dataset::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0.46rem;
    right: 0.46rem;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--dataset-color, var(--brand));
}

.weather-lab-dataset {
    position: relative;
}

.weather-lab-dataset.is-active {
    border-color: #6f9aae;
    box-shadow: 0 0 0 2px rgba(32, 94, 122, 0.1);
}

.weather-lab-dataset-main {
    appearance: none;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.weather-lab-dataset-main > input {
    width: auto;
    margin: 0;
}

.weather-lab-dataset-settings {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    min-width: 0;
}

.weather-lab-dataset-settings[open] {
    position: static;
    grid-column: 1 / -1;
    grid-row: 3;
}

.weather-lab-dataset-settings[open] > summary {
    position: absolute;
    top: 0.58rem;
    right: 0.46rem;
}

.weather-lab-dataset-settings > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    width: var(--weather-dataset-options-width);
    min-width: var(--weather-dataset-options-width);
    height: 1.72rem;
    padding: 0 0.34rem;
    border-radius: 7px;
    cursor: pointer;
    list-style: none;
    color: var(--brand-strong);
    font-size: 0.64rem;
    font-weight: 700;
}

.weather-lab-dataset-settings > summary > svg {
    width: 0.84rem;
    height: 0.84rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.weather-lab-dataset-settings > summary {
    border: 1px solid #d3e0e6;
    background: #f2f7f9;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.weather-lab-dataset-settings > summary:hover,
.weather-lab-dataset-settings[open] > summary {
    border-color: #91afbd;
    background: #e8f2f5;
}

.weather-lab-dataset-settings > summary::marker,
.weather-lab-panel-appearance > summary::marker,
.weather-lab-panel-series > summary::marker,
.weather-lab-global-appearance > summary::marker {
    content: "";
}

.weather-lab-dataset-settings > summary::-webkit-details-marker,
.weather-lab-panel-appearance > summary::-webkit-details-marker,
.weather-lab-panel-series > summary::-webkit-details-marker,
.weather-lab-global-appearance > summary::-webkit-details-marker {
    display: none;
}

.weather-lab-disclosure-chevron {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

details[open] > summary .weather-lab-disclosure-chevron {
    transform: rotate(90deg);
}

.weather-lab-dataset-settings[open] > div {
    position: static;
    display: grid;
    gap: 0.34rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.46rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
}

.weather-lab-dataset-settings-head {
    display: grid;
    gap: 0.06rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e5ebee;
}

.weather-lab-dataset-settings-head strong {
    color: #2c424d;
    font-size: 0.68rem;
}

.weather-lab-dataset-settings-head small {
    color: var(--ink-soft);
    font-size: 0.57rem;
}

.weather-lab-dataset-settings[open] > div > label {
    min-width: 0;
    gap: 0.12rem;
    font-size: 0.62rem;
}

.weather-lab-dataset-settings[open] > div > label input {
    width: 100%;
    min-width: 0;
    min-height: 1.75rem;
    height: 1.75rem;
    padding: 0.25rem 0.38rem;
    border-radius: 6px;
    font-size: 0.67rem;
}

.weather-lab-dataset-main > span:last-child {
    display: grid;
    min-width: 0;
}

.weather-lab-dataset-main strong,
.weather-lab-dataset-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-dataset-main strong {
    font-size: 0.82rem;
}

.weather-lab-dataset-main small {
    color: var(--ink-soft);
    font-size: 0.69rem;
}


.weather-lab-dataset-color {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.4rem;
    align-items: center;
    gap: 0.3rem 0.4rem;
    min-width: 0;
}

.weather-lab-dataset-color > span {
    min-width: 0;
    font-size: 0.67rem;
    font-weight: 650;
    color: var(--ink-soft);
}

.weather-lab-dataset-color .weather-lab-color-control {
    display: contents;
}

.weather-lab-dataset-color .weather-lab-color-input-row {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 0.25rem;
}

.weather-lab-dataset-color input[type="color"] {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    height: 28px;
    border-radius: 6px;
    padding: 0.12rem;
}

.weather-lab-dataset-color .weather-lab-eyedropper {
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    height: 28px;
}

.weather-lab-dataset-color .weather-lab-color-suggestions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    padding: 0.16rem 0.1rem;
    overflow: visible;
}

.weather-lab-dataset-color .weather-lab-color-suggestion {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.weather-lab-dataset-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.24rem;
    justify-self: end;
    min-height: 1.7rem;
    padding: 0.22rem 0.42rem;
    font-size: 0.62rem;
}

.weather-lab-legend-swatch {
    display: inline-block;
    width: 1rem;
    height: 0.24rem;
    margin-right: 0.35rem;
    border-radius: 999px;
    vertical-align: middle;
    background: var(--dataset-color, var(--brand));
}

.weather-lab-dataset-meta,
.weather-lab-inline-check {
    grid-column: 1;
}

.weather-lab-dataset-meta {
    grid-column: 1 / -1;
    grid-row: 2;
}

.weather-lab-quality {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    border-radius: 999px;
    padding: 0.16rem 0.4rem;
    font-size: 0.65rem;
    line-height: 1.2;
    white-space: nowrap;
}

.weather-lab-quality.is-good {
    color: #17603f;
    background: #e1f4e9;
}

.weather-lab-quality.is-warning {
    color: #795713;
    background: #fff3cf;
}

.weather-lab-inline-check {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
}

.weather-lab-inline-check input,
.weather-lab-dataset-check input,
.weather-lab-month-grid input {
    width: auto;
    margin: 0;
}

.weather-lab-dataset > .button-icon-danger {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    min-width: 1.85rem;
    padding: 0.35rem;
    border-color: transparent;
    background: transparent;
}

.weather-lab-filters {
    overflow: clip;
}

.weather-lab-filters > summary,
.weather-lab-panel-datasets > summary,
.weather-legacy-details > summary {
    cursor: pointer;
    user-select: none;
}

.weather-lab-filters > summary {
    display: grid;
    gap: 0.1rem;
    padding: 0.72rem;
    font-weight: 700;
}

.weather-lab-filters > summary span {
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 400;
}

.weather-lab-filter-body {
    display: grid;
    gap: 0.7rem;
    padding: 0 0.72rem 0.72rem;
}

.weather-lab-filter-body fieldset {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.weather-lab-filter-body legend,
.weather-lab-filter-body label > span,
.weather-lab-panel-controls label > span,
.weather-lab-design-grid label > span,
.weather-lab-toolbar label > span {
    font-size: 0.7rem;
    font-weight: 600;
}

.weather-lab-month-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
}

.weather-lab-month-grid label {
    display: block;
    position: relative;
}

.weather-lab-month-grid input {
    position: absolute;
    opacity: 0;
}

.weather-lab-month-grid span {
    display: block;
    padding: 0.32rem 0.15rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    font-size: 0.68rem;
    text-align: center;
    cursor: pointer;
}

.weather-lab-month-grid input:checked + span {
    border-color: var(--brand);
    background: #e7f1f5;
    color: var(--brand-strong);
    font-weight: 700;
}

.weather-lab-filter-presets {
    display: flex;
    gap: 0.3rem;
}

.weather-lab-filter-presets button {
    appearance: none;
    padding: 0.22rem 0.38rem;
    border: 0;
    border-radius: 6px;
    background: var(--muted-panel);
    color: var(--brand-strong);
    font-size: 0.67rem;
    cursor: pointer;
}

.weather-lab-filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.weather-lab-filter-body input,
.weather-lab-filter-body select {
    min-width: 0;
    padding: 0.42rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
}

.weather-lab-notebook-functions p,
.weather-lab-notebook-functions li {
    color: var(--ink-soft);
    font-size: 0.72rem;
    line-height: 1.35;
}

.weather-lab-notebook-functions p {
    margin-top: 0.28rem;
}

.weather-lab-notebook-functions ul {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
}

.weather-lab-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    gap: 0.75rem;
    padding: 0.55rem;
    border: 1px solid #c2ccd1;
    border-radius: 15px;
    background: #f4f6f7;
    transition: border-color 150ms ease, background 150ms ease;
}

.weather-lab-shell.is-mode-compare .weather-lab-main {
    border-color: #9fc2d1;
    background: #f2f8fb;
}

.weather-lab-shell.is-mode-single .weather-lab-main {
    border-color: #b8c1c5;
    background: #f3f5f6;
}

.weather-lab select {
    appearance: none;
    border-color: #c4d2d9;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%233b6476' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.48rem center;
    background-size: 0.85rem;
    padding-right: 1.75rem !important;
    box-shadow: 0 1px 2px rgba(23, 52, 65, 0.035);
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.weather-lab select:hover {
    border-color: #8eaab7;
    background-color: #fbfdfe;
}

.weather-lab select:focus-visible {
    border-color: var(--brand);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(32, 94, 122, 0.13);
}

.weather-lab input:is([type="text"], [type="number"], [type="search"], [type="date"], [type="time"]),
.weather-lab select {
    box-sizing: border-box;
    height: 34px;
    min-height: 34px;
}

.weather-lab input[type="checkbox"],
.weather-lab input[type="radio"] {
    accent-color: var(--brand);
}

.weather-lab-toolbar {
    align-items: center;
    flex-wrap: wrap;
    padding: 0.48rem 0.55rem;
}

.weather-lab-toolbar-primary {
    display: flex !important;
    flex: 1 1 360px !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.weather-lab-toolbar-primary > label {
    flex: 1 1 220px;
    min-width: 180px;
    height: 34px;
    gap: 0;
    position: relative;
}

.weather-lab-toolbar-primary > .button {
    height: 34px;
    min-height: 34px;
    padding: 0 0.78rem;
    line-height: 1;
    white-space: nowrap;
}

.weather-lab-toolbar-primary .is-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.weather-lab-toolbar-primary select,
.weather-lab-toolbar-actions > .weather-lab-hx-coupling,
.weather-lab-toolbar-actions > .weather-lab-environment-coupling,
.weather-lab-toolbar-actions > .weather-lab-global-appearance > summary {
    height: 34px;
    min-height: 34px;
}

.weather-lab-toolbar select {
    padding: 0.46rem 0.62rem;
    border-radius: 9px;
    font-size: 0.78rem;
}

.weather-lab-panel-grid {
    display: grid;
    align-items: start;
    gap: 0.12rem;
    min-width: 0;
}

.weather-lab-panel-grid.is-selection-pending {
    min-height: 9rem;
    place-items: center;
}

.weather-lab-comparison-selection-empty {
    width: min(30rem, calc(100% - 1rem));
    text-align: center;
}

.weather-lab-drop-zone {
    min-height: 10px;
    border-radius: 999px;
    transition: flex-basis 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.weather-lab-drop-zone.is-active-drop {
    min-height: 24px;
    background: rgba(32, 94, 122, 0.12);
    box-shadow: inset 0 0 0 2px rgba(32, 94, 122, 0.42);
}

.weather-lab-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    position: relative;
    width: 100%;
    height: auto;
    min-width: min(420px, 100%);
    min-height: 0;
    overflow: visible;
    resize: none;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(22, 33, 43, 0.05);
}

.weather-lab-panel:has(> .weather-lab-panel-local-filter) {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.weather-lab-panel.is-collapsed {
    height: auto;
    min-height: 0;
}

.weather-lab-panel.is-dragging {
    opacity: 0.45;
}

.weather-lab-panel.is-drop-target {
    outline: 3px solid rgba(32, 94, 122, 0.28);
    outline-offset: 2px;
}

.weather-lab-panel-head {
    padding: 0.62rem 0.68rem;
    border-bottom: 1px solid var(--line);
    background: #f7fafb;
    gap: clamp(0.3rem, 1vw, 0.7rem);
}

.weather-lab-panel-title {
    display: grid;
    flex: 1;
    min-width: 0;
}

.weather-lab .weather-lab-panel-title > input {
    width: 100%;
    min-width: 0;
    height: 1.9rem;
    min-height: 1.9rem;
    margin-left: -0.34rem;
    padding: 0.18rem 0.34rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--weather-panel-title-font-size, 12px);
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
}

.weather-lab .weather-lab-panel-title > input:hover {
    border-color: #d5e0e5;
    background: #edf3f5;
}

.weather-lab .weather-lab-panel-title > input:focus,
.weather-lab .weather-lab-panel-title > input:focus-visible {
    border-color: var(--brand);
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(32, 94, 122, 0.14);
}

.weather-lab-panel-dots {
    display: grid;
    place-items: center;
    flex: 0 0 1.9rem;
    height: 1.9rem;
    color: #73858e;
    font-size: 1.15rem;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    cursor: default;
}

.weather-lab-panel-order-actions {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #c8d5db;
    border-radius: 7px;
    background: #fff;
}

.weather-lab-panel-order-actions button {
    appearance: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3d5f6e;
    font: 700 0.82rem/1 "Segoe UI Symbol", sans-serif;
    cursor: pointer;
}

.weather-lab-panel-order-actions button + button {
    border-left: 1px solid #d5dfe3;
}

.weather-lab-panel-order-actions button:hover:not(:disabled) {
    background: #eaf3f6;
    color: var(--brand-strong);
}

.weather-lab-panel-order-actions button:disabled {
    color: #aab5ba;
    background: #f5f7f8;
    cursor: default;
}

.weather-lab-panel-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
    grid-auto-flow: row dense;
    align-items: flex-end;
    gap: 0.3rem;
    padding: 0.38rem 0.5rem;
    border-bottom: 1px solid #e3e9ed;
}

.weather-lab-panel-controls > label {
    display: grid;
    grid-template-rows: auto 30px;
    align-content: end;
    gap: 0.1rem;
    min-width: 0;
}

.weather-lab-panel-controls select,
.weather-lab-panel-controls input {
    padding: 0.28rem 0.42rem;
    border-radius: 7px;
    font-size: 0.69rem;
}

.weather-lab .weather-lab-panel-controls input:is([type="text"], [type="number"], [type="search"], [type="date"], [type="time"]),
.weather-lab .weather-lab-panel-controls select {
    height: 30px;
    min-height: 30px;
}

.weather-lab-panel-filter-mode {
    min-width: 145px;
}

.weather-lab-panel-local-filter,
.weather-lab-panel-appearance,
.weather-lab-panel-series,
.weather-lab-source-filter {
    border-bottom: 1px solid #e3e9ed;
    background: #fbfcfd;
}

.weather-lab-panel-controls > .weather-lab-panel-appearance,
.weather-lab-panel-controls > .weather-lab-panel-series {
    position: relative;
    width: 100%;
    margin-left: 0;
    border: 0;
    background: transparent;
}

.weather-lab-panel-controls > .weather-lab-panel-appearance[open] > .weather-lab-appearance-body {
    width: 100%;
    padding: 0.34rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
}

.weather-lab-panel-controls > .weather-lab-panel-appearance[open]:not(.is-floating-over-hx) {
    grid-column: 1 / -1;
    order: 20;
    margin-left: 0;
}

.weather-lab-panel-controls > .weather-lab-panel-appearance[open]:not(.is-floating-over-hx) > summary {
    margin-left: auto;
}

.weather-lab-panel-controls > .weather-lab-panel-appearance.is-floating-over-hx[open] > .weather-lab-appearance-body,
.weather-lab-global-appearance.is-floating-over-hx > [data-weather-appearance-popover] {
    position: fixed;
    z-index: 44;
    top: var(--weather-appearance-top);
    left: var(--weather-appearance-left);
    width: var(--weather-appearance-width);
    max-width: calc(100vw - 1.25rem);
    max-height: var(--weather-appearance-max-height);
}

.weather-lab-panel-controls > .weather-lab-panel-series[open] > div {
    position: absolute;
    z-index: 34;
    top: calc(100% + 0.35rem);
    right: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.28rem;
    width: min(390px, calc(100vw - 1.5rem));
    max-height: min(520px, 66vh);
    overflow: auto;
    padding: 0.42rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
}

.weather-lab-panel-mode-note {
    display: none;
}

.weather-lab-panel-local-filter > summary,
.weather-lab-panel-appearance > summary,
.weather-lab-panel-series > summary,
.weather-lab-source-filter > summary {
    padding: 0.34rem 0.48rem;
    color: var(--brand-strong);
    font-size: 0.69rem;
    font-weight: 700;
    cursor: pointer;
}

.weather-lab-panel-appearance > summary,
.weather-lab-panel-series > summary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
    width: 100%;
    height: 30px;
    min-height: 30px;
    border: 1px solid #c9d8df;
    border-radius: 7px;
    background: #f5f9fa;
    list-style: none;
}

.weather-lab-panel-appearance > summary .workspace-tool-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.weather-lab-panel-appearance > summary > span:nth-child(2) {
    margin-right: auto;
}

.weather-lab-panel-appearance > summary:hover,
.weather-lab-panel-series > summary:hover,
.weather-lab-panel-appearance[open] > summary,
.weather-lab-panel-series[open] > summary {
    border-color: #8eabb8;
    background: #eaf3f6;
}

.weather-lab-panel-series > summary > span:last-child {
    min-width: 2rem;
    padding: 0.16rem 0.34rem;
    border-radius: 999px;
    background: #dcebf1;
    color: var(--brand-strong);
    font-size: 0.64rem;
    text-align: center;
}

.weather-lab-panel-series[open] .weather-lab-check-row label {
    min-height: 1.7rem;
    padding: 0.28rem 0.36rem;
    border: 1px solid #d9e3e7;
    border-radius: 8px;
    background: #f9fbfc;
    cursor: pointer;
}

.weather-lab-panel-series[open] .weather-lab-check-row label:has(input:checked) {
    border-color: #8fb1c0;
    background: #eaf4f7;
    color: var(--brand-strong);
}

.weather-lab-panel-local-filter .weather-lab-filter-body,
.weather-lab-source-filter .weather-lab-filter-body {
    grid-template-columns: minmax(210px, 1.4fr) repeat(3, minmax(120px, 0.7fr));
    align-items: end;
    padding: 0.35rem 0.68rem 0.65rem;
}

.weather-lab-appearance-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.28rem;
    max-height: min(var(--weather-appearance-max-height, 560px), 72vh);
    overflow: auto;
    overflow-x: hidden;
    padding: 0.22rem 0.38rem 0.38rem;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
}

.weather-lab-appearance-popover-head,
.weather-lab-appearance-actions,
.weather-lab-colorbar-settings,
.weather-lab-appearance-card-grid,
.weather-lab-annual-option-tabs,
.weather-lab-annual-options-pane {
    grid-column: 1 / -1;
}

.weather-lab-annual-option-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.14rem;
    padding: 0.16rem;
    border: 1px solid #cbd6dc;
    border-radius: 9px;
    background: #eaf0f2;
    box-shadow: inset 0 1px 2px rgba(23, 49, 61, 0.04);
}

.weather-lab-annual-option-tabs button {
    appearance: none;
    min-height: 1.75rem;
    padding: 0.25rem 0.38rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #40545d;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.weather-lab-annual-option-tabs button:hover,
.weather-lab-annual-option-tabs button:focus-visible {
    border-color: #b6c8d0;
    background: rgba(255, 255, 255, 0.68);
    color: var(--brand-strong);
    outline: 0;
}

.weather-lab-annual-option-tabs button.is-active {
    border-color: #a8bec8;
    background: #fff;
    color: var(--brand-strong);
    box-shadow: inset 0 -2px 0 var(--brand), 0 1px 2px rgba(24, 54, 67, 0.1);
}

/* h,x line status: light gold means available through the active coupling;
   the darker tone means that at least one line is actually enabled for h,x. */
.weather-lab-panel.has-hx-line-options {
    --weather-hx-line-accent: #c49300;
    --weather-hx-line-border: #d0a000;
    --weather-hx-line-background: #fff7d6;
    --weather-hx-line-background-hover: #ffefad;
    --weather-hx-line-text: #624900;
}

.weather-lab-panel.has-hx-visible-line {
    --weather-hx-line-accent: #8f6500;
    --weather-hx-line-border: #9c7100;
    --weather-hx-line-background: #efd06c;
    --weather-hx-line-background-hover: #e3bd45;
    --weather-hx-line-text: #3d2b00;
}

.weather-lab-panel.has-hx-line-options .weather-lab-annual-option-tabs[data-weather-profile-tabs="annual_profile"] button[data-weather-annual-options-tab="lines"] {
    border-color: var(--weather-hx-line-border);
    background: var(--weather-hx-line-background);
    color: var(--weather-hx-line-text);
    box-shadow: inset 0 -3px 0 var(--weather-hx-line-accent);
}

.weather-lab-panel.has-hx-line-options .weather-lab-annual-option-tabs[data-weather-profile-tabs="annual_profile"] button[data-weather-annual-options-tab="lines"]:is(:hover, :focus-visible, .is-active) {
    border-color: var(--weather-hx-line-accent);
    background: var(--weather-hx-line-background-hover);
    color: var(--weather-hx-line-text);
    box-shadow: inset 0 -3px 0 var(--weather-hx-line-accent), 0 0 0 1px rgba(98, 73, 0, 0.14);
}

.weather-lab-panel.has-hx-line-options .weather-lab-panel-appearance > summary {
    border-color: var(--weather-hx-line-border);
    background: var(--weather-hx-line-background);
    color: var(--weather-hx-line-text);
    box-shadow: inset 0 -2px 0 var(--weather-hx-line-accent);
}

.weather-lab-panel.has-hx-line-options .weather-lab-panel-appearance > summary:is(:hover, :focus-visible),
.weather-lab-panel.has-hx-line-options .weather-lab-panel-appearance[open] > summary {
    border-color: var(--weather-hx-line-accent);
    background: var(--weather-hx-line-background-hover);
    color: var(--weather-hx-line-text);
}

.weather-lab-annual-options-pane {
    min-width: 0;
}

.weather-lab-annual-subchart-options {
    column-width: 180px;
}

@media (max-width: 720px) {
    .weather-lab-annual-option-tabs {
        grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    }
}

/* Coupled environmental state: retain weather provenance while two
   independent values are intentionally overridden for RLT calculation. */
.coupling-environment-manual {
    display: grid;
    gap: 0.38rem;
    margin-top: 0.18rem;
    padding: 0.42rem;
    border: 1px solid rgba(23, 107, 81, 0.18);
    border-radius: 8px;
    background: rgba(247, 253, 250, 0.78);
}

.coupling-environment-manual.is-active {
    border-color: rgba(23, 107, 81, 0.4);
    background: rgba(228, 246, 237, 0.88);
}

.coupling-environment-manual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.coupling-environment-manual-head > span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.coupling-environment-manual-head strong {
    color: #174d3b;
    font-size: 0.7rem;
}

.coupling-environment-manual-head small,
.coupling-environment-manual-note {
    color: #587065;
    font-size: 0.61rem;
    line-height: 1.35;
}

.coupling-environment-manual-toggle {
    min-height: 32px;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
}

.coupling-environment-manual-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.coupling-environment-manual-fields > label {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
    color: #31594b;
    font-size: 0.64rem;
}

.coupling-environment-manual-fields input {
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
}

.coupling-schematic-label-toggle {
    min-height: 32px;
}

.coupling-visibility-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
}

.coupling-visibility-controls > .workspace-tool-button {
    min-width: 0;
    min-height: 34px;
    margin: 0;
    padding: 0.3rem 0.4rem;
    justify-content: flex-start;
    font-size: 0.69rem;
    line-height: 1.2;
}

.coupling-visibility-controls > .workspace-tool-button > span {
    white-space: normal;
}

.coupling-environment-manual-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.coupling-environment-manual-actions > small {
    flex: 1 1 140px;
    font-size: 0.64rem;
    color: #52616b;
}

.coupling-environment-manual-actions > button {
    min-height: 32px;
}

.coupling-environment-manual [hidden] {
    display: none;
}

.coupling-environment-manual.is-draft .rlt-semantic-input input {
    background: #fff;
    border-color: #b9c7cf;
    font-weight: 400;
}

.coupling-calculation-button {
    min-height: 34px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .coupling-environment-manual-head {
        align-items: stretch;
        flex-direction: column;
    }

    .coupling-environment-manual-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.weather-lab-appearance-card-grid {
    display: block;
    column-count: 2;
    column-width: 260px;
    column-gap: 0.28rem;
    padding: 0.28rem;
    border: 1px solid #dce5e9;
    border-radius: 9px;
    background: #f3f7f8;
}

.weather-lab-appearance-card-grid > .weather-lab-appearance-category {
    display: inline-grid;
    width: 100%;
    margin: 0 0 0.28rem;
    break-inside: avoid;
    vertical-align: top;
}

.weather-lab-appearance-card-grid > .weather-lab-appearance-category:last-child {
    margin-bottom: 0;
}

/* The line editor is the only card in its tab and needs the complete pane. */
.weather-lab-appearance-card-grid:has(> .weather-lab-threshold-settings) {
    column-count: 1;
    column-width: auto;
}

.weather-lab-general-options {
    column-width: 260px;
}

.weather-lab-threshold-settings {
    column-span: all;
}

@media (max-width: 430px) {
    .weather-lab-appearance-card-grid,
    .weather-lab-general-options,
    .weather-lab-annual-subchart-options {
        column-count: 1;
    }
}

.weather-lab-appearance-popover-head {
    position: sticky;
    z-index: 2;
    top: -0.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin: -0.22rem -0.06rem 0;
    padding: 0.28rem 0.18rem 0.32rem;
    border-bottom: 1px solid #e2e8eb;
    background: rgba(255, 255, 255, 0.97);
}

.weather-lab-appearance-popover-head > div {
    display: grid;
    min-width: 0;
}

.weather-lab-appearance-popover-head strong {
    font-size: 0.72rem;
}

.weather-lab-appearance-popover-head small {
    color: var(--ink-soft);
    font-size: 0.6rem;
}

.weather-lab-appearance-popover-head > button {
    appearance: none;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: #edf2f4;
    color: #344b56;
    font: 600 1rem/1 sans-serif;
    cursor: pointer;
}

.weather-lab-appearance-popover-head > button:hover,
.weather-lab-appearance-popover-head > button:focus-visible {
    background: #dfeaec;
    outline: 2px solid rgba(32, 94, 122, 0.2);
}

.weather-lab-appearance-category {
    display: grid;
    align-content: start;
    gap: 0.16rem;
    padding: 0.27rem;
    border: 1px solid #dce5e9;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(24, 52, 64, 0.025);
}

.weather-lab-appearance-category > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    min-height: 1.35rem;
    padding-bottom: 0.14rem;
    border-bottom: 1px solid #edf1f3;
}

.weather-lab-grid-heading-controls,
.weather-lab-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
}

.weather-lab-grid-heading-controls label,
.weather-lab-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    color: #304650;
    font-size: 0.61rem;
    font-weight: 650;
}

.weather-lab-grid-heading-controls input,
.weather-lab-inline-check input {
    width: auto;
    margin: 0;
}

.weather-lab-appearance-category h4 {
    margin: 0;
    color: #172127;
    font-size: 0.69rem;
}

.weather-lab-category-reset {
    appearance: none;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid #d4dde1;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-strong);
    font: 700 0.82rem/1 sans-serif;
    cursor: pointer;
}

.weather-lab-category-reset:hover {
    border-color: var(--brand);
    background: #edf5f7;
}

.weather-lab-range-values,
.weather-lab-tick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.18rem;
}

.weather-lab-range-inline {
    display: grid;
    grid-template-columns: 3.4rem minmax(54px, 1fr) 3.4rem;
    align-items: end;
    gap: 0.2rem;
}

.weather-lab-range-inline > label {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.weather-lab-range-inline > label > span {
    color: var(--ink-soft);
    font-size: 0.55rem;
    font-weight: 700;
    text-align: center;
}

.weather-lab-range-inline input[type="number"] {
    min-width: 0;
    width: 100%;
    height: 26px;
    min-height: 26px;
    padding: 0.18rem 0.16rem;
    border-radius: 6px;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.weather-lab-range-inline .weather-lab-dual-range {
    margin-bottom: 0.05rem;
}

.weather-lab-axis-label-options {
    align-self: start;
    border: 1px solid #e2e8eb;
    border-radius: 8px;
    background: #fbfcfd;
}

.weather-lab-axis-label-options > summary {
    padding: 0.36rem 0.42rem;
    color: #172127;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.weather-lab-axis-label-options > div {
    display: grid;
    gap: 0.2rem;
    padding: 0;
}

.weather-lab-axis-label-options header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    color: var(--ink-soft);
    font-size: 0.59rem;
}

.weather-lab-top-axis-toggle {
    display: flex !important;
    align-items: center;
    gap: 0.22rem;
}

.weather-lab-top-axis-toggle input {
    width: auto;
}

.weather-lab-tick-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.12rem;
}

.weather-lab-range-values label,
.weather-lab-tick-slider,
.weather-lab-colorbar-settings label {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 600;
}

.weather-lab-range-values input,
.weather-lab-colorbar-settings select {
    min-width: 0;
    padding: 0.25rem 0.34rem;
    border-radius: 6px;
    font-size: 0.66rem;
}

.weather-lab-dual-range {
    position: relative;
    height: 1.25rem;
    margin: 0 0.15rem;
}

.weather-lab-range-track {
    position: absolute;
    top: calc(50% - 2px);
    right: 0;
    left: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to right, #d9e0e3 0 var(--range-start), var(--brand) var(--range-start) var(--range-end), #d9e0e3 var(--range-end) 100%);
}

.weather-lab-dual-range input[type="range"] {
    appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
}

.weather-lab-dual-range input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}

.weather-lab-dual-range input[type="range"]::-webkit-slider-thumb,
.weather-lab-tick-slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--brand-strong);
    box-shadow: 0 0 0 1px rgba(17, 42, 53, 0.34);
    cursor: ew-resize;
    pointer-events: auto;
}

.weather-lab-tick-slider {
    grid-template-columns: minmax(0, 10rem) minmax(3.4rem, 1fr) 2rem;
    align-items: center;
    column-gap: 0.35rem;
}

.weather-lab-tick-slider > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.weather-lab-tick-slider > input[type="range"] { min-width: 0; padding: 0; }

.weather-lab-tick-slider input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: var(--brand);
}

.weather-lab-tick-slider output {
    padding: 0.14rem 0.18rem;
    border: 1px solid #d8e0e4;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.weather-lab-tick-control {
    transition: opacity 120ms ease;
}

.weather-lab-tick-control.is-disabled {
    opacity: 0.46;
}

.weather-lab-tick-control.is-disabled input[type="range"] {
    cursor: not-allowed;
    filter: grayscale(1);
}

.weather-lab-tick-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    color: #172127;
    cursor: pointer;
}

.weather-lab-tick-toggle input {
    width: auto;
    margin: 0;
}

.weather-lab-size-slider {
    grid-template-columns: minmax(66px, 0.85fr) minmax(58px, 1fr) 2.5rem;
}

.weather-lab-colorbar-settings {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 0.3rem;
    padding: 0.3rem;
    border: 1px solid #e2e8eb;
    border-radius: 8px;
    background: #fbfcfd;
}

.weather-lab-colorbar-control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
    gap: 0.28rem;
    align-items: start;
}

.weather-lab-colorbar-preview {
    display: grid;
    grid-template-columns: 18px minmax(38px, 1fr);
    gap: 0;
    min-height: 120px;
    color: #000;
    font: 0.65rem/1 var(--weather-chart-font-family, "Times New Roman", serif);
}

.weather-lab-colorbar-gradient {
    width: 18px;
    height: 100%;
    border: 1px solid #000;
    background: linear-gradient(to top, var(--weather-colormap));
}

.weather-lab-colorbar-ticks {
    position: relative;
    height: 100%;
}

.weather-lab-colorbar-ticks > i {
    position: absolute;
    bottom: var(--tick-position);
    left: 0;
    width: 5px;
    height: 1px;
    background: #000;
    transform: translateY(50%);
}

.weather-lab-colorbar-ticks > i.is-minor {
    width: 3px;
    opacity: 0.8;
}

.weather-lab-colorbar-ticks > i > span {
    position: absolute;
    left: 8px;
    top: 50%;
    color: #000;
    font-style: normal;
    white-space: nowrap;
    transform: translateY(-50%);
}

.weather-lab-appearance-category > small {
    color: var(--ink-soft);
    font-size: 0.6rem;
    line-height: 1.28;
}

.weather-lab-threshold-settings {
    grid-column: 1 / -1;
    container-name: weather-threshold-editor;
    container-type: inline-size;
}

.weather-lab-threshold-settings > header {
    align-items: center;
    flex-wrap: wrap;
}

.weather-lab-threshold-settings > header > div {
    display: grid;
    gap: 0.12rem;
}

.weather-lab-threshold-settings > header small,
.weather-lab-threshold-empty {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.6rem;
}

.weather-lab-threshold-list {
    display: grid;
    gap: 0.26rem;
}

.weather-lab-threshold-editor {
    display: grid;
    grid-template-columns: minmax(104px, 120px) minmax(0, 1fr);
    align-items: start;
    gap: 0.34rem;
    min-width: 0;
}

.weather-lab-threshold-picker {
    position: sticky;
    top: 2.55rem;
    display: grid;
    align-content: start;
    gap: 0.24rem;
    min-width: 0;
    padding: 0.26rem;
    border: 1px solid #dbe4e8;
    border-radius: 8px;
    background: #f4f7f8;
}

.weather-lab-threshold-picker-list {
    display: grid;
    gap: 0.18rem;
    max-height: min(19rem, 46vh);
    overflow: auto;
    padding: 1px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.weather-lab-threshold-picker-item {
    appearance: none;
    display: grid;
    grid-template-columns: 0.7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    padding: 0.26rem 0.34rem;
    border: 1px solid #d9e3e7;
    border-radius: 7px;
    background: #fff;
    color: #304650;
    font-family: inherit;
    font-size: 0.63rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.weather-lab-threshold-picker-item:hover,
.weather-lab-threshold-picker-item:focus-visible {
    border-color: #9eb8c3;
    background: #edf5f7;
    color: var(--brand-strong);
    outline: 0;
}

.weather-lab-threshold-picker-item[aria-selected="true"] {
    border-color: #7fa6b6;
    background: #e6f1f4;
    color: var(--brand-strong);
    box-shadow: inset 3px 0 0 var(--brand), 0 1px 2px rgba(25, 67, 84, 0.08);
}

.weather-lab-threshold-picker-item > :not(.weather-lab-color-swatch) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-threshold-picker-item > span {
    display: grid;
    gap: 0.03rem;
    overflow: visible;
    white-space: normal;
}

.weather-lab-threshold-picker-item > span > strong,
.weather-lab-threshold-picker-item > span > small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-threshold-picker-item > span > strong {
    font-size: 0.63rem;
}

.weather-lab-threshold-picker-item > span > small {
    color: #687a82;
    font-size: 0.54rem;
    font-weight: 550;
}

.weather-lab-threshold-picker-item[aria-selected="true"] > span > small {
    color: #486875;
}

.weather-lab-color-swatch {
    display: block;
    width: 0.68rem;
    height: 1.15rem;
    border: 1px solid rgba(0, 0, 0, 0.24);
    border-radius: 999px;
    background: var(--weather-threshold-color, var(--weather-suggestion-color, currentColor));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.weather-lab-threshold-picker > .weather-lab-add-threshold {
    justify-content: center;
    width: 100%;
}

/* Shared compact editor: keep selection above the form so narrow inspectors
   do not lose a third of their usable field width to a permanent sidebar. */
.weather-lab-threshold-editor.compact-guide-editor,
.hx-guide-workbench.compact-guide-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
    min-width: 0;
    container: compact-guide / inline-size;
}
.compact-guide-editor > .compact-guide-picker {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .3rem;
    padding: .3rem;
}
.compact-guide-picker > .compact-guide-picker-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(7.5rem, 10.5rem);
    grid-template-columns: none;
    gap: .22rem;
    min-width: 0;
    max-height: 3rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 1px 3px;
    scrollbar-width: thin;
}
.compact-guide-picker > .compact-guide-picker-actions {
    display: flex;
    gap: .22rem;
    padding: 0;
    border-top: 0;
}
.compact-guide-picker > button,
.compact-guide-picker-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .22rem;
    width: auto;
    height: 28px;
    min-height: 28px;
    margin: 0;
    padding: .2rem .38rem;
    white-space: nowrap;
}
.compact-guide-picker-actions > button .app-delete-icon { width: .85rem; height: .85rem; }
.compact-guide-editor .weather-lab-threshold-detail > .weather-lab-threshold-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    align-items: start;
    gap: .3rem;
    column-count: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.compact-guide-editor .weather-lab-threshold-detail .weather-lab-threshold-row-head {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: .25rem .6rem;
    margin: 0;
    padding: .12rem .2rem .25rem;
}
.compact-guide-editor .weather-lab-threshold-detail .weather-lab-threshold-row-head > .weather-lab-threshold-switches {
    flex: 1 1 auto;
    width: auto;
    gap: .3rem .55rem;
    padding: 0;
    border: 0;
    background: transparent;
}
.compact-guide-editor .weather-lab-threshold-group,
.compact-guide-editor .hx-guide-card {
    margin: 0;
    padding: .3rem;
    gap: .24rem;
    border-radius: 7px;
    background: var(--surface, #fff);
    box-shadow: none;
}
.compact-guide-editor .weather-lab-threshold-group > strong {
    margin: 0;
    font-size: .66rem;
    letter-spacing: normal;
    text-transform: none;
}
.compact-guide-editor .weather-lab-threshold-group-grid,
.compact-guide-editor .weather-lab-threshold-group.is-source .weather-lab-threshold-group-grid,
.compact-guide-editor .hx-guide-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .26rem .4rem;
    min-width: 0;
}
/* A color field also contains recent-color swatches. Align the actual
   caption/control rows, not the bottom of that taller field. */
.compact-guide-editor .weather-lab-threshold-group-grid {
    align-items: start;
}
.compact-guide-editor .weather-lab-threshold-group-grid > label,
.compact-guide-editor .weather-lab-threshold-group-grid > .weather-lab-threshold-color-field {
    align-content: start;
    grid-template-rows: minmax(1rem, auto) auto;
    row-gap: .08rem;
}
.compact-guide-editor .weather-lab-threshold-group-grid > label > span:first-child,
.compact-guide-editor .weather-lab-threshold-group-grid > .weather-lab-threshold-color-field > span:first-child {
    display: block;
    min-height: 1rem;
    margin: 0;
    font-size: .64rem;
    line-height: 1rem;
}
.compact-guide-editor .weather-lab-threshold-group-grid .weather-lab-color-input-row,
.compact-guide-editor .weather-lab-threshold-group-grid .weather-lab-color-input-row > input[type="color"],
.compact-guide-editor .weather-lab-threshold-group-grid .weather-lab-color-input-row > .hx-color-control-action {
    height: 28px;
    min-height: 28px;
    box-sizing: border-box;
}
.compact-guide-editor .weather-lab-threshold-group-grid > .weather-lab-threshold-slider-pair { grid-column: auto; }
.compact-guide-editor .weather-lab-threshold-group.is-style .weather-lab-threshold-slider-pair { grid-column: 1 / -1; order: 3; }
.compact-guide-editor .weather-lab-threshold-group.is-label .weather-lab-threshold-group-grid { grid-template-columns: minmax(0, 1fr) 4rem; }
.compact-guide-editor .weather-lab-threshold-label-positions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: .25rem .4rem;
    margin-top: .2rem;
}
.compact-guide-editor .weather-lab-threshold-slider-pair > span:first-child,
.compact-guide-editor .hx-guide-group-grid > label > span:first-child {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink-soft);
    font-size: .64rem;
    line-height: 1.3;
}
.compact-guide-editor .weather-lab-threshold-slider-pair > span:last-child,
.compact-guide-editor .hx-guide-slider-pair { grid-template-columns: minmax(2rem, 1fr) 3.7rem; }
.compact-guide-editor .weather-lab-threshold-row input:not([type="checkbox"]):not([type="range"]),
.compact-guide-editor .weather-lab-threshold-row select,
.compact-guide-editor .hx-guide-group-grid input:not([type="checkbox"]):not([type="range"]),
.compact-guide-editor .hx-guide-group-grid select { height: 28px; min-height: 28px; }
.compact-guide-editor .weather-lab-threshold-row input[type="checkbox"] { width: 13px; height: 13px; min-height: 0; margin: 0; }
.compact-guide-editor .hx-guide-editor-fields { border: 0; padding: 0; gap: .3rem; box-shadow: none; background: transparent; }
.compact-guide-editor .hx-guide-editor-fields > legend { margin: 0 0 .2rem; padding: 0 .2rem; }
.compact-guide-editor .hx-guide-card > header { min-height: 1.1rem; padding-bottom: .1rem; }
.compact-guide-editor .hx-guide-field-wide { grid-column: 1 / -1; }
.compact-guide-editor .hx-appearance-slider-control { align-self: end; gap: .08rem; }
.compact-guide-editor .hx-appearance-slider { min-height: 28px; }
.compact-guide-editor .hx-guide-card.is-style .hx-guide-group-grid { grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr)); }
@container compact-guide (max-width: 520px) {
    .compact-guide-editor > .compact-guide-picker { grid-template-columns: auto minmax(0, 1fr); }
    .compact-guide-picker > .compact-guide-picker-list { grid-column: 1 / -1; grid-row: 2; }
    .compact-guide-picker > .compact-guide-picker-actions { grid-column: 2; grid-row: 1; justify-content: end; }
}
@container compact-guide (max-width: 300px) {
    .compact-guide-editor .weather-lab-threshold-group-grid,
    .compact-guide-editor .weather-lab-threshold-group.is-source .weather-lab-threshold-group-grid,
    .compact-guide-editor .hx-guide-group-grid { grid-template-columns: minmax(0, 1fr); }
    .compact-guide-editor .weather-lab-threshold-group.is-label .weather-lab-threshold-group-grid { grid-template-columns: minmax(0, 1fr) 4rem; }
    .compact-guide-picker-actions > button > span:not([aria-hidden]) { display: none; }
    .compact-guide-picker-actions > button { width: 28px; padding: .2rem; }
}

.weather-lab-threshold-picker-actions,
.hx-guide-selection-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.18rem;
    padding-top: 0.2rem;
    border-top: 1px solid #dbe4e8;
}

.weather-lab-threshold-picker-actions > button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    min-width: 0;
    min-height: 1.62rem;
    padding: 0.18rem 0.28rem;
    border: 1px solid #c9d7dd;
    border-radius: 6px;
    background: #fff;
    color: #37505c;
    font-family: inherit;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
}

.weather-lab-threshold-picker-actions > button.is-danger {
    border-color: #e0bbb7;
    background: #fff6f5;
    color: #9e352d;
}

.weather-lab-threshold-picker-actions > button:hover,
.weather-lab-threshold-picker-actions > button:focus-visible {
    border-color: #88a9b7;
    background: #eaf3f6;
    outline: 0;
}

.weather-lab-threshold-picker-actions > button:disabled {
    opacity: 0.45;
    cursor: default;
}

.weather-lab-threshold-detail {
    display: grid;
    align-content: start;
    min-width: 0;
}

.weather-lab-threshold-detail > .weather-lab-threshold-row {
    min-width: 0;
    box-shadow: 0 1px 2px rgba(24, 52, 64, 0.035);
}

.weather-lab-threshold-detail .weather-lab-threshold-row-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.weather-lab-threshold-detail .weather-lab-threshold-row-head > strong {
    min-width: 0;
    margin-right: 0;
    white-space: nowrap;
}

.weather-lab-threshold-detail .weather-lab-threshold-row-head > .weather-lab-threshold-switches {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    width: 100%;
}

.weather-lab-threshold-detail > .weather-lab-threshold-empty {
    display: grid;
    place-items: center;
    min-height: 5.5rem;
    padding: 0.65rem;
    border: 1px dashed #cbd8de;
    border-radius: 8px;
    background: #fafcfd;
    text-align: center;
}

.weather-lab-threshold-row {
    display: block;
    column-count: 2;
    column-width: 190px;
    column-gap: 0.26rem;
    padding: 0.3rem;
    border: 1px solid #e3e9ec;
    border-radius: 8px;
    background: #fff;
}

.weather-lab-threshold-row-head {
    display: flex;
    column-span: all;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.26rem;
    padding-bottom: 0.24rem;
    border-bottom: 1px solid #e5ebee;
}

.weather-lab-threshold-row-head > strong {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    margin-right: auto;
    color: #20343d;
    font-size: 0.67rem;
}

.weather-lab-threshold-row-head > strong svg,
.weather-lab-add-threshold svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.weather-lab-threshold-group {
    display: inline-grid;
    width: 100%;
    margin: 0 0 0.26rem;
    padding: 0.25rem;
    break-inside: avoid;
    border: 1px solid #e3e9ec;
    border-radius: 7px;
    background: #f8fafb;
    vertical-align: top;
}

.weather-lab-threshold-group > strong {
    margin-bottom: 0.18rem;
    color: #38505b;
    font-size: 0.61rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.weather-lab-threshold-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(82px, 100%), 1fr));
    gap: 0.22rem;
    align-items: end;
}

.weather-lab-threshold-group.is-source .weather-lab-threshold-group-grid {
    grid-template-columns: minmax(0, 1fr);
}

.weather-lab-threshold-group.is-label .weather-lab-threshold-group-grid {
    grid-template-columns: minmax(0, 1fr) 4rem;
}

.weather-lab-threshold-group-grid > label,
.weather-lab-threshold-group-grid > .weather-lab-threshold-color-field {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    color: var(--ink-soft);
    font-size: 0.59rem;
    font-weight: 600;
}

.weather-lab-statistics-options {
    column-span: all;
    width: 100%;
    gap: 0.3rem;
}

.weather-lab-statistics-variable-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(178px, 100%), 1fr));
    gap: 0.24rem;
    min-width: 0;
}

.weather-lab-statistics-variable-row,
.weather-lab-statistics-variable-add {
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    padding: 0.24rem;
    border: 1px solid #e1e8eb;
    border-radius: 7px;
    background: #f9fbfc;
}

.weather-lab-statistics-variable-row > button,
.weather-lab-statistics-variable-add > button {
    align-self: end;
    min-height: 28px;
    margin: 0;
}

.weather-lab-statistics-variable-add {
    max-width: 25rem;
    background: #f3f8fa;
}

.weather-lab-color-control {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.weather-lab-color-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.75rem;
    align-items: stretch;
    gap: 0.18rem;
    min-width: 0;
}

.weather-lab-threshold-row .weather-lab-color-input-row input[type="color"] {
    width: 100%;
    height: 1.72rem;
    min-height: 1.72rem;
    padding: 0.1rem;
}

.weather-lab-eyedropper {
    appearance: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.72rem;
    padding: 0;
    border: 1px solid #cfdbe0;
    border-radius: 6px;
    background: #fff;
    color: #36515d;
    cursor: pointer;
}

.weather-lab-eyedropper:hover,
.weather-lab-eyedropper:focus-visible {
    border-color: #89aab8;
    background: #eaf3f6;
    color: var(--brand-strong);
    outline: 0;
}

.weather-lab-eyedropper svg {
    width: 0.88rem;
    height: 0.88rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.weather-lab-color-suggestions {
    display: grid;
    grid-auto-columns: 1rem;
    grid-auto-flow: column;
    align-items: center;
    gap: 0.16rem;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 1px 3px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.weather-lab-color-suggestion {
    appearance: none;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 50%;
    background: var(--weather-suggestion-color, #111);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    cursor: pointer;
    transition: transform 100ms ease, box-shadow 100ms ease;
}

.weather-lab-color-suggestion:hover,
.weather-lab-color-suggestion:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand-strong);
    transform: scale(1.08);
}

.weather-lab-color-suggestion[aria-pressed="true"],
.weather-lab-color-suggestion.is-current {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand);
}

@container weather-threshold-editor (max-width: 240px) {
    .weather-lab-threshold-editor {
        grid-template-columns: minmax(0, 1fr);
    }

    .weather-lab-threshold-picker {
        position: static;
    }

    .weather-lab-threshold-picker-list {
        grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
        max-height: none;
    }

    .weather-lab-threshold-detail .weather-lab-threshold-row {
        column-count: 1;
    }
}

.weather-lab-threshold-row input,
.weather-lab-threshold-row select {
    min-width: 0;
    width: 100%;
    min-height: 27px;
    padding: 0.2rem 0.28rem;
    border-radius: 6px;
    font-size: 0.64rem;
}

.weather-lab-threshold-row input[type="color"] {
    width: 100%;
    min-height: 1.55rem;
    padding: 0.1rem;
}

.weather-lab-threshold-switches {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.16rem;
    padding: 0.16rem 0.22rem;
    border: 1px solid #e1e8eb;
    border-radius: 7px;
    background: #f7fafb;
}

.weather-lab-threshold-switches label {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    color: #273a43;
    font-size: 0.6rem;
    font-weight: 650;
}

.weather-lab-threshold-switches .weather-lab-threshold-hx {
    padding: 0.16rem 0.25rem;
    border: 1px solid #d8e0e4;
    border-radius: 999px;
    background: #f7fafb;
    color: #304650;
    font-weight: 700;
}

.weather-lab-panel.has-hx-line-options .weather-lab-threshold-switches .weather-lab-threshold-hx {
    padding: 0.16rem 0.25rem;
    border: 1px solid var(--weather-hx-line-border);
    border-radius: 999px;
    background: var(--weather-hx-line-background);
    color: var(--weather-hx-line-text);
    font-weight: 750;
}

.weather-lab-panel.has-hx-line-options .weather-lab-threshold-switches .weather-lab-threshold-hx[data-weather-hx-line-state="active"] {
    border-color: var(--weather-hx-line-accent);
    background: var(--weather-hx-line-background-hover);
    color: var(--weather-hx-line-text);
    box-shadow: inset 0 0 0 1px rgba(61, 43, 0, 0.12);
}

.weather-lab-panel.has-hx-line-options .weather-lab-threshold-switches .weather-lab-threshold-hx:focus-within {
    outline: 2px solid var(--weather-hx-line-accent);
    outline-offset: 2px;
}

.weather-lab-threshold-switches input {
    width: auto;
}

.weather-lab-threshold-value.is-disabled,
.weather-lab-threshold-percentile.is-disabled {
    display: none;
}

.weather-lab-threshold-slider-pair > span:last-child {
    display: grid;
    grid-template-columns: minmax(48px, 1fr) 3.6rem;
    gap: 0.2rem;
    align-items: center;
}

.weather-lab-threshold-slider-pair input[type="range"] {
    padding: 0;
    accent-color: var(--brand);
}

.weather-lab-threshold-slider-pair input[type="number"] {
    text-align: right;
}

.weather-lab-secondary-axis line {
    stroke: #111;
    stroke-width: 0.75;
    vector-effect: non-scaling-stroke;
}

.weather-lab-top-axis-line {
    stroke: #000;
    stroke-width: 1.05;
    vector-effect: non-scaling-stroke;
}

.weather-lab-secondary-axis line.is-minor {
    stroke-width: 0.55;
}

.weather-lab-threshold-group-grid > .weather-lab-threshold-slider-pair {
    grid-column: 1 / -1;
}

.weather-lab-threshold-enabled input {
    width: auto;
}

.weather-lab-threshold-remove {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    border: 1px solid #e3c7c4;
    border-radius: 50%;
    background: #fff7f6;
    color: #a13229;
    cursor: pointer;
}

.weather-lab-add-threshold {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    min-height: 1.65rem;
    padding: 0.2rem 0.38rem;
    border: 1px solid #b9cbd3;
    border-radius: 7px;
    background: #eef5f7;
    color: var(--brand-strong);
    font-size: 0.64rem;
    font-weight: 700;
    cursor: pointer;
}

.weather-lab-add-threshold:hover,
.weather-lab-add-threshold:focus-visible {
    border-color: var(--brand);
    background: #e2eff3;
    outline: 0;
}

.weather-lab-threshold-statistics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    padding-top: 0.22rem;
    border-top: 1px solid #e4eaed;
}

.weather-lab-threshold-statistics > label:first-child {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #172127;
    font-size: 0.68rem;
    font-weight: 650;
}

.weather-lab-threshold-statistics > .weather-lab-size-slider {
    flex: 1 1 210px;
    max-width: 340px;
}

.weather-lab-export-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-right: auto;
}

.weather-lab-appearance-actions {
    position: sticky;
    z-index: 2;
    bottom: -0.34rem;
    justify-content: flex-end;
    margin: 0.02rem -0.08rem -0.08rem;
    padding: 0.3rem 0.08rem 0.08rem;
    border-top: 1px solid #e2e8eb;
    background: rgba(255, 255, 255, 0.97);
}

.weather-lab-appearance-actions > .button,
.weather-lab-appearance-actions > .workspace-tool-button,
.weather-lab-export-actions > .workspace-tool-button {
    min-height: 28px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.65rem;
}

.weather-lab-pdf-export-dialog {
    width: min(560px, calc(100vw - 2rem));
    max-height: min(720px, calc(100vh - 2rem));
    margin: auto;
    padding: 0;
    overflow: hidden auto;
    border: 1px solid #b9c8cf;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(22, 43, 53, 0.28);
}

.weather-lab-pdf-export-dialog::backdrop {
    background: rgba(17, 32, 39, 0.42);
    backdrop-filter: blur(2px);
}

.weather-lab-pdf-export-dialog > form {
    display: grid;
    gap: 0.65rem;
    padding: 0.8rem;
}

.weather-lab-pdf-export-dialog header,
.weather-lab-pdf-export-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.weather-lab-pdf-export-dialog header > div {
    display: grid;
    gap: 0.08rem;
}

.weather-lab-pdf-export-dialog header small,
.weather-lab-pdf-export-note {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.68rem;
}

.weather-lab-pdf-export-dialog header button {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #d4dde1;
    border-radius: 8px;
    background: #f5f8f9;
    cursor: pointer;
}

.weather-lab-pdf-export-dialog fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem;
    border: 1px solid #d6e0e4;
    border-radius: 10px;
}

.weather-lab-pdf-export-dialog fieldset legend {
    padding: 0 0.25rem;
    font-size: 0.69rem;
    font-weight: 800;
}

.weather-lab-pdf-export-dialog fieldset label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.48rem;
    border: 1px solid #e0e7ea;
    border-radius: 8px;
    background: #f8fafb;
}

.weather-lab-pdf-export-dialog fieldset label:has(input:checked) {
    border-color: #7da9bb;
    background: #eef7fa;
}

.weather-lab-pdf-export-dialog fieldset label span {
    display: grid;
    gap: 0.08rem;
}

.weather-lab-pdf-export-dialog fieldset small {
    color: var(--ink-soft);
    font-size: 0.64rem;
    line-height: 1.35;
}

.weather-lab-pdf-export-dialog [data-weather-pdf-dpi-wrap] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.6fr);
    align-items: center;
    gap: 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.weather-lab-pdf-export-dialog footer {
    justify-content: flex-end;
    padding-top: 0.45rem;
    border-top: 1px solid #e1e8eb;
}

.weather-lab-palette-control {
    display: grid;
    align-items: center;
    min-width: 0;
    height: 30px;
}

.weather-lab-palette-control .compact-palette-select {
    width: 100%;
    height: 30px;
}

.weather-lab-palette-control .compact-palette-trigger {
    height: 30px;
    min-height: 30px;
}

.weather-lab-upload-status.is-loading,
.weather-lab-source-message.is-loading strong {
    color: var(--brand-strong);
}

.weather-lab-upload-status.is-error,
.weather-lab-source-message.is-error {
    color: #9c2e32;
}

.weather-lab-upload-progress {
    position: relative;
    display: block;
    width: min(240px, 100%);
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce7eb;
}

.weather-lab-upload-progress[hidden] {
    display: none;
}

.weather-lab-upload-progress > i {
    position: absolute;
    inset: 0 auto 0 -38%;
    width: 38%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), #68b7d0);
    animation: weather-lab-upload-progress 1.05s ease-in-out infinite;
}

@keyframes weather-lab-upload-progress {
    0% { transform: translateX(0); }
    100% { transform: translateX(365%); }
}

.weather-threshold-label,
.weather-lab-statistics-panel text {
    pointer-events: none;
}

.weather-lab-point-settings > label {
    display: grid;
    grid-template-columns: minmax(76px, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.66rem;
    font-weight: 600;
}

.weather-lab-point-settings select {
    min-width: 0;
    padding: 0.3rem 0.4rem;
    border-radius: 7px;
    font-size: 0.7rem;
}

.weather-lab-dwd-workflow {
    display: grid;
    gap: 0.6rem;
    padding: 0.72rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfd;
}

.weather-lab-dwd-workflow > header {
    display: grid;
    gap: 0.15rem;
}

.weather-lab-dwd-workflow > header span {
    color: var(--ink-soft);
    font-size: 0.7rem;
}

.weather-lab-dwd-workflow ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.weather-lab-dwd-workflow li {
    display: flex;
    align-items: flex-start;
    gap: 0.46rem;
    min-width: 0;
    padding: 0.52rem;
    border: 1px solid #e0e7ea;
    border-radius: 9px;
    background: #fff;
}

.weather-lab-dwd-workflow li > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: var(--brand-strong);
    color: #fff;
    font-size: 0.67rem;
    font-weight: 800;
}

.weather-lab-dwd-workflow li > div {
    display: grid;
    gap: 0.12rem;
}

.weather-lab-dwd-workflow li strong {
    font-size: 0.72rem;
}

.weather-lab-dwd-workflow li small {
    color: var(--ink-soft);
    font-size: 0.65rem;
    line-height: 1.35;
}

.weather-lab-toolbar-actions {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.weather-lab-toolbar-actions > label {
    display: grid;
    min-width: 220px;
}

.weather-lab-toolbar-actions > .weather-lab-hx-coupling {
    margin-left: 0.15rem;
}

.weather-lab-toolbar-actions > .button,
.weather-lab-toolbar-actions > label select,
.weather-lab-toolbar-actions > .weather-lab-global-appearance > summary {
    height: 34px;
    min-height: 34px;
}

.weather-lab-toolbar-actions > .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.72rem;
    border-radius: 8px;
    line-height: 1;
}

.weather-lab-global-appearance {
    position: relative;
}

.weather-lab-global-appearance > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.weather-lab-global-appearance > summary .workspace-tool-icon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.hx-diagram-pane > .section-heading .header-cluster {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.hx-diagram-pane > .section-heading .header-cluster > .workspace-tool-button,
.hx-diagram-pane > .section-heading .header-cluster > .hx-analysis-coupling-control > summary {
    height: 34px;
    min-height: 34px;
}

/* h,x appearance inspector: it occupies the workspace to the left of the
   diagram so the result remains visible while a setting is adjusted. */
.hx-appearance-modal {
    inset: 0;
    z-index: 44;
    pointer-events: none;
}

.hx-appearance-panel {
    position: fixed;
    left: var(--hx-appearance-left, 12px);
    top: var(--hx-appearance-top, 76px);
    width: var(--hx-appearance-width, min(470px, calc(100vw - 24px)));
    max-height: var(--hx-appearance-max-height, calc(100vh - 88px));
    margin: 0;
    padding: 0.56rem;
    overflow: auto;
    border-radius: 12px;
    box-shadow: 0 18px 46px rgba(17, 39, 51, 0.22);
    pointer-events: auto;
    animation: hx-appearance-slide-left 150ms ease-out both;
}

@keyframes hx-appearance-slide-left {
    from {
        opacity: 0;
        transform: translateX(14px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hx-appearance-panel .modal-header {
    position: sticky;
    top: -0.56rem;
    z-index: 2;
    margin: -0.56rem -0.56rem 0;
    padding: 0.5rem 0.56rem 0.44rem;
    border-bottom: 1px solid #dde6eb;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
}

.hx-appearance-panel .modal-header h3 {
    margin: 0.05rem 0 0;
    font-size: 0.86rem;
}

.hx-appearance-close,
.hx-appearance-reset {
    appearance: none;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #526b78;
    cursor: pointer;
}

.hx-appearance-close:hover,
.hx-appearance-close:focus-visible,
.hx-appearance-reset:hover,
.hx-appearance-reset:focus-visible {
    background: #edf3f6;
    color: var(--brand-strong);
    outline: none;
}

.hx-appearance-close svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.65;
}

.hx-appearance-reset {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.78rem;
}

.hx-appearance-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.34rem;
    padding-top: 0.4rem;
    container-name: hx-appearance;
    container-type: inline-size;
}

.hx-appearance-form > .hx-appearance-intro,
.hx-appearance-form > .hx-appearance-tabs,
.hx-appearance-form > .hx-appearance-tab-pane,
.hx-appearance-form > .hx-appearance-section:first-of-type,
.hx-appearance-form > .hx-element-layout-section,
.hx-appearance-form > .hx-line-grid-section,
.hx-appearance-form > .hx-appearance-colorbar-card,
.hx-appearance-form > .hx-appearance-actions {
    grid-column: 1 / -1;
}

.hx-appearance-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.14rem;
    padding: 0.16rem;
    border: 1px solid #cbd6dc;
    border-radius: 9px;
    background: #eaf0f2;
    box-shadow: inset 0 1px 2px rgba(23, 49, 61, 0.04);
}

.hx-appearance-tabs button {
    appearance: none;
    min-width: 0;
    min-height: 1.78rem;
    padding: 0.25rem 0.34rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #40545d;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.hx-appearance-tabs button:hover,
.hx-appearance-tabs button:focus-visible {
    border-color: #b6c8d0;
    background: rgba(255, 255, 255, 0.68);
    color: var(--brand-strong);
    outline: 0;
}

.hx-appearance-tabs button[aria-selected="true"],
.hx-appearance-tabs button.is-active {
    border-color: #a8bec8;
    background: #fff;
    color: var(--brand-strong);
    box-shadow: inset 0 -2px 0 var(--brand), 0 1px 2px rgba(24, 54, 67, 0.1);
}

.hx-appearance-tabs button[data-hx-appearance-tab].is-hx-coupled {
    border-color: #c59a27;
    background: linear-gradient(180deg, #fff4bf, #f2d36a);
    color: #513b00;
    box-shadow: inset 0 -2px 0 #b77d00, 0 1px 3px rgba(126, 88, 8, 0.14);
}

.hx-appearance-tab-pane {
    display: none;
    min-width: 0;
}

.hx-appearance-tab-pane.is-active:not([hidden]) {
    display: block;
}

.hx-appearance-tab-pane[data-hx-appearance-pane="general"].is-active:not([hidden]) {
    column-count: 2;
    column-width: 220px;
    column-gap: 0.36rem;
}

.hx-appearance-tab-pane[data-hx-appearance-pane="general"] > .hx-appearance-section {
    display: inline-grid;
    width: 100%;
    margin: 0 0 0.36rem;
    break-inside: avoid;
    vertical-align: top;
}

.hx-appearance-tab-pane[data-hx-appearance-pane="general"] > .hx-analysis-binding {
    column-span: all;
    margin-top: 0.02rem;
}

.hx-appearance-tab-pane[data-hx-appearance-pane="general"] > .hx-element-layout-section {
    display: grid;
    column-span: all;
}

.hx-appearance-tab-pane[data-hx-appearance-pane="general"] > .hx-free-layout-card {
    display: grid;
    width: 100%;
    margin: 0 0 0.36rem;
    overflow: hidden;
    break-inside: avoid;
    column-span: all;
    border: 1px solid #b9ccd5;
    border-radius: 9px;
    background: linear-gradient(135deg, #f7fafb, #eef5f7);
    box-shadow: 0 1px 2px rgba(25, 55, 68, 0.07);
}

.hx-free-layout-card > .hx-appearance-section-tools {
    min-height: 2.35rem;
    padding: 0.34rem 0.42rem;
}

.hx-free-layout-card > .hx-appearance-section-tools > span:first-child {
    display: grid;
    gap: 0.05rem;
}

.hx-free-layout-card > .hx-appearance-section-tools strong {
    color: #263c48;
    font-size: 0.7rem;
}

.hx-free-layout-card > .hx-appearance-section-tools small {
    color: var(--ink-soft);
    font-size: 0.59rem;
    font-weight: 500;
}

.hx-layout-fine-tuning {
    border-top: 1px solid #d9e4e8;
    background: rgba(255, 255, 255, 0.76);
}

.hx-layout-fine-tuning > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.9rem;
    padding: 0.28rem 0.42rem;
    color: #405761;
    font-size: 0.64rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.hx-layout-fine-tuning > summary::-webkit-details-marker {
    display: none;
}

.hx-layout-fine-tuning > summary::after {
    content: "›";
    color: #68808b;
    font-size: 0.92rem;
    transition: transform 120ms ease;
}

.hx-layout-fine-tuning[open] > summary::after {
    transform: rotate(90deg);
}

.hx-layout-fine-tuning-body {
    display: grid;
    gap: 0.3rem;
    padding: 0 0.42rem 0.42rem;
}

.hx-appearance-tab-pane:is([data-hx-appearance-pane="single"], [data-hx-appearance-pane="compare"], [data-hx-appearance-pane="axes"], [data-hx-appearance-pane="guides"]).is-active:not([hidden]) {
    display: grid;
    gap: 0.36rem;
}

.hx-guide-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.14rem;
    padding: 0.16rem;
    border: 1px solid #cbd6dc;
    border-radius: 8px;
    background: #eaf0f2;
    box-shadow: inset 0 1px 2px rgba(23, 49, 61, 0.04);
}

.hx-guide-tabs button {
    appearance: none;
    min-width: 0;
    min-height: 1.7rem;
    padding: 0.23rem 0.34rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #40545d;
    font-family: inherit;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.hx-guide-tabs button:hover,
.hx-guide-tabs button:focus-visible {
    border-color: #b6c8d0;
    background: rgba(255, 255, 255, 0.68);
    color: var(--brand-strong);
    outline: 0;
}

.hx-guide-tabs button[aria-selected="true"],
.hx-guide-tabs button.is-active {
    border-color: #a8bec8;
    background: #fff;
    color: var(--brand-strong);
    box-shadow: inset 0 -2px 0 var(--brand), 0 1px 2px rgba(24, 54, 67, 0.1);
}

.hx-guide-subpane,
.hx-guide-tab-pane {
    display: none;
    min-width: 0;
}

.hx-guide-subpane.is-active:not([hidden]),
.hx-guide-subpane:not([hidden]),
.hx-guide-tab-pane.is-active:not([hidden]),
.hx-guide-tab-pane:not([hidden]) {
    display: block;
}

.hx-guide-manager,
.hx-guide-workbench {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.hx-guide-manager,
.hx-guide-tab-pane {
    container-name: hx-guide-manager;
    container-type: inline-size;
}

.hx-guide-workbench,
.hx-guide-manager > .hx-guide-editor {
    display: grid;
    grid-template-columns: minmax(104px, 120px) minmax(0, 1fr);
    align-items: start;
    gap: 0.34rem;
    min-width: 0;
}

.hx-guide-picker,
.hx-guide-selection {
    position: sticky;
    top: 3rem;
    display: grid;
    align-content: start;
    gap: 0.24rem;
    min-width: 0;
    padding: 0.26rem;
    border: 1px solid #dbe4e8;
    border-radius: 8px;
    background: #f4f7f8;
}

.hx-guide-picker-list,
.hx-guide-list {
    display: grid;
    gap: 0.18rem;
    max-height: min(19rem, 46vh);
    overflow: auto;
    padding: 1px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.hx-guide-picker-item {
    appearance: none;
    display: grid;
    grid-template-columns: 0.58rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.26rem;
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    padding: 0.27rem 0.34rem;
    overflow: hidden;
    border: 1px solid #d9e3e7;
    border-left: 3px solid var(--hx-guide-color, #78909a);
    border-radius: 7px;
    background: #fff;
    color: #304650;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.hx-guide-picker-item:hover,
.hx-guide-picker-item:focus-visible {
    border-color: #9eb8c3;
    border-left-color: var(--hx-guide-color, var(--brand));
    background: #edf5f7;
    color: var(--brand-strong);
    outline: 0;
}

.hx-guide-picker-item[aria-selected="true"],
.hx-guide-picker-item.is-active {
    border-color: #7fa6b6;
    border-left-color: var(--hx-guide-color, var(--brand));
    background: #e6f1f4;
    color: var(--brand-strong);
    box-shadow: inset 2px 0 0 var(--hx-guide-color, var(--brand)), 0 1px 2px rgba(25, 67, 84, 0.08);
}

.hx-guide-picker-item strong,
.hx-guide-picker-item small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-guide-picker-item > i {
    display: block;
    width: 0.58rem;
    height: 1.18rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    background: var(--hx-guide-color, var(--brand));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.hx-guide-picker-item > span {
    display: grid;
    gap: 0.03rem;
    min-width: 0;
}

.hx-guide-picker-item > em {
    padding: 0.08rem 0.18rem;
    border-radius: 999px;
    background: #edf2f4;
    color: #5f737c;
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 750;
    line-height: 1;
}

.hx-guide-picker-item small {
    color: #687a82;
    font-size: 0.54rem;
    font-weight: 550;
}

.hx-guide-picker-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    width: 100%;
    min-height: 1.75rem;
    padding: 0.24rem 0.4rem;
    border: 1px dashed #9fb6c0;
    border-radius: 7px;
    background: #fff;
    color: var(--brand-strong);
    font-family: inherit;
    font-size: 0.64rem;
    font-weight: 750;
    line-height: 1.15;
    cursor: pointer;
}

.hx-guide-picker-add svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.hx-guide-picker-add:hover,
.hx-guide-picker-add:focus-visible {
    border-color: var(--brand);
    background: #eaf3f6;
    outline: 0;
}

.hx-guide-selection-actions .button {
    min-width: 0;
    min-height: 1.62rem;
    padding: 0.18rem 0.28rem;
    border-radius: 6px;
    font-size: 0.58rem;
    line-height: 1.1;
}

.hx-guide-selection-actions .button:disabled {
    opacity: 0.45;
}

.hx-guide-detail {
    display: grid;
    align-content: start;
    gap: 0.28rem;
    min-width: 0;
}

.hx-guide-editor {
    display: grid;
    align-content: start;
    gap: 0.28rem;
    min-width: 0;
}

.hx-guide-empty,
.hx-guide-editor-empty {
    display: grid;
    place-items: center;
    min-height: 6rem;
    margin: 0;
    padding: 0.7rem;
    border: 1px dashed #cbd8de;
    border-radius: 8px;
    background: #fafcfd;
    color: var(--ink-soft);
    font-size: 0.61rem;
    line-height: 1.35;
    text-align: center;
}

.hx-guide-list > .hx-guide-empty {
    min-height: 3rem;
    padding: 0.4rem;
}

.hx-guide-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-width: 0;
    padding-bottom: 0.24rem;
    border-bottom: 1px solid #e5ebee;
}

.hx-guide-detail-header > div {
    display: grid;
    gap: 0.06rem;
    min-width: 0;
}

.hx-guide-detail-header strong,
.hx-guide-detail-header small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-guide-detail-header strong {
    color: #20343d;
    font-size: 0.68rem;
}

.hx-guide-detail-header small {
    color: var(--ink-soft);
    font-size: 0.56rem;
}

.hx-guide-card,
.hx-guide-editor-fields {
    display: grid;
    align-content: start;
    gap: 0.26rem;
    min-width: 0;
    margin: 0;
    padding: 0.3rem;
    border: 1px solid #e0e8ec;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 52, 64, 0.035);
}

.hx-guide-editor-fields:disabled {
    opacity: 0.56;
}

.hx-guide-editor-fields > legend {
    max-width: calc(100% - 0.5rem);
    padding: 0 0.22rem;
    overflow: hidden;
    color: #38505b;
    font-size: 0.64rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-guide-editor-fields .hx-appearance-grid > .checkbox-label,
.hx-guide-editor-fields .hx-appearance-grid > .inline-checkbox {
    display: inline-flex;
    align-items: center;
    align-self: end;
    gap: 0.22rem;
    min-height: 1.75rem;
}

.hx-guide-editor-fields .hx-appearance-grid > .checkbox-label input,
.hx-guide-editor-fields .hx-appearance-grid > .inline-checkbox input {
    width: auto;
    min-height: 0;
    height: auto;
    margin: 0;
}

.hx-guide-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    min-height: 1.25rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #edf1f3;
}

.hx-guide-card > header h4,
.hx-guide-card > header strong {
    margin: 0;
    color: #38505b;
    font-size: 0.64rem;
}

.hx-guide-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.26rem;
    padding-top: 0.04rem;
}

.hx-guide-editor-actions > :first-child {
    margin-right: auto;
}

.hx-guide-value-control {
    min-width: 0;
}

.hx-guide-slider-pair {
    display: grid;
    grid-template-columns: minmax(48px, 1fr) 3.3rem;
    align-items: center;
    gap: 0.22rem;
    min-width: 0;
}

.hx-guide-slider-pair input[type="range"] {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    accent-color: var(--brand);
}

.hx-guide-slider-pair input[type="number"] {
    min-width: 0;
    width: 100%;
    height: 1.75rem;
    min-height: 1.75rem;
    padding: 0.18rem 0.2rem;
    border-radius: 6px;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.hx-guide-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr));
    align-items: end;
    gap: 0.26rem;
    min-width: 0;
}

.hx-guide-field-wide {
    grid-column: span 2;
}

.hx-guide-group-grid > label {
    display: grid;
    align-content: start;
    gap: 0.14rem;
    min-width: 0;
    color: #4f626e;
    font-size: 0.62rem;
}

.hx-guide-group-grid > label.inline-checkbox,
.hx-guide-group-grid > label.checkbox-label {
    display: inline-flex;
    align-items: center;
    align-self: end;
    gap: 0.22rem;
    min-height: 1.75rem;
}

.hx-guide-group-grid > label.inline-checkbox input,
.hx-guide-group-grid > label.checkbox-label input {
    width: auto;
    min-height: 0;
    height: auto;
    margin: 0;
}

.hx-guide-group-grid input:not([type="checkbox"]):not([type="color"]):not([type="range"]),
.hx-guide-group-grid select {
    width: 100%;
    min-width: 0;
    min-height: 1.75rem;
    height: 1.75rem;
    padding: 0.22rem 0.32rem;
    border-radius: 6px;
    font-size: 0.66rem;
}

.hx-guide-group-grid input[type="color"] {
    width: 100%;
    min-height: 1.75rem;
    height: 1.75rem;
    padding: 0.12rem;
}

.hx-appearance-intro,
.hx-appearance-note,
.hx-appearance-empty {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.62rem;
    line-height: 1.32;
}

.hx-appearance-intro {
    padding: 0 0.08rem;
}

.hx-appearance-section {
    min-width: 0;
    border: 1px solid #dce5e9;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(24, 52, 64, 0.025);
}

.hx-appearance-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    min-height: 1.75rem;
    padding: 0.35rem 0.44rem;
    color: var(--brand-strong);
    font-size: 0.69rem;
    font-weight: 750;
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
}

.hx-appearance-section > summary::marker {
    content: "";
}

.hx-appearance-section > summary::-webkit-details-marker {
    display: none;
}

.hx-appearance-section > summary::after {
    content: "›";
    flex: 0 0 auto;
    color: #68808b;
    font-size: 0.92rem;
    line-height: 1;
    transition: transform 120ms ease;
}

.hx-appearance-section[open] > summary::after {
    transform: rotate(90deg);
}

.hx-appearance-section[open] > summary {
    border-bottom: 1px solid #e5ebef;
}

.hx-appearance-section-body {
    display: grid;
    gap: 0.3rem;
    padding: 0.34rem 0.42rem 0.42rem;
}

.hx-appearance-section-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.28rem;
    color: #506571;
    font-size: 0.61rem;
    font-weight: 700;
}

.hx-appearance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(138px, 100%), 1fr));
    gap: 0.3rem;
}

.hx-appearance-grid > label,
.hx-appearance-dataset > label {
    display: grid;
    align-content: start;
    gap: 0.16rem;
    min-width: 0;
    color: #4f626e;
    font-size: 0.63rem;
}

.hx-appearance-grid input:not([type="color"]):not([type="range"]),
.hx-appearance-grid select,
.hx-appearance-dataset select,
.hx-appearance-dataset input:not([type="checkbox"]):not([type="color"]) {
    width: 100%;
    min-height: 1.75rem;
    height: 1.75rem;
    padding: 0.22rem 0.32rem;
    border-radius: 6px;
    font-size: 0.66rem;
}

.hx-appearance-grid input[type="color"],
.hx-appearance-dataset input[type="color"] {
    width: 100%;
    min-height: 1.75rem;
    height: 1.75rem;
    padding: 0.12rem;
}

.hx-appearance-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.7rem;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.85rem;
}

.hx-appearance-range input {
    min-width: 0;
    width: 100%;
    accent-color: var(--brand);
}

.hx-appearance-range output {
    color: #263b46;
    font-size: 0.67rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.hx-appearance-slider-grid,
.hx-appearance-dataset-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(138px, 100%), 1fr));
    gap: 0.3rem;
}

.hx-appearance-slider-control {
    display: grid;
    align-content: start;
    gap: 0.12rem;
    min-width: 0;
}

.hx-appearance-slider-control > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.18rem;
    min-height: 1.15rem;
    color: #4f626e;
    font-size: 0.62rem;
}

.hx-appearance-slider {
    display: grid;
    grid-template-columns: minmax(48px, 1fr) minmax(2.7rem, auto);
    align-items: center;
    gap: 0.22rem;
}

.hx-appearance-slider input[type="range"] {
    appearance: none;
    width: 100%;
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(to right, var(--brand) 0 var(--hx-range-progress, 0%), #d8e1e6 var(--hx-range-progress, 0%) 100%);
}

.compact-palette-select,
.hx-colormap-select {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    height: 1.75rem;
}

.compact-palette-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.compact-palette-trigger {
    appearance: none;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.34rem;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 0.2rem 0.34rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.66rem;
    text-align: left;
    cursor: pointer;
}

.compact-palette-trigger:hover,
.compact-palette-trigger:focus-visible,
.compact-palette-select.is-open .compact-palette-trigger {
    border-color: #83a9b9;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(32, 94, 122, 0.1);
}

.compact-palette-swatch,
.hx-colormap-swatch,
.compact-palette-option-swatch {
    display: block;
    width: 100%;
    height: 0.58rem;
    border: 1px solid rgba(20, 36, 44, 0.2);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.compact-palette-current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-palette-chevron {
    color: #5d7480;
    font-size: 0.72rem;
    line-height: 1;
    transition: transform 120ms ease;
}

.compact-palette-select.is-open .compact-palette-chevron {
    transform: rotate(180deg);
}

.compact-palette-menu {
    position: absolute;
    top: calc(100% + 0.18rem);
    left: 0;
    z-index: 85;
    display: grid;
    gap: 0.1rem;
    width: 100%;
    min-width: 0;
    max-height: min(15rem, 42vh);
    overflow: auto;
    padding: 0.2rem;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(22, 48, 61, 0.18);
    overscroll-behavior: contain;
}

.compact-palette-menu[hidden] {
    display: none;
}

.compact-palette-option {
    appearance: none;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    align-items: center;
    gap: 0.34rem;
    width: 100%;
    min-width: 0;
    min-height: 1.65rem;
    padding: 0.18rem 0.3rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff;
    color: #263b46;
    font: inherit;
    font-size: 0.64rem;
    text-align: left;
    cursor: pointer;
}

.compact-palette-option > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-palette-option:hover,
.compact-palette-option:focus-visible {
    border-color: #bdd0d8;
    background: #eef6f8;
    outline: 0;
}

.compact-palette-option[aria-selected="true"] {
    border-color: #83a9b9;
    background: #e7f1f4;
    color: var(--brand-strong);
    font-weight: 750;
}

input[type="range"].is-synced-range {
    --hx-range-progress: 0%;
    --hx-range-progress-offset: 6px;
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 4px;
    min-height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--brand) 0 calc(var(--hx-range-progress) + var(--hx-range-progress-offset)),
        #d8e1e6 calc(var(--hx-range-progress) + var(--hx-range-progress-offset)) 100%
    );
    accent-color: var(--brand);
}

input[type="range"].is-synced-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: transparent;
}

input[type="range"].is-synced-range::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--brand-strong);
    box-shadow: 0 0 0 1px rgba(17, 42, 53, 0.32);
    cursor: ew-resize;
}

input[type="range"].is-synced-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: #d8e1e6;
}

input[type="range"].is-synced-range::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--brand);
}

input[type="range"].is-synced-range::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--brand-strong);
    box-shadow: 0 0 0 1px rgba(17, 42, 53, 0.32);
    cursor: ew-resize;
}

.unsaved-navigation-panel {
    width: min(520px, calc(100vw - 2rem));
}

.unsaved-navigation-panel > p {
    margin: 0.8rem 0 0;
    color: var(--ink-soft);
    line-height: 1.45;
}

.unsaved-navigation-actions {
    margin-top: 1rem;
}

.hx-appearance-slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--brand-strong);
    box-shadow: 0 0 0 1px rgba(17, 42, 53, 0.3);
    cursor: ew-resize;
}

.hx-appearance-slider output {
    color: #253b46;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.hx-appearance-datasets {
    display: grid;
    gap: 0.38rem;
}

.hx-analysis-binding {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    padding: 0.38rem 0.44rem;
    border: 1px solid #dbe5ea;
    border-radius: 8px;
    background: #f7fafb;
}

.hx-analysis-binding > div {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 0;
}

.hx-analysis-binding > div > .workspace-tool-icon {
    width: 19px;
    height: 19px;
    color: var(--brand);
}

.hx-analysis-binding > div > span {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.hx-analysis-scope {
    display: grid;
    grid-template-columns: auto minmax(9.5rem, 15rem);
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    color: #536a75;
    font-size: 0.58rem;
    font-weight: 700;
}

.hx-analysis-scope[hidden] {
    display: none;
}

.hx-analysis-scope select {
    width: 100%;
    min-height: 1.85rem;
    padding: 0.24rem 1.7rem 0.24rem 0.42rem;
    border: 1px solid #d0b45d;
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.82);
    color: #4e3b06;
    font-size: 0.62rem;
}

.hx-analysis-binding strong {
    color: #263c48;
    font-size: 0.65rem;
}

.hx-analysis-binding small {
    color: var(--ink-soft);
    font-size: 0.6rem;
}

.hx-analysis-binding small[data-state="active"] {
    color: #21613d;
    font-weight: 700;
}

.hx-analysis-binding small[data-state="inactive"] {
    color: #6d7478;
}

.hx-analysis-binding small[data-state="error"] {
    color: #a33b31;
}

.hx-analysis-binding.is-active {
    border-color: #d0aa41;
    background: linear-gradient(180deg, #fff9dd, #fff2b8);
    box-shadow: inset 3px 0 0 #c58b00;
}

.hx-analysis-binding.is-active > div > .workspace-tool-icon {
    color: #835d00;
}

.hx-analysis-binding [data-hx-analysis-action]:disabled {
    opacity: 0.45;
    cursor: default;
}

.hx-analysis-binding [data-hx-analysis-action].is-coupled {
    border-color: #c79b27;
    background: #f8dfa0;
    color: #5b4200;
}

.hx-element-layouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.3rem;
}

.hx-element-layout {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.34rem;
    border: 1px solid #e0e8ec;
    border-radius: 8px;
    background: #f8fafb;
}

.hx-element-layout > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
}

.hx-element-layout > header > div {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.hx-element-layout > header strong {
    color: #263c48;
    font-size: 0.7rem;
}

.hx-element-layout > header span {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.61rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-element-layout > header .hx-element-layout-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.08rem;
    overflow: visible;
}

.hx-element-layout.is-selected {
    border-color: #79afc5;
    background: #eef7fa;
    box-shadow: inset 0 0 0 1px rgba(32, 94, 122, 0.12);
}

.hx-element-layout-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.26rem;
}

.hx-element-layout-controls .hx-appearance-slider {
    grid-template-columns: minmax(0, 1fr);
}

.hx-element-layout-controls output {
    text-align: left;
}

.hx-appearance-dataset {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.36rem;
    align-items: end;
    padding: 0.42rem;
    border-left: 4px solid var(--hx-dataset-color, #1d6996);
    border-radius: 7px;
    background: #f7fafb;
}

.hx-appearance-dataset-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
}

.hx-appearance-dataset-head > div {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.hx-appearance-dataset-head strong {
    overflow: hidden;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-appearance-dataset-head .inline-checkbox {
    justify-self: start;
    font-size: 0.66rem;
}

.hx-appearance-dataset-submenu {
    border-top: 1px solid #e2e9ed;
}

.hx-appearance-dataset-submenu > summary {
    padding: 0.35rem 0.05rem 0.25rem;
    color: var(--brand-strong);
    font-size: 0.67rem;
    font-weight: 750;
    cursor: pointer;
}

.hx-appearance-dataset-options {
    padding: 0.28rem 0 0.18rem;
}

.hx-appearance-dataset-options > label {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
    color: #4f626e;
    font-size: 0.67rem;
}

.hx-appearance-line-sections {
    display: block;
    column-count: 2;
    column-width: 200px;
    column-gap: 0.34rem;
}

.hx-appearance-line-sections > .hx-appearance-section-tools {
    column-span: all;
    margin-bottom: 0.3rem;
}

.hx-appearance-line-sections > section {
    display: inline-grid;
    width: 100%;
    gap: 0.24rem;
    margin: 0 0 0.34rem;
    padding: 0.3rem;
    break-inside: avoid;
    border: 1px solid #e1e8eb;
    border-radius: 7px;
    background: #f8fafb;
    vertical-align: top;
}

.hx-appearance-line-sections > section:first-child {
    padding: 0.3rem;
    border: 1px solid #e1e8eb;
}

.hx-appearance-line-sections h4 {
    margin: 0;
    font-size: 0.65rem;
}

.hx-appearance-actions {
    position: sticky;
    bottom: -0.56rem;
    z-index: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 0 -0.56rem -0.56rem;
    padding: 0.38rem 0.56rem;
    border-top: 1px solid #dde6eb;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
}

.hx-appearance-actions .button {
    min-height: 1.75rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.64rem;
}

.hx-appearance-actions .diagram-export-tools {
    margin-right: auto;
}

.hx-appearance-colorbar-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 0.42rem;
    align-items: center;
    width: 100%;
    padding: 0.38rem;
    border: 1px solid #dbe5ea;
    border-radius: 9px;
    background: #f8fafb;
}

.hx-appearance-colorbar-card > div:last-child {
    display: grid;
    gap: 0.18rem;
    color: #263c48;
    font-size: 0.67rem;
}

.hx-appearance-colorbar-card > div:last-child span {
    color: var(--ink-soft);
    font-size: 0.62rem;
    line-height: 1.35;
}

.hx-appearance-colorbar-preview {
    display: grid;
    grid-template-columns: 16px 30px;
    height: 82px;
    padding: 3px;
    border-radius: 5px;
    background-color: #fff;
    background-image: linear-gradient(45deg, #e8edef 25%, transparent 25%), linear-gradient(-45deg, #e8edef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8edef 75%), linear-gradient(-45deg, transparent 75%, #e8edef 75%);
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    background-size: 8px 8px;
}

.hx-appearance-colorbar-gradient {
    border: 1px solid #253b46;
}

.hx-appearance-colorbar-ticks {
    position: relative;
}

.hx-appearance-colorbar-ticks i {
    position: absolute;
    bottom: var(--hx-tick);
    left: 0;
    width: 5px;
    height: 1px;
    background: #111;
    font-style: normal;
}

.hx-appearance-colorbar-ticks span {
    position: absolute;
    left: 8px;
    top: 50%;
    font-size: 0.58rem;
    transform: translateY(-50%);
}

@container hx-appearance (max-width: 420px) {
    .hx-appearance-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hx-appearance-tabs > button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .hx-appearance-grid,
    .hx-appearance-dataset,
    .hx-appearance-slider-grid,
    .hx-appearance-dataset-options {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container hx-guide-manager (max-width: 360px) {
    .hx-guide-workbench,
    .hx-guide-manager > .hx-guide-editor {
        grid-template-columns: minmax(0, 1fr);
    }

    .hx-guide-picker,
    .hx-guide-selection {
        position: static;
    }

    .hx-guide-picker-list,
    .hx-guide-list {
        grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr));
        max-height: none;
    }

    .hx-guide-group-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .hx-appearance-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hx-appearance-tabs > button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .hx-appearance-tab-pane[data-hx-appearance-pane="general"].is-active:not([hidden]),
    .hx-appearance-line-sections {
        column-count: 1;
    }

    .hx-appearance-grid,
    .hx-appearance-dataset,
    .hx-appearance-slider-grid,
    .hx-appearance-dataset-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .hx-analysis-coupling-control > summary {
        max-width: 9rem;
    }

    .hx-analysis-binding {
        align-items: stretch;
        flex-direction: column;
    }

    .hx-analysis-scope {
        grid-template-columns: 4rem minmax(0, 1fr);
        margin-left: 0;
    }

    .hx-analysis-binding > .button {
        align-self: flex-start;
    }
}

@media (max-width: 900px) {
    .project-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .project-info-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .project-info-notes {
        grid-column: auto;
    }

    .site-footer-app-compact {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer-app-compact nav {
        justify-content: flex-start;
    }

    .hx-guide-field-wide {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hx-appearance-panel {
        animation: none;
    }
}

.weather-lab-global-appearance > summary {
    display: inline-flex;
    align-items: center;
    height: 2.1rem;
    gap: 0.25rem;
    padding: 0 0.65rem;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--brand-strong);
    font-size: 0.72rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.weather-lab-global-appearance > summary::-webkit-details-marker {
    display: none;
}

.weather-lab-global-appearance[open] > div {
    display: grid;
    gap: 0.3rem;
    width: min(380px, calc(100vw - 1.5rem));
    max-height: min(var(--weather-appearance-max-height, 520px), 72vh);
    overflow: auto;
    padding: 0.38rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
    overscroll-behavior: contain;
}

.weather-lab-global-appearance[open]:not(.is-floating-over-hx) {
    flex: 1 0 100%;
}

.weather-lab-global-appearance[open]:not(.is-floating-over-hx) > div {
    margin-top: 0.25rem;
}

.weather-lab-global-appearance header {
    display: grid;
}

.weather-lab-global-appearance header small,
.weather-lab-global-appearance p {
    color: var(--ink-soft);
    font-size: 0.62rem;
}

.weather-lab-global-appearance > div > label {
    display: grid;
    gap: 0.12rem;
    font-size: 0.64rem;
}

.weather-lab-global-appearance select {
    padding: 0.28rem 0.4rem;
    border-radius: 6px;
}

.weather-lab-global-typography {
    display: grid;
    gap: 0.24rem;
    padding: 0.32rem;
    border: 1px solid #dce5e9;
    border-radius: 8px;
    background: #f8fafb;
}

.weather-lab-environment-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.28rem 0.38rem;
    padding: 0.38rem;
    border: 1px solid #bdd8d5;
    border-radius: 8px;
    background: #f5fbfa;
}

.weather-lab-environment-options.is-active {
    border-color: #69b0aa;
    background: #eaf7f5;
    box-shadow: inset 3px 0 0 #0f766e;
}

.weather-lab-environment-options > header {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-width: 0;
}

.weather-lab-environment-options > header > div {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 0;
}

.weather-lab-environment-options > header > div > span:last-child {
    display: grid;
    min-width: 0;
    gap: 0.03rem;
}

.weather-lab-environment-options header strong,
.weather-lab-environment-options header small {
    display: block;
}

.weather-lab-environment-options header strong {
    color: #174f4b;
    font-size: 0.68rem;
}

.weather-lab-environment-options header small {
    overflow: hidden;
    color: #54706d;
    font-size: 0.59rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-environment-options-icon {
    display: grid;
    flex: 0 0 1.65rem;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 7px;
    background: rgba(15, 118, 110, 0.1);
    color: #0f766e;
}

.weather-lab-environment-options-icon svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.weather-lab-environment-status {
    flex: 0 0 auto;
    max-width: 48%;
    overflow: hidden;
    padding: 0.18rem 0.36rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.1);
    color: #0b5d57;
    font-size: 0.58rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-environment-options-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    min-width: 0;
}

.weather-lab-environment-options-actions .button {
    min-height: 1.75rem;
    padding: 0.24rem 0.42rem;
    border-color: #abc7c4;
    background: #fff;
    color: #315f5b;
    font-size: 0.61rem;
}

.weather-lab-environment-options-actions .button.is-active {
    border-color: #0f766e;
    background: #68bdb5;
    color: #063f3a;
    box-shadow: inset 0 0 0 1px rgba(6, 63, 58, 0.08);
}

.weather-lab-environment-options-actions .button.is-disconnect:not(:disabled) {
    color: #52666a;
}

.weather-lab-environment-options > label {
    display: grid;
    gap: 0.1rem;
    min-width: 118px;
    color: #466662;
    font-size: 0.6rem;
    font-weight: 650;
}

.weather-lab-environment-options > label select {
    width: 100%;
    min-height: 1.75rem;
    padding: 0.22rem 0.34rem;
    border-color: #abc7c4;
    border-radius: 6px;
    font-size: 0.62rem;
}

.weather-lab-global-typography > strong {
    color: #304751;
    font-size: 0.65rem;
    font-weight: 650;
}

.weather-lab-global-typography > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 0.28rem;
}

.weather-lab-global-typography .weather-lab-tick-slider {
    min-width: 0;
    margin: 0;
    padding: 0.24rem;
    border: 1px solid #e3e9ec;
    border-radius: 6px;
    background: #fff;
}

.weather-lab-black-swatch {
    display: inline-block;
    width: 1.2rem;
    height: 0.22rem;
    margin-right: 0.35rem;
    border-radius: 99px;
    background: #000;
    vertical-align: middle;
}

.weather-lab-appearance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(108px, 100%), 1fr));
    gap: 0.2rem;
}

.weather-lab-legend-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 0.2rem 0.28rem;
}

.weather-lab-legend-card > header,
.weather-lab-legend-card > .weather-lab-appearance-grid,
.weather-lab-legend-card > .weather-lab-legend-compact-controls,
.weather-lab-legend-card > small {
    grid-column: 1 / -1;
}

.weather-lab-legend-compact-controls {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 0.22rem;
    min-width: 0;
}

.weather-lab-legend-compact-controls > label {
    display: grid;
    flex: 0 1 118px;
    gap: 0.1rem;
    min-width: 92px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 600;
}

.weather-lab-legend-compact-controls > .weather-lab-inline-check {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: center;
    min-width: auto;
    min-height: 28px;
    padding: 0 0.18rem;
}

.weather-lab-legend-compact-controls > .weather-lab-tick-slider {
    flex: 1 1 170px;
    min-width: min(170px, 100%);
    margin: 0;
    padding: 0.18rem 0.24rem;
}

.weather-lab-legend-compact-controls select {
    width: 100%;
    min-width: 0;
}

.weather-lab-legend-card > label {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 600;
}

.weather-lab-legend-card > label select {
    min-width: 0;
    width: 100%;
    padding: 0.24rem 0.34rem;
    border-radius: 6px;
    font-size: 0.65rem;
}

.weather-lab-legend-card > .weather-lab-check-row {
    align-self: center;
    grid-column: 1;
    gap: 0.14rem;
}

.weather-lab-legend-card > label:first-of-type {
    grid-column: 2;
}

.weather-lab-legend-card > label:nth-of-type(n + 2) {
    grid-column: 1 / -1;
}

.weather-lab-appearance-grid label > span,
.weather-lab-color-field > span {
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 600;
}

.weather-lab-appearance-grid input,
.weather-lab-appearance-grid select {
    min-width: 0;
    padding: 0.25rem 0.34rem;
    border-radius: 6px;
    font-size: 0.66rem;
}

.weather-lab .weather-lab-appearance-body input:is([type="text"], [type="number"], [type="search"]),
.weather-lab .weather-lab-appearance-body select,
.weather-lab .weather-lab-global-appearance[open] input:is([type="text"], [type="number"], [type="search"]),
.weather-lab .weather-lab-global-appearance[open] select {
    height: 28px;
    min-height: 28px;
}

.weather-lab-check-row,
.weather-lab-color-grid,
.weather-lab-appearance-actions,
.weather-lab-design-mode {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.weather-lab-check-row label,
.weather-lab-design-mode label {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.66rem;
}

.weather-lab-check-row input,
.weather-lab-design-mode input {
    width: auto;
    margin: 0;
}

.weather-lab-color-grid {
    padding: 0.24rem 0;
    border-top: 1px solid #edf1f3;
    border-bottom: 1px solid #edf1f3;
}

.weather-lab-color-field {
    display: flex;
    align-items: center;
    gap: 0.24rem;
}

.weather-lab-color-field input {
    width: 2.2rem;
    height: 1.45rem;
    padding: 0.12rem;
    border-radius: 6px;
}

.weather-lab-panel-datasets {
    position: relative;
    flex: 0 0 auto;
}

.weather-lab-panel-datasets > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.68rem;
}

.weather-lab-panel-datasets[open] > div {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.3rem);
    right: 0;
    display: grid;
    gap: 0.25rem;
    width: max-content;
    min-width: 170px;
    max-width: min(280px, calc(100vw - 1.5rem));
    padding: 0.4rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
}

.weather-lab-dataset-check {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
}

.weather-lab-dataset-check {
    position: relative;
    padding-left: 0.55rem;
}

.weather-lab-dataset-check::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 3px;
    border-radius: 3px;
    background: var(--dataset-color, var(--brand));
}

.weather-lab-chart {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding: 0.5rem 0 0.2rem;
}

.weather-lab-layout-settings p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.7rem;
    line-height: 1.4;
}

.weather-lab-layout-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem;
    margin: 0.35rem 0.65rem 0;
    padding: 0.42rem 0.5rem;
    border: 1px solid #94bccd;
    border-radius: 10px;
    background: linear-gradient(90deg, #eef8fb, #f8fbfc);
    box-shadow: 0 3px 10px rgba(28, 83, 106, 0.08);
}

.weather-lab-layout-toolbar[hidden] {
    display: none;
}

.weather-lab-layout-toolbar strong {
    min-width: 170px;
    margin-right: auto;
    color: var(--brand-strong);
    font-size: 0.72rem;
}

.weather-lab-layout-hint {
    color: var(--ink-soft);
    font-size: 0.67rem;
}

.weather-lab-layout-pointer-help {
    flex: 1 1 250px;
    min-width: 0;
    color: #355d6d;
    font-size: 0.65rem;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.weather-lab-layout-toolbar button {
    min-height: 1.8rem;
    padding: 0.28rem 0.48rem;
    border: 1px solid #bed0d8;
    border-radius: 7px;
    background: #fff;
    color: #274b59;
    font: 700 0.68rem/1 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}

.weather-lab-layout-toolbar button:disabled {
    opacity: 0.42;
    cursor: default;
}

.weather-lab-layout-size {
    display: inline-flex;
    gap: 0.15rem;
}

.weather-lab-layout-size button {
    width: 1.9rem;
    padding-inline: 0;
    font-size: 1rem;
}

/* Weather control rails use one compact rhythm in both analysis modes. */
.weather-lab-mode-tabs {
    align-items: stretch;
}

.weather-lab-mode-tabs > button {
    box-sizing: border-box;
    height: 100%;
}

.weather-lab-toolbar {
    --weather-toolbar-control-height: 34px;
    gap: 0.42rem;
}

.weather-lab-toolbar-primary,
.weather-lab-toolbar-actions {
    min-width: 0;
}

.weather-lab-toolbar-primary > .weather-lab-new-panel-control,
.weather-lab-toolbar-primary > .weather-lab-add-panel-button,
.weather-lab-toolbar-actions > .weather-lab-hx-coupling,
.weather-lab-toolbar-actions > .weather-lab-environment-coupling,
.weather-lab-toolbar-actions > .weather-lab-global-appearance > summary {
    box-sizing: border-box;
    height: var(--weather-toolbar-control-height);
    min-height: var(--weather-toolbar-control-height);
}

.weather-lab-toolbar-primary > .weather-lab-new-panel-control > select {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.weather-lab-toolbar-primary > .weather-lab-add-panel-button,
.weather-lab-layout-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    white-space: nowrap;
}

.weather-lab-control-icon,
.weather-lab-layout-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.weather-lab-panel-head {
    --weather-panel-header-control-height: 32px;
}

.weather-lab .weather-lab-panel-title > input,
.weather-lab-panel-dots,
.weather-lab-panel-order-actions,
.weather-lab-panel-order-actions > button,
.weather-lab-panel-head > .weather-lab-panel-collapse,
.weather-lab-panel-head > .weather-lab-panel-remove {
    box-sizing: border-box;
    height: var(--weather-panel-header-control-height);
    min-height: var(--weather-panel-header-control-height);
}

.weather-lab-panel-order-actions > button,
.weather-lab-panel-head > .weather-lab-panel-collapse,
.weather-lab-panel-head > .weather-lab-panel-remove {
    width: var(--weather-panel-header-control-height);
    min-width: var(--weather-panel-header-control-height);
}

.weather-lab .weather-lab-panel-title > input {
    max-height: var(--weather-panel-header-control-height);
    padding-block: 0;
    line-height: 1;
}

.weather-lab-panel-order-actions {
    align-self: center;
    padding: 0;
}

.weather-lab-panel-order-actions > button {
    height: 100%;
    min-height: 0;
}

.weather-lab-panel-controls {
    --weather-panel-control-height: 30px;
    grid-template-columns: repeat(auto-fit, minmax(min(138px, 100%), 1fr));
    grid-auto-rows: auto;
}

.weather-lab-panel-controls.is-compare {
    grid-template-columns: repeat(auto-fit, minmax(min(126px, 100%), 1fr));
}

.weather-lab-panel-controls > .weather-lab-panel-control {
    grid-template-rows: minmax(0, auto) var(--weather-panel-control-height);
}

.weather-lab-panel-controls > .weather-lab-panel-inline-control {
    align-self: end;
    min-width: 0;
}

.weather-lab .weather-lab-panel-controls > .weather-lab-panel-control > :is(input, select),
.weather-lab-panel-controls > .weather-lab-panel-inline-control > summary {
    box-sizing: border-box;
    height: var(--weather-panel-control-height);
    min-height: var(--weather-panel-control-height);
}

.weather-lab-panel-controls > .weather-lab-panel-inline-control > summary {
    width: 100%;
}

.weather-lab-layout-settings .weather-lab-layout-start {
    justify-self: start;
    min-height: 30px;
    padding-inline: 0.62rem;
}

.weather-lab-layout-toolbar-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    color: var(--brand-strong);
    font-weight: 750;
}

.weather-lab-layout-toolbar button {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
}

.weather-lab-layout-toolbar .button-primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.weather-lab-layout-toolbar .button-primary:hover,
.weather-lab-layout-toolbar .button-primary:focus-visible {
    border-color: var(--brand-strong);
    background: var(--brand-strong);
}

.weather-lab-chart.is-layout-editing [data-weather-layout-item] {
    cursor: grab;
    outline: 1.5px dashed rgba(31, 111, 143, 0.72);
    outline-offset: 3px;
    pointer-events: bounding-box;
    transition: filter 0.12s ease;
}

.weather-lab-chart.is-layout-editing [data-weather-layout-item]:hover,
.weather-lab-chart.is-layout-editing [data-weather-layout-item]:focus,
.weather-lab-chart.is-layout-editing [data-weather-layout-item].is-layout-selected {
    outline: 2px solid #1f789b;
    filter: drop-shadow(0 2px 2px rgba(25, 80, 103, 0.2));
}

.weather-lab-chart.is-layout-editing [data-weather-layout-item].is-layout-selected {
    cursor: grabbing;
}

.weather-lab-chart.is-layout-editing [data-weather-layout-item] .weather-threshold-label,
.weather-lab-chart.is-layout-editing .weather-threshold-label[data-weather-layout-item] {
    pointer-events: auto;
}

.weather-lab-layout-selection {
    position: absolute;
    z-index: 12;
    border: 1.5px solid #137aa2;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.78), 0 3px 12px rgba(20, 91, 119, 0.16);
    pointer-events: none;
}

.weather-lab-layout-selection > span {
    position: absolute;
    bottom: calc(100% + 4px);
    left: -1px;
    padding: 0.16rem 0.3rem;
    border-radius: 4px;
    background: #137aa2;
    color: #fff;
    font: 700 0.58rem/1 "Segoe UI", Arial, sans-serif;
    max-width: min(24rem, calc(100vw - 2rem));
    line-height: 1.2;
    overflow-wrap: anywhere;
    white-space: normal;
}

.weather-lab-layout-selection > button {
    appearance: none;
    position: absolute;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #137aa2;
    box-shadow: 0 0 0 1px #137aa2;
    cursor: nwse-resize;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
}

.weather-lab-layout-selection > button::before {
    content: "";
    position: absolute;
    inset: -7px;
}

.weather-lab-layout-selection > button.is-nw { top: -7px; left: -7px; }
.weather-lab-layout-selection > button.is-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.weather-lab-layout-selection > button.is-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.weather-lab-layout-selection > button.is-se { right: -7px; bottom: -7px; }

.weather-lab-panel.is-layout-inline-resizing .weather-lab-layout-selection > button {
    cursor: ew-resize;
}

.weather-lab-panel.is-layout-scale-resizing .weather-lab-layout-selection > button,
.weather-lab-layout-selection.is-scale-only > button {
    cursor: nwse-resize;
}

.weather-lab-height-resizer {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 14px;
    min-height: 14px;
    padding: 0;
    border-top: 1px solid #dbe3e7;
    background: #f7f9fa;
    color: #71868f;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
}

.weather-lab-height-resizer > span {
    display: block;
    width: 3.2rem;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: #9eafb7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.weather-lab-height-resizer:hover,
.weather-lab-height-resizer:focus-visible,
.weather-lab-panel.is-resizing-height .weather-lab-height-resizer {
    color: var(--brand);
    background: #edf5f8;
    outline: none;
}

.weather-lab-height-resizer:hover > span,
.weather-lab-height-resizer:focus-visible > span,
.weather-lab-panel.is-resizing-height .weather-lab-height-resizer > span {
    background: var(--brand);
}

.weather-lab-compare-canvases,
.weather-lab-compare-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
}

.weather-lab-compare-canvases figure {
    min-width: 0;
    margin: 0;
}

/* Keep separate sun paths in one equally scaled row, including narrow panels. */
.weather-lab-compare-charts.weather-lab-solar-comparison {
    grid-template-columns: repeat(var(--solar-compare-columns, 1), minmax(min(300px, 100%), 1fr));
    overflow-x: auto;
    align-items: start;
}
.weather-lab-solar-comparison > .weather-lab-solar {
    min-width: 0;
    height: auto;
    grid-template-rows: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "chart" "meta" "legend" !important;
}
.weather-lab-solar-comparison > .weather-lab-solar.is-legend-top { grid-template-areas: "legend" "chart" "meta" !important; }
.weather-lab-solar-comparison > .weather-lab-solar.is-legend-right {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas: "chart legend" "meta meta" !important;
}
.weather-lab-solar-comparison > .weather-lab-solar.is-legend-left {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    grid-template-areas: "legend chart" "meta meta" !important;
}
.weather-lab-solar-comparison > .weather-lab-solar > svg { justify-self: center !important; }
.weather-lab-solar-comparison > .weather-lab-solar > aside {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
}
.weather-lab-solar-comparison > .weather-lab-solar > aside strong,
.weather-lab-solar-comparison > .weather-lab-solar > aside small { flex-basis: 100%; text-align: center; }
.weather-lab-solar-view-toolbar { display: flex; flex-wrap: wrap; gap: .4rem .65rem; align-items: center; padding: .45rem .55rem; margin: 0 0 .45rem; background: var(--surface-2, #edf4fa); border: 1px solid var(--line); border-radius: 7px; font-size: .75rem; }
.weather-lab-solar-projection-buttons { display: inline-flex; gap: .2rem; flex-wrap: wrap; }
.weather-lab-solar-view-toolbar small { flex: 1 1 18rem; color: var(--muted); }
.weather-lab-solar-projection-buttons button { min-height: 30px; padding: .25rem .6rem; white-space: nowrap; }
.weather-lab-solar-projection-buttons .workspace-tool-icon { fill: none; stroke: currentColor; stroke-width: 1.5; }
.weather-lab-3d-zoom { display:inline-flex; align-items:center; gap:.3rem; }
.weather-lab-3d-zoom button { min-height:28px; min-width:28px; }
.weather-lab-3d-zoom output { min-width:3.6em; text-align:center; font-variant-numeric:tabular-nums; }
.weather-lab-surface-comparison { display:grid; grid-template-columns:repeat(var(--surface-columns,1),minmax(min(360px,100%),1fr)); gap:.6rem; overflow-x:auto; }
.weather-lab-surface-view { margin:0; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 80px; grid-template-areas:'heading heading' 'chart legend' 'note note'; align-items:center; gap:.25rem; }
.weather-lab-surface-view > figcaption { grid-area:heading; text-align:center; font-size:var(--weather-chart-legend-font-size); font-family:var(--weather-chart-font-family); }
.weather-lab-surface-viewport { grid-area:chart; position:relative; min-width:0; }
.weather-lab-surface-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.weather-lab-surface-svg { position:relative; display:block; width:100%; height:auto; max-height:var(--weather-detail-plot-height,var(--weather-chart-height,450px)); touch-action:none; cursor:grab; background:transparent; }
.weather-lab-surface-mode { display:flex; align-items:center; gap:.35rem; font-size:.72rem; }
.weather-lab-surface-mode select { width:auto; min-width:0; height:var(--workspace-control-height,32px); padding:.15rem .4rem; }
.weather-lab-surface-svg.is-orbiting { cursor:grabbing; }
.weather-lab-surface-svg:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.weather-lab-surface-colorbar { grid-area:legend; width:100%; height:auto; }
.weather-lab-surface-view > small { grid-area:note; text-align:center; color:var(--muted); font-size:.7rem; }
.weather-lab-surface-view.is-legend-left { grid-template-columns:80px minmax(0,1fr); grid-template-areas:'heading heading' 'legend chart' 'note note'; }
.weather-lab-surface-view:is(.is-legend-top,.is-legend-bottom,.is-legend-hidden) { grid-template-columns:minmax(0,1fr); }
.weather-lab-surface-view.is-legend-top { grid-template-areas:'heading' 'legend' 'chart' 'note'; }
.weather-lab-surface-view.is-legend-bottom { grid-template-areas:'heading' 'chart' 'legend' 'note'; }
.weather-lab-surface-view.is-legend-hidden { grid-template-areas:'heading' 'chart' 'note'; }
.weather-lab-solar-projection-buttons button.is-active { color: var(--brand); border-color: var(--brand); background: var(--surface-2, #edf4fa); box-shadow: inset 0 -2px var(--brand); }
.weather-lab-solar3d-view { min-width: 0; display: grid; gap: .35rem; align-content: start; }
.weather-lab-solar3d-svg { width: min(100%, calc(var(--weather-chart-height, 450px) * 1.16)); height: auto; justify-self: center; touch-action: none; cursor: grab; }
.weather-lab-solar3d-svg.is-orbiting { cursor: grabbing; }
.weather-lab-solar3d-svg:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.weather-lab-solar3d-svg:focus:not(:focus-visible) { outline: none; }
.weather-lab-solar3d-svg { grid-area: chart; }
.weather-lab-solar3d-svg { font-family:var(--weather-chart-font-family); font-size:var(--weather-chart-font-size); }
.weather-lab-solar3d-view { grid-template-areas: "chart" "legend" "note"; }
.weather-lab-solar3d-view.is-legend-top { grid-template-areas: "legend" "chart" "note"; }
.weather-lab-solar3d-view.is-legend-left { grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "legend chart" "note note"; }
.weather-lab-solar3d-view.is-legend-right { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "chart legend" "note note"; }
.weather-lab-solar3d-view > :is(.weather-lab-solar-dataset-scales, .weather-lab-wind-legend) { grid-area: legend; }
.weather-lab-solar3d-note { grid-area: note; }
.weather-lab-solar3d-note { color: var(--muted); text-align: center; }

.weather-lab-compare-canvases figcaption {
    padding: 0.2rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.weather-lab-panel footer {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.18rem 0.62rem;
    border-top: 1px solid #e5eaed;
    color: #7a8990;
    font-size: 0.62rem;
}

.weather-lab-svg,
.weather-lab-heatmap {
    display: block;
    width: 100%;
    height: var(--weather-chart-height, 450px);
    min-height: 0;
}

.weather-lab-heatmap {
    aspect-ratio: auto;
}

.weather-lab-difference {
    margin: .75rem 0 .25rem;
    padding: .65rem .55rem .2rem;
    border-top: 1px solid var(--line, #cad5db);
    min-width: 0;
}

.weather-lab-difference > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin-bottom: .35rem;
}

.weather-lab-difference h4 { margin: 0; font-size: .82rem; }
.weather-lab-difference-caption { display: block; width: 100%; height: auto; font-family: var(--weather-chart-font-family); }
.weather-lab-difference small,
.weather-lab-difference-note { color: var(--ink-soft); font-size: .7rem; line-height: 1.4; }
.weather-lab-difference-note { margin: .4rem .2rem; }
.weather-lab-difference figure { margin: 0; min-width: 0; }
.weather-lab-difference figcaption { font-size: .75rem; margin: .2rem 0; }
.weather-lab-difference-plot { min-width: 0; }
.weather-lab-difference-plot > svg { height: var(--weather-difference-height,auto); max-height: none; }
.weather-lab-difference-height-resizer { margin-top:.35rem; }
.weather-lab-difference-height-resizer + .weather-lab-difference { margin-top:0; border-top:0; }
.weather-lab-detail-reuse { display:grid; gap:.25rem; min-width:0; }
.weather-lab-detail-reuse select { width:100%; min-width:0; }
.weather-lab-difference.is-annual-aligned .weather-lab-difference-plot > svg {
    height: var(--weather-difference-height, 360px); max-height: none; min-height: 0;
}
.weather-lab-difference-aux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: .5rem; }
.weather-lab-difference.is-annual-aligned { padding-inline: 0; margin-inline: 0; }
.weather-lab-annual-difference-grid { display: grid; gap: 10px; min-width: 0; align-items: start; }
.weather-lab-annual-difference-grid > * { min-width: 0; }
.weather-lab-difference-plot .weather-lab-annual-chart-layout > svg {
    height: auto; min-height: 0;
}
.weather-lab-difference-options .weather-lab-appearance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.weather-lab-difference-options select { width: 100%; min-width: 0; height: 30px; }
.weather-lab-difference-options small { display: block; }

.weather-lab-polar-overlay { display: grid; gap: .35rem; align-items: center; min-width: 0; }
.weather-lab-polar-overlay:is(.is-left, .is-right) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.weather-lab-polar-overlay.is-left:has(> .weather-lab-solar-dataset-scales) { grid-template-columns: max-content minmax(0, 1fr); }
.weather-lab-polar-overlay.is-right:has(> .weather-lab-solar-dataset-scales) { grid-template-columns: minmax(0, 1fr) max-content; }
.weather-lab-polar-overlay-svg { display: block; width: min(100%, var(--weather-chart-height, 450px)); height: auto; justify-self: center; font-family: var(--weather-chart-font-family); font-size: var(--weather-chart-font-size); }
.weather-lab-polar-overlay .weather-lab-wind-legend { margin: 0; min-width: 0; }
.weather-lab-polar-overlay .weather-lab-wind-legend span { overflow-wrap: anywhere; }

.weather-lab-chart > .weather-lab-table-scroll {
    min-height: min(420px, var(--weather-chart-height, 450px));
}

.weather-lab-chart:has(> .weather-lab-table-scroll) {
    overflow: hidden;
}

@container (max-width: 820px) {
    .weather-lab-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .weather-lab-acquisition-slot.is-open {
        grid-column: 1;
        grid-row: 1;
    }

    .weather-lab-navigation-panel {
        position: static;
        grid-column: 1;
        grid-row: 1;
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
        scrollbar-gutter: auto;
    }

    .weather-lab-main {
        grid-column: 1;
        grid-row: 2;
    }

    .weather-lab-workbench.is-acquisition-open .weather-lab-navigation-panel {
        grid-row: 2;
    }

    .weather-lab-workbench.is-acquisition-open .weather-lab-main {
        grid-row: 3;
    }

    .weather-lab-acquisition.is-open {
        grid-template-columns: minmax(0, 1fr);
    }

    .weather-lab-acquisition.is-open > header {
        border-right: 0;
        border-bottom: 1px solid #b7ceda;
        border-radius: 13px 13px 0 0;
    }
}

.weather-lab-grid line {
    stroke: #000;
    stroke-width: 0.7;
    stroke-opacity: 0.18;
}

.weather-lab-grid line.is-minor {
    stroke-width: 0.4;
    stroke-opacity: 0.15;
}

.weather-lab-axis-marks line {
    vector-effect: non-scaling-stroke;
    stroke: #000;
    stroke-width: 0.7;
    shape-rendering: crispEdges;
}

.weather-lab-axis-marks .weather-lab-axis-baseline {
    stroke-width: 0.85;
}

.weather-lab-axis-marks line.is-minor {
    stroke-width: 0.7;
    stroke-opacity: 0.92;
}

.weather-lab-month-colorbar text {
    paint-order: stroke fill;
    stroke: rgba(255, 255, 255, 0.94);
    stroke-width: 2px;
    stroke-linejoin: round;
}

.weather-lab-axis-labels,
.weather-lab-secondary-axis {
    fill: #000;
    font-family: var(--weather-chart-font-family, "Times New Roman", "STIX Two Text", serif);
    font-size: var(--weather-chart-font-size, 10.5px);
}

.weather-lab-legend {
    fill: #000;
    font-family: var(--weather-chart-font-family, "Times New Roman", "STIX Two Text", serif);
    font-size: var(--weather-chart-legend-font-size, var(--weather-chart-font-size, 10.5px));
}

.weather-lab-secondary-axis {
    fill: #000;
    font-size: calc(var(--weather-chart-font-size, 10.5px) - 1px);
}

.weather-lab-secondary-axis-title {
    fill: #000;
    font-family: var(--weather-chart-font-family, "Times New Roman", "STIX Two Text", serif);
    font-size: var(--weather-chart-axis-title-font-size, var(--weather-chart-title-font-size, 12px));
    font-weight: 400;
    letter-spacing: 0;
}

.weather-lab-axis-title {
    fill: #000;
    font-family: var(--weather-chart-font-family, "Times New Roman", "STIX Two Text", serif);
    font-size: var(--weather-chart-axis-title-font-size, var(--weather-chart-title-font-size, 12px));
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
}

.weather-lab-legend-heading {
    font-weight: 600;
    fill: #000;
}

.weather-lab-empty {
    display: grid;
    place-content: center;
    min-height: 210px;
    gap: 0.25rem;
    color: var(--ink-soft);
    text-align: center;
}

.weather-lab-empty span {
    font-size: 0.78rem;
}

.weather-lab-empty-compact {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem;
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.weather-lab-table-scroll {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.weather-lab-stat-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #000;
    font-family: var(--weather-chart-font-family, "Times New Roman", "STIX Two Text", serif);
    font-size: var(--weather-chart-font-size, 10px);
}

.weather-lab-stat-table caption {
    max-width: 100%;
    padding: 0.35rem 0.5rem;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.weather-lab-stat-table th,
.weather-lab-stat-table td {
    padding: 0.48rem 0.58rem;
    border-right: 1px solid #e5eaed;
    border-bottom: 1px solid #e5eaed;
    text-align: right;
    white-space: nowrap;
}

.weather-lab-stat-table tbody th[scope="rowgroup"] {
    max-width: min(22rem, 44vw);
    white-space: normal;
    overflow-wrap: anywhere;
}

.weather-lab-stat-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    background: #f7fafb;
}

.weather-lab-stat-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f3f7f9;
}

.weather-lab-stat-table small {
    color: var(--ink-soft);
    font-size: 0.85em;
}

.weather-lab-polar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.55rem;
}

.weather-lab-windrose {
    color: #000;
    font-family: var(--weather-chart-font-family, "Times New Roman", "STIX Two Text", serif);
    font-size: var(--weather-chart-font-size, 10px);
}

.weather-lab-polar {
    margin: 0;
    min-width: 0;
}

.weather-lab-polar figcaption {
    min-width: 0;
    padding: 0.25rem;
    font-size: inherit;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

.weather-lab-polar svg {
    display: block;
    width: 100%;
    max-height: 265px;
}

.weather-lab-polar-empty {
    display: grid;
    place-content: center;
    min-height: 210px;
    color: var(--ink-soft);
    text-align: center;
}

.weather-lab-wind-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: inherit;
}

.weather-lab-windrose-layout {
    display: grid;
    grid-template-columns: minmax(125px, 0.28fr) minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
}

.weather-lab-windrose-layout.is-right {
    grid-template-columns: minmax(0, 1fr) minmax(125px, 0.28fr);
}

.weather-lab-windrose-layout .weather-lab-wind-legend {
    align-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.weather-lab-windrose-layout:is(.is-left, .is-right) .weather-lab-wind-legend {
    width: min(12em, 100%);
    min-width: min(10em, 100%);
    max-width: 12em;
}

.weather-lab-wind-legend > .weather-lab-legend-heading {
    max-width: 100%;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}

.weather-lab-wind-legend:is(.is-top, .is-bottom) {
    justify-content: flex-start;
    align-items: center;
}

.weather-lab-wind-legend:is(.is-top, .is-bottom) > .weather-lab-legend-heading {
    flex: 0 0 100%;
    width: 100%;
    text-align: left;
}

.weather-lab-wind-legend:is(.is-top, .is-bottom) > span {
    flex: 0 0 auto;
    line-height: 1.2;
    white-space: nowrap;
}

.weather-lab-wind-legend,
.weather-lab-solar-colorbar {
    font-size: var(--weather-chart-legend-font-size, var(--weather-chart-font-size, 10.5px));
    font-family: var(--weather-chart-font-family, "Times New Roman", serif);
}

.weather-lab-wind-legend span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.weather-lab-wind-legend i {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    background: var(--wind-color);
}

.weather-lab-solar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
    grid-template-areas: "chart meta";
    height: 100%;
    align-items: center;
    color: #000;
    font-family: var(--weather-chart-font-family, "Times New Roman", "STIX Two Text", serif);
    font-size: var(--weather-chart-font-size, 10px);
}

.weather-lab-solar.is-legend-top {
    grid-template-areas:
        "legend legend"
        "chart meta";
    grid-template-rows: auto minmax(0, 1fr);
}

.weather-lab-solar.is-legend-bottom {
    grid-template-areas:
        "chart meta"
        "legend legend";
    grid-template-rows: minmax(0, 1fr) auto;
}

.weather-lab-solar.is-legend-left {
    grid-template-columns: max-content minmax(0, 1fr) minmax(0, 0.34fr);
    grid-template-areas: "legend chart meta";
}

.weather-lab-solar.is-legend-right {
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 0.34fr);
    grid-template-areas: "chart legend meta";
}

.weather-lab-solar svg {
    grid-area: chart;
    display: block;
    width: 100%;
    max-height: 310px;
}

.weather-lab-solar aside {
    grid-area: meta;
    display: grid;
    min-width: 0;
    gap: 0.28rem;
    padding: 0.65rem;
    border-left: 1px solid var(--line);
    color: #000;
    font-family: inherit;
    font-size: inherit;
    overflow-wrap: anywhere;
}

.weather-lab-solar aside strong {
    color: var(--ink);
}

.weather-lab-solar aside small {
    margin-top: 0.45rem;
    line-height: 1.35;
}

.weather-lab-solar-colorbar {
    grid-area: legend;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    margin: 0.35rem 0 0.7rem;
    min-width: 0;
    padding: 0.25rem 0.45rem;
}

.weather-lab-solar-colorbar-gradient {
    display: block;
    height: 0.7rem;
    border: 1px solid #000;
    background: linear-gradient(to right, var(--weather-colormap));
}

.weather-lab-solar-colorbar-ticks {
    position: relative;
    display: block;
    height: max(1.7rem, calc(var(--weather-chart-legend-font-size, var(--weather-chart-font-size, 10.5px)) + 12px));
    min-height: calc(var(--weather-chart-legend-font-size, var(--weather-chart-font-size, 10.5px)) + 12px);
}

.weather-lab-solar-colorbar-ticks > i {
    position: absolute;
    top: 0;
    left: var(--tick-position);
    width: 1px;
    height: 5px;
    background: #000;
    font-style: normal;
    transform: translateX(-50%);
}

.weather-lab-solar-colorbar-ticks > i.is-minor {
    height: 3px;
}

.weather-lab-solar-colorbar-ticks > i > span {
    position: absolute;
    top: 7px;
    left: 50%;
    white-space: nowrap;
    transform: translateX(-50%);
}

.weather-lab-solar-colorbar-ticks > i.is-first > span {
    left: 0;
    transform: none;
    text-align: left;
}

.weather-lab-solar-colorbar-ticks > i.is-last > span {
    right: 0;
    left: auto;
    transform: none;
    text-align: right;
}

.weather-lab-solar-colorbar > strong {
    color: #000;
    font-weight: 600;
    text-align: center;
}

/* Each dataset owns a track. Do not inherit grid-area: legend here: that
   places every colorbar on top of its siblings. Side scales match h,x. */
.weather-lab-solar-dataset-scales {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 1rem; min-width: 0; align-content: center; align-items: stretch;
}
.weather-lab-solar-dataset-scales > .weather-lab-solar-colorbar {
    grid-area: auto; min-width: 0; margin: 0; padding: 0;
}
.weather-lab-solar-dataset-scales.is-vertical {
    grid-auto-columns: max-content; gap: .75rem;
    padding: .3rem .3rem .3rem .15rem;
}
.weather-lab-solar-dataset-scales.is-vertical > .weather-lab-solar-colorbar {
    grid-template-columns: 12px 2.8em;
    grid-template-rows: 3.4em minmax(120px, min(280px, calc(var(--weather-chart-height, 450px) * .62)));
    gap: .4rem .2rem;
}
.weather-lab-solar-dataset-scales.is-vertical > .weather-lab-solar-colorbar:last-child { grid-template-columns: 12px 2.8em 1.4em; }
.weather-lab-solar-dataset-scales .weather-lab-solar-scale-name { grid-column: 1 / -1; overflow-wrap: anywhere; align-self: end; line-height: 1.1; }
.weather-lab-solar-dataset-scales.is-vertical .weather-lab-solar-scale-name { max-width: 7em; max-height: 3.3em; overflow: hidden; }
.weather-lab-solar-dataset-scales.is-vertical .weather-lab-solar-colorbar-gradient {
    grid-row: 2; grid-column: 1; width: 12px; height: 100%; box-sizing: border-box;
    background: linear-gradient(to top, var(--weather-colormap));
}
.weather-lab-solar-dataset-scales.is-vertical .weather-lab-solar-colorbar-ticks { grid-row: 2; grid-column: 2; height: 100%; min-height: 0; }
.weather-lab-solar-dataset-scales.is-vertical .weather-lab-solar-colorbar-ticks > i {
    top: auto; bottom: var(--tick-position); left: 0; width: 5px; height: 1px; transform: translateY(50%);
}
.weather-lab-solar-dataset-scales.is-vertical .weather-lab-solar-colorbar-ticks > i > span { top: 50%; right: auto; left: 7px; transform: translateY(-50%); }
.weather-lab-solar-dataset-scales.is-vertical .weather-lab-solar-colorbar-ticks > i.is-first > span { top: auto; bottom: 0; transform: none; }
.weather-lab-solar-dataset-scales.is-vertical .weather-lab-solar-colorbar-ticks > i.is-last > span { top: 0; transform: none; }
.weather-lab-solar-dataset-scales.is-vertical .weather-lab-solar-scale-caption { grid-row: 2; grid-column: 3; align-self: center; justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

/* Side placement is a vertical scale, not a horizontal bar parked beside the
   plot. Keep the value labels and caption in their own compact columns. */
.weather-lab-solar:is(.is-legend-left, .is-legend-right) > .weather-lab-solar-colorbar {
    grid-template-columns: 12px 2.7em 1.3em;
    grid-template-rows: minmax(120px, 1fr);
    align-self: stretch;
    padding: 0.4rem 0;
}

.weather-lab-solar:is(.is-legend-left, .is-legend-right) .weather-lab-solar-colorbar-gradient {
    width: 12px;
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(to top, var(--weather-colormap));
}

.weather-lab-solar:is(.is-legend-left, .is-legend-right) .weather-lab-solar-colorbar-ticks {
    height: 100%;
    min-height: 0;
}

.weather-lab-solar:is(.is-legend-left, .is-legend-right) .weather-lab-solar-colorbar-ticks > i {
    top: auto;
    bottom: var(--tick-position);
    left: 0;
    width: 5px;
    height: 1px;
    transform: translateY(50%);
}

.weather-lab-solar:is(.is-legend-left, .is-legend-right) .weather-lab-solar-colorbar-ticks > i.is-minor {
    width: 3px;
}

.weather-lab-solar:is(.is-legend-left, .is-legend-right) .weather-lab-solar-colorbar-ticks > i > span {
    top: 50%;
    right: auto;
    left: 7px;
    transform: translateY(-50%);
}

.weather-lab-solar:is(.is-legend-left, .is-legend-right) .weather-lab-solar-colorbar-ticks > i.is-first > span {
    top: auto;
    bottom: 0;
    transform: none;
}

.weather-lab-solar:is(.is-legend-left, .is-legend-right) .weather-lab-solar-colorbar-ticks > i.is-last > span {
    top: 0;
    transform: none;
}

.weather-lab-solar:is(.is-legend-left, .is-legend-right) .weather-lab-solar-colorbar > strong {
    align-self: center;
    justify-self: center;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.weather-lab-design {
    display: block;
    padding: 0.58rem;
}

.weather-lab-design > summary {
    list-style: none;
    cursor: pointer;
    border-radius: 7px;
}

.weather-lab-design > summary::-webkit-details-marker {
    display: none;
}

.weather-lab-design > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.weather-lab-design[open] > .weather-lab-environment-design-layout {
    margin-top: 0.48rem;
}

.weather-lab-design-chevron {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 140ms ease;
}

.weather-lab-design[open] > summary .weather-lab-design-chevron {
    transform: rotate(90deg);
}

.weather-lab-environment-design {
    border-color: #a8d8c8;
    background: linear-gradient(145deg, #f3fbf7 0%, #eaf7f1 100%);
    box-shadow: inset 4px 0 0 #238362;
}

.weather-lab-environment-design.is-coupled {
    border-color: #69b59a;
}

.weather-lab-environment-design-status {
    align-self: flex-start;
    padding: 0.3rem 0.58rem;
    border: 1px solid #b8ddcf;
    border-radius: 999px;
    color: #205f4d;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.weather-lab-environment-design-layout {
    display: grid;
    grid-template-columns: minmax(200px, 0.27fr) minmax(0, 1fr);
    align-items: start;
    gap: 0.48rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.weather-lab-environment-state-list,
.weather-lab-environment-state-editor {
    min-width: 0;
    border: 1px solid #b8ddcf;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.78);
}

.weather-lab-environment-state-list {
    overflow: hidden;
}

.weather-lab-environment-state-list > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.36rem 0.42rem;
    border-bottom: 1px solid #cde6dc;
    color: #1f5c49;
    font-size: 0.72rem;
}

.weather-lab-environment-state-list > header > span {
    min-width: 0;
    display: grid;
    gap: 0.03rem;
}

.weather-lab-environment-state-list > header small {
    color: #638074;
    font-size: 0.6rem;
    font-weight: 500;
}

.weather-lab-environment-state-list > header > button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.weather-lab-environment-state-list > div {
    display: grid;
    gap: 0.24rem;
    padding: 0.3rem;
}

.weather-lab-environment-state-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #cfe4dc;
    border-radius: 9px;
    background: #fff;
}

.weather-lab-environment-state-row.is-selected {
    border-color: #4e9f83;
    box-shadow: 0 0 0 1px rgba(35, 131, 98, 0.16);
}

.weather-lab-environment-state-row.is-coupled {
    border-color: #145d47;
    background: #176b51;
}

.weather-lab-environment-state-select,
.weather-lab-environment-state-couple,
.weather-lab-environment-state-status,
.weather-lab-environment-state-remove {
    min-width: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.weather-lab-environment-state-status {
    align-self: center;
    margin: 0 0.3rem;
    padding: 0.18rem 0.34rem;
    border-radius: 999px;
    background: #176b51;
    color: #fff;
    font-size: 0.57rem;
    font-weight: 750;
    white-space: nowrap;
}

.weather-lab-environment-state-hx-status,
.weather-lab-environment-route-hx {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 24px;
    margin: 0 0.14rem;
    padding: 0.14rem 0.32rem;
    border: 1px solid #d0a000;
    border-radius: 7px;
    background: #fff7d6;
    color: #624900;
    box-shadow: inset 0 -2px 0 #c49300;
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.weather-lab-environment-state-hx-status.is-active,
.weather-lab-environment-route-hx {
    border-color: #c49318;
    background: linear-gradient(180deg, #f8dfa0, #eac15b);
    color: #513b00;
    box-shadow: inset 0 -2px 0 #b77d00;
}

.weather-lab-environment-state-hx-status svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.weather-lab-environment-state-row.has-hx-selection:not(.is-coupled) {
    border-color: #d0a000;
    background: #fffbee;
}

.weather-lab-environment-state-row.is-hx-visible:not(.is-coupled) {
    border-color: #c49318;
    background: #fff8dc;
    box-shadow: inset 3px 0 0 #b77d00;
}

.weather-lab-environment-state-row.is-hx-visible.is-coupled,
.weather-lab-environment-state-row.is-hx-visible.is-coupled.is-stale {
    /* Green communicates the RLT/environment assignment. The independent
       gold rail and badge communicate actual h,x visibility. */
    box-shadow: inset 3px 0 0 #b77d00;
}

.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-status {
    background: rgba(255, 255, 255, 0.18);
}

.weather-lab-environment-state-row.is-stale:not(.is-coupled) {
    border-color: rgba(166, 118, 31, 0.48);
    background: #fff8e8;
    color: #5f4518;
}

.weather-lab-environment-state-row.is-coupled.is-stale {
    border-color: var(--environment-border);
    background: var(--environment-bg-active);
    color: var(--environment-text);
    box-shadow: inset 3px 0 0 rgba(35, 131, 98, 0.6), inset 0 -2px 0 rgba(196, 147, 24, 0.72);
}

.weather-lab-environment-state-row.is-coupled.is-stale .weather-lab-environment-state-select,
.weather-lab-environment-state-row.is-coupled.is-stale .weather-lab-environment-state-select span,
.weather-lab-environment-state-row.is-coupled.is-stale .weather-lab-environment-state-remove {
    color: var(--environment-text);
}

.weather-lab-environment-state-select {
    display: grid;
    gap: 0.08rem;
    padding: 0.34rem 0.4rem;
    text-align: left;
}

.weather-lab-environment-state-select strong {
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-environment-state-select span {
    overflow: hidden;
    color: #61786f;
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-select,
.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-select span {
    color: #fff;
}

.weather-lab-environment-state-couple {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0.42rem;
    border-left: 1px solid #dceae5;
    color: #1c6e53;
    font-size: 0.62rem;
    font-weight: 700;
}

.weather-lab-environment-state-couple svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-couple {
    border-left-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    background: rgba(0, 0, 0, 0.12);
}

.weather-lab-environment-state-remove {
    width: 28px;
    border-left: 1px solid #dceae5;
    color: #8b4d47;
    font-size: 1rem;
}

.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-remove {
    border-left-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.weather-lab-environment-state-remove:disabled {
    opacity: 0.32;
    cursor: default;
}

.weather-lab-environment-state-editor {
    display: grid;
    gap: 0.4rem;
    width: 100%;
    max-width: 100%;
    padding: 0.48rem;
    box-sizing: border-box;
}

.weather-lab-design-editor-head {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 0.9fr);
    align-items: end;
    gap: 0.4rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.weather-lab-design-context {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.42rem;
    max-width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 0.26rem 0.4rem;
    box-sizing: border-box;
    border: 1px solid #cbe3d9;
    border-radius: 8px;
    background: #f2faf6;
    color: #255d4c;
    font-size: 0.66rem;
}

.weather-lab-design-context strong {
    min-width: 0;
    padding-right: 0.42rem;
    border-right: 1px solid #bddbce;
    overflow-wrap: anywhere;
}

.weather-lab-design-context span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.weather-lab-environment-target-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.weather-lab-environment-target-grid label {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
    color: var(--ink-soft);
    font-size: 0.64rem;
    font-weight: 600;
}

.weather-lab-environment-target-grid select {
    min-width: 0;
    height: 32px;
    padding: 0.28rem 0.4rem;
    border-radius: 7px;
    font-size: 0.69rem;
}

.weather-lab-environment-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.44rem;
    padding: 0.48rem;
    border: 1px solid #b9d9cd;
    border-radius: 9px;
    background: #f7fcf9;
}

.weather-lab-environment-route.is-active {
    border-color: #176b51;
    background: #dff2e9;
    box-shadow: inset 3px 0 0 #176b51;
}

.weather-lab-environment-route.is-active.is-hx-visible {
    box-shadow: inset 3px 0 0 #176b51, inset 0 -2px 0 #b77d00;
}

.weather-lab-environment-route > span {
    min-width: 0;
    display: grid;
    gap: 0.04rem;
}

.weather-lab-environment-route small {
    color: #5c776d;
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.weather-lab-environment-route strong {
    overflow: hidden;
    color: #194d3d;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-environment-route > i {
    color: #238362;
    font-size: 1rem;
    font-style: normal;
}

.weather-lab-environment-route > .button {
    min-height: 30px;
    padding: 0.28rem 0.48rem;
    white-space: nowrap;
}

.weather-lab-environment-route > em {
    min-width: 4.4rem;
    padding: 0.2rem 0.34rem;
    border-radius: 999px;
    background: #e6efeb;
    color: #60736c;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}

.weather-lab-environment-route.is-active > em {
    background: #176b51;
    color: #fff;
}

.weather-lab-environment-routes {
    display: grid;
    gap: 0.34rem;
}

.weather-lab-environment-routes > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    color: #194d3d;
    font-size: 0.69rem;
}

.weather-lab-environment-routes > header small {
    color: #607b70;
    font-size: 0.61rem;
    font-weight: 500;
}

.weather-lab-environment-routes .weather-lab-environment-route {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr) auto;
    padding: 0.4rem 0.46rem;
}

.weather-lab-environment-route.is-readonly {
    border-style: dashed;
    background: #fbfdfc;
}

.weather-lab-environment-route.is-stale {
    border-color: #c69c55;
    background: #fff5df;
    box-shadow: inset 3px 0 0 #9b6b23;
}

.weather-lab-environment-route.is-stale > em {
    background: #9b6b23;
    color: #fff;
}

.weather-lab-composite-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.4rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.weather-lab-composite-source {
    display: grid;
    gap: 0.32rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.42rem;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fbfcfd;
}

.weather-lab-composite-source h4 {
    min-width: 0;
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

.weather-lab-composite-source > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.35rem;
    max-width: 100%;
    min-width: 0;
}

.weather-lab-composite-source > header small {
    min-width: 0;
    color: var(--ink-soft);
    font-size: 0.58rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.weather-lab-composite-source .weather-lab-design-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem;
}

.weather-lab-composite-source .weather-lab-design-grid label,
.weather-lab-composite-source .weather-lab-design-grid select {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

/* Source filters live inside half-width cards, not the full analysis pane. */
.weather-lab-composite-source .weather-lab-source-filter {
    min-width: 0;
    max-width: 100%;
}

.weather-lab-composite-source .weather-lab-source-filter .weather-lab-filter-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.3rem 0 0;
    min-width: 0;
    max-width: 100%;
}

.weather-lab-composite-source .weather-lab-filter-body > fieldset,
.weather-lab-composite-source .weather-lab-filter-body > .weather-lab-filter-row:last-of-type {
    grid-column: 1 / -1;
}

.weather-lab-composite-source .weather-lab-filter-body > *,
.weather-lab-composite-source .weather-lab-filter-body label {
    min-width: 0;
    max-width: 100%;
}

.weather-lab-composite-source .weather-lab-filter-body input:not([type="checkbox"]),
.weather-lab-composite-source .weather-lab-filter-body select {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
    padding: 0.25rem 0.3rem;
}

.weather-lab-composite-source .weather-lab-month-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.2rem;
}

.weather-lab-composite-source .weather-lab-month-grid span {
    padding: 0.24rem 0.1rem;
}

.weather-lab-composite-source .weather-lab-filter-body > .button {
    justify-self: start;
    grid-column: 1 / -1;
    min-height: 28px;
}

.weather-lab-design-hx-controls {
    display: inline-flex;
    align-items: stretch;
    gap: 0.25rem;
    max-width: 100%;
}

.weather-lab-design-hx-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    min-height: 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel, #fff);
}

.weather-lab-design-hx-color input[type="color"] {
    width: 24px;
    height: 24px;
    padding: 1px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.weather-lab-design-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.weather-lab-design-actions .weather-lab-footnote {
    flex: 1 0 100%;
    margin: 0;
}

.weather-lab-difference-swap { flex: 0 0 28px; width: 28px; min-height: 28px; padding: 4px; }
.weather-lab-field-reset-host { position:relative; padding-right:28px; }
.weather-lab-field-reset-host > .weather-lab-category-reset { position:absolute; right:0; bottom:3px; width:24px; height:24px; padding:0; }
.weather-lab-difference-pair > .weather-lab-inline-check { flex: 1; min-width: 0; }
.weather-lab-tick-slider.has-field-reset { grid-template-columns: minmax(0, 1fr) 3em 26px; }
.weather-lab-tick-slider.has-field-reset > span { grid-column: 1 / -1; }
.weather-lab-tick-slider.has-field-reset > input[type=range] { grid-column: 1; }
.weather-lab-tick-slider.has-field-reset > output { grid-column: 2; }
.weather-lab-tick-slider.has-field-reset > button { grid-column: 3; width: 24px; height: 24px; padding: 0; }
.weather-lab-solar-viewport { grid-area: chart; position: relative; min-width: 0; width: min(100%, calc(var(--weather-chart-height, 450px) * 1.16)); justify-self:center; }
.weather-lab-solar-viewport > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.weather-lab-solar-viewport > svg { position: relative; display:block; width:100%; background: transparent; }
.weather-lab-design-actions > .button { margin-left: auto; }
.weather-lab-shell { overflow-anchor:none; }
.weather-lab-raw-button {
    box-sizing: border-box;
    display: inline-flex;
    justify-self: start;
    width: var(--weather-dataset-options-width);
    min-width: var(--weather-dataset-options-width);
    height: 1.72rem;
    min-height: 1.72rem;
    padding: 0 0.34rem;
    justify-content: center;
    gap: 0.18rem;
    border: 1px solid #d3e0e6;
    border-radius: 7px;
    background: #f2f7f9;
    color: var(--brand-strong);
    font-size: 0.64rem;
    font-weight: 700;
}
.weather-lab-dataset-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
}
.weather-lab-dataset-actions .weather-lab-dataset-delete { margin-left: auto; }
.weather-lab-dataset-actions .weather-lab-dataset-delete {
    box-sizing: border-box;
    height: 1.72rem;
    min-height: 1.72rem;
    padding-top: 0;
    padding-bottom: 0;
}
.weather-lab-raw-button:hover,
.weather-lab-raw-button:focus-visible {
    border-color: #91afbd;
    background: #e8f2f5;
}
.weather-lab-raw-button > .workspace-tool-icon { width: 0.84rem; height: 0.84rem; }
.weather-lab-raw-button > span:last-child { margin-left: 0; font-size: 1rem; line-height: 1; }
.weather-raw-view { position:fixed; margin:0; padding:0; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 42px #0004; z-index:12000; display:flex; flex-direction:column; overflow:hidden; }
.weather-raw-view > header, .weather-raw-view > nav, .weather-raw-view > footer { display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; flex:none; }
.weather-raw-view > header { border-bottom:1px solid var(--line); justify-content:space-between; }
.weather-raw-view > header div { display:grid; gap:.2rem; min-width:0; }
.weather-raw-view > header small { font-size:.7rem; overflow-wrap:anywhere; }
.weather-raw-view > nav { flex-wrap:wrap; }
.weather-raw-view > nav label { margin-left:auto; display:flex; align-items:center; gap:.4rem; font-size:.75rem; }
.weather-raw-view input { width:6rem; min-height:30px; }
.weather-raw-view > footer { justify-content:space-between; border-top:1px solid var(--line); font-size:.73rem; }
.weather-raw-status { margin:0; padding:.5rem .8rem 0; font-size:.75rem; line-height:1.4; }
.weather-raw-lines { overflow:auto; min-height:120px; max-height:55vh; font-family:Consolas, 'Liberation Mono', monospace; font-size:12px; line-height:1.7; background:var(--card); }
.weather-raw-line { display:flex; width:max-content; min-width:100%; white-space:pre; }
.weather-raw-line > span { flex:0 0 4.5em; text-align:right; padding-right:1em; opacity:.65; user-select:none; }
.weather-raw-line > code { padding-right:1em; font:inherit; }
.weather-raw-line.is-header { background:#fbe2e1; color:#713834; }
.weather-raw-line.is-data { background:#edf0f2; color:#28343c; }
.weather-raw-line:hover { box-shadow:inset 3px 0 #3f89bd; filter:brightness(.97); }
.weather-raw-view nav i { width:10px; height:10px; display:inline-block; border-radius:3px; margin-right:.35rem; }
.weather-raw-view nav i.is-header { background:#e7a7a4; }
.weather-raw-view nav i.is-data { background:#9da8af; }
:root:is([data-theme="dark"],[data-theme="dracula"]) .weather-raw-line.is-header { background:#442b31; color:#f4d6d4; }
:root:is([data-theme="dark"],[data-theme="dracula"]) .weather-raw-line.is-data { background:#282d35; color:#e4e8eb; }
.inline-color-suggestion.is-destructive { background: #fff0ed; border-color: #dcaaa5; color: #762b29; }
.inline-color-suggestion.is-destructive::before { background: #fff0ed; border-color: #dcaaa5; }
:root[data-theme="dark"] .inline-color-suggestion.is-destructive,
:root[data-theme="dracula"] .inline-color-suggestion.is-destructive { background:#392125; border-color:#a85f66; color:#ffdcda; }
:root[data-theme="dark"] .inline-color-suggestion.is-destructive::before,
:root[data-theme="dracula"] .inline-color-suggestion.is-destructive::before { background:#392125; border-color:#a85f66; }

.weather-lab-design-hx-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-height: 30px;
    padding: 0.26rem 0.48rem;
    border: 1px solid #cabfe6;
    border-radius: 8px;
    background: #f7f4fc;
    color: #59407e;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.weather-lab-design-hx-toggle svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.weather-lab-design-hx-toggle.is-active {
    border-color: #a87808;
    background: linear-gradient(180deg, #f5d77e, #e8bd45);
    color: #493200;
    box-shadow: inset 3px 0 0 #8f6500, 0 1px 4px rgba(126, 88, 8, 0.16);
}

.weather-lab-environment-readonly-route {
    display: flex;
    gap: 0.35rem;
    margin: 0;
    padding: 0 0.54rem 0.48rem;
    color: #4f6e62;
    font-size: 0.64rem;
}

.weather-lab-environment-coupling.is-readonly {
    cursor: default;
}

.weather-lab-design-label {
    min-width: 0;
    max-width: none;
}

.weather-lab-environment-design-head {
    align-items: center;
    gap: 0.55rem;
}

.weather-lab-environment-design-head > div:first-child {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.weather-lab-environment-design-head .eyebrow,
.weather-lab-environment-design-head h3,
.weather-lab-environment-design-head p {
    margin: 0;
}

.weather-lab-environment-design-head p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-environment-design-head > .weather-lab-environment-design-statuses {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0.28rem;
}

.weather-lab-design-warning,
.weather-lab-design-error {
    padding: 0.48rem 0.58rem;
    border-radius: 8px;
    font-size: 0.72rem;
}

.weather-lab-design-warning {
    color: #6d5017;
    background: #fff3cf;
}

.weather-lab-design-error {
    color: #8a2e28;
    background: #fff0ee;
}

.weather-lab-section-head {
    align-items: flex-start;
}

.weather-lab-section-head > div {
    display: grid;
    gap: 0.22rem;
}

.weather-lab-section-head h3 {
    font-size: 1.02rem;
}

.weather-lab-section-head p:last-child {
    max-width: 76ch;
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.4;
}

.weather-lab-method-note {
    border-radius: 999px;
    padding: 0.3rem 0.55rem;
    background: #fff3cf;
    color: #725112;
    font-size: 0.68rem;
    white-space: nowrap;
}

.weather-lab-design-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(135px, 1fr));
    gap: 0.55rem;
}

.weather-lab-design-grid select {
    height: 30px;
    padding: 0.25rem 0.38rem;
    border-radius: 7px;
    font-size: 0.7rem;
}

.weather-lab-design-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.42rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.42rem;
    box-sizing: border-box;
    border: 1px solid #b8ced8;
    border-radius: 12px;
    background: #f4fafc;
}

.weather-lab-design-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 0.28rem;
    min-width: 0;
}

.weather-lab-design-values > div {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: baseline;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.26rem 0.34rem;
    border-radius: 8px;
    background: #fff;
}

.weather-lab-design-values span,
.weather-lab-design-values small {
    min-width: 0;
    color: var(--ink-soft);
    font-size: 0.66rem;
    overflow-wrap: anywhere;
}

@container (max-width: 760px) {
    .weather-lab-environment-design-layout,
    .weather-lab-design-editor-head,
    .weather-lab-composite-grid,
    .weather-lab-design-result {
        grid-template-columns: minmax(0, 1fr);
    }

    .weather-lab-composite-source .weather-lab-design-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
    }

    .weather-lab-design-source,
    .weather-lab-design-result > .button {
        grid-column: 1;
        grid-row: auto;
    }

    .weather-lab-environment-design-status {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.weather-lab-design-source {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    color: var(--ink-soft);
    font-size: 0.7rem;
}

.weather-lab-design-source strong {
    color: var(--ink);
    font-size: 0.8rem;
}

.weather-lab-design-result > .button {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.weather-lab-design-missing {
    grid-column: 1 / -1;
    color: var(--ink-soft);
    font-size: 0.75rem;
}

.weather-lab-footnote {
    color: var(--ink-soft);
    font-size: 0.68rem;
}

.weather-lab-pressure-note,
.weather-lab-radiation-note,
.weather-lab-legacy-note {
    margin: 0;
    border-radius: 8px;
    color: #5f4b19;
    background: #fff7de;
    font-size: 0.68rem;
    line-height: 1.35;
}

.weather-lab-pressure-note {
    padding: 0.42rem 0.55rem;
}

.weather-lab-radiation-note {
    display: grid;
    gap: 0.08rem;
    margin: 0.25rem 0.5rem;
    padding: 0.36rem 0.48rem;
}

.weather-lab-legacy-note {
    margin: 0.25rem 0.5rem;
    padding: 0.36rem 0.48rem;
    color: #53646d;
    background: #eef3f6;
}

.weather-legacy-details {
    margin-top: 0.75rem;
    border-top: 1px solid var(--line);
    padding-top: 0.75rem;
}

.weather-legacy-details > summary {
    color: var(--brand-strong);
    font-size: 0.8rem;
    font-weight: 700;
}

.weather-legacy-details > p {
    margin: 0.45rem 0;
    font-size: 0.74rem;
}

@media (max-width: 900px) {
    .weather-lab-workbench {
        grid-template-columns: 1fr;
    }

    .weather-lab-acquisition-slot.is-open {
        grid-column: 1;
        grid-row: 1;
    }

    .weather-lab-navigation-panel {
        grid-column: 1;
        grid-row: 1;
    }

    .weather-lab-main {
        grid-column: 1;
        grid-row: 2;
    }

    .weather-lab-workbench.is-acquisition-open .weather-lab-navigation-panel {
        grid-row: 2;
    }

    .weather-lab-workbench.is-acquisition-open .weather-lab-main {
        grid-row: 3;
    }

    .weather-lab-notebook-functions {
        display: none;
    }
}

@media (max-width: 920px) {
    .weather-lab-hero,
    .weather-lab-section-head,
    .weather-lab-acquisition > header {
        align-items: stretch;
        flex-direction: column;
    }

    .weather-lab-acquisition-modes,
    .weather-lab-online-provider-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-lab-source-browser,
    .weather-lab-dwd-grid {
        grid-template-columns: 1fr;
    }

    .weather-lab-dwd-workflow ol {
        grid-template-columns: 1fr;
    }

    .weather-lab-source-list {
        max-height: 300px;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .weather-lab-selected-source {
        grid-template-columns: 1fr;
    }

    .weather-lab-hero-actions,
    .weather-lab-upload {
        justify-content: flex-start;
    }

    .weather-lab-sidebar,
    .weather-lab-design-grid {
        grid-template-columns: 1fr;
    }

    .weather-lab-design-result {
        grid-template-columns: 1fr;
    }

    .weather-lab-design-source,
    .weather-lab-design-result > .button {
        grid-column: 1;
        grid-row: auto;
    }

    .weather-lab-composite-grid {
        grid-template-columns: 1fr;
    }

    .weather-lab-environment-design-layout {
        grid-template-columns: 1fr;
    }

    .weather-lab-environment-route {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .weather-lab-environment-route > .button,
    .weather-lab-environment-route > em {
        grid-column: auto / span 1;
    }

    .weather-lab-panel-local-filter .weather-lab-filter-body,
    .weather-lab-source-filter .weather-lab-filter-body {
        grid-template-columns: 1fr;
    }

    .weather-lab-solar {
        grid-template-columns: 1fr;
    }

    .weather-lab-solar.is-legend-top {
        grid-template-areas: "legend" "chart" "meta";
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .weather-lab-solar.is-legend-bottom {
        grid-template-areas: "chart" "meta" "legend";
        grid-template-rows: minmax(0, 1fr) auto auto;
    }

    .weather-lab-solar.is-legend-left {
        grid-template-columns: max-content minmax(0, 1fr);
        grid-template-areas: "legend chart" "meta meta";
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .weather-lab-solar.is-legend-right {
        grid-template-columns: minmax(0, 1fr) max-content;
        grid-template-areas: "chart legend" "meta meta";
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .weather-lab-solar.is-legend-hidden {
        grid-template-areas: "chart" "meta";
    }

    .weather-lab-solar aside {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .weather-lab-threshold-row {
        column-width: 175px;
    }
}

@media (max-width: 540px) {
    .weather-lab-colorbar-control-grid {
        grid-template-columns: 1fr;
    }

    .weather-lab-pdf-export-dialog fieldset,
    .weather-lab-pdf-export-dialog [data-weather-pdf-dpi-wrap] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .weather-lab-upload,
    .weather-lab-hero-actions,
    .weather-lab-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .weather-lab-toolbar {
        --weather-toolbar-control-height: 44px;
    }

    .weather-lab-panel-head {
        --weather-panel-header-control-height: 44px;
    }

    .weather-lab-panel-controls {
        --weather-panel-control-height: 44px;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        padding: 0.34rem;
    }

    .weather-lab-acquisition-local {
        grid-template-columns: 1fr;
    }

    .weather-lab-acquisition-modes,
    .weather-lab-online-provider-tabs,
    .weather-lab-try-variants > div {
        grid-template-columns: 1fr;
    }

    .weather-lab-source-search,
    .weather-lab-dwd-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .weather-lab-source-search > *,
    .weather-lab-dwd-actions > * {
        width: 100%;
    }

    .weather-lab-design-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-lab-panel {
        min-width: 100%;
        resize: none;
    }

    .weather-lab-threshold-row {
        column-count: 1;
    }

    .weather-lab-threshold-editor {
        grid-template-columns: minmax(0, 1fr);
    }

    .weather-lab-threshold-picker {
        position: static;
    }

    .weather-lab-threshold-picker-list {
        grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
        max-height: none;
    }

    .weather-lab-threshold-row-head {
        flex-wrap: wrap;
    }

    .weather-lab-threshold-row-head .weather-lab-threshold-switches {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }

    .weather-lab-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .weather-lab-toolbar-actions > label {
        width: 100%;
        min-width: 0;
    }

    .weather-lab-drop-zone {
        flex-basis: 100%;
        min-height: 10px;
    }
}

/* Weather detail analysis -------------------------------------------------
   Violet is reserved for a time selection/detail plot.  The marker is kept
   independent of the golden h,x state so both relationships remain visible. */
.weather-lab-panel.has-detail-analysis {
    --weather-detail-accent: #6f42c1;
    --weather-detail-accent-strong: #58339e;
    --weather-detail-border: #9a78d6;
    --weather-detail-soft: #f3eefc;
    --weather-detail-soft-strong: #e8ddf8;
}

.weather-lab-panel.has-detail-analysis::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 9px;
    bottom: 9px;
    left: -2px;
    width: 4px;
    border-radius: 999px;
    background: var(--weather-detail-accent);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.86);
    pointer-events: none;
}

.weather-lab-panel.has-detail-analysis.is-detail-selecting::after {
    width: 5px;
    background: var(--weather-detail-accent-strong);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(111, 66, 193, 0.16);
}

.weather-lab-panel.has-detail-analysis:not(.has-hx-line-options) .weather-lab-panel-appearance > summary {
    border-color: var(--weather-detail-border);
    background: var(--weather-detail-soft);
    color: var(--weather-detail-accent-strong);
    box-shadow: inset 3px 0 0 var(--weather-detail-accent);
}

.weather-lab-panel.has-detail-analysis:not(.has-hx-line-options) .weather-lab-panel-appearance > summary:is(:hover, :focus-visible),
.weather-lab-panel.has-detail-analysis:not(.has-hx-line-options) .weather-lab-panel-appearance[open] > summary {
    border-color: var(--weather-detail-accent);
    background: var(--weather-detail-soft-strong);
}

/* Preserve the h,x gold fill and underline; violet remains a second marker. */
.weather-lab-panel.has-detail-analysis.has-hx-line-options .weather-lab-panel-appearance > summary {
    border-color: var(--weather-hx-line-border);
    background: var(--weather-hx-line-background);
    color: var(--weather-hx-line-text);
    box-shadow:
        inset 3px 0 0 var(--weather-detail-accent),
        inset 0 -2px 0 var(--weather-hx-line-accent);
}

.weather-lab-panel.has-detail-analysis.has-hx-line-options .weather-lab-panel-appearance > summary:is(:hover, :focus-visible),
.weather-lab-panel.has-detail-analysis.has-hx-line-options .weather-lab-panel-appearance[open] > summary {
    border-color: var(--weather-hx-line-accent);
    background: var(--weather-hx-line-background-hover);
    color: var(--weather-hx-line-text);
}

.weather-lab-annual-option-tabs button[data-weather-annual-options-tab="detail"].is-detail-marked,
.weather-lab-annual-option-tabs button[data-weather-annual-options-tab="detail"].has-detail-analysis {
    border-color: #9875d3;
    background: #f1ebfb;
    color: #523095;
    box-shadow: inset 0 -3px 0 #6f42c1;
}

.weather-lab-annual-option-tabs button[data-weather-annual-options-tab="detail"].is-detail-marked:is(:hover, :focus-visible, .is-active),
.weather-lab-annual-option-tabs button[data-weather-annual-options-tab="detail"].is-detail-selecting {
    border-color: #6f42c1;
    background: #e5d9f7;
    color: #46257f;
    box-shadow: inset 0 -3px 0 #58339e, 0 0 0 1px rgba(111, 66, 193, 0.13);
}

.weather-lab-detail-options {
    --brand: #6f42c1;
    --brand-strong: #58339e;
    display: grid;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.48rem;
    border: 1px solid #d4c6ec;
    border-radius: 9px;
    background: linear-gradient(135deg, #fbf9fe, #f5f0fc);
    box-shadow: inset 3px 0 0 #8a60cc;
}

.weather-lab-detail-options.is-visible {
    border-color: #a98dd9;
}

.weather-lab-detail-options.is-selecting {
    border-color: #7950bd;
    background: linear-gradient(135deg, #f8f4fd, #ece3f9);
    box-shadow: inset 4px 0 0 #6f42c1;
}

.weather-lab-detail-options > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(111, 66, 193, 0.17);
}

.weather-lab-detail-options > header > div {
    display: grid;
    gap: 0.04rem;
    min-width: 0;
}

.weather-lab-detail-options h4,
.weather-lab-detail-options small,
.weather-lab-detail-options p {
    margin: 0;
}

.weather-lab-detail-options h4 {
    color: #2e1b50;
    font-size: 0.72rem;
}

.weather-lab-detail-options small {
    color: #6b5b7b;
    font-size: 0.6rem;
    line-height: 1.3;
}

.weather-lab-detail-status {
    flex: 0 1 auto;
    max-width: min(48%, 19rem);
    overflow: hidden;
    padding: 0.22rem 0.42rem;
    border: 1px solid #c2ace5;
    border-radius: 999px;
    background: #fff;
    color: #5a3698;
    font-size: 0.6rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-detail-options.is-selecting .weather-lab-detail-status {
    border-color: #6f42c1;
    background: #6f42c1;
    color: #fff;
}

.weather-lab-detail-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(154px, 100%), 1fr));
    grid-auto-flow: row dense;
    align-items: end;
    gap: 0.32rem 0.42rem;
    min-width: 0;
}

.weather-lab-detail-controls > label {
    display: grid;
    align-content: end;
    gap: 0.12rem;
    min-width: 0;
    color: #4e3f5d;
    font-size: 0.62rem;
    font-weight: 700;
}

.weather-lab-detail-controls > label > span:first-child {
    min-width: 0;
}

.weather-lab-detail-controls select {
    width: 100%;
    height: 29px;
    min-height: 29px;
    padding: 0.24rem 0.38rem;
    border: 1px solid #cbbce4;
    border-radius: 6px;
    background: #fff;
    color: #2e2438;
    font-size: 0.65rem;
}

.weather-lab-detail-range > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem;
}

.weather-lab-detail-range output {
    min-width: 0;
    overflow: hidden;
    color: #5b3996;
    font-size: 0.59rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-detail-range input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: #6f42c1;
}

.weather-lab-detail-range input[type="range"].is-synced-range {
    --brand: #6f42c1;
    --brand-strong: #58339e;
}

.weather-lab-detail-snap {
    display: inline-flex !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center !important;
    align-self: end;
    min-height: 29px;
    padding: 0.24rem 0.38rem;
    border: 1px solid #d7cbea;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.74);
    cursor: pointer;
}

.weather-lab-detail-snap input {
    width: auto;
    margin: 0;
    accent-color: #6f42c1;
}

.weather-lab-detail-snap span {
    white-space: nowrap;
}

.weather-lab-detail-option-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.12rem;
    padding: 0.14rem;
    border: 1px solid #d2c4e8;
    border-radius: 8px;
    background: #ece5f6;
}

.weather-lab-detail-option-tabs button {
    appearance: none;
    min-height: 1.65rem;
    padding: 0.2rem 0.3rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #554565;
    font-size: 0.61rem;
    font-weight: 700;
    cursor: pointer;
}

.weather-lab-detail-option-tabs button:is(:hover, :focus-visible) {
    border-color: #b7a0dc;
    background: rgba(255, 255, 255, 0.68);
    outline: 0;
}

.weather-lab-detail-option-tabs button.is-active {
    border-color: #8d68ca;
    background: #fff;
    color: #4c2a85;
    box-shadow: inset 0 -2px 0 #6f42c1;
}

.weather-lab-detail-options-pane,
.weather-lab-detail-selection-pane {
    display: grid;
    gap: 0.36rem;
    min-width: 0;
}

.weather-lab-detail-setting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(178px, 100%), 1fr));
    gap: 0.28rem;
    min-width: 0;
}

.weather-lab-detail-setting-grid .weather-lab-appearance-category {
    min-width: 0;
    padding: 0.3rem;
}

.weather-lab-detail-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.weather-lab-detail-actions .button {
    min-height: 1.78rem;
    padding: 0.28rem 0.48rem;
    font-size: 0.65rem;
}

.weather-lab-detail-actions .button.is-detail-active {
    border-color: #6740aa;
    background: #e3d7f5;
    color: #472779;
    box-shadow: inset 0 0 0 1px rgba(111, 66, 193, 0.12);
}

.weather-lab-detail-actions .button.is-detail-primary {
    border-color: #5b34a1;
    background: linear-gradient(180deg, #7c54c4, #6840b0);
    color: #fff;
    box-shadow: 0 2px 6px rgba(77, 42, 136, 0.2);
}

.weather-lab-detail-actions .button.is-detail-primary:is(:hover, :focus-visible) {
    border-color: #4c288d;
    background: linear-gradient(180deg, #7046bb, #59319f);
}

.weather-lab-detail-selection-pane > p {
    display: flex;
    align-items: baseline;
    gap: 0.25rem 0.55rem;
    flex-wrap: wrap;
    padding-top: 0.28rem;
    border-top: 1px solid rgba(111, 66, 193, 0.13);
    color: #5d4d6b;
    font-size: 0.61rem;
}

.weather-lab-detail-selection-pane > p strong {
    color: #452979;
    font-size: 0.65rem;
}

.weather-lab-detail-output {
    --weather-detail-accent: #6f42c1;
    --weather-detail-accent-strong: #58339e;
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    margin: 0.25rem 0.6rem 0.35rem;
    padding: 0.38rem;
    border: 1px solid #b9a2df;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(79, 48, 130, 0.08), inset 0 3px 0 #7950bd;
}

.weather-lab-detail-height-resizer {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 14px;
    min-height: 14px;
    margin: 0.65rem 0.6rem 0;
    padding: 0;
    border: 1px solid #ddd4eb;
    border-radius: 7px;
    background: #faf8fd;
    color: #7d6b98;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
}

.weather-lab-detail-height-resizer > span {
    display: block;
    width: 3.2rem;
    height: 4px;
    border-radius: 999px;
    background: #a799ba;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.weather-lab-detail-height-resizer:is(:hover, :focus-visible),
.weather-lab-panel.is-resizing-detail-height .weather-lab-detail-height-resizer {
    border-color: #aa91d0;
    background: #f1ebfa;
    outline: none;
}

.weather-lab-detail-height-resizer:is(:hover, :focus-visible) > span,
.weather-lab-panel.is-resizing-detail-height .weather-lab-detail-height-resizer > span {
    background: var(--weather-detail-accent, #6f42c1);
}

.weather-lab-detail-output > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.18rem 0.22rem 0.38rem;
    border-bottom: 1px solid #e1d7f1;
}

.weather-lab-detail-output > header > div {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr);
    gap: 0.03rem 0.38rem;
    align-items: center;
    min-width: 0;
}

.weather-lab-detail-output > header strong,
.weather-lab-detail-output > header small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-lab-detail-output > header strong {
    color: #3d2469;
    font-size: 0.72rem;
}

.weather-lab-detail-output > header small {
    grid-column: 2;
    color: #736180;
    font-size: 0.6rem;
}

.weather-lab-detail-output > header > button {
    appearance: none;
    display: grid;
    flex: 0 0 1.6rem;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid #d3c5e8;
    border-radius: 7px;
    background: #f5f0fb;
    color: #5c3998;
    font: 700 1rem/1 sans-serif;
    cursor: pointer;
}

.weather-lab-detail-output > header > button:is(:hover, :focus-visible) {
    border-color: #8e6aca;
    background: #e9def8;
    outline: 2px solid rgba(111, 66, 193, 0.14);
}

.weather-lab-detail-zoom-mark {
    display: inline-grid;
    grid-row: 1 / span 2;
    place-items: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid #bba5df;
    border-radius: 50%;
    background: #f4effb;
    color: #6f42c1;
}

.weather-lab-detail-zoom-mark svg {
    width: 0.88rem;
    height: 0.88rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.weather-lab-detail-options h4:has(.weather-lab-detail-zoom-mark) {
    display: flex;
    align-items: center;
    gap: 0.28rem;
}

.weather-lab-detail-chart {
    position: relative;
    min-width: 0;
    overflow: visible;
    border-radius: 7px;
    background: #fff;
}

.weather-lab-detail-chart .weather-lab-svg,
.weather-lab-detail-chart .weather-lab-heatmap {
    height: var(--weather-detail-plot-height, 360px);
}

.weather-lab-detail-heatmaps {
    gap: 0.45rem;
}

.weather-lab-detail-heatmaps figure {
    overflow: hidden;
    border: 1px solid #e4dcef;
    border-radius: 8px;
    background: #fff;
}

.weather-lab-detail-heatmaps figcaption {
    border-bottom: 1px solid #eee8f5;
    color: #4d326f;
}

/* Heatmap selectors are positioned against the exact canvas plot rectangle. */
.weather-lab-heatmap-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    isolation: isolate;
}

[data-weather-detail-selector][hidden] {
    display: none !important;
}

.weather-lab-detail-selector-svg,
.weather-lab-detail-selector-html {
    --weather-detail-accent: #6f42c1;
    --weather-detail-accent-strong: #58339e;
    --weather-detail-fill: rgba(111, 66, 193, 0.13);
    pointer-events: none;
    touch-action: none;
    user-select: none;
}

.weather-lab-detail-selector-svg {
    isolation: isolate;
}

.weather-lab-detail-selector-html {
    position: absolute;
    z-index: 6;
    box-sizing: border-box;
    overflow: visible;
}

.weather-lab-detail-hit {
    cursor: crosshair;
}

.weather-lab-detail-selector-svg .weather-lab-detail-hit {
    fill: transparent;
    stroke: none;
}

.weather-lab-detail-selector-html .weather-lab-detail-hit {
    position: absolute;
    inset: 0;
}

.weather-lab-detail-band {
    cursor: grab;
}

.weather-lab-detail-selector-svg .weather-lab-detail-band {
    fill: var(--weather-detail-fill);
    stroke: var(--weather-detail-accent);
    stroke-width: 1.35;
    stroke-dasharray: 5 3;
    vector-effect: non-scaling-stroke;
}

.weather-lab-detail-selector-html .weather-lab-detail-band {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    min-width: 2px;
    border-right: 1.5px dashed var(--weather-detail-accent);
    border-left: 1.5px dashed var(--weather-detail-accent);
    background: var(--weather-detail-fill);
}

.weather-lab-detail-edge {
    stroke: var(--weather-detail-accent-strong);
    stroke-width: 1.7;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.weather-lab-detail-edge-hit {
    display: none;
    fill: transparent;
    stroke: none;
    cursor: ew-resize;
}

.weather-lab-detail-selector-svg.is-free .weather-lab-detail-edge-hit {
    display: block;
}

.weather-lab-detail-selection-label {
    fill: #4b287f;
    stroke: rgba(255, 255, 255, 0.96);
    stroke-width: 3px;
    paint-order: stroke fill;
    font: 700 9px/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: 0.01em;
    pointer-events: none;
}

.weather-lab-detail-selector-html [data-weather-detail-selection-label] {
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 6px;
    max-width: calc(100% - 12px);
    overflow: hidden;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.91);
    color: #4b287f;
    font: 700 0.58rem/1.1 "Segoe UI", Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.weather-lab-detail-selector-html [data-weather-detail-edge] {
    appearance: none;
    position: absolute;
    z-index: 3;
    top: 50%;
    display: none;
    width: 13px;
    height: 26px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--weather-detail-accent-strong);
    box-shadow: 0 0 0 1px var(--weather-detail-accent-strong), 0 2px 5px rgba(54, 30, 92, 0.22);
    cursor: ew-resize;
    transform: translateY(-50%);
}

.weather-lab-detail-selector-html.is-free [data-weather-detail-edge] {
    display: block;
}

.weather-lab-detail-selector-html [data-weather-detail-edge].is-start {
    left: -7px;
}

.weather-lab-detail-selector-html [data-weather-detail-edge].is-end {
    right: -7px;
}

.weather-lab-detail-selector-svg.is-selecting .weather-lab-detail-hit,
.weather-lab-detail-selector-svg.is-selecting .weather-lab-detail-band,
.weather-lab-detail-selector-svg.is-selecting.is-free .weather-lab-detail-edge-hit {
    pointer-events: all;
}

.weather-lab-detail-selector-html.is-selecting .weather-lab-detail-hit,
.weather-lab-detail-selector-html.is-selecting .weather-lab-detail-band,
.weather-lab-detail-selector-html.is-selecting.is-free [data-weather-detail-edge] {
    pointer-events: auto;
}

.weather-lab-panel.is-detail-dragging,
.weather-lab-panel.is-detail-dragging * {
    cursor: ew-resize !important;
    user-select: none !important;
}

.weather-lab-panel.is-detail-dragging .weather-lab-detail-band {
    cursor: grabbing !important;
}

@container (max-width: 640px) {
    .weather-lab-detail-options > header,
    .weather-lab-detail-output > header {
        align-items: flex-start;
    }

    .weather-lab-detail-options > header {
        flex-direction: column;
    }

    .weather-lab-detail-status {
        max-width: 100%;
        white-space: normal;
    }

    .weather-lab-detail-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .weather-lab-detail-option-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-lab-detail-option-tabs > button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .weather-lab-detail-actions > .button {
        flex: 1 1 10rem;
    }

    .weather-lab-detail-output {
        margin-inline: 0.25rem;
        padding: 0.3rem;
    }

    .weather-lab-detail-height-resizer {
        margin-inline: 0.25rem;
    }

    .weather-lab-detail-output > header small {
        white-space: normal;
    }

}

@media (prefers-reduced-motion: reduce) {
    .weather-lab-panel.has-detail-analysis::after {
        transition: none;
    }
}

/* Responsive workspace consolidation -----------------------------------
   The available editor width is often much smaller than the viewport,
   because the h,x pane and an inner navigation share it.  Stack the two
   primary work areas before either scientific workspace becomes cramped. */
@media (max-width: 1180px) {
    .workspace-layout,
    .workspace-layout.is-hx-pane-collapsed {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    .workspace-layout > .workspace-resizer {
        display: none;
    }

    .workspace-layout > .editor-card,
    .workspace-layout > .diagram-card,
    .workspace-layout > .hx-diagram-pane {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .workspace-layout > .hx-diagram-pane {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .weather-lab-workbench,
    .weather-lab-navigation-panel,
    .weather-lab-main,
    .rlt-lab-workbench,
    .rlt-navigation-panel,
    .rlt-lab-main,
    .chain-table-shell,
    .process-schematic-frame {
        max-width: 100%;
        min-width: 0;
    }
}

/* Keep work-area tabs in one row and shorten labels in order as space narrows. */
@media (max-width: 900px) {
    .workspace-module-nav .workspace-stack-tabs {
        grid-template-columns: repeat(5, minmax(108px, 1fr));
        overflow-x: auto;
    }

    .workspace-module-tab {
        overflow: hidden;
    }

    .workspace-module-tab strong {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 1180px) {
    #diagram-reference-button .workspace-module-label-full {
        display: none;
    }

    #diagram-reference-button .workspace-module-label-compact {
        display: inline;
    }
}

@media (max-width: 900px) {
    [data-workspace-stack="weather"] .workspace-module-label-full {
        display: none;
    }

    [data-workspace-stack="weather"] .workspace-module-label-compact {
        display: inline;
    }
}

@media (max-width: 760px) {
    [data-workspace-stack="chains"] .workspace-module-label-full {
        display: none;
    }

    [data-workspace-stack="chains"] .workspace-module-label-compact {
        display: inline;
    }
}

/* RLT options become a viewport-bound sheet instead of being positioned
   relative to the narrow toolbar trigger. */
@media (max-width: 760px) {
    .rlt-layout-options-panel {
        position: fixed;
        z-index: 72;
        top: auto;
        right: max(0.5rem, env(safe-area-inset-right));
        bottom: max(0.5rem, env(safe-area-inset-bottom));
        left: max(0.5rem, env(safe-area-inset-left));
        box-sizing: border-box;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 0.62rem;
        overflow: auto;
        overscroll-behavior: contain;
        border-radius: 16px;
        box-shadow: 0 20px 54px rgba(15, 39, 51, 0.28);
    }

    .rlt-layout-options-head {
        position: sticky;
        z-index: 2;
        top: -0.62rem;
        margin: -0.62rem -0.62rem 0.55rem;
        padding: 0.62rem;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(8px);
    }
}

@media (max-width: 620px) {
    html,
    body,
    .page-shell {
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    .workspace-module-nav,
    .workspace-layout,
    .workspace-layout > .editor-card,
    .workspace-layout > .hx-diagram-pane,
    .weather-lab,
    .weather-lab-shell,
    .weather-lab-workbench,
    .weather-lab-navigation-panel,
    .weather-lab-main,
    .weather-lab-panel-grid,
    .weather-lab-panel,
    .weather-lab-panel-head,
    .weather-lab-panel-controls,
    .weather-lab-appearance-body,
    .weather-lab-detail-output,
    .rlt-lab-shell,
    .rlt-lab-workbench,
    .rlt-navigation-panel,
    .rlt-lab-main,
    .rlt-work-card,
    .chain-table-shell,
    .process-schematic-frame {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }

    #diagram-reference-button .workspace-module-label-full {
        display: none;
    }

    #diagram-reference-button .workspace-module-label-compact {
        display: inline;
    }

    .weather-lab-toolbar-primary > label,
    .weather-lab-toolbar-actions > label,
    .weather-lab-panel-controls > label,
    .weather-lab-panel-controls > details,
    .weather-lab-panel-controls > button,
    .weather-lab-panel-controls select,
    .weather-lab-panel-controls input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .weather-lab-toolbar-primary {
        flex: 0 0 auto !important;
        width: 100%;
    }

    /* Preserve scientific content while shortening the very long mobile
       document. The SVG viewBox still carries the complete chart. */
    .weather-lab-svg,
    .weather-lab-heatmap {
        height: min(var(--weather-chart-height, 450px), 72vw);
        min-height: 250px;
    }

    .weather-lab-annual-chart-layout.is-stacked {
        gap: 0.24rem;
    }

    .weather-lab-annual-chart-layout.is-stacked > .weather-lab-histogram-svg,
    .weather-lab-annual-chart-layout.is-stacked > .weather-lab-duration-svg {
        height: min(var(--weather-chart-height, 450px), 66vw);
        min-height: 230px;
    }

    .weather-lab-detail-chart .weather-lab-svg,
    .weather-lab-detail-chart .weather-lab-heatmap {
        height: min(var(--weather-detail-plot-height, 360px), 68vw);
        min-height: 220px;
    }

    .weather-lab-detail-output {
        margin-inline: 0.18rem;
    }

    .weather-lab-detail-heatmaps,
    .weather-lab-compare-canvases,
    .weather-lab-compare-charts {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Compact visuals, generous hit areas. */
    .rlt-navigation-panel-toggle,
    .rlt-lab-shell .rlt-disclosure-button,
    .rlt-lab-shell .process-schematic-head .workspace-tool-button.is-icon-only,
    .weather-navigation-panel-toggle,
    .weather-lab-panel-order-actions button,
    .weather-lab-panel-head > .weather-lab-panel-collapse,
    .weather-lab-panel-head > .weather-lab-panel-remove,
    .weather-lab-panel-head > .button-icon-danger,
    .weather-lab-detail-output > header > button {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }

    .rlt-chain-actions .button,
    .rlt-lab-shell .air-side-switches .button,
    .rlt-lab-shell .flow-palette-item,
    .rlt-schematic-help > summary,
    .weather-lab-toolbar-primary > .button,
    .weather-lab-toolbar-primary select,
    .weather-lab-toolbar-actions > .button,
    .weather-lab-toolbar-actions > .weather-lab-hx-coupling,
    .weather-lab-toolbar-actions > .weather-lab-environment-coupling,
    .weather-lab-toolbar-actions > .weather-lab-global-appearance > summary,
    .weather-lab-panel-controls > .weather-lab-panel-inline-control > summary,
    .weather-lab .weather-lab-panel-title > input,
    .weather-lab-panel-controls select,
    .weather-lab-panel-controls input:is([type="text"], [type="number"], [type="search"], [type="date"], [type="time"]) {
        min-height: 44px;
        touch-action: manipulation;
    }

    .weather-lab-environment-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .weather-lab-environment-options > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .weather-lab-environment-options header small,
    .weather-lab-environment-status {
        max-width: 100%;
        white-space: normal;
    }

    .weather-lab-environment-options-actions,
    .weather-lab-environment-options > label {
        width: 100%;
    }

    .weather-lab-environment-options-actions .button {
        flex: 1 1 9rem;
        min-height: 40px;
    }

    .chain-main-row .button.button-tight,
    .chain-main-row .button.button-icon,
    .process-inline-row .button.button-tight,
    .process-inline-row .button.button-icon {
        min-width: 40px;
        min-height: 40px;
        touch-action: manipulation;
    }

    .rlt-layout-options-panel input[type="range"],
    .weather-lab-appearance-body input[type="range"] {
        min-height: 40px;
        touch-action: pan-x;
    }

    .weather-lab-height-resizer,
    .rlt-panel-height-resizer,
    .weather-lab-detail-height-resizer {
        height: 28px;
        min-height: 28px;
    }

    .rlt-panel-height-resizer {
        flex-basis: 28px;
    }
}

@media (max-width: 620px) {
    .rlt-table-column-picker {
        position: static;
    }

    .rlt-table-column-menu {
        position: fixed;
        z-index: 126;
        inset: auto 0.5rem 0.5rem;
        box-sizing: border-box;
        width: auto;
        max-height: calc(100dvh - 1rem);
        overflow: auto;
        border-radius: 15px;
    }

    .rlt-table-column-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rlt-node-popover {
        inset: auto max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left)) !important;
        width: auto;
        max-height: calc(100dvh - 1rem);
        overflow: auto;
        border-radius: 16px;
    }

    .rlt-node-popover::before {
        display: none;
    }

    .rlt-node-popover-fields,
    .rlt-node-popover-primary,
    .rlt-node-popover-style-grid,
    .rlt-node-popover-parameter-grid,
    .rlt-node-popover-identity-grid,
    .rlt-node-popover-topology-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rlt-node-popover-primary {
        align-items: stretch;
    }

    .rlt-node-popover-actions {
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .rlt-node-popover-actions .button {
        flex: 1 1 8.5rem;
        min-height: 42px;
    }

    .rlt-row-options.button,
    .rlt-info-button {
        min-width: 40px;
        width: 40px;
        height: 40px;
    }
}

/* RLT semantic states: environment stays green, h,x visibility stays gold.
   These selectors intentionally follow the generic table-summary rules. */
.rlt-lab-shell .chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .rlt-row-options.button,
.rlt-lab-shell .rlt-row-options.button.is-environment-boundary {
    border-color: #145d47;
    background: #176b51;
    color: #fff;
    box-shadow: 0 1px 3px rgba(20, 93, 71, 0.18);
}

.rlt-lab-shell .chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .rlt-row-options.button:hover,
.rlt-lab-shell .chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .rlt-row-options.button:focus-visible,
.rlt-lab-shell .rlt-row-options.button.is-environment-boundary:hover,
.rlt-lab-shell .rlt-row-options.button.is-environment-boundary:focus-visible {
    border-color: #0f4f3b;
    background: #10543f;
    color: #fff;
}

.rlt-lab-shell .rlt-row-options.button.is-hx-visible,
.rlt-lab-shell .rlt-row-options.button.is-hx-shown,
.rlt-lab-shell .rlt-row-options.button.is-in-hx,
.rlt-lab-shell .chain-entry.is-hx-visible .rlt-row-options.button {
    border-color: #c49318;
    background: linear-gradient(180deg, #f8dfa0, #eac15b);
    color: #513b00;
    box-shadow: inset 0 -2px 0 #b77d00, 0 1px 3px rgba(126, 88, 8, 0.16);
}

.rlt-lab-shell .coupling-diagram-toggle.is-hx-visible,
.rlt-lab-shell .coupling-diagram-toggle.is-active.is-hx-visible,
.rlt-node-popover-style-grid .inline-checkbox:has(input[data-rlt-popover-state-style-field="show_in_diagram"]:checked) {
    border-color: #c49318;
    background: linear-gradient(180deg, #fff3bd, #f1d16e);
    color: #513b00;
    box-shadow: inset 0 -2px 0 #b77d00, 0 1px 3px rgba(126, 88, 8, 0.14);
}

.rlt-lab-shell .coupling-diagram-toggle.is-hx-visible .workspace-tool-icon {
    color: #735300;
}

.rlt-lab-shell .coupling-diagram-toggle.is-hx-selected:not(.is-hx-visible) {
    border-color: rgba(196, 147, 24, 0.52);
    background: #fffbee;
    color: #735300;
}

.coupling-card-hx-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    min-height: 22px;
    padding: 0.12rem 0.3rem;
    border: 1px solid rgba(196, 147, 24, 0.58);
    border-radius: 7px;
    background: #fffbee;
    color: #735300;
    font-size: 0.58rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.coupling-card-hx-status.is-active {
    border-color: #c49318;
    background: linear-gradient(180deg, #f8dfa0, #eac15b);
    color: #513b00;
    box-shadow: inset 0 -2px 0 #b77d00;
}

.coupling-card-hx-status svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.rlt-lab-shell .coupling-card.is-hx-visible {
    border-bottom-color: #c49318;
    box-shadow: inset 0 -2px 0 #b77d00;
}

.rlt-lab-shell .coupling-card.is-environment.is-weather-coupled.is-hx-visible {
    box-shadow: inset 3px 0 0 rgba(35, 131, 98, 0.6), inset 0 -2px 0 #b77d00;
}

.rlt-lab-shell .coupling-card.is-environment.is-weather-coupled,
.rlt-lab-shell .coupling-environment-assignment.is-coupled,
.rlt-lab-shell .coupling-weather-binding.is-active {
    border-color: #176b51;
    background: #e3f2eb;
    color: #145d47;
    box-shadow: inset 3px 0 0 #176b51;
}

.rlt-lab-shell .rlt-environment-assignment.is-coupled {
    border-color: #176b51;
    background: #e3f2eb;
    box-shadow: inset 3px 0 0 #176b51;
}

.rlt-lab-shell .rlt-environment-assignment.is-coupled > header {
    margin: -0.12rem -0.12rem 0;
    padding: 0.3rem 0.36rem;
    border-radius: 6px;
    background: #176b51;
    color: #fff;
}

.rlt-lab-shell .rlt-environment-assignment.is-coupled > header small,
.rlt-lab-shell .rlt-environment-assignment.is-coupled > header strong {
    color: inherit;
}

.rlt-navigation-panel,
.weather-lab-navigation-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scrollbar-gutter: auto;
}

.rlt-navigation-content,
.weather-lab-navigation-content {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
}

/* Stacked navigation has no height cap and should scroll with the page. */
@container (max-width: 820px) {
    .rlt-navigation-panel,
    .weather-lab-navigation-panel,
    .rlt-navigation-content,
    .weather-lab-navigation-content {
        overflow: visible;
        overscroll-behavior: auto;
    }
}

.rlt-navigation-head,
.weather-lab-navigation-head {
    position: sticky;
    flex: 0 0 auto;
    z-index: 4;
    top: 0;
}

.rlt-summary-icon,
.rlt-options-info-icon svg,
.rlt-coupling-option-icon svg,
.coupling-kind-icon svg,
.coupling-chevron svg,
.coupling-weather-binding-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rlt-summary-icon {
    display: inline-grid;
    place-items: center;
}

.rlt-summary-icon svg {
    width: 17px;
    height: 17px;
}

.rlt-schematic-style-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rlt-schematic-style-panel .schematic-style-grid {
    padding: 0.42rem;
    border: 1px solid #d8e3e8;
    border-radius: 9px;
    background: #f9fbfc;
}

.rlt-schematic-style-panel .schematic-style-grid > .rlt-compact-style-field {
    min-width: 0;
    padding: 0.24rem 0.3rem;
    border: 1px solid #e2e9ed;
    border-radius: 7px;
    background: #fff;
}

.rlt-environment-assignment-grid > .rlt-environment-assignment-apply:not(:disabled),
.coupling-environment-assignment-actions > .rlt-environment-assignment-apply:not(:disabled) {
    border-color: #145d47;
    background: #176b51;
    color: #fff;
}

.rlt-environment-assignment-grid > .rlt-environment-assignment-apply:not(:disabled):hover,
.rlt-environment-assignment-grid > .rlt-environment-assignment-apply:not(:disabled):focus-visible,
.coupling-environment-assignment-actions > .rlt-environment-assignment-apply:not(:disabled):hover,
.coupling-environment-assignment-actions > .rlt-environment-assignment-apply:not(:disabled):focus-visible {
    border-color: #0f4f3b;
    background: #10543f;
}

.rlt-environment-assignment-apply,
.rlt-environment-assignment-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
}

.rlt-environment-assignment-clear:not(:disabled) {
    color: #7f3940;
}

/* Umweltbilanz: ein kompaktes Zustandspaar statt zweier konkurrierender
   Spalten. Wetterkopplung und Umweltgrenze bleiben dabei bewusst getrennt. */
.rlt-environment-boundary-pair {
    display: grid;
    gap: 0.36rem;
    padding: 0.46rem;
    border: 1px solid #cbded7;
    border-radius: 9px;
    background: rgba(35, 131, 98, 0.045);
    color: #355b4e;
}

.rlt-environment-boundary-pair.is-complete {
    border-color: var(--environment-border);
    background: var(--environment-bg);
    box-shadow: inset 3px 0 0 rgba(35, 131, 98, 0.58);
}

.rlt-environment-boundary-pair > header {
    display: flex;
    align-items: center;
    gap: 0.38rem;
}

.rlt-environment-boundary-pair > header > svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--environment-accent);
}

.rlt-environment-boundary-pair > header > span,
.rlt-environment-boundary-role {
    min-width: 0;
    display: grid;
    gap: 0.02rem;
}

.rlt-environment-boundary-pair > header strong {
    font-size: 0.74rem;
}

.rlt-environment-boundary-pair > header small,
.rlt-environment-boundary-role small {
    color: #607970;
    font-size: 0.58rem;
}

.rlt-environment-boundary-pair-rows {
    display: grid;
    gap: 0.24rem;
}

.rlt-environment-boundary-pair-row {
    display: grid;
    grid-template-columns: minmax(92px, 0.42fr) 22px minmax(150px, 1fr);
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.28rem 0.34rem;
    border: 1px solid rgba(35, 131, 98, 0.18);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.78);
}

.rlt-environment-boundary-role strong {
    color: var(--environment-text);
    font-size: 0.68rem;
}

.rlt-environment-boundary-pair-row > i {
    display: grid;
    place-items: center;
    color: var(--environment-accent);
    font-style: normal;
}

.rlt-environment-boundary-pair-row > i svg {
    width: 18px;
    height: 18px;
}

.rlt-environment-boundary-pair-row select {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0.24rem 0.38rem;
    border-color: rgba(35, 131, 98, 0.28);
    border-radius: 7px;
    font-size: 0.7rem;
}

.rlt-environment-boundary-pair > p {
    margin: 0;
    color: #607970;
    font-size: 0.6rem;
    line-height: 1.3;
}

.coupling-environment-assignment-fields {
    grid-template-columns: minmax(190px, 1fr) minmax(105px, 0.42fr) auto;
}

.rlt-node-popover .coupling-environment-assignment-fields {
    grid-template-columns: minmax(0, 1fr) minmax(105px, 0.42fr);
}

.rlt-node-popover .coupling-environment-assignment-actions {
    grid-column: 1 / -1;
}

.rlt-environment-assignment-grid {
    grid-template-columns: minmax(0, 1fr) auto;
}

.rlt-environment-assignment-direction {
    min-height: 1.75rem;
    display: grid;
    align-content: center;
    gap: 0.02rem;
    padding: 0.22rem 0.38rem;
    border: 1px solid rgba(35, 131, 98, 0.22);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.7);
}

.rlt-environment-assignment-direction small {
    color: #607970;
    font-size: 0.54rem;
    text-transform: uppercase;
}

.rlt-environment-assignment-direction strong {
    color: var(--environment-text);
    font-size: 0.67rem;
}

.rlt-environment-coupling-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    min-height: 32px;
    border-color: var(--environment-border);
    background: var(--environment-bg);
    color: var(--environment-text);
}

.rlt-environment-coupling-toggle:not(:disabled):hover,
.rlt-environment-coupling-toggle:not(:disabled):focus-visible,
.rlt-environment-coupling-toggle.is-coupled,
.coupling-environment-assignment-actions > .rlt-environment-coupling-toggle:not(:disabled),
.coupling-environment-assignment-actions > .rlt-environment-coupling-toggle:not(:disabled):hover,
.coupling-environment-assignment-actions > .rlt-environment-coupling-toggle:not(:disabled):focus-visible {
    border-color: var(--environment-accent);
    background: var(--environment-bg-active);
    color: var(--environment-text);
    box-shadow: inset 0 -2px 0 rgba(35, 131, 98, 0.5);
}

.rlt-node-popover-tabs button.is-environment-linked {
    border-color: var(--environment-border);
    background: var(--environment-bg);
    color: var(--environment-text);
}

.rlt-node-popover-tabs button.is-environment-linked:is(:hover, :focus-visible, .is-active) {
    border-color: var(--environment-accent);
    background: var(--environment-bg-active);
    color: var(--environment-text);
    box-shadow: inset 0 -2px 0 rgba(35, 131, 98, 0.62), 0 1px 2px rgba(20, 93, 71, 0.08);
}

.rlt-node-popover-tabs button.is-hx-linked {
    border-color: rgba(196, 147, 24, 0.6);
    background: #fff8dc;
    color: #624900;
}

.rlt-node-popover-tabs button.is-hx-linked:is(:hover, :focus-visible, .is-active) {
    border-color: #c49318;
    background: linear-gradient(180deg, #f8dfa0, #eac15b);
    color: #513b00;
    box-shadow: inset 0 -2px 0 #b77d00, 0 1px 2px rgba(126, 88, 8, 0.12);
}

.coupling-environment-assignment.is-paused {
    border-style: dashed;
    background: #fbfdfc;
}

.coupling-environment-assignment .coupling-weather-route.is-paused > em {
    background: #eef2f0;
    color: #61736c;
}

/* Leichteres, transparentes Grün für alle gekoppelten Umweltzustände. */
.rlt-lab-shell .chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .chain-main-row,
.rlt-lab-shell .chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .chain-extra-row,
.rlt-lab-shell .chain-entry-state.is-environment-boundary:not(.is-environment-coupled):not(.is-process-bypassed) .chain-main-row,
.rlt-lab-shell .chain-entry-state.is-environment-boundary:not(.is-environment-coupled):not(.is-process-bypassed) .chain-extra-row {
    border-color: var(--environment-border);
    background: var(--environment-bg);
    box-shadow: inset 3px 0 0 rgba(35, 131, 98, 0.6);
}

.rlt-lab-shell .chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .rlt-row-options.button,
.rlt-lab-shell .rlt-row-options.button.is-environment-boundary,
.rlt-lab-shell .chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .rlt-row-options.button:hover,
.rlt-lab-shell .chain-entry-state.is-environment-coupled:not(.is-process-bypassed) .rlt-row-options.button:focus-visible,
.rlt-lab-shell .rlt-row-options.button.is-environment-boundary:hover,
.rlt-lab-shell .rlt-row-options.button.is-environment-boundary:focus-visible,
.rlt-lab-shell .rlt-row-options.button.is-room-boundary,
.rlt-lab-shell .rlt-row-options.button.is-room-boundary:hover,
.rlt-lab-shell .rlt-row-options.button.is-room-boundary:focus-visible {
    border-color: var(--environment-border);
    background: var(--environment-bg-active);
    color: var(--environment-text);
    box-shadow: inset 0 -2px 0 rgba(35, 131, 98, 0.45), 0 1px 3px rgba(20, 93, 71, 0.08);
}

.rlt-lab-shell .coupling-card.is-environment.is-weather-coupled,
.rlt-lab-shell .coupling-environment-assignment.is-coupled,
.rlt-lab-shell .coupling-weather-binding.is-active,
.rlt-lab-shell .rlt-environment-assignment.is-coupled {
    border-color: var(--environment-border);
    background: var(--environment-bg);
    color: var(--environment-text);
    box-shadow: inset 3px 0 0 rgba(35, 131, 98, 0.6);
}

.rlt-lab-shell .rlt-environment-assignment.is-coupled > header {
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--environment-text);
}

.rlt-lab-shell .rlt-environment-assignment.is-coupled > header small,
.coupling-environment-assignment.is-coupled > header small {
    border: 1px solid var(--environment-border);
    background: var(--environment-bg-active);
    color: var(--environment-text);
}

.weather-lab-environment-coupling.is-active,
.weather-lab-environment-coupling.is-active:hover,
.weather-lab-environment-coupling.is-active:focus-visible {
    border-color: var(--environment-accent);
    background: var(--environment-bg-active);
    color: var(--environment-text);
    box-shadow: inset 0 -2px 0 rgba(35, 131, 98, 0.48), 0 2px 7px rgba(20, 93, 71, 0.1);
}

.weather-lab-shell.is-environment-coupled-single:not(.is-hx-coupled-single) .weather-lab-mode-tabs button[data-weather-analysis-mode="single"],
.weather-lab-shell.is-environment-coupled-compare:not(.is-hx-coupled-compare) .weather-lab-mode-tabs button[data-weather-analysis-mode="compare"] {
    border-color: var(--environment-border);
    border-bottom-color: var(--environment-accent);
    background: var(--environment-bg-active);
    color: var(--environment-text);
    box-shadow: inset 0 -3px 0 rgba(35, 131, 98, 0.58), 0 1px 3px rgba(20, 93, 71, 0.08);
}

.weather-lab-shell.is-environment-coupled-single:not(.is-hx-coupled-single) .weather-lab-mode-tabs button[data-weather-analysis-mode="single"] .weather-lab-mode-icon,
.weather-lab-shell.is-environment-coupled-compare:not(.is-hx-coupled-compare) .weather-lab-mode-tabs button[data-weather-analysis-mode="compare"] .weather-lab-mode-icon {
    color: var(--environment-text);
}

.weather-lab-environment-state-row.is-coupled,
.weather-lab-environment-state-row.is-coupled.is-stale {
    border-color: var(--environment-border);
    background: var(--environment-bg-active);
    color: var(--environment-text);
}

.weather-lab-environment-state-row.is-coupled.is-stale {
    box-shadow: inset 0 0 0 2px rgba(196, 147, 24, 0.42);
}

.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-select,
.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-select span,
.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-couple {
    color: var(--environment-text);
}

.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-couple,
.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-remove {
    border-left-color: rgba(35, 131, 98, 0.22);
    background: rgba(255, 255, 255, 0.28);
}

.weather-lab-environment-state-row.is-coupled .weather-lab-environment-state-remove {
    color: #8b4d47;
}

@media (max-width: 620px) {
    .rlt-environment-boundary-pair-row {
        grid-template-columns: minmax(82px, 0.45fr) 20px minmax(135px, 1fr);
    }

    .coupling-environment-assignment-fields,
    .rlt-node-popover .coupling-environment-assignment-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .coupling-environment-assignment-actions,
    .rlt-node-popover .coupling-environment-assignment-actions {
        grid-column: auto;
        justify-content: stretch;
    }

    .rlt-environment-coupling-toggle {
        width: 100%;
    }
}

.coupling-diagram-toggle.workspace-tool-button {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    min-height: 32px;
    padding: 0.28rem 0.5rem;
}

.coupling-diagram-toggle > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@container (max-width: 520px) {
    .rlt-schematic-style-tabs {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Kompakte RLT-Werkzeuge: Bauteile öffnen als echte Palette oberhalb des
   Schaltbilds und verändern dessen Höhe nicht. */
.rlt-lab-shell .process-schematic-toolbar {
    position: relative;
}

.rlt-lab-shell .symbol-browser {
    position: absolute;
    z-index: 45;
    top: auto;
    right: 0;
    bottom: calc(100% + 0.42rem);
    left: 0;
    grid-column: auto;
    width: auto;
    max-height: min(410px, 52vh);
    margin: 0;
    overflow: auto;
    border-radius: 12px;
    box-shadow: 0 18px 46px rgba(23, 45, 58, 0.24);
}

.flow-palette-category-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rlt-lab-shell .flow-palette-browser-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    border-style: solid;
}

.rlt-lab-shell .flow-palette-browser-toggle.is-thermal {
    border-color: #a7bfd0;
    background: linear-gradient(105deg, rgba(76, 139, 187, 0.13), rgba(255, 255, 255, 0.92) 50%, rgba(204, 91, 97, 0.13));
    color: #385f76;
}

.rlt-lab-shell .flow-palette-browser-toggle.is-thermal:is(:hover, :focus-visible, .is-active) {
    border-color: #769cb8;
    background: linear-gradient(105deg, rgba(76, 139, 187, 0.22), rgba(255, 255, 255, 0.96) 48%, rgba(204, 91, 97, 0.22));
    color: #244d66;
}

.rlt-lab-shell .flow-palette-browser-toggle.is-visual {
    border-color: #c3cbd1;
    background: #f1f3f5;
    color: #58666f;
}

.rlt-lab-shell .flow-palette-browser-toggle.is-visual:is(:hover, :focus-visible, .is-active) {
    border-color: #9eabb3;
    background: #e5e9ec;
    color: #3f4e57;
}

.symbol-browser-group[hidden] {
    display: none;
}

/* Die Sammeloptionen für Zustände und Prozesse sind am auslösenden Button
   verankerte Sprechblasen – ohne abgedunkelten, blockierenden Hintergrund. */
.modal.rlt-bulk-toolbar-popover {
    position: fixed;
    z-index: 122;
    inset: auto;
    overflow: visible;
}

.rlt-bulk-toolbar-popover > .modal-backdrop {
    display: none;
}

.rlt-bulk-toolbar-popover > .rlt-bulk-style-panel {
    width: 100%;
    max-width: none;
    max-height: inherit;
    margin: 0;
    overflow: auto;
    border-color: #aebfca;
    box-shadow: 0 18px 44px rgba(16, 42, 56, 0.24);
}

.rlt-bulk-toolbar-popover::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -6px;
    left: var(--rlt-bulk-arrow-x, 50%);
    width: 12px;
    height: 12px;
    border-top: 1px solid #aebfca;
    border-left: 1px solid #aebfca;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
}

.rlt-bulk-toolbar-popover.is-above::before {
    top: auto;
    bottom: -6px;
    border: 0;
    border-right: 1px solid #aebfca;
    border-bottom: 1px solid #aebfca;
}

/* Kern- und Zusatzspalten verwenden dieselbe, etwas größere zweizeilige
   Kopfzeilentypografie. */
.rlt-style-reset-caption {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

.rlt-style-field-reset {
    flex: 0 0 auto;
    margin-left: auto;
}

.chain-list-head .chain-main-heading,
.chain-extra-head .chain-extra-heading {
    justify-items: stretch;
    text-align: left;
}

.chain-list-head .chain-main-heading b,
.chain-extra-head .chain-extra-heading b {
    width: 100%;
    font-size: calc(var(--chain-head-font-size) + 0.08rem);
    font-weight: 650;
    text-align: left;
}

.chain-list-head .chain-main-heading small,
.chain-extra-head .chain-extra-heading small {
    width: 100%;
    font-size: calc(var(--chain-head-font-size) - 0.04rem);
    font-weight: 500;
    text-align: left;
}

/* Tabellenwerte bleiben wissenschaftlich gut lesbar, ohne in den rechten
   Zusatzspalten optisch wie Überschriften zu wirken. */

.chain-extra-value,
.chain-extra-cell.has-value .chain-extra-value {
    font-weight: 400;
}

/* Beide Bilanzgrenzen verwenden dasselbe kompakte Kartenraster.
   Die Benennung steht nur einmal im Kopf; Zusatzvorgaben sind aufklappbar. */
.coupling-card {
    container-name: balance-card;
    container-type: inline-size;
}

.coupling-card .coupling-card-title small {
    display: none;
}

.coupling-card .coupling-card-head {
    min-height: 2.65rem;
    box-sizing: border-box;
    align-items: center;
    flex-direction: row;
}

.coupling-card .coupling-card-toggle {
    grid-template-columns: 1.85rem minmax(0, 1fr) auto auto minmax(0, 1fr) 1rem;
}

.coupling-card .coupling-card-head .status-badge { white-space: nowrap; }

@container balance-card (max-width: 600px) {
    .coupling-card .coupling-card-toggle { grid-template-columns: 1.85rem minmax(0, 1fr) auto auto 0 1rem; gap: 0.25rem; }
    .coupling-card .coupling-card-glance { display: none; }
}

@container balance-card (max-width: 350px) {
    .coupling-card .coupling-card-toggle { grid-template-columns: 1.6rem minmax(0, 1fr) auto auto 0 0.8rem; gap: 0.2rem; }
    .coupling-card .coupling-card-head .status-badge { padding-inline: 0.2rem; font-size: 0.58rem; }
}

.coupling-card .coupling-card-body {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 0.34rem;
    padding: 0.42rem 0.48rem 0.48rem;
}

.coupling-card .coupling-diagram-config,
.coupling-card .coupling-load-grid,
.coupling-card .coupling-result-row,
.coupling-card .coupling-result-details,
.coupling-card .coupling-target-state,
.coupling-card .coupling-warnings {
    grid-column: 1 / -1;
}

.coupling-room-settings {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.32rem;
    border: 1px solid #c9d8dc;
    border-radius: 8px;
    background: #ffffff;
}

.coupling-room-settings label {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    color: var(--ink-soft);
    font-size: 0.66rem;
}

.coupling-room-settings :is(input:not([type="checkbox"]), select),
.coupling-boundary-pair .rlt-environment-boundary-pair-row select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    padding: 0.2rem 0.35rem;
    border-radius: 7px;
    font-size: 0.7rem;
}

.coupling-room-advanced,
.coupling-result-details {
    min-width: 0;
    border-top: 1px solid #e1e7ea;
}

.coupling-room-advanced > summary,
.coupling-result-details > summary,
.coupling-style-details > summary {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 28px;
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.coupling-room-advanced > summary::after,
.coupling-result-details > summary::after,
.coupling-style-details > summary::after {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    margin: 0 0.18rem 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.coupling-room-advanced[open] > summary::after,
.coupling-result-details[open] > summary::after,
.coupling-style-details[open] > summary::after {
    transform: rotate(225deg);
}

.coupling-room-advanced > summary::-webkit-details-marker,
.coupling-result-details > summary::-webkit-details-marker,
.coupling-style-details > summary::-webkit-details-marker { display: none; }

.coupling-room-advanced-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 0.3rem;
}

.coupling-room-advanced > small {
    display: block;
    margin-top: 0.2rem;
    color: var(--ink-soft);
    font-size: 0.62rem;
    line-height: 1.35;
}

.coupling-result-details > .coupling-summary { padding: 0.12rem 0 0.3rem; }
.coupling-card .coupling-result-row { align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.coupling-card .coupling-result-row > .coupling-summary { flex: 1 1 200px; }
.coupling-card .coupling-calculation-button { margin-left: auto; height: 32px; min-height: 32px; }
.coupling-card .coupling-load-grid { padding: 0.32rem; gap: 0.3rem; }
.coupling-card .coupling-load-grid label { min-width: 0; display: grid; align-content: end; font-size: 0.66rem; }
.coupling-card .coupling-load-grid :is(input, select) { box-sizing: border-box; height: 32px; min-height: 32px; font-size: 0.7rem; }
.coupling-card .coupling-style-details > summary { box-sizing: border-box; min-height: 32px; display: flex; align-items: center; padding-block: 0.2rem; }

.coupling-boundary-pair {
    container-name: balance-boundary;
    container-type: inline-size;
    align-content: start;
}

/* In the compact balance cards, both boundary states share one row.
   Put their labels above the controls instead of stacking the states. */
.coupling-card .coupling-boundary-pair .rlt-environment-boundary-pair-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coupling-card .coupling-boundary-pair .rlt-environment-boundary-pair-row {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.15rem;
}

.coupling-card .coupling-boundary-pair .rlt-environment-boundary-pair-row > i {
    display: none;
}

.coupling-card .coupling-boundary-pair .rlt-environment-boundary-role {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem;
}

@container balance-boundary (max-width: 400px) {
    .coupling-boundary-pair .rlt-environment-boundary-pair-rows { grid-template-columns: minmax(0, 1fr); }
    .coupling-boundary-pair .rlt-environment-boundary-pair-row { grid-template-columns: 4rem 17px minmax(0, 1fr); }
}

.rlt-environment-boundary-pair,
.coupling-environment-assignment {
    gap: 0.24rem;
    padding: 0.32rem;
    border-radius: 8px;
}

.rlt-environment-boundary-pair-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem;
}

.rlt-environment-boundary-pair-row {
    grid-template-columns: auto 17px minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.2rem 0.24rem;
}

.rlt-environment-boundary-pair-row select {
    height: 28px;
    min-height: 28px;
    padding: 0.18rem 0.28rem;
    font-size: 0.66rem;
}

.rlt-environment-boundary-role strong {
    font-size: 0.64rem;
}

.rlt-environment-boundary-role small {
    font-size: 0.52rem;
}

.coupling-environment-assignment-fields,
.rlt-node-popover .coupling-environment-assignment-fields {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.28rem;
}

.coupling-environment-assignment-fields > *,
.rlt-node-popover .coupling-environment-assignment-fields > * {
    min-width: 0;
}

.coupling-environment-assignment-fields > label {
    gap: 0.1rem;
    font-size: 0.62rem;
}

.coupling-environment-assignment-fields select {
    height: 28px;
    min-height: 28px;
    padding: 0.18rem 0.3rem;
    font-size: 0.68rem;
}

.rlt-node-popover .coupling-environment-assignment-actions {
    grid-column: auto;
}

.coupling-environment-assignment-actions .rlt-environment-coupling-toggle {
    min-height: 28px;
    padding: 0.22rem 0.38rem;
    font-size: 0.66rem;
    white-space: nowrap;
}

.coupling-environment-assignment .coupling-weather-route:not(.is-active) {
    display: none;
}

.coupling-environment-assignment .coupling-weather-route {
    grid-template-columns: minmax(0, 1fr) 15px minmax(0, 1fr) auto;
    gap: 0.22rem;
    margin: 0;
    padding: 0.24rem 0.28rem 0;
}

.coupling-environment-assignment .coupling-weather-route small {
    font-size: 0.52rem;
}

.coupling-environment-assignment .coupling-weather-route strong,
.coupling-environment-assignment .coupling-weather-route em {
    font-size: 0.6rem;
}

@media (max-width: 720px) {
    .rlt-lab-shell .symbol-browser {
        right: -0.2rem;
        left: -0.2rem;
        max-height: 54vh;
    }

    .rlt-environment-boundary-pair-rows,
    .coupling-environment-assignment-fields,
    .rlt-node-popover .coupling-environment-assignment-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .coupling-environment-assignment-actions,
    .rlt-node-popover .coupling-environment-assignment-actions {
        grid-column: auto;
    }
}

/* Umweltbilanz: neutrale Arbeitsflächen, Grün nur als Status- und
   Herkunftssignal. Die verschachtelten Karten bleiben dadurch lesbar,
   ohne die aktive Wetterkopplung optisch zu verlieren. */
.rlt-lab-shell .coupling-card.is-environment,
.rlt-lab-shell .coupling-card.is-environment.is-weather-coupled {
    border-color: #cfdbe2;
    border-left-color: var(--environment-accent);
    background: #ffffff;
    color: var(--ink);
}

.rlt-lab-shell .coupling-card.is-environment.is-weather-coupled:not(.is-hx-visible) {
    box-shadow: inset 3px 0 0 rgba(35, 131, 98, 0.5);
}

.rlt-lab-shell .coupling-card.is-environment.is-weather-coupled.is-hx-visible {
    border-bottom-color: #c49318;
    box-shadow: inset 3px 0 0 rgba(35, 131, 98, 0.5), inset 0 -2px 0 #b77d00;
}

.rlt-lab-shell .coupling-environment-assignment,
.rlt-lab-shell .coupling-environment-assignment.is-coupled,
.rlt-lab-shell .coupling-weather-binding.is-active,
.rlt-lab-shell .rlt-environment-assignment,
.rlt-lab-shell .rlt-environment-assignment.is-coupled,
.rlt-node-popover .coupling-environment-assignment,
.rlt-node-popover .coupling-environment-assignment.is-coupled,
.rlt-node-popover .rlt-environment-assignment,
.rlt-node-popover .rlt-environment-assignment.is-coupled,
.rlt-environment-boundary-pair,
.rlt-environment-boundary-pair.is-complete {
    background: #ffffff;
    color: var(--ink);
}

.rlt-lab-shell .coupling-environment-assignment.is-coupled,
.rlt-lab-shell .coupling-weather-binding.is-active,
.rlt-lab-shell .rlt-environment-assignment.is-coupled,
.rlt-node-popover .coupling-environment-assignment.is-coupled,
.rlt-node-popover .rlt-environment-assignment.is-coupled {
    border-color: var(--environment-border);
    box-shadow: inset 3px 0 0 rgba(35, 131, 98, 0.52);
}

.rlt-environment-boundary-pair.is-complete {
    border-color: #cbded7;
    box-shadow: none;
}

.rlt-lab-shell .rlt-environment-assignment.is-coupled > header,
.rlt-node-popover .rlt-environment-assignment.is-coupled > header {
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--environment-text);
}

.coupling-environment-assignment {
    container-name: environment-assignment;
    container-type: inline-size;
    --environment-control-height: 32px;
}

.coupling-environment-manual,
.coupling-environment-manual.is-active {
    container-name: environment-manual;
    container-type: inline-size;
    margin-top: 0.24rem;
    padding: 0.48rem;
    border-color: #cbded7;
    background: #ffffff;
    box-shadow: none;
}

.coupling-environment-manual-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.38rem;
    row-gap: 0.14rem;
}

.coupling-environment-manual-head strong {
    color: var(--environment-text);
    min-width: 0;
    line-height: 1.25;
}

.coupling-environment-manual-head > small {
    grid-column: 1 / -1;
}

.coupling-environment-manual-head > .coupling-environment-manual-toggle {
    justify-self: end;
}

.coupling-environment-manual-toggle,
.coupling-environment-manual-fields input,
.coupling-environment-manual-action-buttons > button,
.coupling-environment-assignment-fields select,
.coupling-environment-assignment-actions .rlt-environment-coupling-toggle {
    box-sizing: border-box;
    height: var(--environment-control-height, 32px);
    min-height: var(--environment-control-height, 32px);
}

.coupling-environment-manual-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}

.coupling-environment-manual-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.38rem;
}

.coupling-environment-manual-actions > small {
    min-width: 0;
}

.coupling-environment-manual-action-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.32rem;
}

.coupling-environment-manual-action-buttons > button {
    margin: 0;
    white-space: nowrap;
}

@container environment-assignment (max-width: 480px) {
    .coupling-environment-assignment-fields,
    .rlt-node-popover .coupling-environment-assignment-fields {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .coupling-environment-assignment-actions,
    .rlt-node-popover .coupling-environment-assignment-actions {
        grid-column: auto;
        justify-content: flex-start;
    }

    .coupling-environment-assignment .coupling-weather-route {
        grid-template-columns: minmax(0, 1fr) 15px minmax(0, 1fr);
    }

    .coupling-environment-assignment .coupling-weather-route > em {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@container environment-assignment (max-width: 320px) {
    .coupling-environment-assignment-fields,
    .rlt-node-popover .coupling-environment-assignment-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .coupling-environment-assignment-actions .rlt-environment-coupling-toggle {
        width: 100%;
    }
}

@container environment-manual (max-width: 420px) {
    .coupling-environment-manual-actions {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .coupling-environment-manual-action-buttons {
        justify-self: end;
        justify-content: flex-end;
    }
}

@container environment-manual (max-width: 300px) {
    .coupling-environment-manual-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .coupling-environment-manual-action-buttons > button {
        padding-inline: 0.35rem;
    }
}

@container environment-manual (max-width: 260px) {
    .coupling-environment-manual-head { grid-template-columns: minmax(0, 1fr); }
    .coupling-environment-manual-head > small { grid-row: 2; }
}

.rlt-state-balances,
.rlt-room-boundary-editor {
    display: grid;
    gap: 0.48rem;
    min-width: 0;
}

.rlt-state-room-assignment {
    display: grid;
    gap: 0.4rem;
    padding: 0.48rem;
    border: 1px solid #cfdbe2;
    border-radius: 8px;
    background: #fafbfc;
}

.rlt-state-room-assignment.is-assigned { border-left: 3px solid var(--environment-accent); }

.rlt-state-room-assignment > header {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0.38rem;
    align-items: center;
}

.rlt-state-room-assignment > header > svg {
    width: 22px;
    height: 22px;
    color: var(--environment-text);
}

.rlt-state-room-assignment > header > span,
.rlt-state-room-route > span,
.rlt-room-boundary-editor label:not(.inline-checkbox) {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.rlt-state-room-assignment strong,
.rlt-room-boundary-editor label > span { font-size: 0.7rem; line-height: 1.25; }

.rlt-state-room-assignment small,
.rlt-room-boundary-editor small { color: var(--ink-soft); font-size: 0.63rem; line-height: 1.3; }

.rlt-state-room-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    gap: 0.35rem;
    align-items: center;
}

.rlt-state-room-route svg { width: 18px; height: 18px; }
.rlt-state-room-assignment > button { justify-self: end; }

.rlt-room-boundary-heading,
.rlt-room-boundary-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: end;
}

.rlt-room-boundary-heading { grid-template-columns: minmax(0, 1fr) auto; }

.rlt-room-boundary-editor :is(input:not([type="checkbox"]), select),
.rlt-state-room-assignment > button {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding-block: 0.25rem;
    font-size: 0.7rem;
}

.rlt-state-room-assignment > button { width: auto; }
.rlt-room-boundary-flow { display: grid; padding-top: 0.25rem; border-top: 1px solid #e1e7ea; }
.rlt-room-boundary-flow > summary { margin-bottom: 0.4rem; color: var(--ink-soft); font-size: 0.68rem; cursor: pointer; }
.rlt-inactive-hx-choice { grid-column: 1 / -1; }

.inline-summary-chip[data-energy-kind="sensible"] { --balance-value-color: #a72c35; }
.inline-summary-chip[data-energy-kind="latent"] { --balance-value-color: #c45d6a; }
.inline-summary-chip[data-energy-kind="total"] { --balance-value-color: #b93632; }
.inline-summary-chip[data-energy-kind="water"] { --balance-value-color: #147b8f; }
.inline-summary-chip[data-energy-kind] > strong,
.inline-summary-chip[data-energy-kind] > span { color: var(--balance-value-color); }

.workspace-tool-button.hx-messages-button {
    position: relative;
    flex: 0 0 auto;
    min-width: 32px;
    gap: 0.15rem;
    padding-inline: 0.32rem;
}

.hx-messages-button[hidden],
.hx-diagram-message-list[hidden] { display: none; }
.hx-messages-button [data-hx-message-count] { font-size: 0.61rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.workspace-tool-button.hx-messages-button[data-state="warning"] { border-color: #d6b86d; background: #fff9e8; color: #8b630f; }
.workspace-tool-button.hx-messages-button[data-state="error"] { border-color: #d5a29b; background: #fff1ee; color: #9f3429; }
.hx-messages-button[aria-expanded="true"] { box-shadow: inset 0 -2px 0 currentColor; }

.hx-diagram-message-list {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.35rem;
    max-height: min(16rem, 40vh);
    margin: 0;
    padding: 0 0 0 1rem;
    overflow: auto;
    font: inherit;
    pointer-events: auto;
}
.hx-diagram-message-list > li { margin: 0; overflow-wrap: anywhere; }

/* Shared compact controls and unobtrusive balance presentation. */
.weather-lab-design-actions > .button,
.weather-lab-design-actions > .weather-lab-design-hx-toggle {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-height: 32px;
    padding: 0 0.55rem;
    font-size: 0.72rem;
    line-height: 1.15;
    margin: 0;
}
.weather-lab-design-actions > .weather-lab-design-hx-toggle input { margin: 0; }
.weather-lab-design-label-options { border: 1px solid #d8dfe5; border-radius: 8px; background: #fff; margin: 0.35rem 0; }
.weather-lab-design-label-options > summary { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.5rem; font-size: 0.72rem; cursor: pointer; }
.weather-lab-design-label-options > summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.weather-lab-design-label-options > div { padding: 0 0.5rem 0.5rem; }
.weather-lab-design-label-options .inline-checkbox { font-size: 0.72rem; }
.weather-lab-design-label-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.4rem; }
.weather-lab-design-label-grid > label { min-width: 0; display: grid; gap: 0.25rem; font-size: 0.7rem; }
.weather-lab-label-slider { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: 0.25rem; align-items: center; }
.weather-lab-label-slider input { min-width: 0; width: 100%; height: 32px; box-sizing: border-box; }
.weather-lab-design-label-options[hidden],
.weather-lab-design-label-grid[hidden],
.weather-lab-dataset-delete[hidden],
.rlt-style-confirm-body { padding: 0.8rem 0.9rem; }
.rlt-style-confirm-body p { margin: 0; color: var(--ink); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.rlt-style-confirm-swatches { display: flex; gap: 0.35rem; margin-bottom: 0.6rem; }
.rlt-style-confirm-swatches:empty { display: none; }
.rlt-style-confirm-swatches span { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; }
.weather-lab-dataset-delete-dialog[hidden] { display: none; }
.weather-lab-dataset-delete-dialog { width: min(440px, calc(100vw - 2rem)); background: var(--card); border-color: var(--line); font-size: 0.82rem; text-align: left; }
.weather-lab-dataset-delete-dialog > header,
.weather-lab-dataset-delete-dialog > footer { padding: 0.75rem 0.9rem; }
.weather-lab-dataset-delete-dialog > header { border-bottom: 1px solid var(--line); }
.weather-lab-dataset-delete-dialog > header > div { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.weather-lab-dataset-delete-dialog > header strong { font-size: 0.92rem; }
.weather-lab-dataset-delete-dialog > footer { margin: 0; border-color: var(--line); gap: 0.5rem; }
.weather-lab-dataset-delete-dialog > footer .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 34px; padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.weather-lab-dataset-delete-dialog svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.weather-lab-dataset-delete-body { display: grid; gap: 0.65rem; padding: 0.9rem; }
.weather-lab-dataset-delete-body p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.weather-lab-dataset-delete-name { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--muted-panel, #f5f8fa); }
.weather-lab-dataset-delete-name > i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--dataset-color); border: 1px solid var(--line-strong); }
.weather-lab-dataset-delete-name > strong { min-width: 0; font-size: 0.85rem; }
.weather-lab-dataset-delete-note { color: var(--ink-soft); font-size: 0.75rem; }
.weather-lab-dataset-delete-dialog [data-weather-delete-error] { padding: 0.5rem 0.6rem; border: 1px solid #d9aaa5; border-radius: 7px; background: #fff8f6; color: #a02e24; font-size: 0.76rem; }
.flow-coupling-node .flow-coupling-copy { background: #fff; }
.flow-coupling-node.is-environment .flow-coupling-label { color: #28465c; }
.coupling-sign-note { flex: 1 1 100%; margin: 0.3rem 0 0; color: #566573; font-size: 0.71rem; line-height: 1.4; }
.coupling-card.is-collapsed .coupling-card-head { height: 2.65rem; box-sizing: border-box; }
.weather-lab-difference-pairs { display: grid; grid-template-columns: repeat(auto-fit,minmax(13rem,1fr)); gap: .3rem .7rem; padding: .4rem 0; }
.weather-lab-difference-pairs .weather-lab-inline-check { min-width: 0; align-items: center; }
.weather-lab-difference-pair { min-width: 0; padding: .3rem .4rem; border: 1px solid var(--border,#dae1e7); border-radius: 6px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .4rem; }
.weather-lab-difference-pair > label span { overflow-wrap: anywhere; }
.weather-lab-difference-pair-style { display: flex; gap: .3rem; align-items: center; }
.weather-lab-difference-pair-style .weather-lab-color-control { min-width: 0; flex: 1; display: flex; align-items: center; gap: .3rem; }
.weather-lab-difference-pair-style .weather-lab-color-input-row { flex: 0 0 auto; }
.weather-lab-difference-pair-style input[type="color"] { width: 2rem; min-width: 2rem; height: 1.75rem; padding: .12rem; }
.weather-lab-difference-pair-style .weather-lab-color-suggestions { flex-wrap: nowrap; }
.weather-lab-difference-pair-style .hx-color-control-action-label { display: none; }
.weather-lab-option-field, .weather-lab-option-number { display: grid; gap: .25rem; min-width: 0; font-size: .72rem; }
.weather-lab-option-inline { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.weather-lab-option-inline > input, .weather-lab-option-inline > select { min-width: 0; flex: 1; height: 1.85rem; box-sizing: border-box; }
.weather-lab-option-inline > input[type="range"] { min-width: 3rem; padding: 0; }
.weather-lab-option-number .weather-lab-option-inline > input[type="number"] { width: 4.2rem; flex: 0 0 4.2rem; padding: .18rem .25rem; }
.weather-lab-option-inline > .weather-lab-category-reset { flex: 0 0 1.65rem; }
.weather-lab-3d-axis-row .weather-lab-range-category { margin-top: .35rem; }
.weather-lab-difference-options > .weather-lab-appearance-category { margin-top: .4rem; }
.weather-lab-difference-scale-controls { min-width: 0; display: grid; gap: .3rem; }
.weather-lab-difference-scale-controls > .weather-lab-appearance-grid { align-items: end; }
.weather-lab-difference-scale-controls .weather-lab-option-inline > .weather-lab-palette-field { min-width: 0; flex: 1; }
.weather-lab-difference-scale-controls .weather-lab-option-inline:has(> .weather-lab-palette-field) { align-items: end; }
.weather-lab-difference-options .weather-lab-colorbar-preview { margin: .35rem 0; }
.weather-lab-pair-color { width: 1.3rem; height: .25rem; border-radius: 2px; flex: 0 0 auto; }
.weather-lab-difference-line-control { display: flex; gap: .3rem; align-items: center; }
.weather-lab-difference-line-control input { min-width: 0; flex: 1; }
.weather-lab-difference-counts { font-size: .7rem; color: var(--text-muted,#556675); }
.weather-lab-difference-counts summary { cursor: pointer; }
.weather-lab-difference-counts small { display: block; margin: .2rem 0; }
.weather-lab-difference-results { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit,minmax(min(100%,27rem),1fr)); min-width: 0; }
.weather-lab-difference-results > * { min-width: 0; margin: 0; }
.weather-lab-difference-results .weather-lab-surface-comparison { grid-template-columns: 1fr; }
.weather-lab-3d-axis-row { border-top: 1px solid var(--border,#dae1e7); padding-top: .5rem; margin-top: .3rem; }
.weather-lab-3d-axis-row > strong { font-size: .75rem; }
.weather-lab-3d-axis-row .weather-lab-appearance-grid { margin-top: .3rem; grid-template-columns: repeat(auto-fit,minmax(8rem,1fr)); align-items: end; }
/* Weather options: the field width, not the viewport, determines wrapping. */
.weather-lab-appearance-body { container-type: inline-size; }
.weather-lab-appearance-body .weather-lab-appearance-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    align-items: end;
}
.weather-lab-appearance-body .weather-lab-appearance-category { min-width: 0; box-sizing: border-box; }
.weather-lab-appearance-body :is(.weather-lab-option-number, .weather-lab-option-field) > span { min-height: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
.weather-lab-appearance-body .weather-lab-tick-grid { min-width: 0; }
.weather-lab-appearance-body .weather-lab-inline-check { display: flex; align-items: center; gap: .3rem; }
.weather-lab-appearance-body .weather-lab-inline-check > input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.weather-lab-detail-setting-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.weather-lab-detail-source-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .45rem; align-items: end; }
.weather-lab-detail-source-row > label { display: grid; min-width: 0; gap: .2rem; }
.weather-lab-detail-source-row select { width: 100%; min-width: 0; }
.weather-lab-detail-controls { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.weather-lab-detail-option-tabs { grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr)); }
.weather-lab-detail-option-tabs > button:last-child:nth-child(odd) { grid-column: auto; }
.weather-lab-detail-range { padding: .35rem .45rem; border: 1px solid #ded4ec; border-radius: 6px; background: #fff; }
.weather-lab-detail-range input[type="range"] { height: 1.5rem; margin: 0; padding: 0; }
.weather-lab-detail-extra-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.weather-lab-detail-extra-row .weather-lab-detail-actions { margin: 0; }
.weather-lab-detail-extra-row:empty { display: none; }
.weather-lab-detail-snap span { white-space: normal; }
.weather-lab-detail-footer-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.weather-lab-detail-footer-actions .button { min-height: 30px; height: auto; padding: .3rem .5rem; }
.weather-lab-detail-footer-actions [data-weather-detail-create] { margin-left: auto; }
.weather-lab-detail-status { max-width: 48%; white-space: normal; text-overflow: clip; border-radius: 6px; }
.weather-lab-difference-options > .weather-lab-appearance-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.weather-lab-difference-pairs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); }
.weather-lab-difference-pair-style { justify-self: end; }
.weather-lab-difference-pair:has(.weather-lab-difference-pair-style) { grid-template-columns: minmax(0,1fr) auto auto; }
.weather-lab-difference-pair:has(> label:only-child) { grid-template-columns: 1fr; }
.weather-lab-option-help { border-top: 1px solid var(--line, #dce5e9); padding-top: .4rem; color: var(--text-muted, #556675); font-size: .68rem; }
.weather-lab-option-help summary { cursor: pointer; font-weight: 650; }
.weather-lab-option-help small { display: block; margin-top: .35rem; line-height: 1.45; }
.weather-lab-annual-option-tabs button[aria-selected="true"],
.weather-lab-detail-option-tabs button[aria-selected="true"] { background: #387cb0; border-color: #387cb0; color: #fff; box-shadow: none; }
.weather-lab-panel.has-hx-line-options .weather-lab-annual-option-tabs button[data-weather-annual-options-tab="lines"][aria-selected="true"] { background: linear-gradient(110deg, #387cb0 0 76%, #b99238 76%); color: #fff; }
.weather-lab-annual-option-tabs button[data-weather-annual-options-tab="detail"][aria-selected="true"] { background: linear-gradient(110deg, #387cb0 0 76%, #8761b7 76%); color: #fff; }
@container (max-width: 360px) {
    .weather-lab-detail-source-row { grid-template-columns: 1fr; }
    .weather-lab-detail-options > header { align-items: start; flex-wrap: wrap; }
    .weather-lab-detail-status { max-width: 100%; }
    .weather-lab-detail-footer-actions .button { flex: 1 1 10rem; }
    .weather-lab-detail-footer-actions [data-weather-detail-create] { margin-left: 0; }
}
/* Selection is blue; independent coupling status keeps its green/gold segment. */
.weather-lab-shell .weather-lab-mode-tabs button { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; box-shadow: none; outline: none; }
.weather-lab-shell .weather-lab-mode-tabs button.is-active[aria-selected="true"] { background: #e2eefb; color: #153e65; border-color: #397bb7; box-shadow: none; }
.weather-lab-shell .weather-lab-mode-tabs button.is-active[aria-selected="true"].has-hx { background: linear-gradient(115deg, #e2eefb 0 62%, #f7edcf 62%); }
.weather-lab-shell .weather-lab-mode-tabs button.is-active[aria-selected="true"].has-environment { background: linear-gradient(115deg, #e2eefb 0 62%, #dceee3 62%); }
.weather-lab-shell .weather-lab-mode-tabs button.is-active[aria-selected="true"].has-hx.has-environment { background: linear-gradient(115deg, #e2eefb 0 50%, #dceee3 50% 76%, #f7edcf 76%); }
.weather-lab-shell[class] .weather-lab-mode-tabs button.is-active[aria-selected="true"][data-weather-analysis-mode] .weather-lab-mode-icon { color: #fff; background: #387cb0; border-radius: 6px; padding: .22rem; box-sizing: content-box; }
.weather-lab-mode-tabs .weather-lab-mode-copy { flex: 1; min-width: 0; }
.weather-lab-mode-tabs .weather-lab-mode-status { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: end; gap: 0; overflow: hidden; border-radius: 5px; }
.weather-lab-mode-status > span { padding: .22rem .35rem; font-size: .6rem; font-weight: 750; line-height: 1.2; }
.weather-lab-mode-status > .is-current { background: #387cb0; color: #fff; }
.weather-lab-mode-status > .is-environment { background: #cce5d7; color: #225e3b; }
.weather-lab-mode-status > .is-hx { background: #eddba4; color: #66501c; }
.weather-lab-shell .weather-lab-mode-tabs button:focus-visible { outline: 2px solid #2469ac; outline-offset: 2px; }
.weather-lab-mode-tabs { container-type: inline-size; }
/* Inactive modes retain the same status segments, softened with a milky tint. */
.weather-lab-shell[class] .weather-lab-mode-tabs button[aria-selected="false"][data-weather-analysis-mode] { background: #f2f6fa; color: #587083; border-color: #d4e0e8; box-shadow: none; }
.weather-lab-shell[class] .weather-lab-mode-tabs button[aria-selected="false"][data-weather-analysis-mode].has-hx { background: linear-gradient(115deg, #f2f6fa 0 62%, #faf6e9 62%); }
.weather-lab-shell[class] .weather-lab-mode-tabs button[aria-selected="false"][data-weather-analysis-mode].has-environment { background: linear-gradient(115deg, #f2f6fa 0 62%, #eef6f1 62%); }
.weather-lab-shell[class] .weather-lab-mode-tabs button[aria-selected="false"][data-weather-analysis-mode].has-hx.has-environment { background: linear-gradient(115deg, #f2f6fa 0 50%, #eef6f1 50% 76%, #faf6e9 76%); }
.weather-lab-shell[class] .weather-lab-mode-tabs button[aria-selected="false"][data-weather-analysis-mode] .weather-lab-mode-icon { color: #718d9f; background: #e7eff5; border-radius: 6px; padding: .22rem; box-sizing: content-box; }
.weather-lab-mode-tabs button[aria-selected="false"] .weather-lab-mode-status > span { background: rgba(255,255,255,.55); color: #687d87; }
.header-undo-button { gap: .35rem; white-space: nowrap; }
.weather-lab-design-hx-color > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.header-undo-count { display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem; border-radius: 4px; background: #e6eef5; color: #385e7a; font-size: .68rem; font-variant-numeric: tabular-nums; }
@container (max-width: 650px) {
    .weather-lab-mode-tabs button > .weather-lab-mode-icon { grid-row: 1 / span 2; }
    .weather-lab-mode-tabs button > .weather-lab-mode-copy { grid-column: 2 / -1; }
    .weather-lab-mode-tabs button > .weather-lab-mode-status { grid-column: 2 / -1; justify-self: start; margin-top: -.2rem; }
}
@media (max-width: 1000px) {
    .weather-lab-design-label-grid { grid-template-columns: 1fr; }
}

/* Comparison plots share one column model in 2D, 3D, main and detail views. */
.weather-lab .weather-lab-comparison-grid {
    display: grid;
    gap: .65rem;
    min-width: 0;
    align-items: start;
    overflow-x: auto;
}
.weather-lab-comparison-grid > * { min-width: 0; }
.weather-lab-difference-results > .weather-lab-surface-comparison {
    grid-template-columns: minmax(0, 1fr) !important;
}
/* An explicit viewport height is essential: max-height alone cannot grow an
   SVG whose natural aspect ratio already fixes its height from the width. */
.weather-lab-surface-viewport {
    height: var(--weather-detail-plot-height, var(--weather-chart-height, 450px));
}
.weather-lab-surface-viewport > .weather-lab-surface-svg { height: 100%; max-height: none; }
.weather-lab-difference .weather-lab-surface-viewport { height: var(--weather-difference-height, 360px); }
.weather-lab-chart > .weather-lab-statistics-compact { min-height: 0; }
.weather-lab-stat-table.is-comparison-matrix { width: 100%; min-width: max-content; }
.weather-lab-stat-table.is-comparison-matrix :is(th, td) { padding: .24rem .45rem; }
.weather-lab-stat-table.is-comparison-matrix thead th[scope="colgroup"] { text-align: center; }
.weather-lab-stat-table.is-comparison-matrix thead { position: sticky; top: 0; z-index: 3; }
.weather-lab-stat-table.is-comparison-matrix thead th { position: static; }
.weather-lab-stat-table.is-comparison-matrix thead th[scope="col"] {
    border-top: 3px solid var(--dataset-color);
    text-align: right;
    max-width: 13rem;
    overflow-wrap: anywhere;
    white-space: normal;
}
.weather-lab-stat-table.is-comparison-matrix tbody td {
    background: color-mix(in srgb, var(--dataset-color) 5%, white);
    font-variant-numeric: tabular-nums;
}
.weather-lab-stat-table.is-comparison-matrix tbody tr:nth-child(2n) td {
    background: color-mix(in srgb, var(--dataset-color) 10%, white);
}
.weather-lab-stat-table.is-comparison-matrix tbody th[scope="row"] { text-align: left; }

/* The HX split pane can be narrow even on a wide monitor. Adapt to the
   available editor width, not just the browser's media-query width. */
.weather-lab-environment-design { container-type: inline-size; container-name: weather-design; }
.weather-lab-environment-state-editor { container-type: inline-size; container-name: weather-design-editor; }
.weather-lab-design-label-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
@container weather-design (max-width: 720px) {
    .weather-lab-environment-design-layout { grid-template-columns: minmax(0, 1fr); }
    .weather-lab-environment-state-list > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .25rem; }
}
@container weather-design-editor (max-width: 580px) {
    .weather-lab-composite-grid { grid-template-columns: minmax(0, 1fr); }
    .weather-lab-design-editor-head { grid-template-columns: minmax(0, 1fr); }
}

.compact-guide-editor .hx-guide-editor-empty { min-height: 2rem; padding: .4rem; }
.compact-guide-editor .hx-guide-editor-empty[hidden] { display: none; }
.compact-guide-editor .hx-guide-editor-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.compact-guide-editor .hx-guide-editor-fields:disabled { display: none; }
.compact-guide-editor .hx-guide-editor-fields > legend,
.compact-guide-editor .hx-guide-card.is-label { grid-column: 1 / -1; }