/*
 * Verify web card styling.
 *
 * §P3.1 forbids the registry importing anything from the tracker, so the design
 * tokens below are a DELIBERATE COPY of the subset this page needs from
 * `src/styles/tokens.css` — not an import, and not a second source of truth for
 * the app. If a token here disagrees with the app, the app's file is the law
 * (design-system.md §4) and this copy is the bug.
 *
 * Mirrored: --brand-*, --lit-*, --surf-*, --tx-*, --rail-*, --cham-*, and the
 * three type roles. Nothing else from the app is reproduced here.
 *
 * The light grammar is unchanged (design-system.md §3): electric = we have a
 * record, amber = scheduling, red = OUR OWN recalled lot, unlit = no record.
 * Nothing on this page is lit because a product is good (§1, D12).
 */

:root {
  --brand-void: #000006;
  --brand-steel-hi: #d6dee8;
  --brand-steel: #b8c0d0;
  --brand-red: #a80404;

  --lit-data: #4d8cff;
  --lit-data-text: #7fb2ff;
  --lit-time: #ffb13a;
  --lit-alarm: #ff3a3a;
  --on-alarm: #ffffff;

  --surf-void: #000006;
  --surf-cavity: #050810;
  --surf-panel: #070b16;
  --surf-bay: #060a13;
  --surf-cell: #081020;
  --surf-alarm-field: linear-gradient(158deg, #7a0303, #a80404);

  --tx-hi: #eaf3ff;
  --tx-1: #d6dee8;
  --tx-2: #b8c0d0;
  --tx-3: #7a8496;
  --tx-4: #5c687e;
  --tx-dead: #39445a;

  --cham-sm: 4px;
  --cham-md: 7px;
  --cham-lg: 10px;
  --cham-xl: 13px;

  /* §5.1 — the disclosure floor is its own value so it cannot drift smaller. */
  --t-disclosure: 9.5px;
  --t-micro: 10px;

  --font-disp: 'Oxanium', 'Segoe UI', system-ui, sans-serif;
  --font-num: 'Saira Condensed', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, 'Cascadia Mono', monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 0 28px;
  background: var(--surf-void);
  color: var(--tx-2);
  font-family: var(--font-mono);
  -webkit-text-size-adjust: 100%;
}

/* Corners are cut, never rounded (§4.6, D9). */
.cham-md {
  clip-path: polygon(
    var(--cham-md) 0,
    100% 0,
    100% calc(100% - var(--cham-md)),
    calc(100% - var(--cham-md)) 100%,
    0 100%,
    0 var(--cham-md)
  );
}
.cham-lg {
  clip-path: polygon(
    var(--cham-lg) 0,
    100% 0,
    100% calc(100% - var(--cham-lg)),
    calc(100% - var(--cham-lg)) 100%,
    0 100%,
    0 var(--cham-lg)
  );
}

/* --- housing (§6.1) ------------------------------------------------------ */

.housing {
  position: relative;
  display: block;
  padding: 18px 16px 20px;
  background: linear-gradient(168deg, #0d1626, #05080f);
  border-bottom: 1px solid rgba(0, 90, 255, 0.5);
  box-shadow: 0 0 12px 1px rgba(0, 90, 255, 0.35);
}

.wordmark {
  display: block;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.1em;
  background: linear-gradient(172deg, var(--brand-steel-hi), #8892a4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--tx-4);
}

.ruo {
  position: absolute;
  right: 16px;
  bottom: 20px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--brand-red);
}

/* --- layout -------------------------------------------------------------- */

main {
  max-width: 460px;
  margin: 0 auto;
  padding: 16px;
}

.loading {
  font-size: var(--t-micro);
  color: var(--tx-3);
}

section {
  margin-bottom: 14px;
  padding: 13px;
  background: var(--surf-bay);
  box-shadow: inset 0 0 0 1px rgba(70, 120, 210, 0.2);
}

h1 {
  margin: 0 0 6px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--tx-1);
}

h2 {
  margin: 0 0 9px;
  font-size: 9px;
  font-family: var(--font-disp);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--tx-3);
}

.lot {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--lit-data-text);
}

.meta {
  margin: 7px 0 0;
  font-size: var(--t-micro);
  line-height: 1.7;
  color: var(--tx-3);
}

/* --- the match flag (§6.7) ----------------------------------------------- */

/*
 * Every permitted string, and nothing else. `VERIFIED`, `AUTHENTIC` and
 * `GENUINE` are banned (R11.1, D22): a match proves a signed record
 * corresponded to a lab report. It proves nothing about the molecules in the
 * glass. Colour is never the only carrier — each variant is a word (§3).
 */
.flag {
  display: inline-block;
  padding: 5px 9px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  clip-path: polygon(
    var(--cham-sm) 0,
    100% 0,
    100% calc(100% - var(--cham-sm)),
    calc(100% - var(--cham-sm)) 100%,
    0 100%,
    0 var(--cham-sm)
  );
}
.flag-ok {
  background: var(--surf-cell);
  color: var(--lit-data-text);
  box-shadow: inset 0 0 0 1px rgba(70, 120, 210, 0.45);
}
.flag-none {
  background: var(--surf-cavity);
  color: var(--tx-3);
  box-shadow: inset 0 0 0 1px rgba(90, 100, 120, 0.3);
}
.flag-muted {
  background: var(--surf-cavity);
  color: var(--tx-2);
  box-shadow: inset 0 0 0 1px rgba(70, 120, 210, 0.28);
}
.flag-amber {
  background: var(--surf-cavity);
  color: var(--lit-time);
  box-shadow: inset 0 0 0 1px rgba(255, 177, 58, 0.35);
}
.flag-recall {
  background: var(--brand-red);
  color: var(--on-alarm);
}

/* Rails — the 2px left edge, the load-bearing component (§4.5). */
.rail-data {
  border-left: 2px solid var(--lit-data);
  box-shadow:
    inset 0 0 0 1px rgba(70, 120, 210, 0.2),
    -1px 0 9px 1px rgba(0, 110, 255, 0.55);
}
.rail-dead {
  border-left: 2px dashed var(--tx-dead);
}
.rail-alarm {
  border-left: 2px solid var(--lit-alarm);
  box-shadow:
    inset 0 0 0 1px rgba(210, 70, 70, 0.25),
    -1px 0 9px 1px rgba(255, 40, 40, 0.5);
}

/* --- recall banner (§6.9) ------------------------------------------------ */

/* The only filled-field component in the system, and the only shout. It only
   ever shouts about OUR OWN product (§3, D13). */
.recall {
  padding: 14px;
  background: var(--surf-alarm-field);
  color: var(--on-alarm);
  box-shadow: none;
  clip-path: polygon(
    var(--cham-xl) 0,
    100% 0,
    100% calc(100% - var(--cham-xl)),
    calc(100% - var(--cham-xl)) 100%,
    0 100%,
    0 var(--cham-xl)
  );
}
.recall strong {
  display: block;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.14em;
}
.recall p {
  margin: 7px 0 0;
  font-size: var(--t-micro);
  line-height: 1.6;
}

/* --- scope block (§6.3, R2.1) -------------------------------------------- */

.scope-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  margin-bottom: 5px;
  background: var(--surf-cell);
}
.scope-row.dead {
  background: var(--surf-cavity);
}
.scope-key {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--tx-3);
}
.scope-val {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--tx-hi);
}
/* The dead cell is the signature: identical geometry, the only difference is
   the light (§6.3). "NOT TESTED" is banned (D21) — we know only that a result
   is absent from THIS report. */
.scope-state {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--tx-dead);
}

/* --- tests --------------------------------------------------------------- */

.test {
  padding: 11px;
  margin-bottom: 6px;
  background: var(--surf-cell);
}
.test-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--tx-3);
}
.test-val {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--tx-hi);
}
.test-meta {
  margin: 5px 0 0;
  font-size: 9px;
  line-height: 1.7;
  color: var(--tx-4);
}
a {
  color: var(--lit-data-text);
  text-underline-offset: 3px;
}
a:focus-visible,
:focus-visible {
  outline: 2px solid var(--lit-data);
  outline-offset: 2px;
}

/* --- disclosure (§6.8) ---------------------------------------------------- */

.disclosure-block {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 16px;
}
.disclosure {
  margin: 0 0 6px;
  font-size: var(--t-disclosure);
  line-height: 1.65;
  color: var(--tx-4);
}

/* §7 — motion is rationed. There is none on this page to remove, but the rule
   is declared so a later addition inherits it. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}