@charset "UTF-8";

/* ============================================================
   SCHEMATICS.CSS - Plate grids, wells, tips, and modals

   TABLE OF CONTENTS:
   1. PLATE & HEAD GRIDS (base definitions)
   2. WELLS & TIPS (circles, states)
   3. PREVIEW MODAL (dispense preview)
   4. WELL SELECTOR (main page well selection)
   5. PROGRESS/RESULTS MODAL (measurement modals)
   6. DATA GRID (table replacement)
   7. COLOR SCALES (heatmap gradients)
   8. VOLUME STATS (live measurement stats)
   9. UI COMPONENTS (tabs, pagination)
   10. TIP SELECTOR (tip selection UI)
   ============================================================ */


/* ============================================================
   1. PLATE & HEAD GRIDS
   Grid layouts for microplates and dispense heads.
   Size variants use CSS variables for easy context overrides.
   ============================================================ */

/* --- 1a. Shared Grid Base --- */

:is(.plate-grid-96, .plate-grid-384, .plate-grid-1536,
    .dh-grid-8, .dh-grid-16, .dh-grid-96, .dh-grid-384,
    .tip-grid-8, .tip-grid-16, .tip-grid-96, .tip-grid-384) {
    display: grid;
    gap: var(--grid-gap);
    padding: var(--grid-padding);
    background-color: var(--panel-card-bg);
    border: solid 1px var(--panel-card-border);
    border-radius: 6px;
    box-shadow: var(--card-shadow);
    -webkit-user-select: none;
    user-select: none;
}

/* --- 1b. Plate Grids (96, 384, 1536) --- */

.plate-grid-96 {
    --header-size: 28px;
    --cell-size: 30px;
    --header-font: 10px;
    --cell-font: 10px;
    --grid-gap: 5px;
    --grid-padding: 20px;
    grid-template-columns: var(--header-size) repeat(12, var(--cell-size));
    grid-template-rows: var(--header-size) repeat(8, var(--cell-size));
}

.plate-grid-384 {
    --header-size: 22px;
    --cell-size: 24px;
    --header-font: 9px;
    --cell-font: 9px;
    --grid-gap: 5px;
    --grid-padding: 20px;
    grid-template-columns: var(--header-size) repeat(24, var(--cell-size));
    grid-template-rows: var(--header-size) repeat(16, var(--cell-size));
}

.plate-grid-1536 {
    --header-size: 12px;
    --cell-size: 16px;
    --header-font: 8px;
    --cell-font: 7px;
    --grid-gap: 2px;
    --grid-padding: 15px;
    grid-template-columns: var(--header-size) repeat(48, var(--cell-size));
    grid-template-rows: var(--header-size) repeat(32, var(--cell-size));
}

/* Row/column headers */
.plate-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--header-font, 10px);
    font-weight: 500;
    color: var(--text-muted);
    overflow: hidden;
}

/* --- 1c. Tip Grids (8, 16, 96, 384) --- */

.tip-grid-8 {
    --header-size: 28px;
    --cell-size: 30px;
    --header-font: 10px;
    --cell-font: 10px;
    --grid-gap: 5px;
    --grid-padding: 20px;
    grid-template-columns: var(--header-size) var(--cell-size);
    grid-template-rows: repeat(8, var(--cell-size));
}

.tip-grid-16 {
    --header-size: 22px;
    --cell-size: 24px;
    --header-font: 9px;
    --cell-font: 9px;
    --grid-gap: 5px;
    --grid-padding: 20px;
    grid-template-columns: var(--header-size) var(--cell-size);
    grid-template-rows: repeat(16, var(--cell-size));
}

.tip-grid-96 {
    --header-size: 28px;
    --cell-size: 30px;
    --header-font: 10px;
    --cell-font: 10px;
    --grid-gap: 5px;
    --grid-padding: 20px;
    grid-template-columns: var(--header-size) repeat(12, var(--cell-size));
    grid-template-rows: var(--header-size) repeat(8, var(--cell-size));
}

.tip-grid-384 {
    --header-size: 22px;
    --cell-size: 24px;
    --header-font: 9px;
    --cell-font: 9px;
    --grid-gap: 5px;
    --grid-padding: 20px;
    grid-template-columns: var(--header-size) repeat(24, var(--cell-size));
    grid-template-rows: var(--header-size) repeat(16, var(--cell-size));
}


/* ============================================================
   2. WELLS & TIPS
   Well circles (microplate) and tip circles (dispense head).
   Includes selection states, hover effects, and measured states.
   ============================================================ */

/* --- 2a. Well & Tip Circles --- */

.well-svg {
    width: 100%;
    height: 100%;
}

/* SVG circles (shared base) */
svg :is(.well-circle, .tip-circle) {
    stroke: #7eb8da;  /* muted sky blue - matches selection gradient light */
    stroke-width: 1px;
    transition: fill 0.15s ease, stroke 0.15s ease;
}

svg .well-circle { fill: white; }
svg .tip-circle { fill: var(--well-muted); }

/* CSS div circles (shared base) */
div:is(.well-circle, .tip-circle) {
    width: 80%;
    height: 80%;
    margin: 10%;
    border-radius: 50%;
    border: 1px solid var(--border-muted);
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease;
}

div.well-circle { background: var(--panel-card-bg); }
div.tip-circle { background: var(--well-muted); border-color: var(--border-muted); }

/* --- 2b. Selection States --- */

/* Crosshair hover effects */
.cell:is(.row-hover, .col-hover) { background-color: rgba(34, 94, 168, 0.20); }
.cell.intersection-hover { background-color: rgba(34, 94, 168, 0.20); }

/* Hover state */
svg .well-circle:hover,
.cell:hover svg .well-circle { fill: var(--well-hover); stroke: var(--well-hover); }

div.well-circle:hover,
.cell:hover div.well-circle { background: var(--well-hover); border-color: var(--well-hover); }

/* Selected state */
svg :is(.well-circle, .tip-circle).selected { fill: url(#well-selected-gradient); stroke: var(--well-selected-border); }
div:is(.well-circle, .tip-circle).selected { background: var(--well-selected); border-color: var(--well-selected-border); }

/* Measured state */
svg .well-circle.measured { fill: url(#well-measured-gradient); stroke: var(--well-measured-border); stroke-width: 0.8px; }
div .well-circle.measured { background: var(--well-measured); border-color: var(--well-measured-border); }

/* Selected + measured (green wins) */
svg .well-circle.selected.measured { fill: url(#well-measured-gradient); stroke: var(--well-measured-border); }
div .well-circle.selected.measured { background: var(--well-measured); border-color: var(--well-measured-border); }

/* Read failed state - white with thick black border and small x */
div.well-circle.read-failed {
	background: white;
	border: 2px solid #333;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

div.well-circle.read-failed::before {
	content: '×';
	color: #333;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
}

/* SVG read failed state - white fill with thick black stroke */
svg .well-circle.read-failed {
	fill: white;
	stroke: #333;
	stroke-width: 3px;
}

/* --- 2c. Well Shape Variants --- */

.plate-well-round {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--well-muted);
    box-sizing: border-box;
}

.plate-well-square {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-sizing: border-box;
}

/* Square wells in tip grids use cell-size */
:is(.tip-grid-8, .tip-grid-16, .tip-grid-96, .tip-grid-384) .plate-well-square {
    width: var(--cell-size);
    height: var(--cell-size);
    border: none;
    border-radius: 3px;
}

.plate-well-bowl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--well-muted);
    border: solid 1px var(--well-muted);
    border-radius: 0 0 50% 50%;
    position: relative;
    overflow: hidden;
}

.plate-well-bowl .liquid-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 50% 50%;
}

/* Read failed state - white with thick black border and small x */
.plate-well-bowl.read-failed,
.plate-well-square.read-failed {
    background: white;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plate-well-bowl.read-failed::before,
.plate-well-square.read-failed::before {
    content: '×';
    color: #333;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

/* Pending retry state - gray background with black border (waiting to re-read) */
.plate-well-bowl.pending-retry,
.plate-well-square.pending-retry {
    background: var(--well-muted);
    border: 2px solid #333;
}


/* ============================================================
   3. PREVIEW MODAL
   Dispense preview modal showing wells and tips side by side.
   ============================================================ */

/* --- 3a. Overlay & Backdrop --- */

.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 50px;
    padding-left: 70px;  /* Account for nav bar width */
}

.preview-overlay .backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Preview modal content - sits above backdrop */
.preview-modal {
    position: relative;
    z-index: 1;
    padding: 20px;
}

/* --- 3b. Container Layout --- */
.preview-container {
    position: relative;
    display: grid;
    grid-template:
        "p-controls ."
        "p-wells    p-tips";
    gap: 15px 20px;
    align-items: start;
    padding: 20px;
    max-width: 1850px;
    max-height: 90vh;
    overflow: auto;
}

/* --- 3c. Controls Card --- */
.preview-controls-card {
    grid-area: p-controls;
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--preview-bg);
    border: 1px solid var(--preview-border);
    border-radius: var(--preview-radius);
    box-shadow: var(--preview-shadow);
}

.preview-controls-card .step-info {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-reverse);
    margin-left: auto;
}

/* --- 3d. Wells Card (left, with legend) --- */
.preview-wells-card {
    grid-area: p-wells;
    display: flex;
    gap: 15px;
    padding: 40px 20px 20px 20px;
    background: var(--preview-bg);
    border: 1px solid var(--preview-border);
    border-radius: var(--preview-radius);
    box-shadow: var(--preview-shadow);
    overflow: visible;
}

.preview-wells-card .legend {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 65px;
    padding-bottom: 25px;
}

.preview-wells-card .grid-wrapper {
    position: relative;
}

/* --- 3e. Tips Card (right, no legend) --- */

.preview-tips-card {
    grid-area: p-tips;
    padding: 40px 20px 20px 20px;
    background: var(--preview-bg);
    border: 1px solid var(--preview-border);
    border-radius: var(--preview-radius);
    box-shadow: var(--preview-shadow);
    overflow: hidden;
}

.preview-tips-card .grid-wrapper {
    position: relative;
}

/* Card titles in preview cards (white text for glass backgrounds) */
.preview-wells-card .card-title,
.preview-tips-card .card-title {
    font: 600 14px/1 inherit;
    color: var(--preview-text);
    border: none;
    margin: 0 0 10px -10px;  /* -10px left aligns with grid outer edge (25px card - 15px grid padding) */
}


/* --- 3f. Preview Grid Overrides --- */

.preview-container :is(.tip-grid-96, .plate-grid-96) {
    --header-size: 30px;
    --cell-size: 33px;
    --header-font: 12px;
    --cell-font: 12px;
    --grid-gap: 0;
    --grid-padding: 15px;
}

.preview-container :is(.tip-grid-384, .plate-grid-384) {
    --header-size: 30px;
    --cell-size: 24px;
    --header-font: 9px;
    --cell-font: 9px;
    --grid-gap: 0;
    --grid-padding: 20px;
}

.preview-container :is( .plate-grid-1536) {
    --header-size: 30px;
    --cell-size: 15px;
    --header-font: 9px;
    --cell-font: 9px;
    --grid-gap: 0;
    --grid-padding: 20px;
}

.preview-container div.well-circle { border: none; }

/* --- 3g. Preview Cells --- */

.preview-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--border-barely);
    font-size: var(--cell-font, 10px);
    color: var(--text-body);
    box-sizing: border-box;
    padding: 2px;
    line-height: 1.2;
    cursor: pointer;
    overflow: hidden;
}

.preview-cell .tip-label {
    font-weight: 500;
}

.preview-cell .dispense-label {
    font-size: 9px;
    color: var(--text-muted);
}

/* Header labels (row/column) */
.header-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
}

.header-label.row-label {
    justify-content: flex-end;
    padding-right: 4px;
}

.header-label.col-label {
    justify-content: center;
}

/* --- 3h. Volume Legend --- */

.volume-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 6px;
}

.volume-list > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.volume-list .volume-value {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-reverse);
}

.volume-list .volume-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
}

/* --- 3i. Preview Tooltip --- */

.preview-tooltip {
    position: absolute;
    background: var(--tooltip-bg);
    color: var(--text-reverse);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 11px;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* --- 3j. Media Player Controls --- */

.media-btn {
    background: var(--btn-media-bg);
    color: var(--btn-media-icon);
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--btn-media-shadow);
    transition: background 0.15s ease;
}

.media-btn:hover {
    background: var(--btn-media-bg-hover);
    color: var(--btn-media-icon-hover);
}

.media-btn:disabled {
    background: linear-gradient(180deg, #e6e8ec 0%, #cdd0d6 50%, #bcc0c8 100%);
    color: var(--text-disabled);
    border: 1px solid #ccc;
    cursor: not-allowed;
}

.media-btn .icon {
    width: 14px;
    height: 14px;
    background-color: var(--btn-media-icon);
    display: inline-block;
}

.media-btn:hover .icon {
    background-color: var(--btn-media-icon-hover);
}

.media-btn:disabled .icon {
    background-color: #999;
}

.media-btn .icon.icon-wide {
    width: 18px;
    height: 14px;
}

.media-btn .icon-step-back {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='10,2 10,14 3,8'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='10,2 10,14 3,8'/%3E%3C/svg%3E") center/contain no-repeat;
}

.media-btn .icon-play-reverse {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpolygon points='10,2 10,14 3,8'/%3E%3Cpolygon points='18,2 18,14 11,8'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpolygon points='10,2 10,14 3,8'/%3E%3Cpolygon points='18,2 18,14 11,8'/%3E%3C/svg%3E") center/contain no-repeat;
}

.media-btn .icon-pause {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2' width='4' height='12'/%3E%3Crect x='10' y='2' width='4' height='12'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2' width='4' height='12'/%3E%3Crect x='10' y='2' width='4' height='12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.media-btn .icon-play-forward {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpolygon points='2,2 2,14 9,8'/%3E%3Cpolygon points='10,2 10,14 17,8'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpolygon points='2,2 2,14 9,8'/%3E%3Cpolygon points='10,2 10,14 17,8'/%3E%3C/svg%3E") center/contain no-repeat;
}

.media-btn .icon-step-forward {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='6,2 6,14 13,8'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='6,2 6,14 13,8'/%3E%3C/svg%3E") center/contain no-repeat;
}

.media-btn .icon-close {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3,3 L13,13 M13,3 L3,13' stroke='black' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3,3 L13,13 M13,3 L3,13' stroke='black' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}


/* ============================================================
   4. WELL SELECTOR
   Main page well selection UI with quadrant/block controls.
   ============================================================ */

.well-selector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.well-selector.hidden {
    display: none;
}

.well-selector-layout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* --- 4a. Well Selector Grid Overrides --- */

.well-selector .plate-grid-96 {
    --header-size: 16px;
    --cell-size: 40px;
    --header-font: 12px;
    --cell-font: 12px;
    --grid-gap: 0px;
    --grid-padding: 25px;
    gap: var(--grid-gap);
    padding: var(--grid-padding);
}

.well-selector .plate-grid-384 {
    --header-size: 16px;
    --cell-size: 20px;
    --header-font: 12px;
    --cell-font: 10px;
    --grid-gap: 0px;
    --grid-padding: 25px;
    gap: var(--grid-gap);
    padding: var(--grid-padding);
}

.well-selector .plate-grid-1536 {
    display: grid;
    --header-size: 10px;
    --cell-size: 10px;
    --header-font: 5px;
    --cell-font: 5px;
    --grid-gap: 0px;
    --grid-padding: 25px;
    grid-template-columns: var(--header-size) repeat(48, var(--cell-size));
    grid-template-rows: var(--header-size) repeat(32, var(--cell-size));
    grid-auto-rows: 10px;
    align-items: start;
    align-content: start;
    gap: var(--grid-gap);
    padding: var(--grid-padding);
}

/* Force ALL direct children to 10px height */
.well-selector .plate-grid-1536 > * {
    height: 10px !important;
    max-height: 10px !important;
    box-sizing: border-box;
}

/* Smaller circles for 1536 plate at 10px cells */
.well-selector .plate-grid-1536 .well-circle {
    r: 25;
}

/* Force exact cell sizing for 1536 */
.well-selector .plate-grid-1536 .cell {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    max-width: 10px;
    max-height: 10px;
    overflow: hidden;
    position: relative;
}

/* Fix SVG positioning within 1536 cells */
.well-selector .plate-grid-1536 .cell .well-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
}

/* Remove padding from headers for 1536 to fit in 10px */
.well-selector .plate-grid-1536 .header-btn.col-header {
    padding: 0;
    margin: 0;
    line-height: 1;
    width: 10px;
    height: 10px;
    min-height: 10px;
    max-height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.well-selector .plate-grid-1536 .header-btn.row-header {
    padding: 0;
    margin: 0;
    line-height: 1;
    width: 10px;
    height: 10px;
    min-height: 10px;
    max-height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.well-selector .plate-grid-1536 .header-spacer {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    max-width: 10px;
    max-height: 10px;
    grid-column: 1;
    grid-row: 1;
}

/* --- 4b. Magnifier Tooltip (1536 plates) --- */
.magnifier {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    display: none;

    /* Magnifying glass - sized to fit well IDs like "AF48" */
    width: 44px;
    height: 44px;
    border-radius: 50%;

    /* Glass effect */
    background: radial-gradient(
        ellipse at 30% 30%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(240, 248, 255, 0.90) 40%,
        rgba(220, 235, 250, 0.85) 100%
    );
    border: none;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 -2px 8px rgba(100, 149, 237, 0.15),
        inset 2px 2px 4px rgba(255, 255, 255, 0.8);

    /* Center the text */
    align-items: center;
    justify-content: center;

    /* Text styling */
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0055af;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.magnifier.visible {
    display: flex;
}

/* Glass reflection highlight */
.magnifier::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 10px;
    width: 16px;
    height: 9px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    border-radius: 50%;
    transform: rotate(-25deg);
}

/* Row/Column crosshair highlight (for header hover) */
.well-selector .row-highlight,
.well-selector .col-highlight {
    background-color: rgba(0, 85, 175, 0.15) !important;
}

/* --- 4c. Plate Controls --- */

.plate-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 25px;
    padding: 15px;
    margin: 0 10px 0 0;
    background: var(--plate-controls-bg);
    border: var(--plate-controls-border);
    border-radius: 6px;
    box-shadow: var(--plate-controls-shadow);
    min-width: 70px;
}

/* --- 4d. DH Controls (Dispense Head) --- */

.dh-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 25px;
    padding: 15px;
    margin: 0 10px 0 0;
    background: var(--dh-controls-bg);
    border: var(--dh-controls-border);
    border-radius: 5px;
    box-shadow: var(--dh-controls-shadow);
    min-width: 70px;
}

/* Buttons inside plate/dh controls use panel button tokens */
.plate-controls .btn,
.dh-controls .btn {
    background: var(--btn-panel-bg);
    color: var(--btn-panel-text);
    border-color: var(--btn-panel-border);
    box-shadow: var(--btn-panel-shadow);
}

.plate-controls .btn:hover,
.dh-controls .btn:hover {
    background: var(--btn-panel-bg-hover);
    color: var(--btn-panel-text-hover);
}

.control-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 6px;
}

/* Quadrant buttons (2x2 grid) */
.quadrant-grid {
    display: grid;
    grid-template-columns: repeat(2, 18px);
    gap: 3px;
}

/* 96-block buttons */
.block-grid {
    display: grid;
    gap: 3px;
}

/* Header buttons - prevent text selection on shift+click */
.header-btn {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
}

/* Spacer for top-left corner when ALL button is external */
.header-spacer {
    display: block;
    width: var(--header-size);
    height: var(--header-size);
    min-width: var(--header-size);
    min-height: var(--header-size);
    grid-column: 1;
    grid-row: 1;
}

/* Row/column header font size (uses --header-font from grid config) */
.header-btn.row-header,
.header-btn.col-header {
    font-size: var(--header-font, 10px);
    padding: 3px;
}

/* Common button styling */
.header-btn.all-btn,
.quadrant-grid .quadrant-btn,
.block-grid .block-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    background: var(--btn-panel-bg);
    border: 1px solid var(--btn-panel-border);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--btn-panel-shadow);
}

.header-btn.all-btn:hover,
.quadrant-grid .quadrant-btn:hover,
.block-grid .block-btn:hover {
    background: var(--btn-panel-bg-hover);
    border-color: var(--btn-panel-border);
}

/* Disabled state for constrained buttons */
.quadrant-grid .quadrant-btn.disabled,
.quadrant-grid .quadrant-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}


/* ============================================================
   5. PROGRESS/RESULTS MODAL
   Measurement progress and results display modal.
   ============================================================ */

/* --- 5a. Overlay & Animation --- */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 30px;
    animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-overlay .backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* --- 5b. Container Layout --- */

.modal-container {
    position: relative;
    margin: 20px auto 0;
    background: transparent;
    max-width: 1800px;
    animation: modalSlideIn 0.3s ease-out;
    display: grid;
    grid-template-areas:
        "m-controls  .              ."
        "m-plate     m-perwell   m-stats"
        "m-color     m-perwell   m-stats"
        "m-meta      m-perwell   m-stats";
    grid-template-columns: 925px 300px 300px;
    grid-template-rows: 40px 630px 65px 55px;
    gap: 10px 30px;
    align-items: start;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 5c. Modal Cards (shared base) --- */

:is(.modal-color-card, .modal-meta-card, .modal-perwell-card, .modal-stats-card) {
    width: 100%;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--card-shadow);
    box-sizing: border-box;
    color: var(--card-text);
}

.modal-controls-card {
    grid-area: m-controls;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--modal-card-bg);
    border: var(--modal-border);
    border-radius: var(--modal-radius);
    color: var(--modal-card-text);
    box-shadow: var(--modal-shadow);
}

.modal-plate-card {
    grid-area: m-plate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--modal-card-bg);
    border: var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
}

.modal-color-card { grid-area: m-color; padding: 15px 20px; }

.modal-meta-card {
    grid-area: m-meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 15px 20px;
}

.modal-perwell-card {
    grid-area: m-perwell;
    display: flex;
    flex-direction: column;
    padding: 20px 25px;
}

.modal-stats-card {
    grid-area: m-stats;
    display: flex;
    flex-direction: column;
    padding: 20px 25px;
    overflow: hidden;
}

.modal-stats-card-split {
    grid-area: m-stats;
    background: transparent;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.modal-stats-card-split > div {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--card-bg);
    padding: 20px 25px;
    border-radius: var(--modal-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

/* --- 5d. Status & Titles --- */

.modal-status {
    font-size: 13px;
    color: inherit;
    font-weight: 500;
    margin-left: auto;
    padding-right: 5px;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-on-light);
    border-bottom: solid 1px #ddd;
    padding-bottom: 5px;
    margin: 8px 0px 15px 0px;
}

.modal-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-subtle);
    margin-top: 15px;
    margin-bottom: 0;
    padding: 10px 0;
    border-top: 1px solid #eee;
}

/* --- 5e. Scrollable Data Area --- */

.modal-data-scroll {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    min-height: 0;
    padding-right: 25px;
    margin-right: -25px;
    padding-bottom: 10px;
}

.modal-data-scroll::-webkit-scrollbar { width: 8px; }
.modal-data-scroll::-webkit-scrollbar-track { background: var(--modal-scrollbar-track); border-radius: var(--modal-scrollbar-radius); }
.modal-data-scroll::-webkit-scrollbar-thumb { background: var(--modal-scrollbar); border-radius: var(--modal-scrollbar-radius); }
.modal-data-scroll::-webkit-scrollbar-thumb:hover { background: var(--modal-scrollbar-hover); }

/* --- 5f. Metadata Items --- */

.modal-metadata-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 70px;
}

.modal-metadata-label {
    font-size: 9px;
    color: var(--text-subtle);
}

.modal-metadata-value {
    font-size: 11px;
    font-weight: 500;
    min-width: 60px;
    color: var(--text-on-light);
}

/* --- 5g. Legend & Progress Bar --- */

.modal-legend-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-on-light);
    margin-bottom: 5px;
}

.modal-legend-label {
    font-size: 11px;
    color: var(--text-on-light);
    min-width: 55px;
}

.modal-legend-label.right {
    text-align: right;
}

.modal-legend-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-legend-gradient {
    flex: 1;
    height: 10px;
    border-radius: 3px;
}

.modal-progress-bar {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.modal-progress-bar-fill {
    height: 100%;
    background: var(--progress-bg);
    border-radius: 3px;
    transition: width 0.3s ease;
}


/* ============================================================
   6. DATA GRID
   CSS Grid replacement for tables. Column widths set inline.
   ============================================================ */

.data-grid {
    display: grid;
    grid-template-columns: 30px 70px 70px 70px;
    font-size: 11px;
    width: fit-content;
    margin: 0 auto;
}

.data-grid > span {
    padding: 3px 5px;
    justify-self: end;
    color: var(--text-on-light);
}

.data-grid-header {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    color: var(--panel-card-text);
    background: var(--panel-card-bg);
    font-weight: 600;
    text-align: right;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.data-grid-header.sortable {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.data-grid-header.sortable:hover {
    color: var(--text-link);
}

/* Section headers for grouping rows (e.g., failed wells) */
.data-grid-section-header {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 5px 4px 5px;
    margin-top: 4px;
    justify-self: start;
    border-top: 1px solid var(--border-muted);
    border-bottom: 1px solid var(--border-muted);
}

.data-grid-section-header.failed {
    color: var(--status-read-failed);
}

/* Failed well data rows - all text in fail color */
.data-grid > span.failed-well {
    color: var(--status-read-failed);
}

/* Bottom border on last failed row for visual separation */
.data-grid > span.failed-well-last {
    border-bottom: 1px solid var(--border-muted);
    padding-bottom: 6px;
    margin-bottom: 4px;
}

/* Well ID coloring based on pass/fail */
.data-grid > span.well-pass {
    color: var(--status-pass);
}

.data-grid > span.well-fail {
    color: var(--status-fail);
}

.stat-value {
    font-weight: 600;
    color: var(--text-body);
}


/* ============================================================
   7. COLOR SCALES
   Heatmap gradient classes for results legend.
   ============================================================ */

/* Viridis family */
.modal-legend-gradient.scale-default { background: linear-gradient(to right, #3498db, #2ecc71, #5cb85c, #e67e22, #e74c3c); }
.modal-legend-gradient.scale-viridis { background: linear-gradient(to right, #440154, #3B528B, #21918C, #5DC863, #FDE725); }
.modal-legend-gradient.scale-cividis { background: linear-gradient(to right, #00204D, #414D6B, #7C7B78, #BCAF6F, #FFEA46); }
.modal-legend-gradient.scale-plasma  { background: linear-gradient(to right, #0D0887, #7E03A8, #CC4778, #F89441, #F0F921); }
.modal-legend-gradient.scale-inferno { background: linear-gradient(to right, #000004, #57106E, #BC3754, #F98C0A, #FCFFA4); }
.modal-legend-gradient.scale-magma   { background: linear-gradient(to right, #000004, #51127C, #B63679, #FB8861, #FCFDBF); }
.modal-legend-gradient.scale-mako    { background: linear-gradient(to right, #0B0405, #35477D, #307D8B, #5DC093, #DEF5E5); }

/* ColorBrewer sequential */
.modal-legend-gradient.scale-ylorbr  { background: linear-gradient(to right, #FFFFD4, #FED98E, #FE9929, #D95F0E, #993404); }
.modal-legend-gradient.scale-pubu    { background: linear-gradient(to right, #F1EEF6, #BDC9E1, #74A9CF, #2B8CBE, #045A8D); }
.modal-legend-gradient.scale-blues   { background: linear-gradient(to right, #EFF3FF, #BDD7E7, #6BAED6, #2171B5, #084594); }
.modal-legend-gradient.scale-oranges { background: linear-gradient(to right, #FEEDDE, #FDBE85, #FD8D3C, #E6550D, #A63603); }

/* ColorBrewer diverging */
.modal-legend-gradient.scale-blrd { background: linear-gradient(to right, #0571B0, #92C5DE, #F7F7F7, #F4A582, #CA0020); }
.modal-legend-gradient.scale-orpu { background: linear-gradient(to right, #5E3C99, #B2ABD2, #F7F7F7, #FDB863, #E66101); }
.modal-legend-gradient.scale-bgbr { background: linear-gradient(to right, #01665E, #5AB4AC, #F5F5F5, #D8B365, #8C510A); }
.modal-legend-gradient.scale-prgn { background: linear-gradient(to right, #7B3294, #C2A5CF, #F7F7F7, #A6DBA0, #008837); }


/* ============================================================
   8. VOLUME STATS
   Live-updating statistics during measurement.
   ============================================================ */

.volume-stats-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 8px;
    overflow: hidden;
}

.volume-card {
    padding: 8px;
    border-top: 1px solid #ddd;
}

.volume-card:last-child {
    border-bottom: 1px solid #ddd;
}

.volume-card.current {
    background-color: var(--data-bg);
}

.volume-card-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-subtle);
    letter-spacing: 0.5px;
    padding: 10px 0;
}


.volume-card-stats {
    display: grid;
    --stats-columns: 1fr 1fr;
    --stats-gap: 2px 40px;
    grid-template-columns: var(--stats-columns);
    gap: var(--stats-gap);
    font-size: 11px;
}

.volume-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
}

.volume-stat-row.divider {
    margin-top: 10px;
    border-top: 1px dashed #ddd;
    padding-top: 6px;
}

.volume-stat-label {
    font-size: 11px;
    color: var(--text-subtle);
}

.volume-stat-value {
    font-size: 11px;
    font-weight: 500;
    font-family: monospace;
    text-align: right;
    color: var(--text-on-light);
}

.volume-stat-value.pass {
    color: var(--status-pass);
}

.volume-stat-value.fail {
    color: var(--status-fail);
}

.volume-card-cumulative {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px dashed #ddd;
}

.volume-cumulative-header {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-subtle);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}


/* ============================================================
   9. UI COMPONENTS
   Tabs, pagination, and other shared UI elements.
   ============================================================ */

/* --- 9b. Pagination Group --- */

.pagination-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.pagination-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--modal-card-text);
    margin-left: 8px;
}


/* ============================================================
   10. TIP SELECTOR
   Tip selection UI for protocol forms (admin).
   ============================================================ */

/* --- 10a. Tip Selector Panel --- */

.tip-selector-panel {
	position: relative;
	top: 85px;
	flex-shrink: 0;
}

.tip-selector-cards {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

/* --- 10b. Dispense Head Grid Container --- */

.dh-grid-container {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

/* --- 10c. Collapsible Section (fieldset-style) --- */

.collapsible-section {
	border: none;
	background: transparent;
	margin: 35px 0 10px 0;
}

.collapsible-header {
	display: flex;
	align-items: center;
	padding: 0;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	margin: 15px 0;
}

/* Style title like a fieldset legend with line */
.collapsible-title {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-accent);
	white-space: nowrap;
}

/* Line after title (like fieldset legend) */
.collapsible-header::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border-muted);
	margin-left: 12px;
}

/* Arrow after title, styled to match legend */
.collapsible-arrow {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid var(--text-accent);
	transition: transform 0.2s ease;
	margin-left: 8px;
	margin-right: 6px;
}

.collapsible-section.collapsed .collapsible-arrow {
	transform: rotate(-90deg);
}

.collapsible-summary {
	font-size: 14px;
	color: var(--text-color);
	margin-left: 10px;
	flex: 1;
}

.collapsible-content {
	padding: 3px 0 0 0;
	transition: max-height 0.35s ease-out, padding 0.35s ease-out, opacity 0.25s ease-out;
	max-height: 450px;
	opacity: 1;
}

.collapsible-section.collapsed .collapsible-content {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	overflow: hidden;
}

/* DH grid in collapsible - left aligned to match main grid */
.collapsible-content .dh-grid-container {
	justify-content: flex-start;
	padding-top: 12px;
}

/* --- 10d. Tip Selection Actions --- */

.tip-selection-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	/* Fixed width to prevent layout shift when switching head types */
	min-width: 80px;
}

.tip-selection-actions .btn-small {
	padding: 6px 14px;
	font-size: 11px;
}

.tip-selection-status {
	font-size: 11px;
	color: var(--text-color);
}

.tip-selection-status.applied {
	color: var(--text-color);
	font-weight: 500;
}

.tip-selection-status.pending {
	color: #e65100;
	font-style: italic;
}

.tip-selection-status.valid {
	color: #2e7d32;
}

.tip-selection-status.invalid {
	color: #c62828;
	font-weight: 500;
}

/* --- 10e. Spacing Mismatch UI --- */

.spacing-mismatch-ui {
	margin-bottom: 15px;
}

.spacing-mismatch-message {
	font-size: 12px;
	color: #666;
	margin-bottom: 10px;
	line-height: 1.4;
}

.spacing-mismatch-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.spacing-mismatch-buttons .btn-small {
	padding: 4px 12px;
	font-size: 11px;
	min-width: 50px;
}

.spacing-mismatch-buttons .btn-small.active {
	background: #999;
	color: #fff;
}

/* --- 10f. Spacing Status Indicator --- */

.spacing-status {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 10px;
}

.spacing-status .status-icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
}

.spacing-status .status-message {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-top: 2px;
}

.spacing-status .status-headline {
	font-weight: 500;
	font-size: 12px;
	color: var(--text-color);
}

.spacing-status .status-subtext {
	font-weight: 400;
	font-size: 11px;
	color: #888;
}

/* --- 10g. Dispense Head Grid --- */
/* dh = dispense head (not "dispense" which is an action) */

.dh-grid {
	display: grid;
	min-width: 0;  /* Allow shrinking in flex/grid containers */
    background-color: white;
    border-radius: 6px;
    padding: 20px;
    box-shadow: none;
}


/* Fixed-area tip selector: cell sizes scale per head type */
/* Single-column heads: row header on left, then cell (no column header row) */
.dh-grid.dh-grid-8 {
	--header-size: 16px;
	--cell-size: 24px;
	--header-font: 11px;
	grid-template-columns: var(--header-size) var(--cell-size);
	grid-template-rows: repeat(8, var(--cell-size));
}

.dh-grid.dh-grid-16 {
	--header-size: 16px;
	--cell-size: 12px;
	--header-font: 6px;
	grid-template-columns: var(--header-size) var(--cell-size);
	grid-template-rows: repeat(16, var(--cell-size));
}

.dh-grid.dh-grid-96 {
	--header-size: 16px;
	--cell-size: 24px;
	--header-font: 11px;
	grid-template-columns: var(--header-size) repeat(12, var(--cell-size));
	grid-template-rows: var(--header-size) repeat(8, var(--cell-size));
}

.dh-grid.dh-grid-384 {
	--header-size: 16px;
	--cell-size: 12px;
	--header-font: 6px;
	grid-template-columns: var(--header-size) repeat(24, var(--cell-size));
	grid-template-rows: var(--header-size) repeat(16, var(--cell-size));
}

.dh-grid-corner {
	/* Empty corner cell */
}

/* Tip header buttons (row and column) */
.tip-header-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	box-shadow: none;
	font-size: var(--header-font, 10px);
	font-weight: 500;
	color: var(--well-hover);
	cursor: pointer;
	padding: 0;
	margin: 0;
	transition: color 0.15s ease;
}

.tip-header-btn:focus {
	outline: none;
}

.tip-header-btn:hover {
	color: var(--well-hover);
	text-decoration: underline;
	box-shadow: none;
	background-color: rgba(0, 85, 175, 0.15);
}

.tip-header-btn.selected {
	color: var(--well-hover);
	font-weight: 600;
}

/* 96-channel consecutive selection: headers in the selected range */
.dh-grid[data-head-type="96-channel"] .tip-header-btn.in-range {
	color: #fff;
	background: var(--well-hover);
	border-radius: 3px;
	font-weight: 600;
}

.dh-grid[data-head-type="96-channel"] .tip-header-btn.in-range:hover {
	background: var(--well-selected-border);
	color: #fff;
	text-decoration: none;
}

/* 384-channel: headers in range use text styling only (no blue background) */
.dh-grid[data-head-type="384-channel"] .tip-header-btn.in-range {
	color: var(--well-hover);
	font-weight: 600;
}

.dh-grid[data-head-type="384-channel"] .tip-header-btn.in-range:hover {
	text-decoration: underline;
}

.dh-grid .tip {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	margin: 0;
	cursor: pointer;
}

/* Tip SVG - fills the cell like well-svg */
.dh-grid .tip-svg {
	width: 100%;
	height: 100%;
	pointer-events: none; /* Let clicks pass through to parent .tip */
}

/* Tip circle default state - same as wells: white fill, blue outline */
.dh-grid .tip-circle {
	fill: white;
	stroke: #7eb8da;
	stroke-width: 1px;
	transition: fill 0.15s ease, stroke 0.15s ease;
}

/* Tip circle selected state - same gradient as wells */
.dh-grid .tip-circle.selected {
	fill: url(#well-selected-gradient);
	stroke: var(--well-selected-border);
}

/* Disabled tip cells (not in dispense selection - for evap grid) */
.dh-grid .tip.disabled {
	cursor: not-allowed;
}

.dh-grid .tip.disabled .tip-circle {
	fill: #e8e8e8;
	stroke: #d0d0d0;
	opacity: 0.4;
}

/* Disabled header buttons (for evap grid) */
.dh-grid .tip-header-btn.disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* Mode-disabled headers (wrong selection mode - shows as inactive text) */
.dh-grid .tip-header-btn.mode-disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* Row/Column highlight (for header hover) - same as well-selector */
.dh-grid .row-highlight,
.dh-grid .col-highlight {
	background-color: rgba(0, 85, 175, 0.15);
}

/* --- 10h. Tip Selector Wrapper ---
   Tip selectors reuse .dh-controls for buttons (defined in Section 4d)
*/

.tip-selector-wrapper {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	/* Fixed width to prevent layout shift when switching head types
	   384-channel is widest: 16px header + 24×10px cells = 256px */
	min-width: 280px;
}