.precision-display,
.precision-display * { box-sizing: border-box; }

.precision-display {
  --p-ink: #e6e5df;
  --p-muted: #a8aaa9;
  --p-metal: #90999d;
  --p-faint: #687074;
  --p-blue: #9dbdc4;
  --p-line: #51595c;
  isolation: isolate;
  color: var(--p-ink);
  background:
    radial-gradient(ellipse at 47% -24%, #344247 0, transparent 49%),
    repeating-linear-gradient(105deg, transparent 0 2px, #ffffff03 2px 3px),
    #12191c;
  border: 1px solid #8b9292;
  border-radius: .9rem;
  box-shadow: 0 1px 0 #f3f5ef38 inset, 0 0 0 3px #1a2225 inset, 0 1.4rem 3rem #0008;
  overflow: hidden;
  font-family: "Segoe UI", Arial, sans-serif;
}

.precision-display h2,
.precision-display h3,
.precision-display p { margin: 0; }

.precision-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem 2rem;
  padding: clamp(1.1rem, 3vw, 1.7rem) clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid #6e777b;
  background: linear-gradient(180deg, #ffffff0b, transparent);
}

.precision-kicker,
.precision-header-time,
.precision-status,
.precision-dial-index,
.precision-dial-centre > span:last-child,
.precision-count,
.precision-foot,
.precision-social-plate,
.precision-measure-note {
  font-family: "Consolas", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}

.precision-kicker {
  color: #c0c8c8;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .19em;
}

.precision-kicker span { color: var(--p-blue); padding-inline: .35em; }
.precision-header h2 {
  margin-top: .4rem;
  font-size: clamp(1.55rem, 3.4vw, 2.25rem);
  font-weight: 540;
  letter-spacing: -.045em;
  line-height: 1.1;
}
.precision-intro { color: var(--p-muted); font-size: .83rem; margin-top: .35rem !important; }
.precision-header-time {
  display: grid;
  gap: .27rem;
  flex: none;
  border-left: 1px solid var(--p-line);
  padding-left: 1.15rem;
  text-align: right;
}
.precision-header-time > span { color: var(--p-muted); font-size: .62rem; letter-spacing: .13em; }
.precision-header-time strong { font-size: .75rem; font-weight: 550; }
.precision-header-time time { white-space: nowrap; }

.precision-instruments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #657073;
}

.precision-instrument {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 35%, #293238 0, #1a2328 32%, #11181b 75%),
    #141b1e;
  padding: 1rem clamp(.85rem, 2vw, 1.45rem) .95rem;
}

.precision-instrument-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .7rem;
  min-height: 2.7rem;
}
.precision-instrument-head h3 {
  font-size: clamp(.91rem, 1.3vw, 1.05rem);
  font-weight: 580;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.precision-status {
  max-width: 7rem;
  border: 1px solid currentColor;
  border-radius: .16rem;
  color: #c4c9c8;
  padding: .2rem .3rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}
.precision-tone-good { color: #b6d6bd; }
.precision-tone-warning { color: #e5cc9f; }
.precision-tone-danger { color: #efb6ad; }

.precision-dial {
  position: relative;
  width: min(100%, 13.9rem);
  aspect-ratio: 1;
  align-self: center;
  margin: .2rem auto .1rem;
  filter: drop-shadow(0 .35rem .55rem #0008);
}
.precision-dial svg { display: block; width: 100%; height: 100%; }
.precision-bezel-outer { fill: #161e22; stroke: #a0a9a9; stroke-width: 3; }
.precision-bezel-inner { fill: #30393d; stroke: #596468; stroke-width: 2; }
.precision-face { fill: #10191c; stroke: #050a0c; stroke-width: 2; }
.precision-tick { stroke: #788588; stroke-width: .6; }
.precision-tick-major { stroke: #e5e9e4; stroke-width: 1.1; }
.precision-track { fill: none; stroke: #44545a; stroke-width: 2.5; stroke-linecap: round; }
.precision-sweep { fill: none; stroke: var(--p-blue); stroke-width: 2.8; stroke-linecap: round; }
.precision-sweep-price { stroke: #d8d1bd; }
.precision-needle { fill: #f0efdf; stroke: #61767a; stroke-width: .5; }
.precision-hub { fill: #b8c2c3; stroke: #252f33; stroke-width: 1; }
.precision-mark {
  fill: #b7c1c0;
  font: 6.4px "Consolas", monospace;
  text-anchor: middle;
  dominant-baseline: middle;
}
.precision-dial-centre {
  position: absolute;
  inset: 37% 13% 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.precision-dial-index { color: var(--p-muted); font-size: .55rem; letter-spacing: .12em; }
.precision-dial-centre strong {
  font-size: clamp(2.15rem, 4vw, 3rem);
  font-weight: 520;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.065em;
}
.precision-dial-centre > span:last-child { color: var(--p-muted); font-size: .52rem; letter-spacing: .09em; }

.precision-social-plate {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  width: min(100%, 13.9rem);
  aspect-ratio: 1;
  border: .4rem double #8b9697;
  border-radius: .35rem;
  background:
    repeating-linear-gradient(90deg, #ffffff06 0 1px, transparent 1px 6px),
    radial-gradient(circle, #293337, #10191c 72%);
  box-shadow: 0 0 0 1px #0b1012, 0 .4rem .6rem #0008, 0 0 0 3px #ffffff0c inset;
  text-align: center;
}
.precision-social-plate-label { color: #c4cccc; font-size: .57rem; letter-spacing: .13em; }
.precision-social-plate strong { font-size: 1.18rem; font-weight: 600; letter-spacing: .055em; }
.precision-social-plate-rule { width: 2.8rem; height: 1px; background: var(--p-blue); }
.precision-social-plate > span:last-child { color: var(--p-muted); font-size: .54rem; letter-spacing: .08em; }

.precision-data { display: grid; gap: .34rem; padding-top: .25rem; }
.precision-primary { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .55rem; }
.precision-primary strong {
  font: 540 clamp(1.15rem, 2.2vw, 1.55rem)/1.2 "Consolas", monospace;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.precision-primary span { color: var(--p-muted); font-size: .77rem; }
.precision-count { color: #d5d8d4; font-size: .68rem; letter-spacing: .03em; }
.precision-detail { color: var(--p-muted); font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere; }
.precision-foot {
  display: grid;
  gap: .65rem;
  margin-top: auto;
  padding-top: .8rem;
  font-size: .68rem;
}
.precision-foot p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem .65rem;
  padding-top: .5rem;
  border-top: 1px solid var(--p-line);
}
.precision-foot p > span:first-child { color: var(--p-muted); font-size: .61rem; letter-spacing: .07em; }
.precision-foot a {
  justify-self: start;
  min-height: 2.15rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #d7e9eb;
  text-underline-offset: .22em;
}
.precision-foot a:hover { color: white; }
.precision-foot a:focus-visible { outline: 2px solid #d3edf1; outline-offset: 3px; }

.precision-measure-note {
  padding: .75rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid #6e777b;
  background: linear-gradient(180deg, #263136, #1a2428);
  color: var(--p-muted);
  font-size: .64rem;
  letter-spacing: .015em;
}

@media (max-width: 850px) {
  .precision-instruments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .precision-instrument-social { grid-column: 1 / -1; }
  .precision-instrument-social .precision-social-plate { width: 9rem; aspect-ratio: 1.2; }
}

@media (max-width: 580px) {
  .precision-header { align-items: start; flex-direction: column; }
  .precision-header-time { text-align: left; border-left: 0; padding-left: 0; }
  .precision-instruments { grid-template-columns: minmax(0, 1fr); }
  .precision-instrument-social { grid-column: auto; }
  .precision-instrument { padding: .9rem 1rem; }
  .precision-instrument-head { min-height: 2.5rem; }
  .precision-dial { width: min(100%, 11.6rem); }
  .precision-social-plate { width: min(100%, 11.6rem) !important; aspect-ratio: 1.5 !important; }
}

@media (max-width: 350px) {
  .precision-instrument-head { grid-template-columns: minmax(0, 1fr); }
  .precision-status { justify-self: start; }
}