.case-page-header {
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(7,9,13,.90);

  position: sticky;
  top: 0;
  z-index: 50;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.case-page-wrap {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.case-page-nav {
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;
}

.case-page-brand {
  font-weight: 800;
  letter-spacing: -.02em;
}

.case-page-back {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;

  transition: color .18s ease;
}

.case-page-back:hover {
  color: var(--text);
}

:root {
  --bg: #07090d;
  --bg2: #0a0e14;

  --panel: rgba(14,18,25,.86);
  --panel-solid: #0d1218;

  --line: #232b38;
  --line-soft: rgba(255,255,255,.055);

  --text: #f4f7fb;
  --muted: #94a0b2;
  --muted2: #697588;

  --blue: #6ea8ff;
  --cyan: #6fdce4;
  --green: #5cd8ae;
  --amber: #efbd55;

  --red: #ef6868;
  --orange: #e89c58;
  --yellow: #efbd55;

  --shadow: 0 28px 90px rgba(0,0,0,.38);
  --shadow-soft: 0 16px 42px rgba(0,0,0,.26);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(circle at 16% -8%, rgba(110,168,255,.13), transparent 27%),
    radial-gradient(circle at 88% 7%, rgba(111,220,228,.07), transparent 22%),
    linear-gradient(180deg, #07090d 0%, #090d13 48%, #07090d 100%);
}

/* subtle dashboard grid */
body::before {
  content: "";
  position: fixed;
  inset: -22vh -12vw -10vh;
  pointer-events: none;
  z-index: 0;

  opacity: .42;

  background:
    linear-gradient(rgba(110,168,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,168,255,.022) 1px, transparent 1px);

  background-size: 72px 72px;

  transform:
    perspective(700px)
    rotateX(62deg)
    translateY(30vh)
    scale(1.35);

  transform-origin: center center;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.16) 25%,
      rgba(0,0,0,.82) 67%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.16) 25%,
      rgba(0,0,0,.82) 67%,
      transparent 100%
    );
}

.dashboard {
  position: relative;
  z-index: 2;

  width: min(1600px, calc(100% - 30px));
  margin: 0 auto;

  padding: 24px 0 34px;
}

/* ======================================================
   HEADER
====================================================== */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding: 14px 8px 20px;

  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;

  flex-wrap: wrap;
}

.brand-case {
  color: #c7d2e1;

  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.brand-divider {
  width: 1px;
  height: 34px;

  background: #344153;
}

.brand-title {
  font-size: clamp(1.4rem, 2.4vw, 2.25rem);

  font-weight: 900;
  letter-spacing: .045em;

  color: var(--text);
}

.updated-box {
  flex: 0 0 auto;

  padding: 10px 15px;

  border: 1px solid #2b3441;
  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.006)
    ),
    rgba(13,18,24,.88);

  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255,255,255,.025);

  color: #aab4c3;

  font-size: .76rem;
  line-height: 1.55;
  letter-spacing: .04em;
}

.updated-box strong {
  color: var(--amber);
}

/* ======================================================
   GAUGE GRID
====================================================== */

.gauge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 28px;

  margin-top: 34px;
}

.gauge-card {
  min-width: 0;
  text-align: center;
}

.gauge-heading {
  margin-bottom: 14px;

  color: var(--text);

  font-size: 1.18rem;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: .055em;
}

.gauge-subheading {
  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: .72rem;
  font-weight: 700;

  letter-spacing: .13em;
}

/* ======================================================
   GAUGE BODY
====================================================== */

.instrument-gauge {
  --accent: var(--blue);

  position: relative;

  width: min(100%, 430px);
  aspect-ratio: 1 / 1;

  margin: 0 auto;

  filter:
    drop-shadow(0 18px 26px rgba(0,0,0,.48));
}

.case-gauge {
  --accent: var(--blue);
}

.hung-gauge {
  --accent: var(--amber);
}

.investigation-gauge {
  --accent: var(--green);
}

/* outer housing */
.gauge-outer-ring {
  position: absolute;
  inset: 0;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 34% 24%,
      #414b58 0%,
      #1f2630 6%,
      #0b0e13 15%,
      #06080b 68%,
      #161b22 87%,
      #394452 96%,
      #080a0e 100%
    );

  box-shadow:
    0 20px 50px rgba(0,0,0,.65),
    inset 0 2px 2px rgba(255,255,255,.12),
    inset 0 -4px 10px rgba(0,0,0,.85);
}

/* dark anodized inner bezel */
.gauge-metal-ring {
  position: absolute;
  inset: 3%;

  border-radius: 50%;

  background:
    conic-gradient(
      from 20deg,
      #27313d,
      #121820 15%,
      #2a3542 28%,
      #10151c 47%,
      #2b3643 68%,
      #121820 84%,
      #27313d
    );

  box-shadow:
    inset 0 0 4px rgba(255,255,255,.08),
    0 0 0 1px #05070a;
}

.gauge-inner-ring {
  position: absolute;
  inset: 3%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #151a21 0%,
      #090c11 72%,
      #020304 100%
    );

  box-shadow:
    inset 0 0 18px rgba(0,0,0,.92),
    0 0 0 1px #05070a;
}

.gauge-face {
  position: absolute;
  inset: 4.5%;

  overflow: hidden;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at center,
      #0d1218 0%,
      #0a0e14 46%,
      #070a0f 68%,
      #020304 100%
    );

  box-shadow:
    inset 0 0 50px rgba(0,0,0,.92),
    inset 0 0 7px rgba(255,255,255,.035),
    0 0 0 1px rgba(255,255,255,.028);
}

.gauge-face::after {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: 50%;
  pointer-events: none;

  box-shadow:
    inset 0 0 36px
    color-mix(
      in srgb,
      var(--accent) 8%,
      transparent
    );
}

/* ======================================================
   COLOR ZONES
====================================================== */

.case-zone,
.meter-zone {
  position: absolute;
  inset: 7%;

  border-radius: 50%;

  pointer-events: none;
}

.zone-defense {
  background:
    conic-gradient(
      from 225deg,
      rgba(110,168,255,.84) 0deg 118deg,
      transparent 118deg 360deg
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 78%,
      #000 79% 82%,
      transparent 83%
    );

  mask:
    radial-gradient(
      circle,
      transparent 0 78%,
      #000 79% 82%,
      transparent 83%
    );

  filter:
    drop-shadow(0 0 5px rgba(110,168,255,.52));
}

.zone-neutral {
  background:
    conic-gradient(
      from 225deg,
      transparent 0deg 118deg,
      rgba(210,220,232,.92) 118deg 152deg,
      transparent 152deg 360deg
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 78%,
      #000 79% 82%,
      transparent 83%
    );

  mask:
    radial-gradient(
      circle,
      transparent 0 78%,
      #000 79% 82%,
      transparent 83%
    );
}

.zone-commonwealth {
  background:
    conic-gradient(
      from 225deg,
      transparent 0deg 152deg,
      rgba(239,104,104,.82) 152deg 270deg,
      transparent 270deg 360deg
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 78%,
      #000 79% 82%,
      transparent 83%
    );

  mask:
    radial-gradient(
      circle,
      transparent 0 78%,
      #000 79% 82%,
      transparent 83%
    );

  filter:
    drop-shadow(0 0 5px rgba(239,104,104,.42));
}

.hung-zone {
  background:
    conic-gradient(
      from 225deg,
      rgba(92,216,174,.82) 0deg 72deg,
      rgba(239,189,85,.72) 72deg 150deg,
      rgba(232,156,88,.82) 150deg 215deg,
      rgba(239,104,104,.82) 215deg 270deg,
      transparent 270deg
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 78%,
      #000 79% 82%,
      transparent 83%
    );

  mask:
    radial-gradient(
      circle,
      transparent 0 78%,
      #000 79% 82%,
      transparent 83%
    );

  filter:
    drop-shadow(0 0 5px rgba(239,189,85,.32));
}

.investigation-zone {
  background:
    conic-gradient(
      from 225deg,
      rgba(239,104,104,.72) 0deg 68deg,
      rgba(232,156,88,.72) 68deg 132deg,
      rgba(239,189,85,.72) 132deg 190deg,
      rgba(92,216,174,.84) 190deg 270deg,
      transparent 270deg
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 78%,
      #000 79% 82%,
      transparent 83%
    );

  mask:
    radial-gradient(
      circle,
      transparent 0 78%,
      #000 79% 82%,
      transparent 83%
    );

  filter:
    drop-shadow(0 0 5px rgba(92,216,174,.28));
}

/* ======================================================
   SCALE
====================================================== */

.gauge-scale {
  position: absolute;
  inset: 0;

  z-index: 4;
  pointer-events: none;
}

.scale-tick {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 2px;
  height: 8px;

  background: rgba(180,194,210,.64);

  transform-origin: 50% 0;
}

.scale-tick.major {
  width: 2px;
  height: 15px;

  background: #dfe7ef;

  box-shadow:
    0 0 4px rgba(180,210,255,.25);
}

.scale-tick.medium {
  height: 11px;
  background: #9eabb9;
}

.scale-number {
  position: absolute;

  width: 48px;
  height: 18px;

  margin-left: -24px;
  margin-top: -9px;

  color: #cbd5df;

  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;

  text-align: center;
}

/* ======================================================
   FACE COPY
====================================================== */

.gauge-face-title {
  position: absolute;

  top: 21%;
  left: 0;
  right: 0;

  z-index: 6;

  color: #dce5ef;

  font-size: .62rem;
  font-weight: 900;

  letter-spacing: .2em;
  text-align: center;
}

.gauge-face-subtitle {
  position: absolute;

  top: 25.5%;
  left: 0;
  right: 0;

  z-index: 6;

  color: var(--muted2);

  font-size: .47rem;
  font-weight: 700;

  letter-spacing: .17em;
  text-align: center;
}

/* ======================================================
   DIGITAL DISPLAY
====================================================== */

.digital-display {
  position: absolute;

  z-index: 9;

  left: 50%;
  top: 52%;

  min-width: 41%;

  transform:
    translate(-50%, -50%);

  padding: 9px 14px 8px;

  border: 1px solid #202a36;
  border-radius: 6px;

  background:
    linear-gradient(
      180deg,
      rgba(110,168,255,.025),
      transparent 30%
    ),
    #06090d;

  box-shadow:
    inset 0 0 14px rgba(0,0,0,.86),
    0 1px 0 rgba(255,255,255,.025);
}

.digital-status {
  color: var(--accent);

  font-size: clamp(.6rem, .9vw, .82rem);

  font-weight: 900;
  letter-spacing: .09em;

  text-transform: uppercase;

  text-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(--accent) 48%,
      transparent
    );
}

.digital-value {
  margin-top: 2px;

  color: var(--accent);

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: clamp(2.2rem, 5vw, 4.2rem);

  font-weight: 900;
  line-height: .95;
  letter-spacing: -.07em;

  text-shadow:
    0 0 6px
    color-mix(
      in srgb,
      var(--accent) 58%,
      transparent
    );
}

.digital-unit {
  margin-top: 3px;

  color: var(--muted2);

  font-size: .5rem;
  font-weight: 800;

  letter-spacing: .18em;
}

/* ======================================================
   NEEDLE
====================================================== */

.needle-assembly {
  position: absolute;
  inset: 0;

  z-index: 8;
  pointer-events: none;
}

.gauge-needle {
  --needle-angle: -135deg;

  position: absolute;

  left: 50%;
  top: 50%;

  width: 4px;
  height: 36%;

  transform-origin: 50% 100%;

  transform:
    translate(-50%, -100%)
    rotate(var(--needle-angle));

  border-radius: 100% 100% 2px 2px;

  background:
    linear-gradient(
      90deg,
      #8f3d3d 0%,
      #ef6868 37%,
      #fff 50%,
      #ef6868 63%,
      #7e3636 100%
    );

  box-shadow:
    0 0 3px rgba(239,104,104,.7),
    0 0 8px rgba(239,104,104,.36);

  transition:
    transform
    1.25s
    cubic-bezier(.22,.8,.2,1);
}

.gauge-needle::before {
  content: "";

  position: absolute;

  left: 50%;
  top: -5px;

  width: 1px;
  height: 8px;

  transform: translateX(-50%);

  background: #fff;
}

.needle-counterweight {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 8px;
  height: 12%;

  transform: translate(-50%, 0);

  transform-origin: 50% 0;

  background:
    linear-gradient(
      180deg,
      #703d3d,
      #241313
    );

  clip-path:
    polygon(
      32% 0,
      68% 0,
      100% 100%,
      0 100%
    );
}

.needle-hub {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 11%;
  aspect-ratio: 1;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #8994a0 0%,
      #454e59 18%,
      #20262d 44%,
      #090b0e 72%,
      #313a43 100%
    );

  box-shadow:
    0 3px 7px rgba(0,0,0,.8),
    inset 0 1px 2px rgba(255,255,255,.18),
    0 0 0 1px #000;
}

.hub-center {
  position: absolute;
  inset: 30%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #a5afb8,
      #303741 60%,
      #06080b
    );
}

/* ======================================================
   CASE LABELS
====================================================== */

.case-side-label {
  position: absolute;

  z-index: 6;

  bottom: 22%;

  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.case-side-defense {
  left: 13%;
  color: var(--blue);
}

.case-side-commonwealth {
  right: 9%;
  color: var(--red);
}

/* ======================================================
   DAILY MOVEMENT
====================================================== */

.gauge-movement {
  position: absolute;

  z-index: 7;

  left: 50%;
  bottom: 11%;

  transform: translateX(-50%);

  color: var(--accent);

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: .88rem;
  font-weight: 900;

  text-shadow:
    0 0 7px
    color-mix(
      in srgb,
      var(--accent) 38%,
      transparent
    );
}

.gauge-movement small {
  display: block;

  margin-top: 1px;

  color: var(--muted2);

  font-family:
    Inter,
    system-ui,
    sans-serif;

  font-size: .45rem;

  letter-spacing: .2em;
}

/* ======================================================
   GLASS
====================================================== */

.gauge-glass {
  position: absolute;
  inset: 0;

  z-index: 15;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 33% 19%,
      rgba(255,255,255,.1) 0%,
      rgba(255,255,255,.025) 18%,
      transparent 40%
    ),

    linear-gradient(
      145deg,
      rgba(110,168,255,.018) 0%,
      transparent 28%,
      transparent 70%,
      rgba(255,255,255,.012) 100%
    );

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.035);
}

/* ======================================================
   DESCRIPTION
====================================================== */

.gauge-description {
  max-width: 390px;
  min-height: 42px;

  margin: 12px auto 0;

  color: var(--muted);

  font-size: .8rem;
  line-height: 1.55;
}

/* ======================================================
   LOWER DASHBOARD
====================================================== */

.lower-grid {
  display: grid;

  grid-template-columns:
    1.25fr 1fr 1.05fr;

  gap: 14px;

  margin-top: 24px;
}

.panel {
  overflow: hidden;

  border: 1px solid rgba(125,147,178,.18);
  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.032),
      rgba(255,255,255,.008)
    ),
    var(--panel);

  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.025);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.panel-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 15px 18px;

  border-bottom:
    1px solid var(--line-soft);

  color: #e7edf6;

  font-size: .82rem;
  font-weight: 900;

  letter-spacing: .055em;
  text-transform: uppercase;
}

.panel-header a {
  color: #9fb9df;

  text-decoration: none;

  font-size: .67rem;
  font-weight: 800;
}

/* ======================================================
   IMPACT
====================================================== */

.impact-body {
  display: grid;

  grid-template-columns:
    .95fr 1.1fr;
}

.impact-meters {
  padding: 18px;

  border-right:
    1px solid var(--line-soft);
}

.impact-row {
  display: grid;

  grid-template-columns:
    135px 1fr 48px;

  gap: 12px;

  align-items: center;

  padding: 14px 0;

  border-bottom:
    1px solid var(--line-soft);
}

.impact-row:last-child {
  border-bottom: none;
}

.impact-label {
  font-size: .74rem;
  font-weight: 900;

  text-transform: uppercase;
}

.impact-label.blue {
  color: var(--blue);
}

.impact-label.orange {
  color: var(--amber);
}

.impact-label.green {
  color: var(--green);
}

.mini-bars {
  display: flex;
  gap: 3px;
}

.mini-bars span {
  width: 14px;
  height: 12px;

  border: 1px solid #27313d;

  background: #151b23;
}

.mini-bars.blue span.active {
  background: var(--blue);

  box-shadow:
    0 0 6px rgba(110,168,255,.34);
}

.mini-bars.orange span.active {
  background: var(--amber);

  box-shadow:
    0 0 6px rgba(239,189,85,.30);
}

.mini-bars.green span.active {
  background: var(--green);

  box-shadow:
    0 0 6px rgba(92,216,174,.28);
}

.impact-number {
  color: #fff;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 1.05rem;
  font-weight: 900;

  text-align: right;
}

#impactCase {
  color: var(--blue);
}

#impactHung {
  color: var(--amber);
}

#impactInvestigation {
  color: var(--green);
}

/* ======================================================
   TAKEAWAYS
====================================================== */

.takeaways {
  padding: 18px;
}

.takeaways h4 {
  margin: 0 0 12px;

  color: #dce5ef;

  font-size: .74rem;

  letter-spacing: .065em;

  text-transform: uppercase;
}

.takeaways ul {
  margin: 0;

  padding-left: 18px;

  color: #aab4c3;

  font-size: .82rem;
  line-height: 1.58;
}

/* ======================================================
   FACTORS
====================================================== */

.factor-list {
  padding: 8px 16px 13px;
}

.factor-row {
  display: grid;

  grid-template-columns:
    1fr auto auto;

  gap: 10px;

  align-items: center;

  padding: 10px 0;

  border-bottom:
    1px solid var(--line-soft);
}

.factor-row:last-child {
  border-bottom: none;
}

.factor-name {
  color: #d5dde7;

  font-size: .79rem;
}

.factor-level {
  font-size: .64rem;
  font-weight: 900;

  text-transform: uppercase;
}

.factor-score {
  min-width: 78px;

  color: var(--muted);

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: .7rem;

  text-align: right;
}

.very-high {
  color: var(--red);
}

.high {
  color: var(--amber);
}

.moderate {
  color: #d8cb71;
}

/* ======================================================
   TREND
====================================================== */

.trend-wrap {
  padding: 17px;
}

canvas {
  display: block;

  width: 100%;
  height: 250px;
}

.legend {
  display: flex;
  flex-wrap: wrap;

  gap: 15px;

  margin-top: 11px;

  color: var(--muted);

  font-size: .7rem;
}

.legend-dot {
  display: inline-block;

  width: 8px;
  height: 8px;

  margin-right: 5px;

  border-radius: 50%;
}

.blue-dot {
  background: var(--blue);
}

.orange-dot {
  background: var(--amber);
}

.green-dot {
  background: var(--green);
}

/* ======================================================
   FOOTER
====================================================== */

.footer-bar {
  display: flex;

  align-items: center;

  gap: 15px;

  flex-wrap: wrap;

  margin-top: 14px;

  padding: 14px 16px;

  border:
    1px solid rgba(125,147,178,.16);

  border-radius: 12px;

  background:
    rgba(11,15,21,.78);
}

.footer-copy {
  flex: 1;

  min-width: 280px;
}

.footer-copy strong {
  display: block;

  margin-bottom: 3px;

  color: #dce5ef;

  font-size: .72rem;

  letter-spacing: .08em;

  text-transform: uppercase;
}

.footer-copy span {
  color: var(--muted);

  font-size: .74rem;
}

.footer-actions {
  display: flex;

  gap: 8px;

  flex-wrap: wrap;
}

.footer-actions button {
  padding: 8px 12px;

  border: 1px solid #2c3747;
  border-radius: 8px;

  background:
    #0f141c;

  color: #c7d6e9;

  cursor: pointer;

  font-size: .64rem;
  font-weight: 800;

  letter-spacing: .05em;

  text-transform: uppercase;
}

.footer-actions button:hover {
  border-color: #344153;

  background: #141b25;
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1120px) {

  .gauge-grid {
    grid-template-columns: 1fr;
  }

  .instrument-gauge {
    max-width: 500px;
  }

  .lower-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 680px) {

  .dashboard {
    width:
      min(
        100%,
        calc(100% - 18px)
      );
  }

  .topbar {
    flex-direction: column;

    align-items: flex-start;
  }

  .brand-divider {
    display: none;
  }

  .brand {
    gap: 8px;
  }

  .brand-case {
    width: 100%;

    font-size: .86rem;
  }

  .brand-title {
    font-size: 1.25rem;
  }

  .updated-box {
    width: 100%;
  }

  .impact-body {
    grid-template-columns: 1fr;
  }

  .impact-meters {
    border-right: none;

    border-bottom:
      1px solid var(--line-soft);
  }

  .impact-row {
    grid-template-columns:
      120px 1fr 45px;
  }

  .factor-row {
    grid-template-columns:
      1fr auto;
  }

  .factor-score {
    grid-column: 2;
  }

}

/* ======================================================
   CASE METER V2 — SINGLE-METER EVIDENCE PAGE
   Added for the evidence-driven Case Meter layout.
   Existing gauge/instrument styling above is intentionally preserved.
====================================================== */

.dashboard {
  width: min(1180px, calc(100% - 32px));
  padding: 34px 0 48px;
}

.dashboard-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 8px 4px 26px;
  border-bottom: 1px solid var(--line-soft);
}

.page-kicker,
.section-kicker {
  margin-bottom: 7px;
  color: var(--blue);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dashboard-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.dashboard-intro {
  max-width: 680px;
  margin: 13px 0 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.7;
}

.dashboard-status {
  flex: 0 0 auto;
  padding-bottom: 4px;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .035em;
  text-align: right;
}

.analysis-status-badge {
  display: inline-block;
  padding: 6px 9px;
  border: 1px solid rgba(239,189,85,.28);
  border-radius: 999px;
  background: rgba(239,189,85,.08);
  color: var(--amber);
  font-size: .61rem;
  letter-spacing: .11em;
}

.status-dot {
  margin: 0 7px;
  color: var(--muted2);
}


/* ======================================================
   PRIMARY METER
====================================================== */

.primary-meter-section {
  display: flex;
  justify-content: center;
  padding: 42px 0 22px;
}

.primary-gauge-card {
  width: min(100%, 620px);
}

.primary-gauge-card .instrument-gauge {
  width: min(100%, 500px);
}

.primary-gauge-card .gauge-heading {
  margin-bottom: 18px;
  font-size: 1.34rem;
}

.preliminary-note {
  display: grid;
  gap: 5px;
  max-width: 560px;
  margin: 20px auto 0;
  padding: 14px 17px;
  border: 1px solid rgba(239,189,85,.18);
  border-radius: 12px;
  background: rgba(239,189,85,.045);
  text-align: left;
}

.preliminary-note strong {
  color: var(--amber);
  font-size: .76rem;
  letter-spacing: .03em;
}

.preliminary-note span {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
}


/* ======================================================
   SHARED SECTIONS
====================================================== */

.case-section {
  margin-top: 22px;
  padding: 26px;
  border: 1px solid rgba(125,147,178,.16);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.006)
    ),
    rgba(11,15,21,.76);
  box-shadow:
    0 18px 54px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.02);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.section-heading-row h2,
.support-panel h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: -.025em;
}

.section-badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #2b3746;
  border-radius: 999px;
  background: #0d131b;
  color: #a9b9cc;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.section-copy {
  max-width: 820px;
  margin: -4px 0 20px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.65;
}


/* ======================================================
   WHAT'S DRIVING THE METER
====================================================== */

.evidence-balance-grid,
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.evidence-side-card,
.spotlight-card {
  min-width: 0;
  padding: 21px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(7,10,15,.56);
}

.defense-card {
  border-color: rgba(110,168,255,.18);
  box-shadow: inset 3px 0 0 rgba(110,168,255,.55);
}

.commonwealth-card {
  border-color: rgba(239,104,104,.18);
  box-shadow: inset 3px 0 0 rgba(239,104,104,.52);
}

.evidence-side-label,
.spotlight-label {
  margin-bottom: 9px;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.defense-card .evidence-side-label,
.defense-card .spotlight-label {
  color: var(--blue);
}

.commonwealth-card .evidence-side-label,
.commonwealth-card .spotlight-label {
  color: var(--red);
}

.evidence-side-card h3 {
  margin: 0 0 13px;
  color: #e7edf5;
  font-size: 1rem;
}

.evidence-side-card ul {
  margin: 0;
  padding-left: 18px;
  color: #aeb9c8;
  font-size: .81rem;
  line-height: 1.65;
}

.evidence-side-card li + li {
  margin-top: 7px;
}

.meter-explainer {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255,255,255,.015);
}

.meter-explainer strong {
  color: #dce5ef;
  font-size: .78rem;
}

.meter-explainer p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.6;
}


/* ======================================================
   ANALYSIS STATS
====================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.stat-card {
  padding: 22px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(110,168,255,.035), transparent),
    rgba(6,9,13,.54);
}

.stat-value {
  color: #eef4fb;
  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.06em;
}

.stat-label {
  margin-top: 5px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}


/* ======================================================
   PROPOSITION BREAKDOWN
====================================================== */

.proposition-list {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(6,9,13,.42);
}

.proposition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 145px;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.proposition-row:last-child {
  border-bottom: none;
}

.proposition-copy {
  display: grid;
  gap: 4px;
}

.proposition-id {
  color: var(--muted2);
  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .07em;
}

.proposition-copy strong {
  color: #e2e9f2;
  font-size: .86rem;
}

.proposition-copy > span:last-child {
  max-width: 760px;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.5;
}

.proposition-result {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: right;
}

.proposition-result span {
  display: block;
  margin-bottom: 2px;
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.proposition-result strong {
  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;
  font-size: 1.4rem;
  line-height: 1;
}

.defense-result {
  border: 1px solid rgba(110,168,255,.14);
  background: rgba(110,168,255,.055);
  color: var(--blue);
}

.commonwealth-result {
  border: 1px solid rgba(239,104,104,.14);
  background: rgba(239,104,104,.05);
  color: var(--red);
}


/* ======================================================
   EVIDENCE SPOTLIGHT
====================================================== */

.spotlight-card {
  min-height: 132px;
}

.spotlight-placeholder {
  display: flex;
  align-items: center;
  min-height: 72px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}


/* ======================================================
   FACTOR PROGRESS
====================================================== */

.factor-progress-list {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(6,9,13,.42);
}

.factor-progress-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.factor-progress-row:last-child {
  border-bottom: none;
}

.factor-progress-icon {
  color: #526073;
  font-size: .9rem;
  text-align: center;
}

.factor-progress-row > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.factor-progress-row strong {
  color: #cdd7e4;
  font-size: .8rem;
}

.factor-progress-row > div > span {
  color: var(--muted2);
  font-size: .68rem;
}

.factor-active {
  background: rgba(110,168,255,.035);
}

.factor-active .factor-progress-icon,
.factor-active strong {
  color: var(--blue);
}

.factor-active > div > span {
  color: #9db9df;
}


/* ======================================================
   HOW IT WORKS
====================================================== */

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

.how-card {
  position: relative;
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(6,9,13,.48);
}

.how-number {
  display: block;
  margin-bottom: 18px;
  color: var(--blue);
  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.how-card h3 {
  margin: 0 0 9px;
  color: #e1e8f1;
  font-size: .91rem;
}

.how-card p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.65;
}


/* ======================================================
   SUPPORT / DONATION
====================================================== */

.support-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  margin-top: 22px;
  padding: 30px;
  border: 1px solid rgba(110,168,255,.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 20%, rgba(110,168,255,.09), transparent 32%),
    linear-gradient(135deg, rgba(110,168,255,.055), rgba(255,255,255,.008)),
    rgba(10,14,20,.9);
  box-shadow:
    0 20px 60px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.support-copy p {
  max-width: 760px;
  margin: 12px 0 0;
  color: #a9b4c4;
  font-size: .83rem;
  line-height: 1.68;
}

.support-copy .support-note {
  color: #758399;
  font-size: .72rem;
  font-weight: 700;
}

.support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid rgba(110,168,255,.5);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), transparent),
    #376da8;
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform .16s ease,
    filter .16s ease,
    border-color .16s ease;
}

.support-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: rgba(110,168,255,.78);
}


/* ======================================================
   METHODOLOGY DETAILS
====================================================== */

.methodology-details {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(6,9,13,.42);
}

.methodology-details details {
  border-bottom: 1px solid var(--line-soft);
}

.methodology-details details:last-child {
  border-bottom: none;
}

.methodology-details summary {
  position: relative;
  padding: 17px 48px 17px 19px;
  color: #dbe4ef;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .025em;
  list-style: none;
}

.methodology-details summary::-webkit-details-marker {
  display: none;
}

.methodology-details summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 19px;
  transform: translateY(-50%);
  color: var(--blue);
  font-family: monospace;
  font-size: 1.1rem;
}

.methodology-details details[open] summary::after {
  content: "−";
}

.methodology-details summary:hover {
  background: rgba(255,255,255,.015);
}

.details-body {
  padding: 0 20px 19px;
  color: var(--muted);
  font-size: .79rem;
  line-height: 1.7;
}

.details-body p {
  margin: 0 0 12px;
}

.details-body p:last-child {
  margin-bottom: 0;
}

.formula-block {
  margin: 12px 0;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid rgba(110,168,255,.13);
  border-radius: 9px;
  background: rgba(110,168,255,.035);
  color: #b9cae0;
  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;
  font-size: .7rem;
  white-space: nowrap;
}


/* ======================================================
   V2 FOOTER
====================================================== */

.footer-bar {
  margin-top: 22px;
}

.footer-copy {
  min-width: 0;
}


/* ======================================================
   RESPONSIVE — V2
====================================================== */

@media (max-width: 900px) {

  .dashboard-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-status {
    text-align: left;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-grid {
    grid-template-columns: 1fr;
  }

  .support-panel {
    grid-template-columns: 1fr;
  }

  .support-button {
    width: 100%;
  }

}

@media (max-width: 680px) {

  .case-page-wrap,
  .dashboard {
    width: min(100%, calc(100% - 20px));
  }

  .case-page-nav {
    height: 58px;
  }

  .case-page-brand {
    max-width: 70%;
    font-size: .82rem;
  }

  .dashboard {
    padding-top: 22px;
  }

  .dashboard-title-row {
    padding-bottom: 20px;
  }

  .dashboard-status {
    line-height: 1.8;
  }

  .status-dot {
    display: none;
  }

  #dashboardUpdated {
    display: block;
    margin-top: 4px;
  }

  .primary-meter-section {
    padding-top: 30px;
  }

  .primary-gauge-card .instrument-gauge {
    width: min(100%, 430px);
  }

  .case-section,
  .support-panel {
    padding: 19px 16px;
    border-radius: 15px;
  }

  .section-heading-row {
    margin-bottom: 15px;
  }

  .evidence-balance-grid,
  .spotlight-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-card {
    padding: 18px 14px;
  }

  .proposition-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .proposition-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .proposition-result span {
    margin: 0;
  }

  .factor-progress-row > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .formula-block {
    white-space: normal;
  }

}

@media (max-width: 420px) {

  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stat-value {
    font-size: 1.65rem;
  }

  .case-side-label {
    font-size: .46rem;
  }

  .case-side-defense {
    left: 11%;
  }

  .case-side-commonwealth {
    right: 7%;
  }

}

.digital-status.status-defense {
  color: var(--blue);
  text-shadow:
    0 0 8px rgba(110,168,255,.48);
}

.digital-status.status-commonwealth {
  color: var(--red);
  text-shadow:
    0 0 8px rgba(239,104,104,.48);
}

.digital-status.status-neutral {
  color: #d7dee8;
  text-shadow:
    0 0 8px rgba(215,222,232,.28);
}

/* ======================================================
   FINAL READABILITY BUMP
====================================================== */

body {
  font-size: 18px;
}

.dashboard-intro {
  font-size: 1.1rem;
}

.section-copy {
  font-size: 1rem;
}

.gauge-description {
  font-size: 1rem;
}

.preliminary-note strong {
  font-size: .92rem;
}

.preliminary-note span {
  font-size: .95rem;
}

.evidence-side-card ul {
  font-size: .98rem;
}

.meter-explainer strong {
  font-size: .96rem;
}

.meter-explainer p {
  font-size: .96rem;
}

.proposition-copy strong {
  font-size: 1.03rem;
}

.proposition-copy > span:last-child {
  font-size: .93rem;
}

.factor-progress-row strong {
  font-size: .98rem;
}

.factor-progress-row > div > span {
  font-size: .86rem;
}

.how-card h3 {
  font-size: 1.08rem;
}

.how-card p {
  font-size: .96rem;
}

.support-copy p {
  font-size: 1rem;
}

.methodology-details summary {
  font-size: 1rem;
}

.details-body {
  font-size: .96rem;
}

.footer-copy {
  font-size: .9rem;
}

/* Make DEFENSE / COMMONWEALTH labels readable on gauge */

.case-side-label {
  font-size: 1rem !important;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.case-side-defense {
  color: var(--blue);
}

.case-side-commonwealth {
  color: var(--red);
}

/* Position DEFENSE / COMMONWEALTH directly under the 100 marks */

.case-side-defense {
  left: 22%;
  bottom: 18%;
  transform: translateX(-50%);
  text-align: center;
}

.case-side-commonwealth {
  right: 22%;
  bottom: 18%;
  transform: translateX(50%);
  text-align: center;
}