/* v302: one shared, stretchable grid row, independent of monitor resolution.
   Both columns fill the available workspace and have intrinsic minimums.
   Surplus height grows match rows and the plot, not empty space below cards.
   Only the workspace scrolls when content genuinely exceeds the viewport.
   Narrow-screen reflow remains in responsive.css below 1150 CSS pixels. */
@media (min-width:1150px) {
  body.workspace-app {
    --workspace-gap:clamp(8px, .6vw, 14px);
    --workspace-gutter:clamp(12px, 1vw, 22px);
    --workspace-row-min:clamp(80px, 7dvh, 98px);
    --workspace-bar-height:clamp(52px, 5dvh, 76px);
    display:flex;
    flex-direction:column;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  body.workspace-app > .topbar {
    flex:0 0 auto;
    flex-wrap:wrap;
    gap:10px 18px;
    padding:10px var(--workspace-gutter);
  }
  #workspace {
    display:grid;
    grid-template-columns:minmax(0, 1.14fr) minmax(0, 1fr);
    grid-template-rows:minmax(min-content, 1fr);
    align-items:stretch;
    align-content:stretch;
    gap:var(--workspace-gap);
    flex:1 1 0;
    width:100%;
    max-width:none;
    height:auto;
    min-height:0;
    min-width:0;
    margin:0;
    padding:var(--workspace-gap) var(--workspace-gutter);
    overflow:auto;
    scrollbar-gutter:stable;
  }
  #workspace > .workspace-right {
    display:grid;
    /* Settings/LIVE, colours, results. Surplus height stays with the plot. */
    grid-template-rows:auto auto minmax(min-content, 1fr);
    grid-auto-rows:max-content;
    align-content:stretch;
    align-self:stretch;
    gap:var(--workspace-gap);
    min-width:0;
    min-height:min-content;
    height:auto;
  }
  #workspace .panel,
  #workspace .color-rules-side,
  #workspace > .workspace-right > .results,
  #workspace > .workspace-right > .system-panel,
  #workspace > .workspace-right > .workspace-live-panel {
    padding:10px 12px !important;
    min-width:0;
    border-radius:14px;
  }
  #workspace .section-title {
    flex-wrap:wrap;
    flex-shrink:0;
    margin-bottom:8px;
  }
  #workspace .section-title h2 { font-size:19px; }

  /* Propagate intrinsic row height through every wrapper. A flex child with
     min-height:0 previously let the table overflow its own panel on short
     windows. Each wrapper now participates in the same grid sizing chain. */
  #workspace > .match-panel,
  #workspace > .match-panel .match-workspace,
  #workspace > .match-panel .match-main {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:minmax(min-content, 1fr);
    align-self:stretch;
    height:auto;
    min-height:min-content;
    min-width:0;
  }
  #workspace > .match-panel .match-main {
    grid-template-rows:auto auto minmax(min-content, 1fr);
  }
  #workspace > .match-panel .match-main > .section-title { grid-row:1; }
  #workspace > .match-panel .match-main > #inlineLiveBar { grid-row:2; }
  #workspace > .match-panel .match-table-wrap {
    display:grid;
    grid-row:3;
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:minmax(min-content, 1fr);
    min-height:min-content;
    overflow:visible;
  }
  #workspace > .match-panel .paint-table {
    display:grid;
    grid-template-rows:auto minmax(min-content, 1fr);
    width:100%;
    min-width:0 !important;
    height:auto;
    min-height:min-content;
    table-layout:fixed;
  }
  #workspace > .match-panel #matches {
    display:grid;
    grid-template-rows:repeat(8, minmax(min-content, 1fr));
    width:100%;
    height:auto;
    min-height:min-content;
  }
  #workspace .paint-table thead tr,
  #workspace #matches > tr {
    grid-template-columns:minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  }
  #workspace #matches > tr { height:auto; min-height:var(--workspace-row-min); }
  #workspace #matches .match-name { font-size:14px; }
  #workspace #matches .match-copy { min-height:0; }
  #workspace #matches .match-name-text { overflow-wrap:anywhere !important; }
  #workspace .outcome-tile,
  #workspace .outcome-tile.live-current-sign {
    flex:0 0 auto;
    height:auto !important;
    min-height:62px !important;
    max-height:none !important;
    padding:6px 34px 6px 6px !important;
  }
  #workspace .outcome-tile .odds-value { font-size:19px; }
  #workspace .outcome-tile small {
    font-size:12px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  #workspace .tile-editors input {
    height:22px !important;
    min-height:22px !important;
    font-size:11px !important;
  }

  /* Equal minimums, not fixed heights: extra colours and LIVE statistics
     may add content without clipping it or changing the layout algorithm. */
  #workspace #filters .filter {
    height:auto;
    min-height:110px;
    padding:7px 8px;
    overflow:visible;
  }
  #workspace #filters .filter-impact {
    flex:0 0 auto;
    min-height:0 !important;
    overflow:visible;
  }
  #workspace #filters .impact-stat-row span,
  #workspace #filters .impact-stat-row strong { font-size:11px; }
  #workspace #filters .more-colors-button { height:auto; min-height:26px; }

  #workspace > .workspace-right > .results,
  #workspace > .workspace-right > .results .result-summary {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto minmax(min-content, 1fr);
    height:auto;
    min-height:min-content !important;
  }
  #workspace .results .result-summary { gap:8px; margin:0; }
  #workspace .workspace-overview-card {
    flex:0 0 auto;
    min-height:0;
    gap:6px;
    padding:8px 10px;
  }
  #workspace .workspace-card-heading { padding-bottom:5px; flex-wrap:wrap; }
  #workspace .workspace-overview-card #metrics { gap:6px; }
  #workspace .workspace-stat-table th,
  #workspace .workspace-stat-table td { padding:3px 5px; font-size:12px; }
  #workspace .workspace-metric span { font-size:11px; }
  #workspace .workspace-metric strong { font-size:14px; }
  #workspace .workspace-additional .workspace-metric strong { font-size:12px; }

  /* The plot consumes the result track's surplus all the way down to the
     axis. Labels remain below the plot, never above an empty filler block. */
  #workspace #distribution.workspace-distribution-card {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto minmax(min-content, 1fr);
    height:auto;
    min-height:min-content !important;
    margin:0;
    padding:6px 8px !important;
    overflow-x:auto;
  }
  #workspace #distribution .chart-title { grid-row:1; padding-bottom:5px; }
  #workspace #distribution .stable-interval-chart {
    grid-row:2;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(var(--workspace-bar-height), 1fr) max-content max-content !important;
    flex:0 0 auto !important;
    min-width:440px;
    height:auto !important;
    min-height:min-content !important;
  }
  #workspace #distribution .stable-bars-row {
    height:auto !important;
    min-height:var(--workspace-bar-height) !important;
    max-height:none !important;
  }
  #workspace #distribution .stable-bar-column {
    position:relative;
    height:auto !important;
    min-height:var(--workspace-bar-height) !important;
    max-height:none !important;
  }
  #workspace #distribution .stable-bar-column .bar-zone {
    /* Definite containing block for percentage bar heights, even while
       the surrounding grid expands. No guessed viewport subtraction. */
    position:absolute;
    inset:0;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
  }
  #workspace #distribution .stable-labels-row .interval-label,
  #workspace #distribution .stable-values-row .interval-values {
    height:auto;
    min-height:0;
    line-height:1.35;
    padding-top:3px;
  }
  #workspace #distribution .interval-label { font-size:10px; }
  #workspace #distribution .interval-values { font-size:9px; }
  #workspace > .workspace-right > .system-panel,
  #workspace > .workspace-right > .workspace-live-panel {
    height:auto;
    min-height:0;
    align-self:start;
  }
  #workspace .system-panel .settings label { font-size:11px; }
  #workspace .system-panel .settings input { height:31px; }

  /* A real flex row, not a fixed overlay. It cannot cover the workspace. */
  #workspaceFooter {
    position:static;
    flex:0 0 auto;
    width:auto;
    min-width:0;
    margin:0 var(--workspace-gutter) var(--workspace-gap);
    padding:9px 16px;
    gap:12px;
    flex-wrap:wrap;
  }
  #workspaceFooter .workspace-totals { min-width:0; gap:12px; }
  #workspaceFooter .workspace-total { min-width:0; }
  #workspaceFooter .workspace-total strong {
    font-size:clamp(20px, 1.2vw, 28px);
    white-space:normal;
    overflow-wrap:anywhere;
  }
  #workspaceFooter .workspace-footer-actions { flex-wrap:wrap; }
}