.utilities #btn_fullscreen { order: 100; display: inline-flex; align-items: center; justify-content: center; }
#fullscreen_status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
header { height: auto; min-height: 57px; flex-wrap: wrap; gap: 10px 16px; padding-block: 10px; }
.title { min-width: 0; }
.utilities { margin-inline-start: auto; }
.utilities .hero-help-link { order: 90; }
.tool-discovery { margin-top: 24px; padding-block: 16px; border-top: 1px solid var(--border); font-size: 13px; }
.tool-discovery p, .tool-discovery ul { margin-top: 10px; max-width: 72ch; }
.utilities .tool-locale-selector select { --hero-control-height: 32px; --hero-control-radius: 6px; --hero-control-bg: #1b202a; --hero-control-text: var(--ink); font-size: 12px; }

.linked-view #error-plot {
  height: 190px;
}

.identity { grid-template-columns: minmax(0, 1.3fr) minmax(70px, .4fr) minmax(100px, .6fr) minmax(0, 1fr) auto; gap: 16px; }

.fret-readout {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.fret-readout > label { flex-direction: row; align-items: center; gap: 8px; }
.fret-readout select { width: 72px; }
.fret-readout strong { font-size: 18px; }
.comparison-insight { margin-top: 14px; font-size: 12px; }
.comparison-insight p { margin-top: 4px; font-size: 11px; }

.action-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; padding: 12px 0; margin-bottom: 16px; border-block: 1px solid var(--border); }
.action-readings > div { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.action-readings span { font-size: 12px; color: var(--muted); }
.action-readings strong { font-size: 16px; white-space: nowrap; }
.action-readings p { grid-column: 1 / -1; margin: 0; font-size: 11px; }

.linked-view .side-view {
  position: relative;
  inset: auto;
  height: 202px;
  margin: 0;
}

.workbench .bench-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 32px;
  height: auto;
  margin-top: 14px;
}

.workbench .attached-height,
.workbench .attached-contact,
.workbench .bench-note {
  position: static;
  width: auto;
  transform: none;
}

.workbench .nut-height { grid-column: 1; grid-row: 1; }
.workbench .relief-height { grid-column: 2; grid-row: 1; }
.workbench .saddle-height { grid-column: 3; grid-row: 1; }
.workbench .nut-contact { grid-column: 1; grid-row: 2; }
.workbench .bench-note { grid-column: 2; grid-row: 2; align-self: center; }
.workbench .saddle-contact { grid-column: 3; grid-row: 2; }

.part-picker { display: flex; gap: 4px; }
.part-picker button { min-height: 44px; min-width: 44px; font-size: 12px; }
.part-picker button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.field-error { font-size: 12px; color: #ffca86; margin-top: 6px; }
input[aria-invalid="true"] { border-color: #ffca86; }
#experiment-status { font-size: 12px; margin: 0 0 12px; }
#experiment-status:empty { display: none; }
.fret-report { margin-top: 14px; padding: 12px; font-size: 12px; }
.fret-report summary { cursor: pointer; }
.fret-table-scroll { overflow-x: auto; }
.fret-report table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fret-report caption { text-align: left; padding-block: 12px; color: var(--muted); }
.fret-report th, .fret-report td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.fret-report th:first-child { text-align: left; }
.fret-report button { min-height: 44px; min-width: 44px; }

.handle-touch-target,
.handle-touch-target:hover {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: none;
  cursor: inherit;
}

@media (max-width: 1000px) {
  .identity { grid-template-columns: minmax(0, 1fr) minmax(70px, .5fr) minmax(100px, .7fr); }
  .identity #reset { grid-column: 3; grid-row: 2; }
  .workbench .bench-stage { column-gap: 16px; }
  .workbench .control-label { align-items: start; flex-direction: column; gap: 5px; }
}

@media (max-width: 760px) {
  .identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .identity .string-choice { grid-column: 1 / -1; grid-row: 1; }
  .identity .tuning-choice { grid-column: 1; grid-row: 2; }
  .identity .scale-choice { grid-column: 2; grid-row: 2; }
  .identity .string-details { grid-column: 1 / -1; grid-row: 3; }
  .identity #reset { grid-column: 1 / -1; grid-row: 4; }
  .action-readings { grid-template-columns: 1fr; }
  .action-readings > div { justify-content: space-between; }
  .fret-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fret-readout > label { grid-column: 1 / -1; }
  .fret-readout .action-metric { padding-top: 8px; }
  .fret-readout strong { font-size: 17px; }
  .workbench .bench-stage { display: flex; gap: 0; }
  .workbench .control-label { align-items: center; flex-direction: row; }
  .workbench .section-heading { flex-wrap: wrap; gap: 10px; }
  .workbench .phone-selection { order: 0; flex-wrap: wrap; gap: 8px; }
  .linked-view #error-plot { height: 178px; }
}
.listening-transport {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0;
}

.note-listening {
  margin: 1rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #303846;
}

#audio-status {
  margin: 0.5rem 0;
}

.bench-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bench-footer .text-button {
  min-height: 44px;
  padding: 0.4rem 0.5rem;
}

.audio-buttons {
  flex-wrap: wrap;
}

.audio-buttons button,
#stop-audio {
  min-height: 44px;
}

#stop-audio {
  flex-shrink: 0;
}
.optimization {
  margin-bottom: 14px;
  padding: 14px 18px;
  font-size: 13px;
}

.optimization summary {
  cursor: pointer;
  font-size: 14px;
}

.optimization p { margin-top: 12px; }
.optimization-range, .optimization-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.optimization button, .optimization select { min-height: 44px; }
.optimization select { min-width: 80px; }
#optimization-proposal { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 4px; }
#optimization-proposal dl { display: flex; flex-wrap: wrap; gap: 16px 28px; }
#optimization-proposal dt { font-size: 12px; color: var(--muted); }
#optimization-proposal dd { margin: 4px 0 0; font-size: 16px; }
#apply-optimization { margin-top: 14px; }
.per-tab-session-reset-confirmation {
  position: fixed;
  z-index: 10000;
  top: 1rem;
  right: 1rem;
  max-width: min(24rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid #e69f00;
  border-radius: 0.5rem;
  background: #161b27;
  color: #f5f7fa;
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 28%);
}
.per-tab-session-reset-confirmation p { margin: 0 0 0.65rem; }
.per-tab-session-reset-confirmation button { min-height: 44px; }
.per-tab-session-reset-confirmation button + button { margin-left: 0.5rem; }