/* library/styles/compose.css — the composition scaffold + slot layouts + block-content styles.
   A composition = fixed header (badge/title/subtitle) + a content grid of SLOTS + fixed footer.
   Each slot holds one block (a .panel) or a vertical stack of blocks. Layouts choose the slots;
   blocks are parametric and fill whatever slot they're given. */

.frame.compose { display: flex; flex-direction: column; gap: 18px; }
.scaffold-header { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.scaffold-footer { flex: 0 0 auto; }
/* Classification banner (opt-in via spec.frame.classification) — CUI/FOUO-style top+bottom strip. */
.classbar { flex: 0 0 auto; text-align: center; font-weight: 800; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; background: var(--navy); padding: 5px 0; border-radius: 4px; }
.content { flex: 1 1 auto; min-height: 0; display: grid; gap: 18px; grid-auto-rows: 1fr; align-content: stretch; }

/* slot layouts (the content area between header and footer) */
.content--full       { grid-template-columns: 1fr; grid-template-areas: "main"; }
.content--main-rail  { grid-template-columns: 1.6fr 1fr; grid-template-areas: "main rail"; }
.content--rail-main  { grid-template-columns: 1fr 1.6fr; grid-template-areas: "rail main"; }
.content--two-col    { grid-template-columns: 1fr 1fr; grid-template-areas: "left right"; }
.content--two-row    { grid-template-rows: 1fr 1fr; grid-template-areas: "top" "bottom"; }
.content--main-bottom{ grid-template-rows: 1fr auto; grid-template-areas: "main" "bottom"; }
.content--2x2        { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "tl tr" "bl br"; }
.content--main-rail-bottom { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr auto;
  grid-template-areas: "main rail" "bottom bottom"; }
.content--thirds     { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "left center right"; }
.content--kpi-top    { grid-template-rows: auto 1fr; grid-template-areas: "top" "main"; }
.content--kpi-top-split { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  grid-template-areas: "top top" "left right"; }
.content--stack3     { grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "top" "mid" "bottom"; }
/* freeform grid: an N×M cell grid; each slot is placed by its {x,y,w,h} (compose.js sets the
   per-slot grid-column/grid-row inline, and the cols/rows from spec.grid). Default 12×12. This is
   the "drag/resize anywhere, expand to fill the frame" layout; named layouts above are seed templates. */
.content--freegrid   { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); }

[data-slot="main"] { grid-area: main; }
[data-slot="rail"] { grid-area: rail; }
[data-slot="left"] { grid-area: left; }
[data-slot="right"] { grid-area: right; }
[data-slot="top"] { grid-area: top; }
[data-slot="bottom"] { grid-area: bottom; }
[data-slot="center"] { grid-area: center; }
[data-slot="mid"] { grid-area: mid; }
[data-slot="tl"] { grid-area: tl; }
[data-slot="tr"] { grid-area: tr; }
[data-slot="bl"] { grid-area: bl; }
[data-slot="br"] { grid-area: br; }

/* a slot is a flex column so it can hold one block or a stack of blocks */
.slot { min-height: 0; display: flex; flex-direction: column; gap: 18px; }
/* single-block slot: the block fills the slot (e.g. a map). */
.slot > .panel { flex: 1 1 0; min-height: 0; }
/* stacked blocks: size to content; the last one grows to fill leftover (no bottom blank). */
.slot.stack > .panel { flex: 0 0 auto; }
.slot.stack > .panel:last-child { flex: 1 1 auto; }
.panel > .body { flex: 1; min-height: 0; }
.chart-fill { width: 100%; height: 100%; }

/* ---- block-content styles (reused by the block registry) ---- */
.legend-box { padding: 14px 18px; display: flex; flex-direction: column; gap: 11px; }
.legend-box .lg { display: flex; align-items: center; gap: 10px; font-size: calc(15px * var(--ppa-scale, 1)); font-weight: 700; color: var(--text); }
.legend-box .lg .sw { width: 22px; height: 16px; border-radius: 4px; border: 1px solid var(--border); flex: 0 0 auto; }
.note-text { padding: 14px 18px; font-size: calc(14.5px * var(--ppa-scale, 1)); font-weight: 600; line-height: 1.4; color: var(--muted); }
.note-text b { color: var(--text); }
.rank-list { list-style: none; padding: 12px 16px; display: flex; flex-direction: column; gap: 9px; }
.rank-list li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; font-size: calc(15.5px * var(--ppa-scale, 1)); font-weight: 700; }
.rank-list .rk { width: 26px; height: 26px; border-radius: 6px; background: var(--navy); color: #fff; font-weight: 900; font-size: 13px; display: grid; place-items: center; }
.rank-list .sc { font-weight: 900; color: var(--navy); font-size: 18px; }
.bigstat { padding: 16px 18px; }
.bigstat .bn { font-size: calc(60px * var(--ppa-scale, 1)); font-weight: 900; color: var(--navy); line-height: 1; }
.bigstat .bl { font-size: calc(15px * var(--ppa-scale, 1)); font-weight: 700; color: var(--muted); margin-top: 8px; }
.progress { padding: 14px 18px; display: flex; flex-direction: column; gap: 13px; }
.progress .pl { display: flex; justify-content: space-between; font-size: calc(14.5px * var(--ppa-scale, 1)); font-weight: 700; color: var(--text); margin-bottom: 5px; }
.progress .pv { font-weight: 900; color: var(--sev-critical); }
.progress .pt { height: 14px; background: #eef1f6; border-radius: 7px; overflow: hidden; }
.progress .pf { height: 100%; border-radius: 7px; }
/* bullet (actual vs target) */
.bullets { padding: 14px 18px; display: flex; flex-direction: column; gap: 15px; }
.bullets .bl-h { display: flex; justify-content: space-between; font-size: calc(14.5px * var(--ppa-scale, 1)); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.bullets .bl-v { font-weight: 900; color: var(--navy); }
.bullets .bl-track { position: relative; height: 16px; background: #eef1f6; border-radius: 4px; overflow: visible; }
.bullets .bl-fill { height: 100%; border-radius: 4px; }
.bullets .bl-target { position: absolute; top: -3px; width: 3px; height: 22px; background: #06163d; border-radius: 2px; }
/* comparison (A vs B back-to-back) */
.cmp { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.cmp-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 900; letter-spacing: .03em; }
.cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.cmp-side { display: flex; align-items: center; gap: 8px; }
.cmp-side.l { flex-direction: row-reverse; }
.cmp-bar { height: 16px; border-radius: 4px; }
.cmp-val { font-weight: 900; font-size: 14px; color: var(--text); }
.cmp-lab { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; min-width: 110px; }
/* image block */
.img-block { width: 100%; height: 100%; display: grid; place-items: center; padding: 10px; }
.img-block img { max-width: 100%; max-height: 100%; }