/* CIG — public site. Static, no build step: a marketing page and a cert report, both of which
   only ever hit one unauthenticated endpoint. Deliberately small so it stays fast and cheap to
   serve from the edge.

   Tokens, fonts and the body treatment are lifted verbatim from FrontEndV2
   (styles/variables.css + styles/global.css) so this reads as the same product family rather
   than a separate site that happens to share a logo. If CI's tokens change, change them here
   too — this is a copy, not an import, because the site has no build step.

   The cert report at the bottom of this file mirrors FrontEndV2's Grading.css: same class names
   (gr-*), same values. Two copies is the cost of the static site; keeping the names identical is
   what makes a change in one findable in the other. */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;600;700&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  --primary: #ffffff;
  --secondary: #0080ff;
  --accent: #00bfff;
  --bg: #0a0a0a;
  --surface: #1a1a1a;
  --surface-elevated: #222222;
  --text: #e8e8e8;
  --text-light: #a0a0a0;
  --border: #2a2a2a;
  --success: #00ff88;
  --glow: rgba(0, 191, 255, 0.3);
  --max: 1100px;

  /* grade / severity palette. In FrontEndV2 these are scoped to .gr-page; here the report *is*
     the page, so they sit on :root. Same hex values — keep them in step. */
  --gr-g10: #3ddc84;
  --gr-g8: #8fd34a;
  --gr-g6: #ffd34d;
  --gr-g4: #ff9f43;
  --gr-g2: #ff5c5c;
  --gr-instr: #7fb4ff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(0, 128, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 191, 255, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Crimson Pro', serif;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--primary); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; width: 100%; }

.gr-g10 { color: var(--gr-g10); }
.gr-g8 { color: var(--gr-g8); }
.gr-g6 { color: var(--gr-g6); }
.gr-g4 { color: var(--gr-g4); }
.gr-g2 { color: var(--gr-g2); }
.gr-gmuted { color: var(--text-light); }

/* ── header ───────────────────────────────────────────────────────────── */
header { border-bottom: 1px solid var(--border); background: rgba(10, 10, 10, 0.85); }

/* the report is long — the identity and the grade stay on screen while you scroll the proof */
header.sticky { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); }

.bar { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 0; }
.bar img { height: 40px; width: auto; display: block; }
.brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }

.bar .name {
  font-family: 'Crimson Pro', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}

.bar .name span {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.bar nav { margin-left: auto; display: flex; gap: 1.4rem; font-size: 0.88rem; }

.bar-cert { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.bar-cert .num { font-variant-numeric: tabular-nums; color: var(--text-light); letter-spacing: 0.06em; }

.bar-cert .chip {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-weight: 700;
  font-size: 0.78rem;
}

.bar-cert + nav { margin-left: 0; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }

.hero .lede {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-light);
  max-width: 44rem;
  margin: 0 0 1.8rem;
}

/* ── cert lookup ──────────────────────────────────────────────────────── */
.lookup { display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: 34rem; }

.lookup input {
  flex: 1 1 14rem;
  padding: 0.72rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.lookup input::placeholder { color: var(--text-light); }
.lookup input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }

.btn {
  padding: 0.72rem 1.4rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #06121c;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.btn:hover { background: var(--secondary); border-color: var(--secondary); color: #fff; }

.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--accent); color: var(--primary); }

.hint { font-size: 0.8rem; color: var(--text-light); margin: 0.6rem 0 0; }
.err { color: #ff6b6b; }

/* ── content ──────────────────────────────────────────────────────────── */
section { padding: 3.25rem 0; }
section > .wrap > h2 { font-size: 1.7rem; margin-bottom: 1.25rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; }

.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.3rem;
  background: var(--surface);
}

.card h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.card p { margin: 0; color: var(--text-light); font-size: 0.93rem; }

.note {
  border-left: 3px solid var(--accent);
  padding: 0.3rem 0 0.3rem 1rem;
  color: var(--text-light);
  font-size: 0.93rem;
}

footer {
  border-top: 1px solid var(--border);
  padding: 1.8rem 0 2.6rem;
  color: var(--text-light);
  font-size: 0.85rem;
}

.meta { color: var(--text-light); font-size: 0.9rem; }
.meta b { color: var(--text); font-weight: 600; }
.meta .num { font-variant-numeric: tabular-nums; letter-spacing: 0.07em; }

/* ── cert report: the verdict ─────────────────────────────────────────── */
/* Whoever scanned the QR wants one thing first: is this card what the label says it is. The
   verdict answers that above the fold; everything below it is the proof. */
.verdict { padding: 2.6rem 0 2.2rem; border-bottom: 1px solid var(--border); }

.v-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gr-g10);
  border: 1px solid color-mix(in srgb, var(--gr-g10) 45%, transparent);
  background: color-mix(in srgb, var(--gr-g10) 12%, transparent);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  margin-bottom: 1rem;
}

.v-chip::before { content: "\2713"; font-size: 0.85rem; letter-spacing: 0; }
.v-chip.bad { color: var(--gr-g2); border-color: color-mix(in srgb, var(--gr-g2) 45%, transparent); background: color-mix(in srgb, var(--gr-g2) 12%, transparent); }
.v-chip.bad::before { content: "\0021"; }

.v-row { display: flex; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.v-who { flex: 1 1 22rem; min-width: 0; }
.v-who h1 { font-size: clamp(1.65rem, 4vw, 2.6rem); margin-bottom: 0.45rem; }

.v-grade {
  border: 1px solid currentColor;
  border-radius: 14px;
  background: var(--surface-elevated);
  padding: 0.9rem 1.6rem 1rem;
  text-align: center;
  min-width: 9.5rem;
}

.v-grade .g {
  font-family: 'Crimson Pro', serif;
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 1;
}

.v-grade .gn {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.3rem;
}

.v-note {
  margin: 1.3rem 0 0;
  border-left: 3px solid var(--gr-g4);
  padding: 0.25rem 0 0.25rem 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
  max-width: 48rem;
}

.v-note b { color: var(--gr-g4); }

/* jump nav — the report runs long, and a collector usually wants one part of it */
.toc { border-bottom: 1px solid var(--border); background: rgba(10, 10, 10, 0.6); }
.toc .wrap { display: flex; gap: 1.6rem; padding: 0.7rem 1.5rem; font-size: 0.8rem; overflow-x: auto; }
.toc a { color: var(--text-light); letter-spacing: 0.04em; white-space: nowrap; }
.toc a:hover { color: var(--accent); }

/* ── cert report: sections ────────────────────────────────────────────── */
.sec { padding: 2.6rem 0; border-bottom: 1px solid var(--border); }
.sec > .wrap > h2 { font-size: 1.45rem; margin-bottom: 0.4rem; }
.sec:last-of-type { border-bottom: none; }

.gr-hint { color: var(--text-light); font-size: 0.875rem; margin: 0 0 1.1rem; max-width: 58rem; }
.gr-hint b { color: var(--text); }

.primer .wrap { max-width: 56rem; }
.primer p { color: var(--text-light); margin: 0 0 0.9rem; }
.primer p b { color: var(--text); }
.primer-links { display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: 0.9rem; }

.slabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.slabs img { width: 100%; border-radius: 10px; border: 1px solid var(--border); background: #000; display: block; cursor: zoom-in; }

/* ── components ───────────────────────────────────────────────────────── */
.subgrades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.subgrades.wide { max-width: none; }

.sub {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 0.9rem 0.95rem;
  background: var(--surface);
}

.sub .k { font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-light); }
.sub .v { font-family: 'Crimson Pro', serif; font-size: 2.1rem; font-weight: 700; line-height: 1.05; }
.sub .sides { font-size: 0.72rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.sub .unres { font-size: 0.7rem; color: var(--gr-g4); }
.sub .n { font-size: 0.8rem; color: var(--text-light); margin-top: 0.45rem; }

.gr-crease { margin: 1.1rem 0 0; color: var(--text-light); font-size: 0.9rem; }
.gr-crease.bad { color: var(--gr-g2); font-weight: 600; }

.gr-rationale { white-space: pre-wrap; max-width: 56rem; margin: 0; }
.gr-cannot { color: var(--text-light); font-size: 0.85rem; margin: 0.8rem 0 0; max-width: 56rem; }

/* ── image panels + overlays ──────────────────────────────────────────── */
.gr-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gr-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }

.gr-panel h3 {
  margin: 0 0 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-light);
  font-weight: 600;
  text-transform: capitalize;
}

.gr-imgwrap { position: relative; width: 100%; }
.gr-imgwrap img { width: 100%; display: block; border-radius: 8px; }
.gr-imgwrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gr-imgwrap rect.find { fill: transparent; stroke-width: 5; cursor: pointer; }
.gr-imgwrap rect.find.hi { stroke-width: 8; fill: #ffffff22; }
.gr-imgwrap rect.find.minor { stroke: var(--gr-g6); }
.gr-imgwrap rect.find.moderate { stroke: var(--gr-g4); }
.gr-imgwrap rect.find.major { stroke: var(--gr-g2); }
.gr-imgwrap rect.find.positive { stroke: var(--gr-g10); }
.gr-imgwrap rect.instr { fill: transparent; stroke: var(--gr-instr); stroke-width: 3; stroke-dasharray: 10 8; }
/* Labels are in the image's own pixel space, so they shrink with the panel. 40px on a ~1500px
   card lands near 13px on screen — CI's 26px was sized for a wider panel and is unreadable here. */
.gr-imgwrap text { font: bold 40px 'DM Sans', system-ui, sans-serif; paint-order: stroke; stroke: #000; stroke-width: 6px; }
.gr-imgwrap text.minor { fill: var(--gr-g6); }
.gr-imgwrap text.moderate { fill: var(--gr-g4); }
.gr-imgwrap text.major { fill: var(--gr-g2); }
.gr-imgwrap text.positive { fill: var(--gr-g10); }

.gr-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-light); margin: 12px 0 0; }

.gr-legend span::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 4px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 2px;
}

.gr-legend .l-major::before { background: var(--gr-g2); }
.gr-legend .l-moderate::before { background: var(--gr-g4); }
.gr-legend .l-minor::before { background: var(--gr-g6); }
.gr-legend .l-positive::before { background: var(--gr-g10); }
.gr-legend .l-instr::before { background: repeating-linear-gradient(90deg, var(--gr-instr) 0 6px, transparent 6px 10px); }

/* ── corners ──────────────────────────────────────────────────────────── */
.gr-cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.gr-cgrid figure { margin: 0; text-align: center; font-size: 12px; color: var(--text-light); }

.gr-cgrid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid var(--border);
  cursor: zoom-in;
  display: block;
}

.gr-tile.g10 { border-color: var(--gr-g10); }
.gr-tile.g8 { border-color: var(--gr-g8); }
.gr-tile.g6 { border-color: var(--gr-g6); }
.gr-tile.g4 { border-color: var(--gr-g4); }
.gr-tile.g2 { border-color: var(--gr-g2); }
.gr-cgrid figcaption { margin-top: 0.3rem; }
.gr-sev { font-size: 11px; font-variant-numeric: tabular-nums; }

/* ── findings ─────────────────────────────────────────────────────────── */
.gr-findings { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0.4rem; }

.gr-finding {
  display: grid;
  grid-template-columns: 70px 90px 100px 1fr;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.9rem;
}

.gr-finding:hover, .gr-finding.hi { background: #ffffff0d; border-color: var(--border); }
.gr-finding .f-side, .gr-finding .f-cat { color: var(--text-light); text-transform: capitalize; }

.gr-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #111;
}

.gr-pill.minor { background: var(--gr-g6); }
.gr-pill.moderate { background: var(--gr-g4); }
.gr-pill.major { background: var(--gr-g2); }
.gr-pill.positive { background: var(--gr-g10); }

.gr-zooms { display: flex; gap: 10px; flex-wrap: wrap; }
.gr-zooms figure { margin: 0; width: 160px; font-size: 11px; color: var(--text-light); }
.gr-zooms img { width: 160px; border-radius: 6px; display: block; cursor: zoom-in; }

/* ── lightbox ─────────────────────────────────────────────────────────── */
.gr-lightbox {
  position: fixed;
  inset: 0;
  background: #000c;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  margin: 0;
}

.gr-lightbox[hidden] { display: none; }
.gr-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; }

.gr-lightbox figcaption {
  position: absolute;
  bottom: 18px;
  left: 1.5rem;
  right: 1.5rem;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

@media (max-width: 900px) {
  .gr-panels { grid-template-columns: 1fr; }
  .subgrades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .bar .name span { display: none; }
  .v-grade { padding: 0.7rem 1.2rem 0.8rem; min-width: 8rem; }
  .v-grade .g { font-size: 2.5rem; }
  .gr-cgrid { grid-template-columns: repeat(2, 1fr); }
  .gr-finding { grid-template-columns: 1fr; gap: 2px; padding: 10px; }
  .gr-finding + .gr-finding { border-top: 1px solid var(--border); border-radius: 0; }
}