/* W111: home-page claims visualization. Trade-dress palette pushed into a dark "operations console" look. */
.claims-viz {
  --cv-bg: #000099;
  --cv-deep: #00007a;
  /* Feed panel: Pantone 300 family, lightening toward the bottom where new claims arrive */
  --cv-panel: linear-gradient(180deg, rgb(10 95 187 / 0.28) 0%, rgb(11 108 198 / 0.36) 45%, rgb(42 136 214 / 0.5) 100%);
  --cv-line: rgb(120 200 255 / 0.28);
  --cv-text: #eef2ff;
  --cv-dim: #b4c2f5;
  --cv-cold: #1626b8;
  --cv-paid: var(--color-pantone-7488);
  --cv-reject: #ff7a45;
  --cv-cyan: var(--color-pantone-7710);
  --cv-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  position: relative; margin: 0 0 3.5rem; overflow: hidden; isolation: isolate;
  color: var(--cv-text); font-family: var(--cv-mono); font-size: 0.75rem;
  background:
    radial-gradient(ellipse 60% 70% at 30% 55%, rgb(0 121 193 / 0.3), transparent 70%),
    radial-gradient(circle at 1px 1px, rgb(160 210 255 / 0.18) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--cv-deep) 0%, var(--cv-bg) 55%, #0a1fa8 100%);
  border-bottom: 1px solid var(--cv-line);
}
/* Response-time strip: the canvas paints white above each bar, so the band's top edge becomes a jagged graph.
   It spans the header's width; white fills the strip beyond it on both sides. */
.claims-latency { position: relative; z-index: 3; }
.claims-latency-track { position: relative; }
.claims-latency-track::before, .claims-latency-track::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 100vw; background: var(--color-white);
}
.claims-latency-track::before { right: 100%; }
.claims-latency-track::after { left: 100%; }
.claims-latency-graph { display: block; width: 100%; height: 1.75rem; }
/* Full-bleed band like the hero; the content keeps the page container's width and position */
.claims-viz-inner { position: relative; }
/* Corner brackets: one wraps the HUD title's live bullet, the other sits in the caption bar under the feed's edge */
.claims-hud-title::before, .claims-caption-inner::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 2px solid var(--cv-cyan);
}
.claims-hud-title::before { top: -7px; left: -9px; border-right: 0; border-bottom: 0; }
.claims-caption-inner::after { bottom: -4px; right: 0; border-left: 0; border-top: 0; }

/* HUD bar */
.claims-hud {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem;
  position: relative; z-index: 2; padding: 0.875rem 1.5rem;
}
/* The bar's background spans the viewport like the caption bar; the band clips the overflow */
.claims-hud::after {
  content: ""; position: absolute; z-index: -1; inset: 0 -100vw;
  background: rgb(0 0 102 / 0.35); border-bottom: 1px solid var(--cv-line);
}
.claims-hud-title {
  position: relative; display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.claims-hud-title span:not(.claims-live) { color: var(--cv-cyan); }
.claims-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--cv-paid);
  box-shadow: 0 0 0 0 rgb(112 212 75 / 0.6); animation: cv-live 2s ease-out infinite;
}
@keyframes cv-live { to { box-shadow: 0 0 0 8px rgb(112 212 75 / 0); } }
.claims-hud-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.75rem; }
@media (min-width: 768px) { .claims-hud, .claims-hud-stats { flex-wrap: nowrap; } }
/* Value first, caption after it on the same baseline */
.claims-hud-stats div { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 0.375rem; }
.claims-hud-stats abbr { text-decoration: none; }
.claims-hud-stats dt { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-dim); }
.claims-hud-stats dd { font-size: 1rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* Body: map stage + feed, with the line overlay on top of both */
.claims-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .claims-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

/* The map is not clipped to its column: Canada runs up behind the HUD and off the top, and the neighbors run out
   to the screen edge; the band itself clips. The feed and HUD sit above it. */
.claims-stage { position: relative; z-index: 0; height: 15rem; perspective: 1400px; perspective-origin: 50% 25%; }
@media (min-width: 640px) { .claims-stage { height: 26rem; } }
.claims-plane {
  position: absolute; inset: 4% 4% 8% 8%; transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-22deg) scale(1.05);
}
.claims-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.claims-layer path { vector-effect: non-scaling-stroke; }

/* Extrusion: stacked dark copies under the live layer give the map thickness */
.claims-layer-depth path { fill: #00005c; stroke: rgb(120 200 255 / 0.18); stroke-width: 1; }
.claims-layer-depth .country, .claims-layer-depth .lake, .claims-layer-glow .country, .claims-layer-glow .lake {
  display: none;
}
/* Neighbors: flat, darker silhouettes on the base level so only the US stands up off the map */
.claims-layer-live .country {
  fill: #00005a; stroke: rgb(140 210 255 / 0.5); stroke-width: 0.75; transform: translateZ(-14px);
}
.claims-layer-live .lake { fill: #00008c; stroke: rgb(120 200 255 / 0.35); stroke-width: 0.75; }
.claims-layer-depth:nth-child(1) { transform: translateZ(-14px); opacity: 0.6; }
.claims-layer-depth:nth-child(2) { transform: translateZ(-9px); opacity: 0.75; }
.claims-layer-depth:nth-child(3) { transform: translateZ(-4px); opacity: 0.9; }

/* Live layer: each state's fill is driven by --h1 (0..1 base glow) and --h2 (0..1 white-hot) from the JS */
.claims-layer-live path {
  --h1: 0; --h2: 0; --flash: 0;
  fill: color-mix(in oklab, #f2ffe9 calc(var(--h2) * 100%),
          color-mix(in oklab, var(--cv-reject) calc(var(--flash) * 100%),
            color-mix(in oklab, var(--cv-paid) calc(var(--h1) * 100%), var(--cv-cold))));
  stroke: color-mix(in oklab, #b6f7a0 calc(var(--h1) * 100%), rgb(140 210 255 / 0.6));
  stroke-width: 1;
}
.claims-layer-live circle { fill: none; }

/* Glow layer: blurred copy whose per-state opacity follows the heat */
.claims-layer-glow { transform: translateZ(2px); filter: blur(7px); }
.claims-layer-glow path { --h1: 0; fill: var(--cv-paid); stroke: none; opacity: calc(var(--h1) * 0.9); }
.claims-layer-glow circle { display: none; }

/* Feed */
/* Newest claim enters at the bottom and older rows scroll up under the header, fading out at the top */
.claims-feed {
  position: relative; display: flex; flex-direction: column; height: 20rem; overflow: hidden;
  z-index: 1; border-top: 1px solid var(--cv-line); background: var(--cv-panel);
}
.claims-feed-scroll {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  mask-image: linear-gradient(to top, #000 75%, rgb(0 0 0 / 0.25));
}
@media (min-width: 640px) { .claims-feed { height: 26rem; } }
@media (min-width: 1024px) { .claims-feed { border-top: 0; border-left: 1px solid var(--cv-line); } }
.claims-feed table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.claims-feed th {
  padding: 0.625rem 0.5rem; text-align: left;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-dim);
  background: rgb(10 95 187 / 0.3); border-bottom: 1px solid rgb(255 255 255 / 0.25); color: #d6e8ff;
}
.claims-feed td {
  padding: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}
.claims-feed th:nth-child(1), .claims-feed td:nth-child(1) { width: 5.75rem; padding-left: 1rem; }
.claims-feed th:nth-child(2), .claims-feed td:nth-child(2) { width: 2.25rem; }
.claims-col-prog { width: 2.75rem; }
.claims-col-qty { width: 3.75rem; }
.claims-feed th:nth-child(6), .claims-feed td:nth-child(6) { width: 4.25rem; }
.claims-col-amt { width: 5rem; text-align: right !important; padding-right: 1rem !important; }
.claims-feed td:nth-child(1) { color: #d6e8ff; }
.claims-state { font-weight: 700; color: #fff; }

.claims-status {
  display: inline-block; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em;
}
.claims-status-paid { color: #0a2a08; background: var(--cv-paid); }
.claims-status-rejected { color: #2a0e02; background: var(--cv-reject); }

.claims-row { animation: cv-row-in 600ms ease-out; }
.claims-row-new td { background: rgb(112 212 75 / 0.12); }
.claims-row-new.claims-row-rejected td { background: rgb(255 122 69 / 0.14); }
.claims-row td { transition: background-color 1.5s ease-out; }
@keyframes cv-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .claims-col-prog, .claims-col-qty { display: none; }
  .claims-hud-stats div:last-child { display: none; }
}

/* Lines from the arriving feed row to the state */
.claims-lines { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.claims-line {
  fill: none; stroke: var(--cv-paid); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
  filter: drop-shadow(0 0 4px var(--cv-paid)) drop-shadow(0 0 10px rgb(112 212 75 / 0.6));
  /* ~2.2 s lifetime at a mean 0.875 s arrival gap keeps 2-3 lines on screen, each at a different fade level */
  animation: cv-draw 600ms ease-out forwards, cv-fade 1600ms linear 600ms forwards;
}
.claims-line-rejected { stroke: var(--cv-reject); filter: drop-shadow(0 0 4px var(--cv-reject)) drop-shadow(0 0 10px rgb(255 122 69 / 0.6)); }
.claims-ping { fill: none; stroke: var(--cv-paid); stroke-width: 2; animation: cv-ping 1100ms ease-out 650ms both; }
.claims-ping-rejected { stroke: var(--cv-reject); }
@keyframes cv-draw { to { stroke-dashoffset: 0; } }
@keyframes cv-fade { to { opacity: 0; } }
@keyframes cv-ping {
  from { r: 2px; opacity: 1; }
  to { r: 22px; opacity: 0; }
}

.claims-caption {
  position: relative; z-index: 2; padding-block: 0.625rem; border-top: 1px solid var(--cv-line);
  font-size: 0.6875rem; color: var(--cv-dim); background: rgb(0 0 102 / 0.6);
}
.claims-caption .container { display: block; }
.claims-caption-inner { position: relative; display: block; padding-inline: 1.5rem; text-align: center; }