/* WattVerdict Live Monitor V3 refinements */

@media (min-width: 701px) {
  .wvlm {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
  }

  .wvlm-shell {
    max-width: none;
    padding: 28px 48px 32px;
  }

  .wvlm-hero {
    margin-bottom: 16px;
  }

  .wvlm .wvlm-hero h1 {
    font-size: clamp(34px, 3.6vw, 56px);
  }

  .wvlm-progress-card {
    padding: 14px 22px 15px;
    margin-bottom: 10px;
  }

  .wvlm-progress-head {
    margin-bottom: 10px;
  }

  .wvlm-progress-head strong {
    font-size: 19px;
    margin-top: 2px;
  }

  .wvlm-progress-percent {
    font-size: 22px;
  }

  .wvlm-days {
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 4px;
  }

  .wvlm-days span {
    height: 28px;
    aspect-ratio: auto;
    border-radius: 6px;
    font-size: 9px;
  }

  .wvlm-metrics {
    margin: 10px 0;
    gap: 10px;
  }

  .wvlm-metrics article {
    padding: 14px 16px;
  }

  .wvlm-metrics strong {
    margin-top: 9px;
    margin-bottom: 5px;
  }

  .wvlm-chart-card {
    padding: 18px 24px;
    margin: 10px 0;
  }

  .wvlm-chart {
    height: 180px;
    margin-top: 12px;
  }

  .wvlm-two-col {
    margin: 10px 0;
  }

  .wvlm-panel {
    padding: 22px;
  }

  .wvlm-table-card {
    margin-top: 10px;
    padding: 22px 24px;
  }
}

.wvlm-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.wvlm-tech-grid small,
.wvlm-tech-grid strong {
  display: block;
}

.wvlm-tech-grid small {
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 3px;
}

.wvlm-tech-grid strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.wvlm-metrics small {
  line-height: 1.35;
}

@media (max-width: 700px) {
  .wvlm-progress-card {
    padding: 14px 12px 15px;
  }

  .wvlm-progress-head {
    margin-bottom: 10px;
  }

  .wvlm-progress-head strong {
    font-size: 17px;
  }

  .wvlm-progress-percent {
    font-size: 17px;
  }

  .wvlm-days {
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 4px 3px;
  }

  .wvlm-days span {
    height: 26px;
    aspect-ratio: auto;
    border-radius: 5px;
    font-size: 8px;
  }

  .wvlm-tech-grid {
    gap: 10px 12px;
    margin-top: 14px;
    padding-top: 13px;
  }
}

@media (max-width: 390px) {
  .wvlm-days {
    gap: 3px 2px;
  }

  .wvlm-days span {
    height: 24px;
    font-size: 7px;
  }
}

.wvlm-chart-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.wvlm-chart-toggle{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.12)}
.wvlm-chart-toggle button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:800;padding:7px 12px;border-radius:999px;cursor:pointer}
.wvlm-chart-toggle button.active{background:#42e27b;color:#0b2118}
.wvlm-chart-labels{display:grid;grid-template-columns:repeat(7,1fr);gap:0;padding:0 24px;margin-top:-25px;position:relative;z-index:2;pointer-events:none}
.wvlm-chart-labels span{text-align:center;color:var(--muted);font-size:10px;font-weight:700}
@media(max-width:700px){
 .wvlm-chart-controls{width:100%;justify-content:space-between;gap:10px}
 .wvlm-chart-toggle button{font-size:10px;padding:6px 10px}
 .wvlm-chart-labels{padding:0 10px;margin-top:-22px}
 .wvlm-chart-labels span{font-size:8px}
}

.wvlm-chart-card[data-view="7d"] .wvlm-legend .power:before{background:var(--green)}

.wvlm-chart-card[data-view="7d"] .wvlm-chart-labels{
  display:grid;
  grid-template-columns:repeat(7,1fr);
}

/* v0.5.1 public simplification */
.wvlm-product-name{margin-top:5px!important;font-size:15px!important;font-weight:700!important;color:#d8e8df!important}
.wvlm-product-name span{color:var(--muted);font-weight:600}
.wvlm-test-setup{margin-top:10px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.wvlm-test-setup p{margin:5px 0 2px!important;color:var(--ink);font-size:12px;line-height:1.5}
.wvlm-test-setup p span{color:#c4d7cc}.wvlm-test-setup small{display:block;color:var(--muted);font-size:10px;line-height:1.4}
@media(max-width:700px){.wvlm-product-name{font-size:13px!important}.wvlm-test-setup{padding:12px}.wvlm-test-setup p{font-size:11px}}

/* v0.5.2 product-first hero hierarchy */
.wvlm .wvlm-hero .wvlm-product-title{font-size:clamp(30px,3.2vw,50px)!important;line-height:1.04!important;letter-spacing:-.035em!important;margin:6px 0 4px!important}
.wvlm .wvlm-hero .wvlm-product-name{margin:0!important;font-size:13px!important;font-weight:600!important;color:var(--muted)!important}
@media(max-width:700px){
 .wvlm .wvlm-hero .wvlm-product-title{font-size:clamp(27px,9vw,38px)!important}
 .wvlm .wvlm-hero .wvlm-product-name{font-size:12px!important}
}