/* -------------------------------------------------------------------------- */
/* OpenCB desktop console layout                                               */
/*                                                                             */
/* Loaded last so it can retune the desktop half of layout-shell.css without    */
/* editing that file's compact rules.                                          */
/*                                                                             */
/* Problem this solves: at >=1024px with the map dock closed, layout-shell.css  */
/* capped the radio column at --app-radio-solo-max (880px) and centred it. On   */
/* a 1920px display that left ~1040px of dead gutter while the faceplate itself */
/* overflowed vertically, because presets, channel display, monitor, S-meter    */
/* and knobs were all stacked in one narrow column.                            */
/*                                                                             */
/* Fix: on desktop the faceplate becomes a two-column console — readouts on the */
/* left, instruments on the right — mirroring a real CB rig. No DOM changes, so */
/* the #stationMonitor relocation in layout-shell.js keeps working untouched.   */
/* -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* Let the solo (map-closed) console use the viewport instead of 880px. */
  .app-shell {
    --app-radio-solo-max: var(--ocb-console-max);
  }

  /*
   * Two-column console. Every area name from the base .cb-faceplate grid is
   * preserved so children that skins may reveal (brand, lamps, ticker,
   * settings, grille) still have a valid placement.
   *
   * Column 1 spans the meter/knobs/ptt rows so the channel stack — presets,
   * channel display, monitor window, station list — stretches to full height
   * and the nearby-stations list finally gets usable room on desktop.
   */
  .app-shell[data-map-open="false"] .app-panel--radio .cb-faceplate {
    grid-template-areas:
      "brand    lamps"
      "channel  meter"
      "channel  knobs"
      "channel  ptt"
      "ticker   ticker"
      "settings settings"
      "grille   grille";
    grid-template-columns: minmax(0, 1fr) var(--ocb-console-instrument-col);
    grid-template-rows: auto auto auto 1fr auto auto auto;
    column-gap: var(--ocb-console-gap);
    align-content: start;
  }

  /* Instrument column: keep the meter at a readable size instead of letting it
     stretch. layout-shell.css:494 lifts the base 440px cap for the narrow
     map-open column; inside the console we want the cap back. */
  .app-shell[data-map-open="false"] .app-panel--radio .cb-meter__svg {
    max-width: var(--ocb-meter-max);
  }

  .app-shell[data-map-open="false"] .app-panel--radio .cb-meter-section {
    align-self: start;
  }

  .app-shell[data-map-open="false"] .app-panel--radio .cb-controls {
    align-self: start;
  }

  /* Readout column: the monitor and station list share the leftover height
     rather than the monitor being pinned to a 56px sliver. */
  .app-shell[data-map-open="false"] .app-panel--radio .cb-channel-section {
    min-height: 0;
  }

  /*
   * The channel display holds the stepper, name and monitor window. Left to
   * stretch into the column's spare height it became a tall empty bordered
   * box in the idle state, so it sizes to its content and hands the remainder
   * to the station list below.
   */
  .app-shell[data-map-open="false"] .app-panel--radio .cb-channel-display {
    flex: 0 0 auto;
  }

  .app-shell[data-map-open="false"]
    .app-panel--radio
    .cb-station-monitor[data-shell-host="radio"] {
    flex: 1 1 auto;
    min-height: 0;
  }

  /*
   * Idle, the console is much shorter than the radio grid area, which left a
   * tall slab of empty faceplate underneath. Size the panel to its content and
   * centre it; it still grows to the full height once the station list fills.
   */
  .app-shell[data-map-open="false"] .app-panel--radio {
    /* The panel is a column flex container, so the block axis is the main
       axis — centring needs justify-content, not align-items. */
    justify-content: center;
  }

  /*
   * layout-shell.css:345 pins the faceplate to height:100% so it fills the
   * radio column. That is right for the compact layout and for the narrow
   * map-open column, but in the centred console it produced a tall slab of
   * bare panel under the controls.
   */
  .app-shell[data-map-open="false"] .app-panel--radio .cb-faceplate {
    height: auto;
    max-height: 100%;
    /* Free-standing console: give the rig its edges back. layout-shell.css
       squares them off because the faceplate is otherwise full-bleed. */
    border-radius: var(--ocb-radius-lg);
    border-left: 4px solid #3a4552;
    border-right: 4px solid #3a4552;
  }

  /* Stop the channel stepper from flinging its arrows to the column edges. */
  .app-shell[data-map-open="false"] .app-panel--radio .cb-channel-display__controls {
    max-width: 520px;
    margin-inline: auto;
  }

  /*
   * A full-width "HOLD TO TALK" bar looks broken on desktop. Keep the dock
   * full-bleed for its background/border but cap the control itself.
   */
  .app-shell[data-map-open="false"] .app-ptt-dock .cb-ptt-button {
    max-width: var(--ocb-ptt-max);
    margin-inline: auto;
  }
}

/* Ultra-wide: give the instruments a little more room and stop the readout
   column from turning into a very long measure. */
@media (min-width: 1600px) {
  .app-shell {
    --ocb-console-max: 1320px;
    --ocb-console-instrument-col: clamp(340px, 22vw, 420px);
  }
}