/* NOMAD Live 3.41 metric strip.
   Presentation-only: keeps metric values and data logic untouched. */

.status-grid,
.summary-grid {
  gap:0;
  overflow:hidden;
  border:1px solid rgba(150,158,151,.10);
  border-radius:12px;
  background:linear-gradient(145deg,#20251f,#191d17 52%,#141712);
  box-shadow:var(--shadow);
}

.status-grid > .metric,
.summary-grid > .metric {
  position:relative;
  min-width:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:8px 12px;
  text-align:center;
}

.status-grid > .metric strong,
.summary-grid > .metric strong {
  margin:3px 0 0;
}

.metric-info {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  width:13px;
  height:13px;
  margin:0 0 0 3px;
  padding:0;
  align-items:center;
  justify-content:center;
  vertical-align:-2px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:rgba(152,160,145,.72);
  line-height:0;
  cursor:help;
  flex:0 0 auto;
}

.metric-info svg {
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.metric-info:hover,
.metric-info:focus-visible {
  color:var(--text);
  outline:none;
}

.metric-tooltip-floating {
  position:fixed;
  z-index:1000;
  max-width:min(240px,calc(100vw - 16px));
  padding:6px 8px;
  border:1px solid rgba(150,158,151,.18);
  border-radius:7px;
  background:#0f130f;
  color:#e8ece7;
  box-shadow:0 8px 22px rgba(0,0,0,.32);
  font-size:10px;
  font-weight:600;
  line-height:1.35;
  text-align:left;
  white-space:normal;
  pointer-events:none;
}

/* Inset dividers keep the strip feeling like one card rather than a table. */
.status-grid > .metric + .metric::before,
.summary-grid > .metric + .metric::before {
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  top:17%;
  bottom:17%;
  width:1px;
  background:rgba(150,158,151,.14);
  pointer-events:none;
}

/* Highlight the important metric, then feather the tint away before the edges. */
.status-grid > .metric.signal,
.summary-grid > .metric.signal {
  background:radial-gradient(ellipse 88% 84% at 50% 50%,rgba(35,75,42,.72) 0%,rgba(24,53,29,.50) 42%,rgba(18,27,20,.20) 68%,rgba(18,27,20,0) 100%);
}

.status-grid > .metric.signal strong,
.summary-grid > .metric.signal strong {
  color:var(--green);
}

.status-grid > .metric span,
.summary-grid > .metric span {
  text-align:center;
}

@media(max-width:700px) {
  .status-grid,
  .summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
  }

  .status-grid > .metric,
  .summary-grid > .metric {
    padding:8px 8px;
  }

  .metric-info {
    width:15px;
    height:15px;
  }

  /* Reset desktop dividers, then draw only the two vertical mobile dividers. */
  .status-grid > .metric::before,
  .summary-grid > .metric::before {
    content:none;
  }

  .status-grid > .metric:nth-child(even)::before,
  .summary-grid > .metric:nth-child(even)::before {
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    top:17%;
    bottom:17%;
    width:1px;
    background:rgba(150,158,151,.14);
    pointer-events:none;
  }

  /* The second row gets a matching inset horizontal divider. */
  .status-grid > .metric:nth-child(n+3)::after,
  .summary-grid > .metric:nth-child(n+3)::after {
    content:"";
    position:absolute;
    z-index:2;
    top:0;
    left:17%;
    right:17%;
    height:1px;
    background:rgba(150,158,151,.14);
    pointer-events:none;
  }
}