/* ============================================================================
   POWER BI EMBED COMPONENT
   Shared by index.html and dashboards.html. Every custom property carries a
   fallback so this file is self-sufficient.

   Two states, deliberately different sizes:

     .dash        a live report — full width, 16:9, the page's main event
     .dash-mini   a slot with no link yet — one third width, compact

   The earlier version gave both states a full-height card, which meant three
   empty slots occupied about 3,000px of an 10,000px page and made a finished
   site read as a broken one. An empty slot is a walkthrough, not a failed
   report, so it is sized like one.
   ========================================================================== */

.dash{
  border:1px solid var(--line, rgba(176,196,232,.14));
  border-radius:var(--radius-lg, 16px);
  background:var(--surface, #0c121c);
  overflow:hidden;
  margin-bottom:var(--s-5, 1.5rem);
}

/* ---------------------------------------------------------------- header -- */
.dash-head{
  padding:var(--s-5, 1.5rem);
  border-bottom:1px solid var(--line, rgba(176,196,232,.14));
}
.dash-head h3{
  font-family:var(--font-display, inherit);
  font-size:var(--fs-2xl, 1.5rem);
  margin:var(--s-3, .75rem) 0 var(--s-2, .5rem);
  color:var(--text, #eef2f8);
  letter-spacing:-.025em; line-height:1.15;
}
.dash-lede{
  color:var(--muted, #94a1b5);
  font-size:var(--fs-lg, 1.0625rem);
  max-width:70ch; margin:0;
}

/* ----------------------------------------------------------------- frame -- */
.dash-frame{
  position:relative;
  aspect-ratio:16 / 9;
  min-height:340px;
  background:#080d15;
  border-bottom:1px solid var(--line, rgba(176,196,232,.14));
}
.dash-frame iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block;
}

/* --------------------------------------------------------------- caption -- */
.dash-note{
  display:flex; flex-wrap:wrap; gap:var(--s-2, .5rem) var(--s-4, 1rem);
  align-items:center; justify-content:space-between;
  padding:var(--s-3, .75rem) var(--s-5, 1.5rem);
  border-bottom:1px solid var(--line, rgba(176,196,232,.14));
  background:rgba(8,13,21,.55);
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:11.5px; letter-spacing:.02em;
  color:var(--faint, #6d7a8d);
}
.dash-note b{ color:var(--text-2, #c3ccdb); font-weight:500 }

/* --------------------------------------------------------------- framing -- */
.dash-frames{
  display:grid; gap:var(--s-5, 1.5rem);
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  padding:var(--s-5, 1.5rem);
}
.dash-frames > div{ display:grid; gap:var(--s-2,.5rem); align-content:start }
.dash-frames h4{
  font-family:var(--font-mono, monospace);
  font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet, #a78bfa); margin:0;
}
.dash-frames p{ margin:0; color:var(--muted, #94a1b5); font-size:var(--fs-sm, .875rem) }

/* ----------------------------------------------------------------- build -- */
.dash-build{ padding:0 var(--s-5, 1.5rem) var(--s-5, 1.5rem) }
.dash-build > summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:var(--s-2, .5rem);
  font-size:var(--fs-sm, .875rem); font-weight:600;
  color:var(--text-2, #c3ccdb);
  border:1px solid var(--line, rgba(176,196,232,.14));
  background:var(--surface-2, #101827);
  border-radius:8px; padding:var(--s-2, .5rem) var(--s-4, 1rem);
  transition:border-color .18s, background .18s;
}
.dash-build > summary::-webkit-details-marker{ display:none }
.dash-build > summary::after{ content:"▾"; font-size:10px; opacity:.7 }
.dash-build[open] > summary::after{ content:"▴" }
.dash-build > summary:hover{
  background:var(--surface-3, #141d2e);
  border-color:var(--line-strong, rgba(176,196,232,.26));
}
.dash-build ul{
  margin:var(--s-4, 1rem) 0 0; padding:0 0 0 var(--s-5, 1.5rem);
  display:grid; gap:var(--s-3, .75rem); max-width:88ch;
}
.dash-build li{
  color:var(--muted, #94a1b5); font-size:var(--fs-sm, .875rem); line-height:1.7;
}
.dash-build li::marker{ color:var(--violet, #a78bfa) }

/* ============================================================ mini state == */
/* A slot with no link yet. Three fit across a row, so an unfilled section
   reads as a considered index rather than as three failures. */

.dash-mini-head{
  display:flex; flex-wrap:wrap; gap:var(--s-3,.75rem);
  align-items:baseline; justify-content:space-between;
  padding-bottom:var(--s-3,.75rem); margin-bottom:var(--s-4,1rem);
  border-bottom:1px solid var(--line, rgba(176,196,232,.14));
}
.dash-mini-head h3{
  font-family:var(--font-display, inherit);
  font-size:var(--fs-lg,1.0625rem); color:var(--text,#eef2f8); margin:0;
  letter-spacing:-.015em;
}
.dash-mini-head p{
  margin:0; font-size:var(--fs-sm,.875rem); color:var(--faint,#6d7a8d);
}

.dash-mini-grid{
  display:grid; gap:var(--s-4, 1rem);
  grid-template-columns:repeat(auto-fit, minmax(268px, 1fr));
}
/* Capped at three. Four across leaves a five-item set as 4 + 1, which reads
   as one card left over; three across makes it 3 + 2, which reads as a grid. */
@media (min-width:1080px){
  .dash-mini-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) }
}

.dash-mini{
  display:flex; flex-direction:column;
  border:1px solid var(--line, rgba(176,196,232,.14));
  border-radius:var(--radius, 12px);
  background:var(--surface, #0c121c);
  overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.dash-mini:hover{
  border-color:var(--line-strong, rgba(176,196,232,.26));
  transform:translateY(-2px);
}
.dash-mini-art{
  height:104px; padding:var(--s-4, 1rem) var(--s-4, 1rem) 0;
  background:#080d15;
  border-bottom:1px solid var(--line, rgba(176,196,232,.14));
  display:flex; align-items:flex-end; gap:5px;
}
.dash-mini-art i{
  flex:1; display:block; border-radius:2px 2px 0 0;
  height:var(--h);
  background:linear-gradient(180deg, var(--violet,#a78bfa), rgba(47,127,224,.35));
  opacity:.65;
  transform-origin:bottom;
}
.dash-mini-body{
  padding:var(--s-4, 1rem);
  display:flex; flex-direction:column; gap:var(--s-2,.5rem); flex:1;
  align-items:flex-start;
}
.dash-mini-body h4{
  font-size:var(--fs-md,.9375rem); color:var(--text,#eef2f8); margin:0;
  font-weight:600; letter-spacing:-.01em;
}
.dash-mini-body p{
  margin:0; font-size:var(--fs-sm,.875rem); color:var(--muted,#94a1b5); flex:1;
}
.dash-mini-body a{ margin-top:var(--s-2,.5rem) }

/* ------------------------------------------------------------ setup mode -- */
.setup-banner{
  border:1px solid rgba(251,191,36,.34);
  background:rgba(251,191,36,.07);
  border-radius:var(--radius, 12px);
  padding:var(--s-5, 1.5rem);
  margin-bottom:var(--s-5, 1.5rem);
  color:#e7d3a1; font-size:var(--fs-sm, .875rem);
}
.setup-banner h4{ margin:0 0 var(--s-3,.75rem); color:#fcd34d; font-size:var(--fs-lg,1.0625rem) }
.setup-banner code{
  font-family:var(--font-mono, ui-monospace, monospace);
  background:rgba(0,0,0,.35); padding:2px 6px; border-radius:4px; font-size:12px;
}
.setup-banner ol{ margin:var(--s-3,.75rem) 0 0; padding-left:var(--s-5,1.5rem) }
.setup-banner li{ margin-bottom:var(--s-2,.5rem) }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .dash-frame{ aspect-ratio:4 / 3; min-height:300px }
}
@media (max-width:600px){
  /* Power BI reports do not reflow, so a scaled-down one is unreadable. The
     phone gets the framing and the build notes rather than a squashed iframe. */
  .dash-frame{ aspect-ratio:3 / 2; min-height:230px }
  .dash-head, .dash-frames{ padding:var(--s-4, 1rem) }
  .dash-build{ padding:0 var(--s-4,1rem) var(--s-4,1rem) }
  .dash-note{ padding:var(--s-3,.75rem) var(--s-4,1rem) }
}