.metrics{background:#15252c;padding:8px 24px;gap:10px;border-bottom:1px solid #43575c;grid-template-columns:repeat(5,minmax(0,1fr))}
.metrics article:nth-child(n){display:grid;grid-template-rows:20px 30px auto 22px;gap:2px;padding:8px 12px 6px;border:1px solid #40545c;border-top:2px solid #75cbb5;border-radius:4px;background:#1b2e36;min-width:0}
.metrics article>span{color:#b8ccd1;font:10px var(--mono);letter-spacing:.3px;min-height:0;line-height:1.3;align-items:flex-start;gap:4px}
.metrics article>div{display:flex;flex-wrap:nowrap;gap:5px;align-items:baseline;margin:0;min-height:0;white-space:nowrap}
.metrics strong{color:#b1f0d9;font:30px var(--mono);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.metrics small{color:#b8cbd0;font-size:11px}.metrics article>small{grid-row:4;font-size:10px;line-height:1.35;min-height:0}
.metrics .tag{display:inline-block;color:#e0e8d5;border:1px solid #61766e;background:#2b403e;font-size:8px;padding:2px 4px;margin:0}
.metrics .info{color:#bfdbd4;border-color:#829d96;flex-shrink:0;width:13px;height:13px;font-size:9px;line-height:11px}
.instrument-trend{grid-row:3;margin:0;padding:0;border:0;min-width:0}
.instrument-trend figcaption{color:#acc5ce;font:9px var(--mono);margin:0 0 2px;line-height:1.3;white-space:nowrap}
.metrics .instrument-trend svg{display:block;width:100%;height:72px;margin:0;overflow:visible}
.instrument-trend svg text{fill:#a8c0c8;font:9px var(--mono)}.trend-grid{stroke:#526b76;stroke-width:.6;stroke-dasharray:2 4}
.metrics article:nth-child(3){border-top-color:#7bc8ee}.metrics article:nth-child(4){border-top-color:#ddc58b}
.workspace{height:calc(100vh - 370px)}
@media(min-width:1700px){.metrics strong{font-size:34px}.metrics .instrument-trend svg{height:78px}}
@media(max-width:1100px) and (min-width:761px){.metrics{padding:10px 14px;gap:6px}.metrics article:nth-child(n){padding:8px;grid-template-rows:28px 32px auto 32px}.metrics strong{font-size:26px}.metrics .tag{font-size:7px;padding:2px}.metrics small{font-size:10px}.metrics article>small{font-size:9px}.instrument-trend figcaption{font-size:8px}}
@media(max-width:760px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 14px;gap:8px}}
@media(max-width:640px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px 12px;gap:8px}.metrics article:nth-child(n){padding:8px;grid-template-rows:28px 32px auto 30px}.metrics strong{font-size:28px}.metrics article>span{font-size:9px}.metrics article>small{font-size:9px}.metrics small{font-size:10px}.metrics .tag{font-size:7px;padding:2px}.instrument-trend figcaption{font-size:8px}.metrics article:last-child{grid-column:1/-1}.metrics .instrument-trend svg{height:66px}}
/* One compact instrument row leaves room for the wallpaper map. */
.wallpaper .metrics{grid-template-columns:repeat(5,minmax(180px,1fr));overflow-x:auto;padding:8px 14px;gap:8px}
.wallpaper .metrics article:nth-child(n){padding:8px;grid-template-rows:24px 30px auto 26px;grid-column:auto}
.wallpaper .metrics article>div{min-height:0;margin:0}.wallpaper .metrics strong{font-size:28px}
.wallpaper .metrics article>span{min-height:0}.wallpaper .metrics article>small{font-size:9px;min-height:0}
.wallpaper .instrument-trend{margin:0;padding:0}.wallpaper .metrics .instrument-trend svg{height:66px}

/* On wide monitors, dedicate the right side of each instrument to its graph. */
@media(min-width:2000px){
 .metrics article:nth-child(n){grid-template-columns:minmax(150px,.34fr) minmax(0,1fr);grid-template-rows:20px 40px 64px;column-gap:16px;row-gap:3px;align-items:start}
 .metrics article>span{grid-column:1/-1;grid-row:1}
 .metrics article>div{grid-column:1;grid-row:2;flex-wrap:wrap;white-space:normal;align-content:start}
 .metrics article>small{grid-column:1;grid-row:3;align-self:end;font-size:11px;line-height:1.5}
 .metrics strong{font-size:32px}
 .instrument-trend{grid-column:2;grid-row:2/4;width:100%;align-self:stretch;display:flex;flex-direction:column}
 .metrics .instrument-trend svg{width:100%;height:90px;flex:1;min-height:80px}
 .instrument-trend figcaption{font-size:10px}
 .wallpaper .metrics article:nth-child(n){grid-template-columns:minmax(140px,.34fr) minmax(0,1fr);grid-template-rows:20px 34px 58px;column-gap:12px}
 .wallpaper .metrics .instrument-trend svg{height:80px}
}