/* Channel Lab adds the studio's display face; suite chrome and controls keep the shared text face. */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/Fraunces-Variable.woff2?v=7234ed860a9cc830") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); font-weight: 100 550; size-adjust: 100.17%; ascent-override: 97.63%; descent-override: 25.46%; line-gap-override: 0%; }
.channel-lab { --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif; --display-weight: 400; --channel-red: #bd635b; --channel-green: #478668; --channel-blue: #5c81b0; display: flex; flex-direction: column; min-height: 100svh; }
.channel-lab > main { flex: 1 0 auto; min-width: 0; }
.channel-lab h1 { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 32px; font-weight: var(--display-weight); letter-spacing: var(--track-heading); line-height: 1.15; }
.channel-glyph { --glyph-light: var(--bronze); display: inline-flex; margin-right: 12px; }
.channel-glyph svg { overflow: visible; }
.channel-glyph :is(path, use) { stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.glyph-red { fill: color-mix(in srgb, var(--channel-red) 10%, var(--surface)); stroke: var(--channel-red); }.glyph-green { fill: color-mix(in srgb, var(--channel-green) 10%, var(--surface)); stroke: var(--channel-green); }.glyph-blue { fill: color-mix(in srgb, var(--channel-blue) 10%, var(--surface)); stroke: var(--channel-blue); }
.glyph-axis { fill: none; stroke: var(--muted); opacity: .4; }
.glyph-light-mask { fill: #fff; fill-opacity: .16; stroke: #fff; }
.channel-glyph stop { stop-color: var(--glyph-light); }
/* One light crosses fixed outlines on the suite's 125 ms SVG grid, then rests between passes. */
.glyph-light { opacity: .65; transform: translateX(-24px) skewX(-22deg); animation: channel-light-pass 12s steps(48, end) infinite; animation-play-state: paused; }
.channel-glyph[data-illuminated] .glyph-light { animation-play-state: running; }
@keyframes channel-light-pass { 0% { transform: translateX(-24px) skewX(-22deg); } 50%, 100% { transform: translateX(56px) skewX(-22deg); } }
html[data-theme="dark"] .channel-lab { --channel-red: #e5948a; --channel-green: #8ec8aa; --channel-blue: #a4c1ed; }
html[data-theme="dark"] .channel-glyph { --glyph-light: var(--ink); }
.channel-lab .btn, .channel-lab button { flex-shrink: 0; }
.channel-lab .btn { font-weight: var(--heading-weight); }
.workflow-step { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink); line-height: 1.3; }
.step-number { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 11px; font-weight: var(--heading-weight); font-variant-numeric: tabular-nums; line-height: 1; }
.primary .step-number { border-color: color-mix(in srgb, currentColor 40%, transparent); color: inherit; }
.step-icon { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.step-label { font-family: var(--font-display); font-size: 18px; font-weight: var(--display-weight); letter-spacing: var(--track-heading); }
.compare-step { margin: 3px 0 16px; }

/* Import settles into a short strip as soon as there is an image. */
.import-panel { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(760px, 100%); margin: clamp(40px, 10vh, 110px) auto 0; padding: 48px 28px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); text-align: center; transition: border-color var(--motion-quick) var(--ease-standard), background-color var(--motion-quick) var(--ease-standard); }
.import-panel.is-dragover, .import-panel.dragover, .import-panel.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.import-panel[aria-busy="true"] { border-color: var(--bronze); }
.import-icon { display: grid; place-items: center; width: 58px; height: 58px; color: var(--accent); }
.import-icon svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.import-icon .import-channel { stroke: var(--channel-green); }
.import-copy h2 { font-family: var(--font-display); font-size: 36px; font-weight: var(--display-weight); letter-spacing: var(--track-heading); line-height: 1.18; }
.import-copy p { margin-top: 8px; color: var(--muted); font-size: 13px; text-wrap: balance; }
.import-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.example-actions { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.example-picker { display: block; min-width: 0; }
.example-picker select { width: 168px; min-height: 44px; padding-block: 9px; padding-left: 10px; color: var(--muted); font-size: 12px; background-color: var(--surface-raised); }
.example-actions .btn { padding-inline: 10px; font-size: 12px; }
.import-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; width: min(760px, 100%); margin: 14px auto 0; color: var(--faint); font-size: 12px; }
#import-status { overflow-wrap: anywhere; }
#import-status:empty, #compare-status:empty { display: none; }
.is-error { color: var(--danger) !important; }
.work-progress { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.work-progress:has(progress[hidden]):has(button[hidden]) { display: none; }
progress { flex: 1; height: 5px; border: 0; border-radius: 5px; overflow: hidden; background: var(--line-soft); color: var(--accent); accent-color: var(--accent); }
progress::-webkit-progress-bar { background: var(--line-soft); }progress::-webkit-progress-value { background: var(--accent); }progress::-moz-progress-bar { background: var(--accent); }
:is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-panel { flex-direction: row; gap: 14px; width: 100%; margin-top: 22px; padding: 12px 18px; text-align: left; }
:is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-icon { width: 32px; height: 38px; }
:is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-icon svg { width: 30px; height: 30px; }
:is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-copy { flex: 1; min-width: 0; }
:is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-copy h2 { font-size: 22px; letter-spacing: var(--track-heading); }
:is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-copy p { margin-top: 2px; font-size: 12px; }
:is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-footer { justify-content: flex-start; width: 100%; margin-top: 8px; }

.lab-workspace { margin-top: 18px; }
.workspace-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.view-tabs { display: inline-flex; gap: 4px; border-bottom: 1px solid var(--line); }
.view-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: var(--heading-weight); }
.view-tabs button[aria-pressed="true"] { color: var(--ink); }
.view-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; background: var(--bronze); }
.view-tabs svg, .library-summary svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.count { display: grid; place-items: center; min-width: 23px; height: 21px; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-raised); font-size: 11px; font-variant-numeric: tabular-nums; }
.export-menu .menu-list { min-width: 200px; }
.menu-list .btn { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; justify-content: stretch; column-gap: 10px; text-align: left; }
.menu-list .btn span { color: var(--faint); font-size: 11px; }
.file-label { cursor: pointer; }
.file-label:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* A single measurement recipe stays shared between image inspection and group analysis. */
.analysis-settings { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); }
.settings-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 11px 18px; cursor: pointer; list-style: none; }
.settings-summary::-webkit-details-marker { display: none; }
.settings-summary::after { content: "+"; color: var(--faint); font-size: 18px; font-weight: 400; }
.analysis-settings[open] > .settings-summary { border-bottom: 1px solid var(--line-soft); }
.analysis-settings[open] > .settings-summary::after { content: "−"; }
.settings-main { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(140px, .8fr) minmax(220px, 2fr); gap: 16px 24px; align-items: center; padding: 15px 18px; }
.field-label { display: flex; align-items: center; gap: 7px; min-height: 20px; }
.field-label svg, .segment-control svg, .roi-tools svg, .region-entry svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.channel-indicator { color: var(--channel-green); }
.channel-indicator[data-channel="red"] { color: var(--channel-red); }.channel-indicator[data-channel="blue"] { color: var(--channel-blue); }.channel-indicator:is([data-channel="gray"], [data-channel="generic"]) { color: var(--muted); }
#channel-swatch[data-channel="red"] .channel-indicator { color: var(--channel-red); }#channel-swatch[data-channel="blue"] .channel-indicator { color: var(--channel-blue); }#channel-swatch:is([data-channel="gray"], [data-channel="generic"]) .channel-indicator { color: var(--muted); }
.channel-indicator > :last-child { fill: currentColor; stroke: none; }
.threshold-field { display: grid; min-width: 0; }
.range-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 500; }
.range-heading output { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.range-unit { margin-top: -4px; color: var(--faint); font-size: 11px; }
.signal-threshold-field:has(.range:disabled) .range { opacity: .35; cursor: default; }
.signal-threshold-field:has(.range:disabled) .range-unit { visibility: hidden; }
.signal-threshold-field:has(.range:disabled) .range-heading label { color: var(--faint); }
.advanced-settings { border-top: 1px solid var(--line-soft); }
.advanced-settings > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 18px; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 500; list-style: none; }
.advanced-settings > summary::-webkit-details-marker { display: none; }
.advanced-settings > summary::after { content: "+"; font-size: 17px; font-weight: 400; }
.advanced-settings[open] > summary::after { content: "−"; }
.advanced-grid { display: grid; grid-template-columns: minmax(210px, 1.5fr) repeat(3, minmax(120px, 1fr)); gap: 16px 24px; align-items: center; padding: 0 18px 18px; }

.images-layout, .compare-layout { display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start; gap: 20px; }
.library-slot, .compare-main { min-width: 0; }
.compare-main { container: comparison / inline-size; }
.image-library { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); overflow: hidden; }
.image-library > summary, .detail-panel > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; padding: 10px 16px; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: 18px; font-weight: var(--display-weight); }
.image-library > summary::-webkit-details-marker, .detail-panel > summary::-webkit-details-marker { display: none; }
.library-summary { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); font-family: var(--font-text); font-size: 11px; font-weight: 400; }
.library-summary svg { width: 16px; height: 16px; }
.image-library[open] .library-summary svg { rotate: 180deg; }
.library-body { border-top: 1px solid var(--line-soft); padding: 0 12px 12px; }
.library-actions { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.select-all { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); cursor: pointer; font-size: 12px; }
.select-all input, .image-select { flex: 0 0 17px; width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.image-check { display: grid; place-items: center; width: 44px; min-height: 44px; align-self: center; cursor: pointer; }
.library-actions .btn { padding-inline: 8px; font-size: 12px; }
.bulk-group { margin-bottom: 14px; font-size: 12px; }
.image-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.image-list > li { min-width: 0; }
.selection-count { color: var(--muted); font-size: 12px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.selection-count:empty { display: none; }
.library-pagination, .table-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.library-pagination .btn, .table-pagination .btn { min-width: 44px; padding-inline: 7px; font-size: 11px; }
.table-pagination { padding: 8px 14px; border-top: 1px solid var(--line-soft); }
.image-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px; padding: 7px; border: 1px solid transparent; border-radius: 8px; background: var(--surface-raised); }
.image-item.is-selected, .image-item.is-active, .image-item[aria-current="true"], .image-item:has(.image-open[aria-current="true"]) { border-color: var(--accent); background: var(--accent-soft); }
.image-select { align-self: center; justify-self: center; }
.image-open { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; }
.image-open > img, .image-open > canvas, .image-thumb { width: 42px; height: 42px; border-radius: 5px; object-fit: contain; background: #0a1118; }
.image-copy { min-width: 0; }.image-name { display: block; min-width: 0; overflow: hidden; font-size: 12px; font-weight: var(--heading-weight); white-space: nowrap; text-overflow: ellipsis; line-height: 1.4; }
.image-meta { display: block; margin-top: 2px; color: var(--faint); font-size: 11px; line-height: 1.4; }
.image-kind, .region-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--bronze); font-size: 11px; line-height: 1.4; }
.image-kind svg, .region-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.image-group { grid-column: 2; min-height: 44px; margin-top: 4px; padding: 8px 9px; font-size: 12px; }
.image-inspector { display: grid; gap: 14px; min-width: 0; }
.image-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); overflow: hidden; }
.image-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; padding: 14px 18px 8px; }
.image-heading > div { flex: 1; min-width: 0; }
#selected-name { font-size: 16px; font-weight: var(--heading-weight); letter-spacing: var(--track-heading); overflow-wrap: anywhere; }
#selected-meta { margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.plane-field { min-width: 0; max-width: 220px; }
.plane-field:has(select[hidden]) { display: none; }
.plane-field select { font-size: 12px; }
.image-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; padding: 0 12px 10px 18px; }
.segment-control { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface-raised); }
.segment-control button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; font-weight: var(--heading-weight); }
.segment-control button[aria-pressed="true"] { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px #00000008; }
.roi-actions { display: flex; align-items: center; gap: 2px; }
.roi-actions .btn { padding-inline: 10px; font-size: 12px; }
#roi-toggle[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.roi-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 18px; border-top: 1px solid var(--line-soft); background: var(--surface-raised); }
.roi-shapes { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); }
.roi-shape-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); }
.roi-shape-button[aria-pressed="true"] { border-color: var(--line); background: var(--accent-soft); color: var(--ink); }
.roi-draft-actions { display: flex; align-items: center; gap: 4px; }.roi-draft-actions:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
.roi-draft-actions .btn { padding-inline: 10px; font-size: 12px; }
.image-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 260px; padding: 12px; background: #0b1016; overflow: hidden; }
#image-canvas { display: block; max-width: 100%; width: auto; height: auto; max-height: min(56svh, 620px); object-fit: contain; touch-action: pan-y pinch-zoom; }
#image-stage.is-selecting, #image-stage.roi-active { cursor: crosshair; }
#image-stage.is-selecting #image-canvas, #image-stage.roi-active #image-canvas { touch-action: none; }
#image-canvas.roi-active { touch-action: none; cursor: crosshair; }
.image-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 16px 18px; }
.image-readings > :is(.reading, .metric-card, div) { min-width: 0; margin: 0; padding: 0 18px; border: 0; border-right: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
.image-readings > :first-child { padding-left: 0; }.image-readings > :last-child { padding-right: 0; border-right: 0; }
.reading-label, .image-readings .k, .image-readings dt { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.reading-value, .image-readings .v, .image-readings dd { display: block; margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(24px, 2.5vw, 36px); font-weight: var(--display-weight); line-height: 1.18; letter-spacing: var(--track-heading); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.reading-unit { margin-left: 3px; color: var(--muted); font-family: var(--font-text); font-size: 13px; font-weight: 400; letter-spacing: normal; }
.measurement-note { color: var(--faint); font-size: 12px; overflow-wrap: anywhere; }
.image-panel > .measurement-note { padding: 0 18px 14px; }.measurement-note:empty { display: none; }
.detail-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); overflow: hidden; }
.detail-panel > summary { min-height: 48px; font-size: 17px; }
.detail-panel > summary::after { content: "+"; margin-left: auto; color: var(--faint); font-size: 18px; font-weight: 400; }
.detail-panel[open] > summary::after { content: "−"; }
.detail-panel > summary > span { margin-left: auto; color: var(--faint); font-family: var(--font-text); font-size: 11px; font-weight: 400; }
.detail-panel > summary:has(> span)::after { margin-left: 0; }
.detail-panel[open] > summary { border-bottom: 1px solid var(--line-soft); }
.analysis-details .measurement-note { padding: 14px 16px; }
.roi-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 16px 16px; }
.roi-name-field { margin: 14px 16px 0; }
.polygon-fields { padding: 14px 16px 16px; }
.polygon-fields textarea { display: block; width: 100%; min-height: 112px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); color: var(--ink); font: 400 14px/1.6 var(--font-text); font-variant-numeric: tabular-nums; resize: vertical; }
.region-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 0 16px 14px; }.region-detail-actions .btn { padding-inline: 10px; font-size: 12px; }
#region-status { flex: 1 1 180px; }
.advanced-readings-body { display: grid; gap: 20px; padding: 16px; }.advanced-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 22px; }
.advanced-values .reading { min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }.advanced-values .reading-value { font-family: var(--font-text); font-size: 17px; font-weight: var(--heading-weight); letter-spacing: normal; }.advanced-values .reading-unit { font-size: 11px; }
.color-palette { display: flex; flex-wrap: wrap; gap: 8px; }.color-palette:empty { display: none; }
.palette-color { display: inline-grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 32px; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }.palette-swatch { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 3px; }.palette-area { color: var(--faint); white-space: nowrap; }
.channel-details { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px; }
.histogram { min-width: 0; align-self: center; }.histogram svg { display: block; width: 100%; height: auto; }
.table-scroll { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-align: right; white-space: nowrap; }
.data-table th { background: var(--surface-raised); color: var(--muted); font-weight: 600; }
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table tr:last-child td { border-bottom: 0; }

/* Groups stay as named rows at any count. Figures remain white paper in either theme. */
.compare-setup { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.8fr); gap: 20px; align-items: start; }
.group-editor, .comparison-controls { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 10px 5px 16px; border-bottom: 1px solid var(--line-soft); }
.panel-heading h2 { font-family: var(--font-display); font-size: 21px; font-weight: var(--display-weight); letter-spacing: var(--track-heading); }.panel-heading .btn { font-size: 12px; }.plus { font-size: 18px; font-weight: 400; }
.groups-list { display: grid; gap: 8px; padding: 12px; }
.group-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; align-items: center; gap: 8px; padding: 4px 5px 4px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-raised); }
.group-row.is-dragover, .group-row.dragover, .group-row.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.group-swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--group-color, var(--accent)); }
.group-name { width: 100%; min-height: 44px; padding: 8px 5px !important; border-color: transparent !important; background: transparent !important; font-size: 13px !important; font-weight: 500; }
.group-name:focus { border-color: var(--line) !important; background: var(--input) !important; }
.group-count { min-width: 22px; color: var(--muted); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.group-remove { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--faint); font-size: 19px; font-weight: 400; }
.comparison-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; padding: 18px; }
.comparison-controls > .field:first-child { grid-column: 1 / -1; }
.observation-control, .multi-metric-controls, .exploration-controls { grid-column: 1 / -1; min-width: 0; }
.multi-metric-controls { margin: 0; padding: 0; border: 0; }.multi-metric-controls legend { display: flex; align-items: baseline; gap: 10px; width: 100%; margin-bottom: 8px; padding: 0; color: var(--muted); font-size: 13px; font-weight: var(--heading-weight); }.multi-metric-controls legend span { color: var(--faint); font-size: 11px; font-weight: 400; }
.metric-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.metric-choice { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 7px 10px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-raised); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1.4; }
.metric-choice:has(input:checked) { border-color: var(--line); background: var(--accent-soft); color: var(--ink); }.metric-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }.metric-choice input { flex: 0 0 15px; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }.metric-choice span { min-width: 0; overflow-wrap: anywhere; }
.metric-extra > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--muted); cursor: pointer; list-style: none; font-size: 12px; }.metric-extra > summary::-webkit-details-marker { display: none; }.metric-extra > summary::after { content: "+"; font-size: 17px; }.metric-extra[open] > summary::after { content: "−"; }
.exploration-controls { display: grid; gap: 14px; }.exploration-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.exploration-fields > :only-child { grid-column: 1 / -1; }
#analyze-button { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
#compare-status { grid-column: 1 / -1; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.comparison-results { display: grid; gap: 14px; margin-top: 20px; }
.comparison-figure { min-width: 0; margin: 0; border: 1px solid #d9e0e7; border-radius: 10px; background: #fff; color: #101317; overflow: hidden; }
#comparison-plot { position: relative; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; background: #fff; color: #101317; touch-action: auto; }
#comparison-plot svg { display: block; width: 100%; min-width: 820px; max-width: none; height: auto; background: #fff; }
#comparison-plot svg text { font-family: Arial, Helvetica, sans-serif; }
#comparison-plot:focus-visible { outline-offset: -3px; }
.plot-point { cursor: crosshair; transition: stroke-width var(--motion-quick) var(--ease-standard), fill-opacity var(--motion-quick) var(--ease-standard); }
.plot-point:hover, .plot-point:focus-visible, .plot-point.is-inspected { stroke: #17222b; stroke-width: 2; fill-opacity: 1; outline: none; }
.plot-cell { cursor: crosshair; }.plot-cell:hover > rect, .plot-cell:focus-visible > rect, .plot-cell.is-inspected > rect { stroke: #17222b; stroke-width: 2; }
.plot-tooltip { position: absolute; z-index: 5; display: grid; gap: 4px; width: max-content; max-width: min(240px, calc(100% - 24px)); padding: 11px 13px; border: 1px solid #ffffff24; border-radius: 8px; background: #17222b; color: #fff; box-shadow: 0 8px 28px #00000024; font: 400 12px/1.5 var(--font-text); font-variant-numeric: tabular-nums; pointer-events: auto; }
.plot-tip-name { color: #fff; font-size: 12px; font-weight: var(--heading-weight); overflow-wrap: anywhere; }
.plot-tip-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.plot-tip-row > :first-child { min-width: 0; overflow-wrap: anywhere; color: #c3cfda; }.plot-tip-row > :last-child { color: #fff; font-weight: var(--heading-weight); white-space: nowrap; }
.plot-tooltip-cell .plot-tip-row { display: block; }.plot-tooltip-cell .plot-tip-row > :last-child { display: block; margin-top: 3px; white-space: normal; overflow-wrap: anywhere; }
.plot-tooltip .btn { justify-self: start; margin-top: 3px; padding: 7px 9px; border-color: #ffffff38; color: #fff; font-size: 12px; pointer-events: auto; }
.plot-tooltip .btn:focus-visible { outline-color: #fff; }
.stats-summary { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); font-size: 13px; font-variant-numeric: tabular-nums; }
.stats-summary:empty { display: none; }.stats-summary p { color: var(--muted); }.stats-summary b, .stats-summary strong { color: var(--ink); font-weight: 600; }
@container comparison (max-width: 740px) { .compare-setup { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

@media (hover: hover) {
  .view-tabs button:hover, .segment-control button:hover { color: var(--ink); background: var(--accent-soft); }
  .roi-shape-button:hover, .metric-choice:hover { color: var(--ink); background: var(--accent-soft); }
  .group-remove:hover { background: var(--accent-soft); color: var(--ink); }
  .image-item:hover { border-color: var(--line); }
  .image-item.is-selected:hover, .image-item.is-active:hover { border-color: var(--accent); }
  .plot-tooltip .btn:hover { border-color: #ffffff70; background: #ffffff16; color: #fff; }
}
@media (min-width: 901px) { .image-list { max-height: min(68svh, 780px); padding-right: 3px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; } }
@media (max-width: 1100px) { .images-layout, .compare-layout { grid-template-columns: 224px minmax(0, 1fr); gap: 16px; }.channel-details { grid-template-columns: minmax(0, 1fr); }.settings-main { gap: 14px; }.advanced-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.advanced-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .images-layout, .compare-layout { grid-template-columns: minmax(0, 1fr); }.image-list { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }.image-library > summary { min-height: 48px; }.compare-setup { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; }.settings-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 1.6fr); }.image-stage { min-height: 220px; } }
@media (max-width: 600px) {
  .channel-lab .suite-header { row-gap: 0; padding-block: 10px 14px; }.channel-lab .identity-divider { display: none; }.channel-lab .page-identity h1 { margin-top: 3px; font-size: 28px; }.channel-glyph svg { width: 32px; height: 32px; }
  .import-panel { margin-top: 36px; padding: 34px 18px; gap: 18px; }.import-copy h2 { font-size: 30px; }.import-copy p { font-size: 12px; }
  :is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-panel { gap: 8px; padding: 8px; margin-top: 14px; border-style: solid; }
  :is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-panel :is(.import-icon, .import-copy) { display: none; }
  :is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-actions { width: 100%; justify-content: space-between; gap: 6px; }
  .example-picker select { width: 168px; font-size: 16px; }.example-actions .btn { gap: 5px; padding-inline: 8px; font-size: 11px; }
  :is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-actions > #choose-files { padding-inline: 10px; }
  :is(.has-data, .channel-lab:has(#workspace:not([hidden]))) .import-footer { font-size: 11px; gap: 3px 10px; }
  .lab-workspace { margin-top: 12px; }.workspace-toolbar { margin-bottom: 12px; }.view-tabs button { padding-inline: 10px; }.export-menu > summary { width: 44px; padding-inline: 10px; }.export-label, .export-menu > summary::after { display: none; }
  .analysis-settings { margin-bottom: 12px; }.settings-summary { min-height: 48px; padding: 10px 12px; }.settings-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px; }.settings-main > .threshold-field { grid-column: 1 / -1; }.range-heading { font-size: 12px; }.range-unit { font-size: 11px; }.advanced-settings > summary { padding-inline: 12px; }.advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 12px 12px; }.advanced-grid > :first-child { grid-column: 1 / -1; }.compare-step { margin-bottom: 12px; }
  .field { font-size: 12px; }select, input[type="number"], input[type="text"] { font-size: 16px; }.image-group, .group-name { font-size: 16px !important; }
  .image-inspector { gap: 12px; }.image-heading { padding: 12px 12px 8px; gap: 6px; }#selected-name { font-size: 14px; }#selected-meta { font-size: 11px; }.plane-field { width: 100%; max-width: none; }.plane-field select { font-size: 16px; }.image-toolbar { gap: 4px; padding: 0 8px 8px; }.segment-control button { padding-inline: 11px; font-size: 11px; }.roi-actions .btn { padding-inline: 8px; font-size: 11px; }.roi-actions .btn svg { width: 15px; }.image-stage { min-height: 180px; padding: 8px; }#image-canvas { max-height: 42svh; }
  .roi-tools { padding: 8px 12px; }.roi-draft-actions { margin-left: auto; }.roi-name-field { margin-inline: 12px; }.polygon-fields { padding-inline: 12px; }.polygon-fields textarea { font-size: 16px; }.region-detail-actions { padding-inline: 12px; }
  .image-readings { padding: 12px; }.image-readings > :is(.reading, .metric-card, div) { padding-inline: 10px; }.reading-label, .image-readings .k, .image-readings dt { font-size: 11px; }.reading-value, .image-readings .v, .image-readings dd { font-size: 24px; }.reading-unit { font-size: 11px; }.image-panel > .measurement-note { padding: 0 12px 12px; font-size: 11px; }
  .roi-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }.channel-details { padding: 12px; }.compare-setup { grid-template-columns: minmax(0, 1fr); gap: 12px; }.comparison-controls { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }.comparison-results { margin-top: 14px; }.stats-summary { padding: 12px; font-size: 12px; }.measurement-note { font-size: 11px; }
  .metric-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric-choice { gap: 7px; padding-inline: 8px; font-size: 11px; }.exploration-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }.advanced-readings-body { padding: 12px; }.advanced-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 380px) { #clear-roi:disabled { display: none; } }
@media (max-width: 359px) { .view-tabs button { gap: 6px; padding-inline: 8px; }.view-tabs button svg { display: none; }.image-toolbar { justify-content: center; }.roi-actions { margin-left: auto; }.segment-control button { padding-inline: 9px; }.roi-actions .btn { padding-inline: 6px; }.image-readings > :is(.reading, .metric-card, div) { padding-inline: 7px; }.reading-value, .image-readings .v, .image-readings dd { font-size: 21px; } }
@media (pointer: coarse) { .image-select, .select-all input { width: 20px; height: 20px; }.image-item { grid-template-columns: 44px minmax(0, 1fr); }.select-all { padding-right: 8px; } }
@media (prefers-reduced-motion: reduce) { .channel-lab *, .channel-lab *::before, .channel-lab *::after { transition: none !important; }.library-summary svg { rotate: none; }.channel-glyph .glyph-light { animation: none; opacity: 0; } }
@media (prefers-reduced-data: reduce) { .channel-glyph .glyph-light { animation: none; opacity: 0; } }
@media (forced-colors: active) {
  .import-panel, .analysis-settings, .image-library, .image-panel, .detail-panel, .group-editor, .comparison-controls, .comparison-figure, .stats-summary, .group-row, .image-item, .segment-control { border-color: CanvasText; box-shadow: none; }
  .image-stage { border-block: 1px solid CanvasText; }.image-item.is-selected, .image-item.is-active, .image-item[aria-current="true"], .segment-control button[aria-pressed="true"], #roi-toggle[aria-pressed="true"], .roi-shape-button[aria-pressed="true"], .metric-choice:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }.view-tabs button[aria-pressed="true"]::after { background: Highlight; }
  .roi-shapes, .metric-choice, .palette-color { border-color: CanvasText; }.channel-indicator, .image-kind, .region-badge { color: CanvasText !important; }.palette-swatch { forced-color-adjust: none; }
  .channel-glyph :is(path, use) { fill: Canvas; stroke: CanvasText; }.channel-glyph .glyph-axis { fill: none; opacity: 1; }.channel-glyph .glyph-light { display: none; animation: none; }.step-number { border-color: CanvasText; }.step-icon { stroke: CanvasText; }.group-swatch { background: CanvasText; }#image-canvas, #comparison-plot, #comparison-plot svg, .histogram svg { forced-color-adjust: none; }.plot-tooltip { forced-color-adjust: auto; border-color: CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }.plot-tooltip :is(.plot-tip-name, .plot-tip-row > span, .btn) { color: CanvasText; }.plot-tooltip .btn { border-color: CanvasText; }.plot-tooltip .btn:focus-visible { outline-color: Highlight; }
}
@media print { .suite-header, .suite-footer, .import-panel, .import-footer, .work-progress, .workspace-toolbar, .analysis-settings, .image-library, .compare-setup, .image-toolbar, .roi-tools, .region-details { display: none !important; }.app { width: 100%; padding: 0; }.lab-workspace, .comparison-results { margin: 0; }.images-layout { display: block; }.comparison-figure { break-inside: avoid; }.detail-panel { break-inside: avoid; } }