.main-row > .table-layout {
	width: 100%;
	min-width: 0;
}

.workflow-overlay {
	box-sizing: border-box;
	width: min(76rem, calc(100% - 1rem));
	margin: 1.5rem auto;
	padding: clamp(1rem, 3vw, 2rem);
	text-align: left;
	color: var(--color-text-primary);
	background: linear-gradient(145deg, var(--color-surface), var(--color-surface-muted));
	border: 1px solid var(--color-border);
	border-radius: 0.8rem;
	box-shadow: 0 0.5rem 1.5rem var(--color-shadow);
}

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

/* Override the legacy full-table overlay only while it is the method picker. */
#device-overlay.device-method-picker {
	position: relative;
	left: auto;
	right: auto;
	z-index: 1;
	box-sizing: border-box;
	width: min(76rem, calc(100% - 1rem));
	height: auto;
	min-height: 0;
	padding: clamp(1rem, 3vw, 2rem);
	background: linear-gradient(145deg, var(--color-surface), var(--color-surface-muted));
}

.device-method-picker__intro {
	grid-column: 1 / -1;
	max-width: 46rem;
}

.device-method-picker__intro h2 {
	margin: 0.2rem 0 0.45rem;
	color: var(--color-text-primary);
	font-size: clamp(1.4rem, 3vw, 2rem);
}

.device-method-picker__intro > p:last-child { color: var(--color-text-secondary); line-height: 1.45; }
.device-method-card {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	position: relative;
	min-height: 7rem;
	padding: 1.15rem 1rem;
	text-align: left;
	color: var(--color-text-primary);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 0.65rem;
	box-shadow: 0 0.2rem 0.55rem var(--color-shadow);
	cursor: pointer;
	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.device-method-card:hover { transform: translateY(-0.18rem); border-color: var(--color-accent); box-shadow: 0 0.55rem 1rem var(--color-shadow); }
.device-method-card[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent), 0 0.55rem 1rem var(--color-shadow); }
.device-method-card:focus-visible,
.erpisu-editor :is(button, input, select, textarea):focus-visible {
	outline: 3px solid var(--color-link);
	outline-offset: 2px;
}
.device-method-card:disabled { cursor: not-allowed; opacity: 0.55; }
.device-method-card__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; flex: 0 0 3.2rem; border-radius: 0.75rem; background: var(--color-surface-muted); border: 1px solid var(--color-divider); }
.device-method-card__icon img { width: 2.45rem; height: 2.45rem; object-fit: contain; }
.device-method-card__icon--electret { color: var(--color-text-inverse); background: var(--color-accent); border-color: var(--color-accent); font-size: 1.55rem; font-weight: 700; }
.device-method-card__icon--erpisu { color: var(--color-text-inverse); background: var(--color-link); border-color: var(--color-link); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.04em; }
.device-method-card__copy { min-width: 0; padding-right: 1.1rem; }
.device-method-card__copy > strong,
.device-method-card__copy > span { display: block; }
.device-method-card__copy > strong { margin-bottom: 0.4rem; font-size: 1.15rem; }
.device-method-card__copy > span { color: var(--color-text-secondary); line-height: 1.4; }
.device-method-card__arrow { position: absolute; right: 0.85rem; top: 50%; color: var(--color-link); transform: translateY(-50%); }
.workflow-overlay--devices { overflow: hidden; }
.device-information-intro {
	margin: 0 0 1rem;
	padding: 0 0 1rem;
	color: var(--color-text-primary);
	border-bottom: 1px solid var(--color-divider);
}
.device-information-intro h2 { margin: 0 0 0.4rem; font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
.device-information-intro p:last-child { margin: 0; color: var(--color-text-secondary); line-height: 1.45; }
.device-table-scroll { width: 100%; overflow-x: auto; padding-bottom: 0.35rem; }
.erpisu-editor { position: relative; margin-bottom: 3rem; }
.erpisu-editor[hidden] { display: none; }
.erpisu-fractions[hidden] { display: none; }
.erpisu-editor__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-right: 3rem; }
.erpisu-editor__header h2 { margin: 0 0 0.4rem; }
.erpisu-editor__header p { margin: 0; color: var(--color-text-secondary); }
.erpisu-close-button {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: var(--color-text-primary);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 50%;
	box-shadow: 0 0.15rem 0.4rem var(--color-shadow);
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
}
.erpisu-close-button:hover { color: var(--color-error-text); border-color: var(--color-error-border); background: var(--color-error-bg); }
.erpisu-save-status { min-height: 1.5rem; color: var(--color-text-secondary); text-align: right; }
.erpisu-section { margin: 0 0 1rem; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 0.15rem 0.4rem var(--color-shadow); }
.erpisu-section legend,
.erpisu-section h3 { width: auto; margin-bottom: 1rem; font-size: 1.15rem; font-weight: 700; color: var(--color-text-primary); }
.erpisu-mode-switch { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
.erpisu-mode-switch label { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.erpisu-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.erpisu-field-grid label { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; color: var(--color-text-secondary); font-weight: 700; }
.erpisu-field-grid input,
.erpisu-field-grid select,
.erpisu-field-grid textarea { box-sizing: border-box; width: 100%; min-width: 0; color: var(--color-control-text); background: var(--color-control-bg); border: 1px solid var(--color-control-border); border-radius: 0.3rem; padding: 0.65rem; }
.erpisu-field-grid textarea { resize: vertical; }
.erpisu-field-grid--setup { grid-template-columns: minmax(0, 22rem); }
.erpisu-instrument-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.erpisu-shared-summary,
.erpisu-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.erpisu-shared-summary > div,
.erpisu-result-grid > div { min-width: 0; padding: 0.75rem; background: var(--color-surface-muted); border-left: 0.25rem solid var(--color-accent); border-radius: 0.25rem; overflow-wrap: anywhere; }
.erpisu-shared-summary span,
.erpisu-result-grid span { display: block; color: var(--color-text-secondary); font-size: 0.85rem; }
.erpisu-shared-summary strong,
.erpisu-result-grid strong { display: inline-block; margin-top: 0.3rem; font-size: 1.15rem; }
.erpisu-result-grid small { margin-left: 0.25rem; color: var(--color-text-secondary); }
.erpisu-help { margin: 0.75rem 0; color: var(--color-text-secondary); }
.erpisu-instrument-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.erpisu-instrument-cards--paired { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.erpisu-instrument-card { min-width: 0; }
.erpisu-instrument-card__title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.erpisu-instrument-card__title small { color: var(--color-text-secondary); }
.erpisu-chambers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 1rem; margin-top: 1rem; }
.erpisu-chamber { box-sizing: border-box; min-width: 0; margin: 0; padding: 0.85rem; border: 1px solid var(--color-divider); border-radius: 0.35rem; }
.erpisu-chamber h4 { margin-bottom: 0.75rem; font-weight: 700; }
.erpisu-chamber .erpisu-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.erpisu-chamber .erpisu-source-field { grid-column: 1 / -1; }
.erpisu-electret-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin: 0.85rem 0 0; }
.erpisu-electret-summary > div { min-width: 0; padding: 0.65rem; background: var(--color-surface-muted); border-radius: 0.25rem; overflow-wrap: anywhere; }
.erpisu-electret-summary dt { color: var(--color-text-secondary); font-size: 0.8rem; }
.erpisu-electret-summary dd { margin: 0.25rem 0 0; color: var(--color-text-primary); font-size: 1rem; font-weight: 700; }
.erpisu-electret-summary small { color: var(--color-text-secondary); font-size: 0.8em; font-weight: 400; }
.erpisu-results { margin-top: 1rem; }
.erpisu-results .erpisu-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.erpisu-status { display: inline-block; margin-bottom: 0.75rem; padding: 0.45rem 0.75rem; border-radius: 999px; color: var(--color-warning-text); background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); font-weight: 700; }
.erpisu-status[data-status="valid"] { color: var(--color-text-primary); background: var(--color-surface-muted); border-color: var(--color-accent); }
.erpisu-status[data-status="invalid"] { color: var(--color-error-text); background: var(--color-error-bg); border-color: var(--color-error-border); }
.erpisu-validation-help { margin: -0.4rem 0 0.85rem; color: var(--color-text-secondary); line-height: 1.45; }
.erpisu-issues { display: grid; gap: 0.65rem; list-style: none; padding: 0; }
.erpisu-issues li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.65rem; margin: 0; padding: 0.75rem; background: var(--color-surface-muted); border-left: 0.25rem solid var(--color-warning-border); border-radius: 0.25rem; line-height: 1.4; }
.erpisu-issues li > span:last-child { display: grid; gap: 0.2rem; min-width: 0; }
.erpisu-issues li > span:last-child > span { color: var(--color-text-secondary); }
.erpisu-issues li[data-severity="error"] { color: var(--color-error-text); border-left-color: var(--color-error-border); }
.erpisu-issues li[data-severity="warning"] { color: var(--color-warning-text); }
.erpisu-issues li[data-severity="success"] { border-left-color: var(--color-accent); }
.erpisu-issue-badge { display: inline-block; min-width: 4.25rem; padding: 0.2rem 0.45rem; color: var(--color-text-primary); background: var(--color-surface); border: 1px solid currentColor; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-align: center; }

@media screen and (max-width: 980px) {
	.device-method-picker,
	.erpisu-instrument-cards--paired { grid-template-columns: 1fr; }
	.erpisu-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 640px) {
	.fab-container-left { left: 0.25rem; }
	.fab-container-right { right: 0.25rem; }
	.fab-container-left .floating-button,
	.fab-container-right .floating-button { width: 3.25rem; height: 3.25rem; margin: 0.25rem; }
	.erpisu-editor__header { flex-direction: column; }
	.erpisu-field-grid,
	.erpisu-chambers,
	.erpisu-shared-summary,
	.erpisu-result-grid,
	.erpisu-results .erpisu-result-grid { grid-template-columns: 1fr; }
	.erpisu-instrument-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.erpisu-mode-switch { flex-direction: column; }
}
