/* library/styles/layouts.css — the 16:9 frame + auto-balanced CSS-grid presets.
   An asset sets a .frame + a .layout--* class; its sections carry data-area="…".
   Balance/no-blank-space comes from these presets (filled with 1fr tracks) + the
   render-time overflow check in adapters/render-playwright.mjs. */

.frame {
  width: 1920px; height: 1080px; background: var(--bg); color: var(--text);
  font-family: var(--font); overflow: hidden;
  display: grid; gap: 22px; padding: 34px 38px;
}

/* hero chart + right rail (e.g. ranked drivers) */
.layout--hero-side {
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 104px 1fr 188px 96px 34px;
  grid-template-areas:
    "header header"
    "main   side"
    "main   impact"
    "alert  alert"
    "footer footer";
}

/* two balanced halves (e.g. donut + table) */
.layout--split {
  grid-template-columns: 1fr 1.12fr;
  grid-template-rows: 104px 1fr 168px 34px;
  grid-template-areas:
    "header header"
    "left   right"
    "insights insights"
    "footer footer";
}

/* choropleth map + right rail */
.layout--map {
  grid-template-columns: 1.62fr 1fr;
  grid-template-rows: 92px 1fr 40px;
  grid-template-areas:
    "header header"
    "map    rail"
    "meta   meta";
}

/* single-column report: header + KPI strip + main table */
.layout--report {
  grid-template-columns: 1fr;
  grid-template-rows: 96px 104px 1fr 34px;
  grid-template-areas:
    "header"
    "kpi"
    "main"
    "footer";
}

/* dense intelligence dashboard: header + KPI band + tracker|rail + timeline */
.layout--intel {
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 78px 52px 68px 1fr 150px 42px;
  grid-template-areas:
    "header  header"
    "verdict verdict"
    "kpi     kpi"
    "tracker rail"
    "timeline timeline"
    "meta    meta";
  gap: 18px;
}

/* area utilities — map data-area to grid-area */
[data-area="kpi"] { grid-area: kpi; }
[data-area="map"] { grid-area: map; }
[data-area="verdict"] { grid-area: verdict; }
[data-area="tracker"] { grid-area: tracker; }
[data-area="rail"] { grid-area: rail; }
[data-area="timeline"] { grid-area: timeline; }
[data-area="meta"] { grid-area: meta; }
[data-area="header"] { grid-area: header; }
[data-area="main"] { grid-area: main; }
[data-area="side"] { grid-area: side; }
[data-area="impact"] { grid-area: impact; }
[data-area="alert"] { grid-area: alert; }
[data-area="left"] { grid-area: left; }
[data-area="right"] { grid-area: right; }
[data-area="insights"] { grid-area: insights; }
[data-area="footer"] { grid-area: footer; }