/*
 * Shared viewport and pane geometry.
 *
 * Theme styles load in the later sdsctl-managed-theme layer (or, for trusted
 * built-ins, outside a layer). Important declarations in this first layer win
 * over either form, including theme-authored !important declarations. Keep
 * visual tokens, colors, borders, shadows, and decorative positioning out of
 * this contract so themes retain presentation ownership.
 */
@layer sdsctl-viewport-contract, sdsctl-shared, sdsctl-managed-theme;

@layer sdsctl-viewport-contract {
  /* Native display navigation uses the same controls, moved rather than copied. */
  .native-menu-heading {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    min-width: 0 !important;
  }

  .native-access-label,
  .native-view-title,
  .native-summary,
  .native-details {
    display: none !important;
  }

  #native-menu:not([open]) { display: none !important; }
  #native-menu[open] {
    display: block !important;
    position: fixed !important;
    inset: 0.5rem auto auto 0.5rem !important;
    width: min(23rem, calc(100vw - 1rem)) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    margin: 0 !important;
    padding: 0.85rem !important;
    overflow: auto !important;
  }
  #native-menu .native-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
  }
  #native-menu :is(.native-menu-views, .native-menu-appearance):not([hidden]) {
    display: grid !important;
    gap: 0.5rem !important;
  }
  #native-menu :is(.theme-picker, .system-palette-picker):not([hidden]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    text-align: left !important;
    gap: 0.25rem !important;
  }
  #native-menu :is(button, select),
  #native-menu-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
    max-width: 100% !important;
    padding: 0.5rem 0.65rem !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
  #native-menu :is(p, label) { font-size: 0.9rem !important; }
  #native-menu h2 { font-size: 1.1rem !important; }
  #native-menu h3 { font-size: 1rem !important; }

  html[data-kiosk-compact="true"] .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 0 0.5rem !important;
    padding: 0.25rem !important;
  }
  html[data-kiosk-compact="true"] .site-header .brand {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }
  html[data-kiosk-compact="true"] .brand h1 { font-size: 1.1rem !important; }
  html[data-kiosk-compact="true"] :is(.brand .eyebrow, .brand .subtitle, .header-actions, .workspace-tabs) {
    display: none !important;
  }
  html[data-kiosk-compact="true"] .site-header > .status-badge {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0.15rem 0.5rem !important;
    min-height: 0 !important;
    font-size: 0.85rem !important;
  }
  html[data-kiosk-compact="true"] .native-access-label {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    text-align: center !important;
    font-size: 0.75rem !important;
  }
  html[data-kiosk-compact="true"] #native-session-status { display: none !important; }
  html[data-kiosk-compact="true"][data-session-state="login-required"] #native-session-status {
    display: block !important;
    font-size: 0.9rem !important;
    padding: 0.4rem !important;
  }
  html[data-kiosk-compact="true"] .overview {
    display: block !important;
    padding: 0 !important;
  }
  html[data-kiosk-compact="true"] .overview > div,
  html[data-kiosk-compact="true"][data-connection-state="online"] .overview {
    display: none !important;
  }
  html[data-kiosk-compact="true"] .dashboard-message {
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 0.85rem !important;
  }
  html[data-kiosk-compact="true"] .dashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
  }
  html[data-kiosk-compact="true"] .workspace-shell {
    flex: 1 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  html[data-kiosk-compact="true"] .native-view-title {
    display: block !important;
    margin: 0 !important;
    padding: 0.15rem 0.4rem !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }
  html[data-kiosk-compact="true"] :is(#radio-activity-panel, .waterfall-panel) {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    overflow-y: auto !important;
    padding: 0.4rem !important;
  }
  html[data-kiosk-compact="true"] :is(#radio-activity-panel, .waterfall-panel) > * {
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }
  html[data-kiosk-compact="true"] .scanner-display-hierarchy {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 0.4rem !important;
    gap: 0.6rem !important;
  }
  html[data-kiosk-compact="true"] .scanner-display-hierarchy dd {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
  }
  html[data-kiosk-compact="true"] .native-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;
    margin: 0 !important;
  }
  html[data-kiosk-compact="true"] :is(.native-summary, .scanner-display-hierarchy) dt {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }
  html[data-kiosk-compact="true"] .native-summary dd {
    margin: 0 !important;
    font-size: 0.9rem !important;
    overflow-wrap: anywhere !important;
  }
  html[data-kiosk-compact="true"] .native-details {
    display: block !important;
  }
  html[data-kiosk-compact="true"] .native-details > summary {
    min-height: 44px !important;
    padding: 0.65rem !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
  }
  html[data-kiosk-compact="true"] .native-details-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
  }
  html[data-kiosk-compact="true"] .native-details-content > * {
    grid-area: auto !important;
    min-width: 0 !important;
  }
  html[data-kiosk-compact="true"] .native-details-content :is(.radio-field-list, .waterfall-telemetry) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html[data-kiosk-compact="true"] .native-details-content :is(dt, dd, p, output, button, select) {
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html[data-kiosk-compact="true"] .native-details-content .waterfall-telemetry > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html[data-kiosk-compact="true"] .native-details-content :is(button, select) {
    min-height: 44px !important;
  }
  html[data-kiosk-compact="true"] .waterfall-header {
    display: block !important;
  }
  html[data-kiosk-compact="true"] .waterfall-header > div:first-child { display: none !important; }
  html[data-kiosk-compact="true"] .waterfall-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
  }
  html[data-kiosk-compact="true"] .waterfall-controls :is(button, select) {
    min-height: 44px !important;
    font-size: 0.85rem !important;
    padding: 0.35rem !important;
  }
  html[data-kiosk-compact="true"] .waterfall-panel > .waterfall-visuals {
    flex: 1 0 9.75rem !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(3.5rem, 0.4fr) minmax(5.5rem, 0.6fr) !important;
  }
  html[data-kiosk-compact="true"] .waterfall-panel :is(.waterfall-status, .waterfall-plot figcaption) {
    font-size: 0.75rem !important;
  }
  /* At high zoom, preserve readable content via scrolling rather than clipping. */
  @media (max-height: 27.99rem) {
    html[data-kiosk-compact="true"] .dashboard,
    html[data-kiosk-compact="true"] .workspace-shell {
      display: block !important;
      height: auto !important;
      overflow: visible !important;
    }
  }

  html[data-access-mode="display"] :is(
    #pane-tab-controls, #pane-tab-audio, #pane-tab-recordings,
    #pane-controls, #pane-audio, #pane-recordings
  ) {
    display: none !important;
  }

  #native-session-status {
    grid-column: 1 / -1 !important;
  }

  #native-session-status form {
    display: inline !important;
  }

  :root {
    --content-width: 96rem !important;
    --workspace-gap: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
    --pane-padding: clamp(0.55rem, 1.35vmin, 1.15rem) !important;
  }

  html {
    height: 100% !important;
    overflow: hidden !important;
  }

  body {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  [hidden] {
    display: none !important;
  }

  .workspace-pane[hidden],
  .radio-field-group[hidden] {
    display: none !important;
  }

  .site-header,
  .dashboard,
  .site-footer {
    width: min(calc(100% - clamp(0.75rem, 2.4vw, 2rem)), 96rem) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
    padding: clamp(0.35rem, 1.2vh, 0.85rem) !important;
  }

  /* Keep compact content inside the built-in LCARS decorative edges. */
  :root[data-theme="lcars"] .site-header {
    padding-left: 2.2rem !important;
  }

  :root[data-theme="lcars"] .panel-header {
    /* Compact recordings otherwise reset this to zero beneath the end caps. */
    margin-right: 4.2rem !important;
  }

  .brand,
  .overview > div,
  .workspace-tabs,
  .radio-view-controls,
  .radio-view-controls [role="group"],
  .scanner-display-hierarchy,
  .scanner-display-row,
  .scanner-display-hierarchy > div,
  .primary-value,
  .secondary-value,
  .scanner-display-value,
  .scanner-display-hierarchy dd,
  .radio-summary,
  .radio-summary > div,
  .radio-field-groups,
  .radio-field-group,
  .radio-field-list,
  .radio-field-list > div,
  .scanner-control-group,
  .scanner-hold-grid,
  .scanner-hold-scope,
  .scanner-hold-current,
  .scanner-hold-current-value,
  .scanner-hold-action,
  .waterfall-panel,
  .waterfall-header,
  .waterfall-controls,
  .waterfall-visuals,
  .waterfall-telemetry,
  .waterfall-raw,
  .recording-list,
  .recording-item {
    min-width: 0 !important;
  }

  .brand h1,
  .subtitle,
  .overview h2,
  .dashboard-message,
  .workspace-tabs [role="tab"],
  .radio-view-controls button,
  .recordings-pagination button,
  .panel h2,
  .panel-subsection-header h2,
  .recording-library-header h2,
  .status-list dt,
  .status-list dd,
  .audio-playback-status,
  .scanner-control-status,
  .recording-status,
  .recordings-message,
  .recording-item-details strong,
  .recording-item-meta,
  .site-footer p {
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .primary-value,
  .secondary-value,
  .scanner-display-value,
  .scanner-display-hierarchy dd {
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    font-size: clamp(0.82rem, 2.15vmin, 1.25rem) !important;
    line-height: 1.08 !important;
  }

  .scanner-display-hierarchy .secondary-value {
    min-height: 0 !important;
  }

  .radio-summary dt,
  .radio-summary dd {
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .radio-field-list dt,
  .radio-field-list dd {
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    font-size: clamp(0.7rem, 1.25vmin, 0.8rem) !important;
    line-height: 1.1 !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    flex: 0 0 auto !important;
    gap: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
  }

  .site-header > .status-badge {
    justify-self: center !important;
  }

  .dashboard {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding-bottom: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
    overflow: hidden !important;
  }

  .dashboard > noscript {
    position: absolute !important;
    z-index: 6 !important;
    inset: clamp(3rem, 12vh, 7rem) var(--pane-padding) auto !important;
  }

  html[data-access-mode] .dashboard {
    /* The native session banner is an additional content-sized row. */
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  .overview {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: end !important;
    min-width: 0 !important;
    gap: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
    margin: 0 !important;
    padding-bottom: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
  }

  .dashboard-message {
    justify-self: end !important;
    max-width: 48% !important;
  }

  :root[data-theme]:not([data-theme="system"]) .overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-theme]:not([data-theme="system"]) .dashboard-message {
    grid-column: 2 !important;
    max-width: 100% !important;
  }

  .workspace-shell {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    gap: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
    overflow: hidden !important;
  }

  .workspace-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: clamp(0.2rem, 0.8vw, 0.55rem) !important;
  }

  .workspace-tabs-with-home-assistant {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .workspace-tabs [role="tab"] {
    min-width: 0 !important;
    min-height: 2.2rem !important;
    padding: clamp(0.32rem, 0.8vmin, 0.55rem) clamp(0.2rem, 1vw, 0.8rem) !important;
  }

  .workspace-deck.dashboard-grid {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .workspace-pane {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .workspace-pane button {
    min-width: 0 !important;
    min-height: 1.9rem !important;
    padding: clamp(0.28rem, 0.7vmin, 0.48rem) clamp(0.28rem, 0.8vw, 0.65rem) !important;
    border-width: 1px !important;
    border-radius: var(--radius-small) !important;
    font-size: clamp(0.62rem, 1.35vmin, 0.78rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }

  .workspace-pane > .panel,
  .recordings-layout > .panel,
  .diagnostics-layout > .panel {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .diagnostics-layout > .panel {
    grid-area: auto !important;
  }

  .panel {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: clamp(0.55rem, 1.35vmin, 1.15rem) !important;
    overflow: hidden !important;
  }

  #pane-home-assistant > .home-assistant-integration-panel {
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
    overscroll-behavior: contain !important;
  }

  .waterfall-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto !important;
    gap: clamp(0.25rem, 0.8vmin, 0.65rem) !important;
  }

  .waterfall-panel:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
  }

  .waterfall-header,
  .waterfall-controls,
  .waterfall-raw {
    display: flex !important;
    align-items: center !important;
  }

  .waterfall-header {
    justify-content: space-between !important;
    gap: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
  }

  .waterfall-controls {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  .waterfall-visuals {
    display: grid !important;
    grid-template-rows: minmax(5rem, 0.38fr) minmax(7rem, 0.62fr) !important;
    min-height: 0 !important;
  }

  .waterfall-plot {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .waterfall-plot canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .waterfall-telemetry {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .waterfall-telemetry > div {
    display: grid !important;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) !important;
    min-width: 0 !important;
  }

  .waterfall-raw output {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .waterfall-status,
  .waterfall-disclaimer,
  .waterfall-telemetry dt,
  .waterfall-telemetry dd {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #radio-activity-panel {
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
    gap: clamp(0.25rem, 0.85vmin, 0.7rem) !important;
  }

  #radio-activity-panel .panel-header {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: var(--space-3) !important;
  }

  .radio-view-controls {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
  }

  .radio-view-controls [role="group"] {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    flex: 1 1 auto !important;
    gap: clamp(0.15rem, 0.55vw, 0.4rem) !important;
  }

  .radio-scan-fallback {
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 0.15rem !important;
  }

  .scanner-display-hierarchy {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .scanner-display-row,
  .scanner-display-hierarchy > div {
    display: grid !important;
    align-content: center !important;
    gap: 0.1rem !important;
    padding: clamp(0.3rem, 0.85vmin, 0.65rem) !important;
  }

  .radio-summary {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    margin: 0 !important;
  }

  .radio-summary > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    gap: 0.08rem !important;
    padding: clamp(0.2rem, 0.55vmin, 0.45rem) !important;
  }

  .radio-field-groups {
    display: grid !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .radio-field-group {
    min-height: 0 !important;
    padding: clamp(0.3rem, 0.85vmin, 0.7rem) !important;
    overflow: hidden !important;
  }

  .radio-field-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)) !important;
    gap: 0 clamp(0.35rem, 1.2vmin, 0.9rem) !important;
  }

  .scanner-controls-panel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    align-content: start !important;
    gap: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
  }

  .scanner-controls-panel > .panel-header,
  .scanner-control-status,
  .scanner-connection-actions {
    grid-column: 1 / -1 !important;
  }

  .scanner-hold-group {
    grid-column: 1 / -1 !important;
  }

  .scanner-hold-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.25rem, 0.75vmin, 0.6rem) !important;
  }

  .scanner-hold-scope {
    overflow: hidden !important;
  }

  .scanner-hold-current {
    padding: clamp(0.25rem, 0.7vmin, 0.55rem) clamp(0.35rem, 0.9vmin, 0.75rem) !important;
  }

  .scanner-hold-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 0.8fr) minmax(0, 0.55fr) !important;
    align-items: center !important;
    gap: clamp(0.25rem, 0.75vmin, 0.6rem) !important;
    padding: clamp(0.25rem, 0.7vmin, 0.55rem) !important;
  }

  .scanner-hold-action button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .browser-audio-panel {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    align-content: start !important;
    max-width: 62rem !important;
    margin-inline: auto !important;
  }

  .browser-audio-panel .status-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 clamp(0.35rem, 1.2vmin, 0.9rem) !important;
  }

  .recordings-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
    overflow: hidden !important;
  }

  .recording-capture-panel,
  .recording-library-panel {
    display: grid !important;
    grid-area: auto !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .recording-telemetry {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    gap: 0 clamp(0.35rem, 1.2vmin, 0.9rem) !important;
  }

  .recording-library-panel .recording-library {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .recording-list {
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .recording-item {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .recording-item-actions {
    flex: 0 0 auto !important;
  }

  .recordings-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .diagnostics-layout,
  #pane-diagnostics > .scanner-panel {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .scanner-panel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0 clamp(0.35rem, 1.2vmin, 0.9rem) !important;
  }

  .scanner-panel > .panel-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .scanner-panel > .status-list {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .scanner-panel > .panel-subsection {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }

  .site-footer {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: clamp(0.35rem, 1.2vmin, 0.9rem) !important;
    overflow: hidden !important;
  }

  @media (max-width: 44rem) and (min-height: 28rem) {
    .overview {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .overview > :first-child {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }

    .system-palette-picker {
      display: grid !important;
      grid-column: 1 / -1 !important;
      grid-row: 2 !important;
      grid-template-columns: auto minmax(7rem, 11rem) !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 0 !important;
    }

    .system-palette-picker[hidden] {
      display: none !important;
    }

    .system-palette-picker select {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }

    .dashboard-message {
      grid-column: 2 !important;
      grid-row: 1 !important;
      max-width: 100% !important;
    }

    .site-header {
      align-items: center !important;
    }

    .workspace-tabs {
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .workspace-tabs [role="tab"] {
      min-height: 2.05rem !important;
      padding-inline: 0.12rem !important;
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: normal !important;
    }

    .workspace-tabs [role="tab"]:nth-child(-n + 3) {
      grid-column: span 2 !important;
    }

    .workspace-tabs [role="tab"]:nth-child(n + 4) {
      grid-column: span 3 !important;
    }

    .workspace-tabs-with-home-assistant {
      grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    .workspace-tabs-with-home-assistant [role="tab"]:nth-child(-n + 4) {
      grid-column: span 3 !important;
    }

    .workspace-tabs-with-home-assistant [role="tab"]:nth-child(n + 5) {
      grid-column: span 4 !important;
    }

    .waterfall-header {
      align-items: stretch !important;
      flex-direction: column !important;
    }

    .waterfall-controls {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .waterfall-history-control {
      grid-column: 1 / -1 !important;
    }

    .waterfall-telemetry {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .radio-view-controls {
      align-items: stretch !important;
      flex-direction: column !important;
      gap: 0.25rem !important;
    }

    .radio-scan-fallback {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }

    .scanner-display-hierarchy {
      grid-template-columns: 1fr !important;
    }

    .scanner-display-row,
    .scanner-display-hierarchy > div {
      grid-template-columns: minmax(4.5rem, 0.45fr) minmax(0, 1fr) !important;
      align-items: baseline !important;
      padding-block: 0.22rem !important;
    }

    .radio-field-list {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .radio-field-list dt,
    .radio-field-list dd {
      line-height: 1 !important;
    }

    .radio-field-group {
      padding-block: 0.2rem !important;
    }

    .recording-item {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      gap: 0 0.2rem !important;
      padding: 0.1rem !important;
    }

    .recording-item-details {
      display: contents !important;
    }

    .recording-item-details strong {
      grid-column: 1 / -1 !important;
      grid-row: 1 !important;
    }

    .recording-item-meta {
      grid-column: 1 !important;
      grid-row: 2 !important;
      font-size: 0.62rem !important;
      line-height: 1 !important;
    }

    .recording-item-actions {
      grid-column: 2 !important;
      grid-row: 2 !important;
      width: auto !important;
      flex-wrap: nowrap !important;
    }

    .recording-action {
      min-width: 3.5rem !important;
      min-height: 1.35rem !important;
      padding: 0.08rem 0.25rem !important;
      line-height: 1 !important;
    }

    .scanner-controls-panel {
      grid-template-columns: 1fr !important;
    }

    .scanner-controls-panel > .panel-header,
    .scanner-control-status,
    .scanner-connection-actions {
      grid-column: 1 !important;
    }

    .scanner-hold-grid {
      grid-template-columns: 1fr !important;
      gap: 0.2rem !important;
    }

    .scanner-hold-current {
      padding: 0.18rem 0.35rem !important;
    }

    .scanner-hold-current-label {
      font-size: 0.58rem !important;
      line-height: 1 !important;
    }

    .scanner-hold-current-value {
      margin-top: 0.08rem !important;
      overflow: visible !important;
      font-size: 0.7rem !important;
      line-height: 1.05 !important;
      text-overflow: clip !important;
      overflow-wrap: normal !important;
      white-space: nowrap !important;
    }

    .scanner-hold-action {
      gap: 0.2rem !important;
      padding: 0.18rem !important;
    }

    .scanner-hold-action button {
      min-height: 1.55rem !important;
      padding: 0.15rem 0.3rem !important;
      font-size: 0.65rem !important;
      line-height: 1 !important;
    }

    .scanner-hold-state {
      min-width: 4.5rem !important;
      padding: 0.12rem 0.3rem !important;
      font-size: 0.62rem !important;
      line-height: 1 !important;
    }

    .recordings-layout {
      grid-template-columns: 1fr !important;
      grid-template-rows: minmax(0, 0.7fr) minmax(0, 1.3fr) !important;
    }

    .recordings-layout > .panel {
      padding: 0.35rem !important;
    }

    .recording-capture-panel .panel-header,
    .recording-library-panel .panel-header {
      margin-right: 0 !important;
    }

    .recording-library-header {
      align-items: center !important;
      flex-direction: row !important;
    }

    .recording-capture-panel .panel-header,
    .recording-library-header > div {
      display: flex !important;
      align-items: baseline !important;
      gap: 0.4rem !important;
    }

    .recording-capture-panel .panel-kicker,
    .recording-library-header .panel-kicker {
      margin-bottom: 0 !important;
    }

    .recording-telemetry {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .recording-telemetry > div {
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: start !important;
      gap: 0.15rem !important;
      padding-block: 0 !important;
    }

    .recording-telemetry dt,
    .recording-telemetry dd {
      font-size: 0.6rem !important;
      line-height: 1 !important;
    }

    .recording-status,
    .recordings-message {
      margin-block: 0 !important;
    }

    .recording-controls button {
      min-height: 1.5rem !important;
      padding-block: 0.1rem !important;
    }

    .recording-list {
      gap: 0.1rem !important;
      margin-top: 0.1rem !important;
    }

    .recordings-message {
      margin-block: 0.1rem !important;
    }

    .recordings-pagination button {
      padding-block: 0.16rem !important;
    }

    .saved-playback audio {
      height: 1.7rem !important;
    }

    .scanner-panel {
      grid-template-columns: 1fr !important;
      grid-template-rows: auto auto auto !important;
    }

    .scanner-panel > .panel-header,
    .scanner-panel > .status-list,
    .scanner-panel > .panel-subsection {
      grid-column: 1 !important;
    }

    .scanner-panel > .panel-header {
      grid-row: 1 !important;
    }

    .scanner-panel > .status-list {
      grid-row: 2 !important;
    }

    .scanner-panel > .panel-subsection {
      grid-row: 3 !important;
    }

    .workspace-pane button {
      min-height: 1.55rem !important;
      padding: 0.15rem 0.3rem !important;
      font-size: 0.68rem !important;
      line-height: 1.05 !important;
    }
  }

  @media (max-width: 26rem) and (min-height: 28rem) {
    .site-header {
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      column-gap: 0.4rem !important;
      row-gap: 0.3rem !important;
    }

    .site-header .brand {
      grid-column: 1 / -1 !important;
      grid-row: 1 !important;
      width: 100% !important;
    }

    .site-header .brand .subtitle {
      display: none !important;
    }

    .site-header .brand h1 {
      overflow-wrap: normal !important;
      white-space: nowrap !important;
      font-size: clamp(1.2rem, 6vw, 1.5rem) !important;
    }

    .site-header > .status-badge {
      grid-column: 1 !important;
      grid-row: 2 !important;
      justify-self: center !important;
    }

    .site-header .header-actions {
      grid-column: 2 !important;
      grid-row: 2 !important;
      width: 100% !important;
      justify-self: stretch !important;
    }

    .site-header .theme-picker {
      width: 100% !important;
      justify-items: stretch !important;
    }

    .site-header .theme-picker label {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .site-header .theme-picker select {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
    }
  }

  @media (max-height: 38rem) and (min-height: 28rem) {
    .site-header {
      padding-block: 0.25rem !important;
    }

    .overview {
      padding-bottom: 0.25rem !important;
    }

    .workspace-shell {
      gap: 0.25rem !important;
    }

    .workspace-tabs [role="tab"] {
      min-height: 1.8rem !important;
      padding-block: 0.2rem !important;
    }

    .panel {
      padding: 0.45rem !important;
    }

    .scanner-hold-grid {
      gap: 0.2rem !important;
    }

    .scanner-hold-group {
      padding: 0.25rem !important;
    }

    .scanner-hold-group h3 {
      margin-bottom: 0.2rem !important;
      font-size: 0.7rem !important;
      line-height: 1 !important;
    }

    .scanner-hold-current {
      padding: 0.15rem 0.3rem !important;
    }

    .scanner-hold-current-label {
      font-size: 0.55rem !important;
      line-height: 1 !important;
    }

    .scanner-hold-current-value {
      margin-top: 0.05rem !important;
      overflow: visible !important;
      font-size: 0.66rem !important;
      line-height: 1 !important;
      text-overflow: clip !important;
      overflow-wrap: normal !important;
      white-space: nowrap !important;
    }

    .scanner-hold-action {
      gap: 0.15rem !important;
      padding: 0.12rem !important;
    }

    .scanner-hold-action button {
      min-height: 1.35rem !important;
      padding: 0.08rem 0.2rem !important;
      font-size: 0.6rem !important;
      line-height: 1 !important;
    }

    .scanner-hold-state {
      min-width: 4.2rem !important;
      padding: 0.08rem 0.2rem !important;
      font-size: 0.58rem !important;
      line-height: 1 !important;
    }

    .radio-view-controls button,
    .scanner-display-row,
    .scanner-display-hierarchy > div,
    .radio-summary > div,
    .radio-field-group {
      padding-block: 0.2rem !important;
    }

    .radio-field-list dt,
    .radio-field-list dd {
      line-height: 1 !important;
    }

    .workspace-pane button {
      min-height: 1.35rem !important;
      padding: 0.08rem 0.2rem !important;
      font-size: 0.6rem !important;
      line-height: 1 !important;
    }
  }

  @media (min-width: 44.01rem) and (max-height: 38rem) and (min-height: 28rem) {
    .overview h2 {
      padding-top: 0.15rem !important;
    }

    #radio-activity-panel {
      grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr) !important;
      grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    }

    #radio-activity-panel > .panel-header,
    #radio-activity-panel > .radio-view-controls {
      grid-column: 1 / -1 !important;
    }

    #radio-activity-panel > .scanner-display-hierarchy {
      grid-column: 1 !important;
      grid-row: 3 !important;
    }

    #radio-activity-panel > .radio-summary {
      grid-column: 1 !important;
      grid-row: 4 !important;
    }

    #radio-activity-panel > .radio-field-groups {
      grid-column: 2 !important;
      grid-row: 3 / 5 !important;
    }

    #radio-activity-panel[data-active-radio-group="none"]
      > .scanner-display-hierarchy,
    #radio-activity-panel[data-active-radio-group="none"] > .radio-summary {
      grid-column: 1 / -1 !important;
    }

    .recording-list {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-template-rows: minmax(0, 1fr) !important;
    }

    .recording-item {
      align-items: stretch !important;
      flex-direction: column !important;
    }

    .waterfall-panel {
      grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.42fr) !important;
      grid-template-rows: auto auto minmax(0, 1fr) auto auto auto !important;
    }

    .waterfall-header,
    .waterfall-status,
    .waterfall-pointer-frequency,
    .waterfall-disclaimer,
    .waterfall-raw {
      grid-column: 1 / -1 !important;
    }

    .waterfall-visuals {
      grid-column: 1 !important;
      grid-row: 3 !important;
    }

    .waterfall-telemetry {
      grid-column: 2 !important;
      grid-row: 3 !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .waterfall-pointer-frequency {
      grid-row: 4 !important;
    }

    .waterfall-telemetry > div {
      grid-template-columns: max-content minmax(0, 1fr) !important;
    }

    .waterfall-telemetry dt,
    .waterfall-telemetry dd {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      overflow-wrap: normal !important;
      white-space: nowrap !important;
    }
  }

  /* At enlarged text or browser zoom, reachability overrides no-scroll. */
  @media (max-height: 27.99rem), (max-width: 21.99rem) {
    html {
      height: auto !important;
      overflow: auto !important;
    }

    body {
      display: block !important;
      height: auto !important;
      min-height: 100dvh !important;
      overflow: visible !important;
    }

    .site-header,
    .dashboard,
    .site-footer {
      overflow: visible !important;
    }

    .site-header,
    .overview,
    .site-footer {
      align-items: stretch !important;
      flex-direction: column !important;
    }

    .overview {
      display: flex !important;
    }

    .system-palette-picker {
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) !important;
      align-items: center !important;
      justify-content: stretch !important;
      text-align: left !important;
    }

    .system-palette-picker[hidden] {
      display: none !important;
    }

    .system-palette-picker select {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }

    .site-header {
      display: flex !important;
    }

    .header-actions {
      align-items: stretch !important;
      justify-content: flex-start !important;
      justify-self: auto !important;
    }

    .dashboard,
    .workspace-shell {
      display: block !important;
    }

    .workspace-shell {
      overflow: visible !important;
    }

    .dashboard-message {
      max-width: none !important;
      text-align: left !important;
      white-space: normal !important;
    }

    .workspace-tabs {
      position: sticky !important;
      z-index: 5 !important;
      top: 0 !important;
    }

    .workspace-deck.dashboard-grid,
    .workspace-pane,
    .workspace-pane > .panel,
    .recordings-layout,
    .recordings-layout > .panel {
      height: auto !important;
      min-height: 0 !important;
      overflow: visible !important;
    }

    #pane-home-assistant > .home-assistant-integration-panel {
      height: auto !important;
      overflow: visible !important;
    }

    .recordings-layout {
      grid-template-columns: 1fr !important;
    }

    .scanner-display-row,
    .scanner-display-hierarchy > div {
      grid-template-columns: 1fr !important;
    }

    .scanner-display-hierarchy {
      grid-template-columns: 1fr !important;
    }

    .scanner-hold-action {
      grid-template-columns: 1fr !important;
    }

    .scanner-hold-state {
      width: 100% !important;
    }

    .scanner-panel {
      grid-template-columns: 1fr !important;
      grid-template-rows: auto auto auto !important;
    }

    .scanner-panel > .panel-header,
    .scanner-panel > .status-list,
    .scanner-panel > .panel-subsection {
      grid-column: 1 !important;
    }

    .scanner-panel > .panel-header {
      grid-row: 1 !important;
      margin-right: 0 !important;
    }

    .scanner-panel > .status-list {
      grid-row: 2 !important;
    }

    .scanner-panel > .panel-subsection {
      grid-row: 3 !important;
      margin-top: 0.25rem !important;
      padding: 0.25rem 0 0 !important;
      border-left: 0 !important;
    }

    .recording-library-panel .recording-library,
    .recording-list {
      height: auto !important;
      grid-template-rows: none !important;
      overflow: visible !important;
    }

    .recording-item,
    .saved-playback {
      height: auto !important;
      overflow: visible !important;
    }

    .saved-playback audio {
      width: 100% !important;
      max-width: 100% !important;
    }

    .radio-field-groups,
    .radio-field-group {
      overflow: visible !important;
    }
  }

  /*
   * Forced-color presentation is part of the shared accessibility contract.
   * Keep this in the first cascade layer so built-in and managed themes cannot
   * leave author colors or text fill on browser-supplied system surfaces.
   */
  @media (forced-colors: active) {
    :root {
      color-scheme: light dark !important;
      --background: Canvas !important;
      --surface: Canvas !important;
      --surface-emphasis: Canvas !important;
      --text: CanvasText !important;
      --muted: CanvasText !important;
      --border: CanvasText !important;
      --accent: LinkText !important;
      --accent-strong: Highlight !important;
      --success: CanvasText !important;
      --warning: CanvasText !important;
      --danger: CanvasText !important;
      --focus: Highlight !important;
      --waterfall-background: Canvas !important;
      --waterfall-grid: CanvasText !important;
      --waterfall-spectrum: LinkText !important;
      --waterfall-marker: Highlight !important;
      --waterfall-history: LinkText !important;
      --waterfall-pointer: Highlight !important;
    }

    body,
    body * {
      forced-color-adjust: auto !important;
      color: CanvasText !important;
      -webkit-text-fill-color: currentColor !important;
      text-shadow: none !important;
    }

    .site-header,
    .site-footer,
    .workspace-shell,
    .workspace-tabs,
    .workspace-deck,
    .workspace-pane,
    .panel,
    .panel-subsection,
    .scanner-display-hierarchy,
    .radio-summary,
    .radio-field-group,
    .scanner-control-group,
    .recording-library,
    .recording-item,
    .waterfall-panel,
    .waterfall-plot canvas {
      border-color: CanvasText !important;
      background: Canvas !important;
      box-shadow: none !important;
    }

    a[href] {
      color: LinkText !important;
      -webkit-text-fill-color: LinkText !important;
    }

    button,
    [role="button"],
    [role="tab"],
    .recording-action {
      border-color: ButtonText !important;
      color: ButtonText !important;
      background: ButtonFace !important;
      box-shadow: none !important;
      -webkit-text-fill-color: ButtonText !important;
    }

    select,
    input,
    textarea {
      border-color: FieldText !important;
      color: FieldText !important;
      background: Field !important;
      box-shadow: none !important;
      -webkit-text-fill-color: FieldText !important;
    }

    .workspace-tabs [role="tab"][aria-selected="true"],
    .radio-view-controls button[aria-pressed="true"] {
      border-color: Highlight !important;
      color: HighlightText !important;
      background: Highlight !important;
      -webkit-text-fill-color: HighlightText !important;
    }

    .skip-link {
      border: 1px solid HighlightText !important;
      color: HighlightText !important;
      background: Highlight !important;
      -webkit-text-fill-color: HighlightText !important;
    }

    a,
    button,
    select,
    input,
    textarea,
    [role="button"],
    [role="tab"],
    .recording-action {
      animation: none !important;
      transition: none !important;
    }

    a:focus-visible,
    button:focus-visible,
    select:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    [role="button"]:focus-visible,
    [role="tab"]:focus-visible {
      outline-color: Highlight !important;
    }

    .theme-stage {
      display: none !important;
    }
  }
}