/* Accuracy-trap post: "The gap" card. Base rules are copied from the shared .ga-* set. */
.ga-card { --ga-ok: #0E9F6E; --ga-bad: #C2410C; --ga-hall: #DC2626; --ga-miss: #475569;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  padding: clamp(18px, 4vw, 26px); margin: 28px 0; }
.ga-eyebrow { display: block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); margin: 0 0 9px; }
.ga-card h3 { font-family: var(--display); font-size: 20px; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 8px; }
.ga-sub, .ga-note { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; }
.ga-label { display: block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ga-big { display: block; font-family: var(--display); font-size: clamp(26px, 5.5vw, 36px); letter-spacing: -.02em; line-height: 1.05; margin-top: 8px; color: var(--text); }

/* gap visual */
.ga-gap .ga-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.ga-gap .ga-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; }
.ga-gap .ga-stat.is-drop { background: linear-gradient(180deg, #ffffff, #fdf3ee); border-color: #f1d5c4; }
.ga-gap .ga-stat.is-drop .ga-big { color: var(--ga-bad); }
.ga-gap .ga-track { position: relative; height: 30px; margin-top: 22px; background: #F1F3FA; border-radius: 10px; border: 1px solid var(--line); }
.ga-gap .ga-short-min { position: absolute; top: 0; bottom: 0; left: 82%; width: 15%; background: linear-gradient(90deg, #f59e6b, var(--ga-bad)); }
.ga-gap .ga-short-max { position: absolute; top: 0; bottom: 0; left: 72%; width: 10%; background: repeating-linear-gradient(135deg, rgba(194,65,12,.38) 0 6px, rgba(194,65,12,.1) 6px 12px); }
.ga-gap .ga-claim { position: absolute; top: -6px; bottom: -6px; left: 97%; width: 1%; min-width: 6px; background: var(--accent); border-radius: 4px; }
.ga-gap .ga-ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 8px; }
.ga-gap .ga-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.ga-gap .ga-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.ga-gap .sw-solid { background: linear-gradient(90deg, #f59e6b, var(--ga-bad)); }
.ga-gap .sw-hatch { background: repeating-linear-gradient(135deg, rgba(194,65,12,.38) 0 3px, rgba(194,65,12,.1) 3px 6px); }
.ga-gap .sw-claim { background: var(--accent); }
@media (max-width: 620px) { .ga-gap .ga-stats { grid-template-columns: 1fr; } }