/* Desktop layout. Small-screen additions only style the EQ help disclosures.
   Playback keeps its existing layout and all hidden controls stay hidden. */
html { scrollbar-gutter: stable; }
/* One operation indicator belongs to the whole app, including narrow screens. */
.operation-progress { position: sticky; top: 8px; z-index: 20; margin: 0 0 12px; padding: 10px 14px 12px; border: 1px solid #58663b; border-radius: 9px; background: #1b2218; box-shadow: 0 5px 20px #0006; min-width: 0; }
.operation-progress-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.operation-progress-heading > span:first-child { color: var(--accent); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
#operation-progress-count { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#operation-progress-label { margin: 3px 0 8px; color: var(--text); font-size: 14px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
#operation-progress-bar { height: 5px; overflow: hidden; border-radius: 3px; background: #39422d; }
#operation-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.operation-progress[data-mode="indeterminate"] #operation-progress-fill { width: 30%; }
.operation-progress[data-state="error"] { border-color: #946951; background: #2c211b; }
.operation-progress[data-state="error"] .operation-progress-heading > span:first-child { color: #edba9d; }
.operation-progress[data-state="error"] #operation-progress-fill { background: #d9a17b; }
#operation-progress-dismiss { flex-shrink: 0; min-width: 36px; min-height: 32px; margin: -6px -7px -3px 0; padding: 1px 7px; font-size: 22px; line-height: 1; color: var(--muted); border-color: transparent; background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .operation-progress[data-mode="indeterminate"][data-state="running"] #operation-progress-fill { animation: operation-progress-slide 1.4s ease-in-out infinite alternate; }
  @keyframes operation-progress-slide { from { transform: translateX(-35%); } to { transform: translateX(265%); } }
}
@media (max-width: 720px) {
  .operation-progress { top: 4px; padding: 9px 11px 11px; }
  .operation-progress-heading { gap: 7px; }
  #operation-progress-dismiss { min-width: 44px; min-height: 44px; margin: -10px -8px -7px 0; }
}
#eq-transfer-status:empty { display: none; }
#eq-transfer-status:not(:empty) { position: sticky; top: 12px; z-index: 3; margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--accent); background: #15191e; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
main:has(#operation-progress:not([hidden])) #eq-transfer-status { position: static; }
.eq-profile-details summary { cursor: pointer; min-height: 44px; min-width: 44px; padding: 8px; font-size: 20px; text-align: center; }
.eq-profile-details summary:focus-visible, .eq-state-row summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.eq-profile-details[open] { grid-column: 1 / -1; }
.eq-profile-details #eq-profile-description { margin: 8px 0; }
.eq-profile-details #eq-profile-help { margin: 8px 0 0; }
.eq-toolbar .eq-profile-picker { margin-top: 12px; }
.eq-state-row .eq-read-details { margin: 0; }
.eq-state-row .eq-read-details[open] { flex-basis: 100%; }
@media (min-width: 1100px) {
  main:has(#playback-section[hidden]) {
    max-width: 1440px;
    padding: 12px 24px 20px;
  }
  main:has(#playback-section[hidden]) header {
    flex-wrap: nowrap;
    gap: 26px;
    margin-bottom: 10px;
  }
  main:has(#playback-section[hidden]) header > .title-row {
    order: 0;
    flex: 1;
    margin: 0;
  }
  main:has(#playback-section[hidden]) .title-row h1 {
    font-size: 36px;
    letter-spacing: -.035em;
  }
  main:has(#playback-section[hidden]) .connection {
    display: grid;
    grid-template-columns: minmax(360px, 1.1fr) minmax(210px, 1fr) auto;
    gap: 6px 16px;
    padding-bottom: 8px;
  }
  main:has(#playback-section[hidden]) .connection > div {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  main:has(#playback-section[hidden]) .connection > button { grid-column: 3; grid-row: 1; }
  main:has(#playback-section[hidden]) .connection .settings-read-status { grid-column: 2; grid-row: 1; padding: 6px 10px; }
  main:has(#playback-section[hidden]) .connection-help { grid-column: 1 / -1; grid-row: 2; }
  main:has(#playback-section[hidden]) .connection p { font-size: 13px; }
  main:has(#playback-section[hidden]) .connection:has(#connect[hidden]) .connection-help { display: none; }
  main:has(#playback-section[hidden]) .page-tabs { margin: 0 0 14px; padding-bottom: 6px; }

  :is(#inputs-section, #eq-section, #advanced-section, #measurements-section, #info-section, #service-section),
  :is(#inputs-section, #eq-section, #advanced-section, #measurements-section, #info-section, #service-section) .panel {
    min-width: 0;
  }
  :is(#inputs-section, #eq-section, #advanced-section, #measurements-section, #service-section) .panel { padding: 20px; }
  :is(#inputs-section, #eq-section, #advanced-section, #measurements-section, #service-section) .description { margin: 10px 0 14px; }
  :is(#eq-section, #advanced-section, #measurements-section) .tuning-availability { margin-bottom: 16px; padding: 10px 12px; }
  :is(#inputs-section, #eq-section, #advanced-section, #measurements-section, #service-section) button { max-width: 100%; white-space: normal; }

  /* Three independently editable input assignments share one comparison row. */
  #inputs-section .presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 18px;
  }
  #inputs-section .presets > :not(.preset-row) { grid-column: 1 / -1; }
  #inputs-section .preset-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #15191e;
    align-content: start;
  }
  #inputs-section .preset-info { min-height: 76px; }
  #inputs-section .preset-row button { width: 100%; }
  #inputs-section .presets > .hint { margin-top: 16px; }
  #inputs-section .save-bar { margin-top: 14px; padding-top: 10px; }

  /* Power and listening/lighting remain distinct save scopes, side by side. */
  #advanced-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }
  #advanced-section > .extended-panel { margin-top: 0; }
  #advanced-section .advanced-read { margin-bottom: 16px; gap: 12px; }
  #advanced-section .advanced-read button { flex-shrink: 1; }
  #advanced-section .startup-fields { grid-template-columns: minmax(0, 1fr) minmax(110px, .48fr); gap: 12px 16px; }
  #advanced-section .startup-fields:has(#startup-value-field[hidden]) { grid-template-columns: minmax(0, 1fr); }
  #advanced-section .auto-power { margin-top: 16px; padding-top: 16px; }
  #advanced-section .power-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #advanced-section .extended-group { margin-top: 16px; padding-top: 16px; }
  #advanced-section .extended-channel-field { max-width: none; }
  #advanced-section .extended-offset-grid,
  #advanced-section .extended-lighting-grid { gap: 12px; }
  #advanced-section .tuning-field label { font-size: 13px; }
  #advanced-section .tuning-field .advanced-current { margin-top: 3px; }
  #advanced-section .tuning-actions { gap: 8px; }
  #advanced-section .tuning-actions button { flex: 1 1 180px; }

  /* One EQ graph, with its band editor alongside it. Explicit areas keep
     conditional messages in normal flow instead of overlaying controls. */
  #eq-section .eq-panel {
    padding-top: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    column-gap: 24px;
    align-items: start;
    grid-template-areas:
      "heading heading"
      "availability availability"
      "transfer transfer"
      "toolbar toolbar"
      "state state"
      "warning warning"
      "urgentHelp urgentHelp"
      "graph bandHeading"
      "graph bandFields"
      "graph bandError"
      "graph actions"
      "graph bandHelp"
      "legend bandTools"
      "summary copy"
      "bands copy"
      "editorHelp editorHelp"
      "graphError graphError"
      "writeStatus writeStatus"
      "browser browser";
  }
  #eq-section .eq-panel > * { min-width: 0; }
  #eq-section .eq-panel > .tuning-heading { grid-area: heading; margin-bottom: 4px; }
  #eq-section #eq-availability { grid-area: availability; margin: 0 0 8px; padding: 8px 12px; font-size: 14px; line-height: 1.4; }
  #eq-section .eq-toolbar { grid-area: toolbar; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: start; gap: 24px; }
  #eq-section .eq-topline { align-items: end; gap: 12px; }
  #eq-section .eq-topline > .tuning-field { flex: 1; min-width: 140px; }
  #eq-section .eq-preset-hint { margin: 8px 0; }
  #eq-section #eq-playing-preset { margin: 0; font-size: 13px; }
  #eq-section .eq-state-row { grid-area: state; justify-content: flex-start; margin: 6px 0; gap: 8px 20px; }
  #eq-section #eq-editor-help { grid-area: editorHelp; }
  #eq-section .eq-panel:has(#eq-editor-origin[data-state="unverified"]) #eq-editor-help,
  #eq-section .eq-panel:has(#eq-editor-origin[data-state="dirty"]) #eq-editor-help { grid-area: urgentHelp; margin: 0 0 12px; }
  #eq-section #eq-observed-warning { grid-area: warning; }
  #eq-section .eq-state-row > .eq-read-details { margin: 0 0 0 auto; }
  #eq-section .eq-state-row > .eq-read-details[open] { margin: 0; }
  #eq-section .eq-profile-picker { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 8px; padding: 0; margin: 0; border: 0; background: transparent; }
  #eq-section .eq-profile-details summary { border: 1px solid var(--border); border-radius: 6px; }
  #eq-section #eq-profile-description { font-size: 13px; }
  #eq-section #eq-profile-help { line-height: 1.4; }
  #eq-section .eq-figure { grid-area: graph; margin: 0; align-self: start; }
  #eq-section #eq-graph-status { grid-area: graphError; }
  #eq-section .eq-legend { grid-area: legend; margin-top: 8px; }
  #eq-section #eq-curve-summary { grid-area: summary; margin: 6px 0 8px; }
  #eq-section .eq-bands { grid-area: bands; margin: 8px 0 0; gap: 6px; }
  #eq-section .eq-bands button { min-width: 0; }
  #eq-section .eq-editor-heading { grid-area: bandHeading; margin: 0; padding: 0 0 4px; border-top: 0; border-bottom: 1px solid var(--border); }
  #eq-section .eq-fields { grid-area: bandFields; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 0; gap: 10px; }
  #eq-section #eq-error { grid-area: bandError; }
  #eq-section #eq-field-help { grid-area: bandHelp; margin: 10px 0; font-size: 13px; }
  #eq-section .eq-tools { grid-area: bandTools; margin: 8px 0; gap: 8px; }
  #eq-section .eq-tools button { flex: 1 1 110px; padding: 9px 10px; }
  #eq-section .eq-copy-row { grid-area: copy; margin: 8px 0; padding-top: 12px; gap: 8px; }
  #eq-section .eq-copy-row > .tuning-field { min-width: 140px; }
  #eq-section .eq-panel > .tuning-actions { grid-area: actions; margin: 8px 0 0; padding-top: 8px; gap: 8px; }
  #eq-section .eq-panel > .tuning-actions button { flex: 1 1 150px; }
  #eq-section #eq-write-status { grid-area: writeStatus; }
  #eq-section #eq-transfer-status { grid-area: transfer; }
  #eq-section .eq-read-details:has(#eq-save-local) { grid-area: browser; margin: 12px 0 0; }

  /* Preparation steps can be read together; measured curves keep full width. */
  #measurements-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
  #measurements-section > :not(.panel) { grid-column: 1 / -1; }
  #measurements-section .measurement-setup { grid-column: 1; }
  #measurements-section .measurement-level { grid-column: 2; }
  #measurements-section .measurement-result { grid-column: 1 / -1; }
  #measurements-section .measurement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
  #measurements-section .measurement-grid > button { width: 100%; }
  #measurements-section .measurement-intro { margin-bottom: 0; }
  #measurements-section .measurement-figure { max-width: 960px; margin: 20px auto 12px; }
  #measurements-section .measurement-result > .measurement-grid { grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr); }
  #measurements-section .measurement-result > .measurement-grid > button { justify-self: end; width: auto; }
  #measurements-section .measurement-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

  /* Device values are information cards, rather than a tiny strip of text. */
  #info-section .device-info { margin: 0; padding: 20px; background: var(--panel); border-color: var(--border); border-radius: 10px; }
  #info-section .device-info h2 { font-size: 17px; color: var(--text); }
  #info-section .device-info button { min-height: 44px; padding: 9px 14px; font-size: 14px; }
  #info-section .device-info dl { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
  #info-section .device-info dl > div { padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: #15191e; }
  #info-section .device-info dt { font-size: 13px; }
  #info-section .device-info dd { font-size: 17px; margin-top: 10px; }
  #info-section .device-info p { font-size: 13px; margin-top: 14px; max-width: 90ch; }

  /* Service preserves the read/draft distinction while using both columns. */
  #service-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    align-items: start;
    grid-template-areas:
      "heading heading"
      "read protection"
      "range protection"
      ". protectionStatus"
      "system system"
      "systemStatus systemStatus"
      "noise hardware"
      "support support";
  }
  #service-content > * { min-width: 0; }
  #service-content > .service-content-heading { grid-area: heading; margin: 20px 0 4px; }
  #service-content > .service-limiter-readout { grid-area: read; margin-bottom: 0; }
  #service-content > .service-range-note { grid-area: range; margin: 0; }
  #service-fields { grid-area: protection; }
  #service-status { grid-area: protectionStatus; }
  #service-system-fields {
    grid-area: system;
    display: grid;
    grid-template-columns: minmax(240px, .75fr) minmax(0, 2fr);
    gap: 0 24px;
    margin-top: 12px;
  }
  #service-system-fields > legend,
  #service-system-fields > p,
  #service-system-fields > .tuning-actions { grid-column: 1 / -1; }
  #service-system-fields > .service-group:has(#service-role) { grid-column: 1; }
  #service-system-fields > .service-group:has(#service-slave-title) { grid-column: 2; }
  #service-system-fields .extended-channel-field { max-width: none; }
  #service-system-status { grid-area: systemStatus; }
  #service-content > .service-noise { grid-area: noise; margin-top: 12px; }
  #service-content > .service-hardware { grid-area: hardware; margin-top: 12px; }
  #service-content > .service-support { grid-area: support; }
  #service-section .service-global-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  #service-section .service-slave-grid { gap: 12px; }
  #service-section .service-slave-preset { padding: 12px; }
  #service-section .service-output-heading { flex-wrap: wrap; }
  #service-section .service-limiter-table-wrap { min-width: 0; }
  #service-section #service-limiter-observed-table { table-layout: fixed; }
  #service-section #service-limiter-observed-table th,
  #service-section #service-limiter-observed-table td { min-width: 0; max-width: none; padding: 10px 5px; overflow-wrap: anywhere; }
}