/* =================================================================
   dashboard.css — the V4 house panel + live metric dashboard

   Styles the interactive house frame and the four metric cards on
   screen 2. All values resolve to --fb-* tokens. The metric cards are
   filled by FBDashboard (data-fb-metric-*) and carry a data-fb-status
   band (poor|fair|good) the engine sets, which drives the accent.
   ================================================================= */

/* ---------- house panel ---------- */
.fb-house-panel{
  position:relative;
  margin:0 0 var(--fb-space-4);
  border-radius:var(--fb-radius-xl);
  overflow:hidden;
  background:linear-gradient(180deg,#DCF0FF 0%,#EFF8FF 100%);
  box-shadow:var(--fb-shadow-md);
  border:1px solid rgba(255,255,255,.6);
}
.fb-house-mount{ display:block; width:100%; }
.fb-house-mount svg{ display:block; width:100%; height:auto; }

/* ---------- dashboard grid ---------- */
.fb-dash{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--fb-space-3);
  margin:0 0 var(--fb-space-4);
}

.fb-metric{
  background:var(--fb-surface);
  border:1px solid var(--fb-border);
  border-radius:var(--fb-radius-lg);
  padding:var(--fb-space-4);
  box-shadow:var(--fb-shadow-sm);
  display:flex;
  flex-direction:column;
  gap:var(--fb-space-2);
  position:relative;
  overflow:hidden;
  transition:box-shadow var(--fb-duration-base) var(--fb-ease-out),
             transform var(--fb-duration-base) var(--fb-ease-out);
}
/* accent bar keyed to the metric's status band */
.fb-metric::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--fb-accent);
  transition:background var(--fb-duration-base) var(--fb-ease-out);
}
.fb-metric[data-fb-status="poor"]::before{ background:var(--fb-danger); }
.fb-metric[data-fb-status="fair"]::before{ background:var(--fb-warning); }
.fb-metric[data-fb-status="good"]::before{ background:var(--fb-success); }

.fb-metric-k{
  font-family:var(--fb-font-body);
  font-size:var(--fb-text-2xs);
  font-weight:var(--fb-weight-bold);
  letter-spacing:var(--fb-tracking-caps);
  text-transform:uppercase;
  color:var(--fb-text-muted);
}
.fb-metric-v{
  font-family:var(--fb-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fb-text-2xl);
  font-weight:var(--fb-weight-semi);
  line-height:1;
  color:var(--fb-secondary);
}
.fb-metric-track{
  height:8px;
  border-radius:var(--fb-radius-pill);
  background:var(--fb-surface-sunken);
  overflow:hidden;
}
.fb-metric-fill{
  height:100%;
  width:0;
  border-radius:var(--fb-radius-pill);
  background:var(--fb-accent);
  transition:width var(--fb-duration-slow) var(--fb-ease-spring),
             background var(--fb-duration-base) var(--fb-ease-out);
}
.fb-metric[data-fb-status="poor"] .fb-metric-fill{ background:var(--fb-danger); }
.fb-metric[data-fb-status="fair"] .fb-metric-fill{ background:var(--fb-warning); }
.fb-metric[data-fb-status="good"] .fb-metric-fill{ background:var(--fb-success); }

/* score card reads as the headline metric */
.fb-metric[data-fb-metric="score"]{ grid-column:1 / -1; }
.fb-metric[data-fb-metric="score"] .fb-metric-v{ font-size:var(--fb-text-metric); color:var(--fb-primary); }

@media (max-width:380px){
  .fb-dash{ grid-template-columns:1fr; }
}