/* ==========================================================================
   Work thumbnail · Manual compliance check
   An inline SVG (800 x 520 user units) that is the finished frame at rest.
   compliance-thumb.js replays how it got there on hover / focus / first view.
   ========================================================================== */

.mg {
  /* portfolio tokens (css/tokens.css), with their values as a fallback */
  --mg-bg: var(--color-surface-sunken, #E7E9E4);
  --mg-ink: var(--color-ink, #0F1113);
  --mg-muted: var(--color-ink-muted, #555A62);
  --mg-faint: var(--color-ink-faint, #8A8F96);
  --mg-bar: var(--color-line, #D7DAD3);         /* used for text lines */
  --mg-accent: var(--color-accent, #E4521F);
  --mg-mono: var(--font-mono, "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace);
  --mg-display: var(--font-sans, "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif);
  --mg-app: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;   /* product lozenge type */

  position: relative;
  display: block;
  aspect-ratio: 800 / 520;
  max-width: 100%;
  background: var(--mg-bg);
  border-radius: 2px;
  overflow: hidden;
}
.mg-svg { display: block; width: 100%; height: 100%; }

/* everything that scales or moves does so around its own box */
.mg-svg g, .mg-svg rect, .mg-svg path, .mg-svg circle, .mg-svg text { transform-box: fill-box; }

.mg-mono { font-family: var(--mg-mono); font-weight: 500; letter-spacing: 0.08em; }
.mg-head { font-size: 10.5px; fill: var(--mg-ink); }
.mg-sub  { font-size: 9px; fill: var(--mg-faint); }
.mg-id   { font-size: 10px; fill: var(--mg-ink); }
.mg-tagt { font-size: 9px; fill: #F2F3F0; letter-spacing: 0.04em; }
.mg-cl   { font-size: 9px; fill: var(--mg-muted); }
.mg-legt { font-size: 9.5px; fill: var(--mg-muted); letter-spacing: 0.02em; }
.mg-bar  { fill: var(--mg-bar); transform-origin: left center; }

.mg-chip-t {
  font-family: var(--mg-app);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.mg-count {
  font-family: var(--mg-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  fill: var(--mg-ink);
}
.mg-stamp-t {
  font-family: var(--mg-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  fill: var(--mg-accent);
}

/* rest-state positions of things that move */
.mg-layer-1 { transform: translate(6px, 6px); }
.mg-layer-2 { transform: translate(12px, 12px); }
.mg-row-hl, .mg-scan, .mg-sweep { opacity: 0; }
.mg-chip { transform-origin: left center; }
.mg-seg { transform-origin: left center; }
.mg-tag, .mg-dot, .mg-miss-end, .mg-stamp { transform-origin: center; }
.mg-miss { transform-origin: left center; }
.mg-thread:not(.mg-miss) { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* small cards: drop the tiny type, keep the shapes and the verdict icons */
.mg.is-compact .mg-chip-t,
.mg.is-compact .mg-id,
.mg.is-compact .mg-sub,
.mg.is-compact .mg-tagt,
.mg.is-compact .mg-legt,
.mg.is-compact .mg-cl,
.mg.is-compact .mg-leg { display: none; }
.mg.is-compact .mg-head { font-size: 12px; }
.mg.is-compact .mg-count { font-size: 44px; }
.mg.is-compact .mg-stamp { transform: scale(1.3); }

/* keyboard focus on the card link */
a:focus-visible > .mg { outline: 2px solid var(--mg-accent); outline-offset: 3px; }