.measurement-view {
  max-width:1320px;
  margin:0 auto;
  color:#243238;
}
.m-header {
  align-items:flex-start;
  margin-bottom:20px;
}
.m-header h1 {
  font-size:26px;
  line-height:1.4;
}
.m-header p {
  margin:7px 0 0;
  color:#526574;
  font-size:14px;
}
.m-header .actions {
  align-items:center;
}
.m-connection {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 12px;
  border:1px solid #e0e6e8;
  border-radius:4px;
  color:#647583;
  font-size:14px;
  white-space:nowrap;
}
.m-connection.online {
  color:#177b72;
}
.measurement-view .m-tabs {
  display:flex;
  gap:6px;
  overflow:auto;
  border-bottom:1px solid #e0e6e8;
  margin-bottom:18px;
}
.measurement-view .m-tabs button {
  border:0;
  border-radius:0;
  border-bottom:2px solid transparent;
  padding:0 12px;
}
.measurement-view .m-tabs button.active {
  color:#177b72;
  border-bottom-color:#177b72;
  font-weight:600;
}
.m-context {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  color:#526574;
  font-size:14px;
  line-height:1.7;
}
.m-context>span {
  flex:1;
  min-width:0;
}
.m-context>div {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.m-context>div>span {
  white-space:nowrap;
}
.m-main-readings {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;
  background:#edf7f3;
  border-radius:6px;
  padding:26px 30px;
  margin-bottom:14px;
}
.m-main-readings .m-total {
  border-left:1px solid #d7e5e0;
  padding-left:28px;
}
.m-field {
  min-width:0;
}
.m-label {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.m-label h2 {
  font-size:20px;
  font-weight:650;
  line-height:1.4;
  margin:0;
}
.m-reading {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  min-width:0;
  line-height:1.35;
  font-variant-numeric:tabular-nums;
}
.m-value {
  font-size:clamp(32px,3.6vw,54px);
  font-weight:650;
  letter-spacing:-.8px;
  white-space:nowrap;
  min-width:0;
}
.m-primary .m-value {
  font-size:clamp(42px,4.8vw,68px);
  color:#177b72;
}
.m-total .m-value {
  font-size:clamp(30px,3.3vw,46px);
}
.m-unit {
  font-size:20px;
  font-weight:500;
  white-space:nowrap;
}
.m-unit-pending {
  flex-basis:100%;
  display:block;
  font-size:16px;
  color:#526574;
  font-weight:400;
}
.m-quality {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  min-height:24px;
  padding:2px 8px;
  border-radius:4px;
  background:#eef1f2;
  color:#647583;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  white-space:nowrap;
}
.m-quality-unknown,.m-quality-substituted {
  background:#fff0ce;
  color:#935b11;
}
.m-quality-good {
  background:#e2f2e9;
  color:#177b55;
}
.m-quality-fixed {
  background:#edf3f6;
  color:#526574;
}
.m-quality-invalid {
  background:#fbe9e7;
  color:#a64137;
}
.m-secondary {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
  padding:16px 14px;
  border-top:1px solid #e5ece9;
  border-bottom:1px solid #e5ece9;
  margin-bottom:18px;
}
.m-secondary .m-label {
  margin:0;
}
.m-secondary .m-label h2 {
  font-size:18px;
}
.m-secondary .m-value {
  font-size:30px;
}
.m-secondary .m-unit {
  font-size:17px;
}
.m-support-readings {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  padding:20px 24px;
  border:1px solid #e0e6e8;
  border-radius:5px;
  margin:0 0 20px;
}
.m-support-readings .m-field+.m-field {
  border-left:1px solid #e0e6e8;
  padding-left:24px;
}
.m-support-readings .m-label {
  gap:8px;
  margin-bottom:8px;
}
.m-support-readings .m-value {
  font-size:38px;
}
.m-support-readings .m-unit {
  font-size:18px;
}
.m-recent {
  border:1px solid #e0e6e8;
  border-radius:5px;
  overflow:hidden;
}
.m-recent>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#eff4f4;
  padding:8px 14px;
  margin:0;
}
.m-recent h2 {
  font-size:18px;
}
.m-recent .table-wrap {
  border:0;
  border-radius:0;
}
.m-text-action {
  border-color:transparent;
  background:transparent;
  color:#177b72;
  padding:0 12px;
}
.m-text-action:hover {
  background:#edf7f3;
}
.m-history-table th,.m-history-table td {
  padding:12px 14px;
  font-size:14px;
}
.m-type {
  display:inline-flex;
  padding:1px 7px;
  border:1px solid #ccd6d8;
  border-radius:4px;
  color:#526574;
  white-space:nowrap;
  font-size:13px;
}
.m-clock-warning {
  display:block;
  color:#935b11;
  font-size:12px;
  line-height:1.6;
}
.m-message-kind {
  display:block;
  color:#647583;
  font-size:12px;
  line-height:1.6;
  margin-top:3px;
}
.m-history-intro {
  color:#526574;
  margin-bottom:22px;
}
.m-history-note,.m-note {
  padding:10px 14px;
  border-radius:4px;
  background:#edf7f3;
  color:#526574;
  font-size:14px;
  line-height:1.6;
}
.m-history-note {
  margin:20px 0;
}
.m-note {
  margin:0 0 18px;
}
.m-warning {
  background:#fff7e9;
  color:#805d2f;
  padding:10px 14px;
  border-radius:4px;
  font-size:14px;
  line-height:1.6;
  margin:0 0 18px;
}
.m-pagination {
  flex-wrap:wrap;
}
.m-pagination>span:first-child {
  margin-right:auto;
}
.m-info {
  padding:20px 24px;
  border:1px solid #e0e6e8;
  border-radius:5px;
  margin-bottom:20px;
}
.m-info h2 {
  font-size:18px;
  margin-bottom:18px;
}
.m-meta {
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:14px 20px;
  margin:0 0 22px;
  font-size:14px;
  line-height:1.65;
}
.m-meta dt {
  color:#526574;
}
.m-meta dd {
  margin:0;
  overflow-wrap:anywhere;
}
.m-message-modal {
  width:880px;
}
.m-message-modal pre {
  max-height:45vh;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#f6f8f7;
  border:1px solid #e0e6e8;
  border-radius:4px;
  padding:14px;
  font-size:13px;
  line-height:1.6;
}
.m-message-readings {
  border-top:1px solid #e0e6e8;
  margin-bottom:22px;
}
.m-message-readings>div {
  display:grid;
  grid-template-columns:minmax(110px,1fr) minmax(0,1.5fr) auto;
  align-items:baseline;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid #e0e6e8;
}
.m-message-readings strong {
  font-weight:600;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.m-message-readings small {
  font-weight:400;
  font-size:14px;
  margin-left:6px;
}
.m-message-readings .m-message-unit-pending {
  display:block;
  margin:4px 0 0;
  color:#526574;
  font-weight:400;
}
.m-device-cards {
  display:grid;
  gap:16px;
  margin:20px 0;
}
.m-device-card {
  background:#fff;
  border:1px solid #e0e6e8;
  border-radius:6px;
  overflow:hidden;
}
.m-device-card>header {
  align-items:flex-start;
  background:#f5f9f7;
  padding:20px 24px;
  margin:0;
}
.m-device-card h2 {
  font-size:22px;
}
.m-device-card header p {
  margin:4px 0 0;
  font-size:14px;
  color:#526574;
}
.m-card-readings {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1.1fr);
  gap:22px;
  padding:20px 24px;
}
.m-card-readings>section+section {
  border-left:1px solid #e0e6e8;
  padding-left:22px;
}
.m-card-readings .m-label {
  gap:8px;
  margin-bottom:8px;
}
.m-card-readings .m-label h2 {
  font-size:17px;
}
.m-card-readings .m-value {
  font-size:30px;
}
.m-card-readings .m-unit {
  font-size:16px;
}
.m-card-time h3 {
  font-size:17px;
  margin:0 0 8px;
}
.m-card-time p {
  font-size:18px;
  line-height:1.5;
  margin:0;
  font-variant-numeric:tabular-nums;
}
.m-device-card>footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 24px;
  padding:14px 0;
  border-top:1px solid #e0e6e8;
}
.m-device-card>footer p {
  margin:0;
  color:#526574;
  font-size:14px;
}
.m-device-card>footer button {
  flex-shrink:0;
}
.measurement-list-mode .summary {
  background:transparent;
  padding:0 0 12px;
  border-bottom:1px solid #e0e6e8;
}
.measurement-list-mode #empty h2 {
  font-size:24px;
  color:#243238;
  margin-bottom:12px;
}
.measurement-list-mode #empty p {
  margin:12px 0;
}
.measurement-list-mode #empty>.primary {
  margin:10px 0 6px;
}
@media(min-width:1000px) {
  .shell main:has(.measurement-view:not([hidden])) {
    padding:28px 32px;
    background:white;
  }
  .m-main-readings {
    padding:26px 36px;
  }
  .m-main-readings .m-total {
    padding-left:32px;
  }
  .m-header h1 {
    font-size:26px;
  }
}
.shell main:has(.measurement-view:not([hidden]))>.mini-widget {
  position:static;
  width:100%;
  margin:20px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  box-shadow:none;
}
.shell main:has(.measurement-view:not([hidden]))>.mini-widget .mini-thumbnail {
  flex:0 0 96px;
  width:96px;
  height:96px;
  margin:0;
}
.shell main:has(#devices:not([hidden]) #measurement-cards:not([hidden])) {
  padding-right:32px;
}
.shell main:has(#devices:not([hidden]) #measurement-cards:not([hidden]))>.mini-widget {
  position:static;
  width:100%;
  margin:20px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  box-shadow:none;
}
.shell main:has(#devices:not([hidden]) #measurement-cards:not([hidden]))>.mini-widget .mini-thumbnail {
  flex:0 0 96px;
  width:96px;
  height:96px;
  margin:0;
}
@media(max-width:1150px) {
  .m-main-readings {
    grid-template-columns:1fr;
  }
  .m-main-readings .m-total {
    border-left:0;
    border-top:1px solid #d7e5e0;
    padding:20px 0 0;
  }
  .m-main-readings .m-total .m-value {
    font-size:40px;
  }
}
@media(max-width:1050px) {
  .m-main-readings {
    gap:22px;
    padding:24px;
  }
  .m-main-readings .m-total {
    padding-left:0;
  }
  .m-main-readings .m-value {
    font-size:36px;
  }
  .m-main-readings .m-primary .m-value {
    font-size:48px;
  }
  .m-main-readings .m-unit {
    font-size:18px;
  }
  .m-context {
    display:block;
  }
  .m-context>div {
    margin-top:8px;
    gap:10px 20px;
  }
  .m-card-readings {
    grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  }
  .m-card-time {
    grid-column:1/-1;
  }
  .m-card-readings>.m-card-time {
    border-left:0;
    border-top:1px solid #e0e6e8;
    padding:14px 0 0;
  }
}
@media(max-width:700px) {
  .shell main:has(#devices:not([hidden]) #measurement-cards:not([hidden])) {
    padding-right:16px;
  }
  .m-header {
    gap:14px;
  }
  .m-header h1 {
    font-size:22px;
  }
  .m-header .actions {
    width:100%;
  }
  .m-header .m-connection {
    margin-right:auto;
  }
  .m-context {
    font-size:13px;
  }
  .m-context>div {
    display:block;
  }
  .m-context>div>span {
    display:block;
    white-space:normal;
  }
  .m-main-readings {
    display:block;
    padding:20px;
  }
  .m-main-readings .m-label {
    margin-bottom:10px;
  }
  .m-main-readings .m-primary .m-value {
    font-size:52px;
  }
  .m-main-readings .m-total {
    border-left:0;
    border-top:1px solid #d7e5e0;
    padding:18px 0 0;
    margin-top:20px;
  }
  .m-main-readings .m-total .m-value {
    font-size:clamp(25px,7.2vw,36px);
    letter-spacing:-.6px;
  }
  .m-main-readings .m-unit {
    font-size:17px;
  }
  .m-label h2 {
    font-size:18px;
  }
  .m-quality {
    font-size:12px;
  }
  .m-secondary {
    display:block;
    padding:16px 0;
  }
  .m-secondary .m-label {
    margin-bottom:8px;
  }
  .m-secondary .m-value {
    font-size:28px;
  }
  .m-support-readings {
    display:block;
    padding:0;
    border:0;
    border-radius:0;
    margin:0 0 20px;
  }
  .m-support-readings .m-field {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid #e0e6e8;
  }
  .m-support-readings .m-field+.m-field {
    border-left:0;
    padding-left:0;
  }
  .m-support-readings .m-label {
    margin:0;
  }
  .m-support-readings .m-label h2 {
    font-size:17px;
  }
  .m-support-readings .m-value {
    font-size:26px;
  }
  .m-support-readings .m-unit {
    font-size:15px;
  }
  .m-info {
    padding:18px 16px;
  }
  .m-meta {
    grid-template-columns:90px minmax(0,1fr);
    gap:12px;
  }
  .m-card-readings {
    display:block;
    padding:16px;
  }
  .m-card-readings>section {
    padding:0 0 14px;
  }
  .m-card-readings>section+section {
    border-left:0;
    border-top:1px solid #e0e6e8;
    padding:14px 0;
  }
  .m-card-readings .m-value {
    font-size:30px;
  }
  .m-card-readings .m-reading-total .m-value {
    font-size:clamp(24px,7.2vw,30px);
  }
  .m-card-readings .m-label h2 {
    font-size:17px;
  }
  .m-card-time p {
    font-size:17px;
  }
  .m-device-card>header {
    padding:18px 16px;
  }
  .m-device-card h2 {
    font-size:20px;
  }
  .m-device-card>footer {
    margin:0 16px;
  }
  .m-message-readings>div {
    grid-template-columns:1fr auto;
  }
  .m-message-readings .m-quality {
    grid-column:1/-1;
    justify-self:start;
  }
  .m-history-table table {
    min-width:700px;
  }
}
@media(max-width:350px) {
  .m-main-readings {
    padding:18px 14px;
  }
  .m-main-readings .m-total .m-value {
    font-size:25px;
  }
  .m-main-readings .m-total .m-unit {
    font-size:14px;
  }
  .m-main-readings .m-primary .m-value {
    font-size:46px;
  }
  .m-header .actions {
    gap:6px;
  }
  .m-header .m-connection {
    padding:0 8px;
  }
  .m-support-readings .m-label {
    gap:6px;
  }
}