/* Mätarsidan (/matare) och avläsningen i mobilen (/mobil/matare).

   Staplarna är dekor bredvid siffran: varje månad har sitt värde utskrivet ovanför och
   månaden under, så att grafen går att läsa utan att se färgen. En månad som bara delvis
   ligger mellan två avläsningar får streckad kant och ett ≈ framför siffran, inte bara en
   ljusare ton. */

.mt-label { display: block; font: 700 13.5px/1.3 var(--f-body); color: var(--ink); margin-bottom: 6px; }
.mt-form .chip { gap: 6px; }

.mt-form-card { max-width: 640px; margin-bottom: var(--space-6); }
.mt-form-card .kicker { margin: 0 0 var(--space-4); }

.mt-note {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-4); color: var(--ink);
}

.mt-meter { margin-bottom: var(--space-6); }
.mt-meter-head { align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.mt-meter-head h2 { margin: 0; font-size: var(--fs-h3, 21px); }
.mt-unit { font-size: var(--fs-small, 14.5px); font-weight: 500; }
.mt-latest { margin: 0; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mt-latest b { color: var(--ink); }

.mt-bars {
  list-style: none; margin: var(--space-4) 0 var(--space-2); padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px;
  height: 200px; align-items: end;
}
/* Höjden på stapeln är procent av den mellersta raden, mellan värdet och månaden. */
.mt-bars li {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%;
  min-width: 0; text-align: center;
}
.mt-val {
  grid-row: 1; font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding-bottom: 4px;
}
.mt-bar {
  grid-row: 2; align-self: end; width: 100%;
  background: var(--sky); border-radius: 6px 6px 2px 2px;
}
.mt-mon { grid-row: 3; }
.mt-partial > .mt-bar {
  background: var(--sky-soft);
  border: 1.5px dashed var(--sky-ink);
}
.mt-empty .mt-val { color: var(--ink-2); }
.mt-mon {
  font-size: 12px; color: var(--ink-2); padding-top: 6px; border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-legend { margin: 0 0 var(--space-4); }

.mt-table { width: 100%; margin-top: var(--space-4); }
.mt-table td { vertical-align: middle; }
.mt-table .pill { margin-left: 6px; }
.mt-actions { text-align: right; white-space: nowrap; }
.mt-actions .btn + .btn { margin-left: var(--space-2); }

@media (max-width: 720px) {
  .mt-bars { gap: 3px; height: 170px; }
  .mt-val, .mt-mon { font-size: 10.5px; }
}