/* /inspector-portal (app/inspector-portal/page.tsx) inside KitShell.

   Loaded after the about kit's head and kit-shell.css (both from KitShell,
   via app/inspector-portal/layout.tsx), so it reuses the kit's tokens:
   --sans, --x-body-ink, --x-shadow, --x-ease, --tap. It adds only what the
   portal needs: the upload card and its drop zone, the working and error
   lines, the result card with its system rows, the claim link, the QR panel
   and the numbered "How this works" strip. Black, white, the kit greys
   (#f5f5f7, #fbfbfd, #6e6e73, #86868b), the kit's one red (#8a3a32, the
   form message colour) and the kit's green (#00a665, hark.css
   --fill-system-green, "done, ready") for a picked file, the step numbers
   and a finished report.

   The hero is the homepage's photo card (public/site/home/index.html,
   .x-hero__card): its own image, its overlay and its white wordmark. The
   kit's glass top bar is hidden on this page because the wordmark and
   Log in sit on the photo, as they do on the homepage.

   This is not Brandan's file. His files are public/site/<page>/*. */

/* ---------- Hero: the homepage's photo card ---------- */
/* This stylesheet loads only on /inspector-portal. --x-ip-lap is how far
   the upload card rides up over the bottom of the photo. */
:root { --x-ip-lap: 88px; }
@media (max-width: 900px) { :root { --x-ip-lap: 56px; } }
@media (max-width: 480px) { :root { --x-ip-lap: 40px; } }
.x-top { display: none; }
.x-ip-hero { padding: 20px 20px 0; background: #ffffff; }
.x-ip-hero .x-hero.x-hero--page {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 78svh, 760px);
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 120px clamp(28px, 5vw, 64px) calc(var(--x-ip-lap) + clamp(40px, 5vw, 64px));
  border-radius: 28px; background: #2c3150; text-align: left;
  box-shadow: 0 24px 60px rgb(20 24 44 / 0.22);
}
/* The homepage overlay (dark at the top for the wordmark, clear through the
   middle), held darker toward the bottom so white type reads on any part of
   the photo. Replaces the about hero's white fade. */
.x-ip-hero .x-hero.x-hero--page::after {
  content: ""; position: absolute; inset: 0; height: auto; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(10 12 24 / 0.38) 0%, rgb(10 12 24 / 0) 26%, rgb(10 12 24 / 0) 38%, rgb(10 12 24 / 0.5) 66%, rgb(10 12 24 / 0.78) 100%);
}
.x-ip-hero .x-hero__in { align-items: flex-start; max-width: 760px; }
.x-ip-hero .x-hero h1 {
  max-width: 13ch; margin-top: 24px; color: #ffffff;
  font-size: clamp(42px, 6.4vw, 80px); text-shadow: 0 2px 24px rgb(0 0 0 / 0.18);
}
.x-ip-hero .x-hero__sub { max-width: 44ch; margin-top: 20px; color: rgb(255 255 255 / 0.9); }
.x-ip-hero__photo {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%; display: block;
}
.x-ip-hero__mark {
  position: absolute; top: 18px; left: 20px; display: inline-flex; align-items: center;
  min-height: var(--tap, 44px); padding: 0 6px; border-radius: 999px;
}
.x-ip-hero__mark img { display: block; height: 18px; width: auto; filter: brightness(0) invert(1); }
.x-ip-hero__login {
  position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center;
  min-height: var(--tap, 44px); padding: 0 18px; border-radius: 999px;
  background: rgb(255 255 255 / 0.16); border: 1px solid rgb(255 255 255 / 0.32); color: #ffffff;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  font: 600 15px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none;
  transition: background-color 200ms ease;
}
.x-ip-hero__login:hover { background: rgb(255 255 255 / 0.26); }
.x-ip-hero__mark:focus-visible, .x-ip-hero__login:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
/* The about hero fades its children in one by one; the photo, the wordmark
   and Log in are frame, not content, so they skip that. */
.x-ip-hero .x-hero__in > .x-ip-hero__photo,
.x-ip-hero .x-hero__in > .x-ip-hero__mark,
.x-ip-hero .x-hero__in > .x-ip-hero__login { animation: none; filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .x-ip-hero .x-hero__in > .x-ip-hero__photo { animation: x-ip-kenburns 20s ease-in-out 600ms infinite alternate both; }
}
@keyframes x-ip-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (max-width: 900px) {
  .x-ip-hero { padding: 16px 16px 0; }
  .x-ip-hero .x-hero.x-hero--page { min-height: 0; padding-top: 112px; border-radius: 24px; }
}
@media (max-width: 480px) {
  .x-ip-hero { padding: 12px 12px 0; }
  .x-ip-hero .x-hero.x-hero--page { padding: 104px 22px calc(var(--x-ip-lap) + 32px); border-radius: 20px; }
  .x-ip-hero .x-hero h1 { font-size: clamp(38px, 11vw, 46px); line-height: 1.06; letter-spacing: -0.035em; }
  .x-ip-hero .x-hero__sub { font-size: 17px; }
  .x-ip-hero__mark { top: 12px; left: 12px; }
  .x-ip-hero__mark img { height: 15px; }
  .x-ip-hero__login { top: 12px; right: 12px; padding: 0 16px; font-size: 14px; }
}

/* ---------- Frame ---------- */
/* The upload card rides up over the bottom of the photo. */
.x-ip {
  position: relative; z-index: 1;
  width: 100%; max-width: 860px; margin: calc(-1 * var(--x-ip-lap)) auto 0; box-sizing: border-box;
  padding: 0 clamp(16px, 5vw, 40px) clamp(88px, 11vw, 144px);
}
.x-ip *, .x-ip *::before, .x-ip *::after { box-sizing: border-box; }
/* The page's line icons (lucide). The kit frame's revert-layer rollback in
   app/globals.css can drop an svg's presentation attributes, so the stroke
   is stated here, as affiliate.css does for its reveal button. */
.x-ip svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x-ip__card {
  border-radius: 28px; background: #ffffff; border: 1px solid rgb(0 0 0 / 0.06);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 30px 80px rgb(20 24 44 / 0.16);
  padding: clamp(20px, 4vw, 40px);
}
@media (max-width: 520px) { .x-ip__card { border-radius: 24px; } }
.x-ip .x-label { margin: 0 0 6px; }

/* ---------- Upload: the drop zone ---------- */
.x-ip__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: clamp(220px, 28vw, 280px); margin: 0; padding: clamp(32px, 6vw, 56px) 24px;
  border-radius: 22px; border: 1.5px dashed rgb(0 0 0 / 0.2); background: #fbfbfd;
  text-align: center; cursor: pointer;
  transition: border-color 150ms var(--x-ease), background-color 150ms var(--x-ease);
}
.x-ip__drop:hover { border-color: rgb(0 0 0 / 0.5); background: #f5f5f7; }
.x-ip__drop.is-picked { border-style: solid; border-color: #00a665; background: rgb(0 166 101 / 0.05); }
.x-ip__drop.is-drag { border-style: solid; border-color: #00a665; background: rgb(0 166 101 / 0.08); }
.x-ip__drop.is-off { cursor: default; opacity: 0.7; }
.x-ip__drop:focus-within { outline: 2px solid #000000; outline-offset: 3px; }
.x-ip__drop svg { display: block; width: 30px; height: 30px; margin-bottom: 4px; color: #1d1d1f; stroke-width: 1.6; }
.x-ip__drop.is-picked svg, .x-ip__drop.is-drag svg { color: #00a665; }
.x-ip__drop-h { display: block; max-width: 100%; font: 600 clamp(19px, 2vw, 22px)/1.3 var(--sans); letter-spacing: -0.02em; color: #000000; overflow-wrap: anywhere; text-wrap: balance; }
.x-ip__drop-meta { display: block; max-width: 44ch; font: 400 15px/1.5 var(--sans); color: #6e6e73; text-wrap: pretty; }
.x-ip__file { display: none; }
.x-ip__hint { margin: 14px 4px 0; font: 400 14px/1.5 var(--sans); color: #6e6e73; text-wrap: pretty; }

/* ---------- Upload: working, error, submit ---------- */
.x-ip__status {
  display: flex; align-items: center; gap: 12px; margin: 20px 0 0; padding: 14px 18px;
  border-radius: 18px; background: #f5f5f7; font: 500 15px/1.5 var(--sans); color: #1d1d1f;
}
.x-ip__status svg { flex: none; display: block; width: 18px; height: 18px; color: #000000; }
.x-ip__spin { animation: x-ip-spin 1.1s linear infinite; }
@keyframes x-ip-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.x-ip__alert {
  margin: 20px 0 0; padding: 14px 20px; border-radius: 20px;
  background: #fbf3f2; border: 1px solid rgb(138 58 50 / 0.18);
  font: 500 15px/1.5 var(--sans); color: #8a3a32; overflow-wrap: anywhere;
}
.x-ip__submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; margin: 24px 0 0; padding: 10px 24px; border: 0; border-radius: 999px;
  background: #000000; color: #ffffff; cursor: pointer; text-align: center;
  font: 600 17px/1.2 var(--sans); letter-spacing: -0.01em;
  transition: background-color 200ms var(--x-ease), opacity 150ms ease;
}
.x-ip__submit:hover { background: #1d1d1f; }
.x-ip__submit:focus-visible { outline: 2px solid #000000; outline-offset: 3px; }
.x-ip__submit:disabled { background: #e8e8ed; color: #86868b; cursor: not-allowed; }
/* While a report is being read the button stays black: it is working, not off. */
.x-ip__submit:disabled:has(.x-ip__spin) { background: #000000; color: #ffffff; opacity: 0.85; cursor: progress; }
.x-ip__submit svg { flex: none; display: block; width: 18px; height: 18px; }

/* ---------- Confirm the address (photo and scan reads, 2026-10-25) ---------- */
.x-ip__confirm-note { margin: 10px 0 0; font: 400 16px/1.5 var(--sans); color: var(--x-body-ink); text-wrap: pretty; }
.x-ip__field { display: block; margin: 22px 0 0; }
.x-ip__field-k { display: block; margin: 0 0 8px; font: 600 14px/1.4 var(--sans); color: #000000; }
.x-ip__input {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 18px; box-sizing: border-box;
  border-radius: 16px; border: 1px solid rgb(0 0 0 / 0.22); background: #ffffff; color: #000000;
  font: 500 17px/1.4 var(--sans); /* 17px keeps iOS from zooming the page on focus */
}
.x-ip__input:focus { outline: 2px solid #000000; outline-offset: 2px; border-color: #000000; }
.x-ip__input:disabled { opacity: 0.6; }

/* ---------- How this works: a numbered strip ---------- */
/* Wider than the upload card on a desktop, so five steps sit side by side
   with room to read; one step per row on a phone. Numbers only, no icons. */
.x-ip__how {
  --x-ip-strip: min(1080px, calc(100vw - 48px));
  width: var(--x-ip-strip); margin: clamp(56px, 8vw, 96px) 0 0 calc((100% - var(--x-ip-strip)) / 2);
}
.x-ip__how h2 { margin: 0; font: 700 clamp(26px, 3vw, 34px)/1.1 var(--sans); letter-spacing: -0.035em; color: #000000; }
.x-ip__steps {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px;
  margin: 28px 0 0; padding: 0; list-style: none; counter-reset: ip-step;
}
.x-ip__steps li {
  counter-increment: ip-step; padding-top: 18px; border-top: 1px solid rgb(0 0 0 / 0.14);
  font: 400 16px/1.5 var(--sans); color: var(--x-body-ink); text-wrap: pretty;
}
.x-ip__steps li::before {
  content: counter(ip-step, decimal-leading-zero); display: block; margin-bottom: 14px;
  font: 600 15px/1 var(--sans); letter-spacing: 0.02em; color: #00a665; font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) {
  .x-ip__how { --x-ip-strip: 100%; margin-left: 0; }
  .x-ip__steps { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
  .x-ip__steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 18px 0; }
  .x-ip__steps li:last-child { border-bottom: 1px solid rgb(0 0 0 / 0.14); }
  .x-ip__steps li::before { margin: 3px 0 0; }
}

/* ---------- Result: the top ---------- */
.x-ip__done { display: flex; align-items: flex-start; gap: 16px; }
.x-ip__mark {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #00a665; color: #ffffff;
}
.x-ip__mark svg { display: block; width: 22px; height: 22px; }
.x-ip__h { margin: 0; font: 700 clamp(26px, 3.2vw, 34px)/1.1 var(--sans); letter-spacing: -0.035em; color: #000000; text-wrap: balance; }
.x-ip__addr { margin: 8px 0 0; font: 400 16px/1.5 var(--sans); color: var(--x-body-ink); overflow-wrap: anywhere; }
.x-ip__sev { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.x-ip__sev li {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  background: #f5f5f7; font: 500 13px/1 var(--sans); color: #1d1d1f;
}
.x-ip__sev li.is-critical { background: #fbf3f2; color: #8a3a32; font-weight: 600; }
.x-ip__sev li.is-zero { color: #86868b; }

/* ---------- Result: system rows ---------- */
.x-ip__block { margin-top: clamp(28px, 4vw, 40px); }
.x-ip__sub {
  margin: 0; padding-top: 20px; border-top: 1px solid rgb(0 0 0 / 0.1);
  font: 600 17px/1.3 var(--sans); letter-spacing: -0.01em; color: #000000;
}
.x-ip__sub-note { margin: 4px 0 0; font: 400 14px/1.5 var(--sans); color: #6e6e73; }
.x-ip__rows { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; margin: 8px 0 0; padding: 0; list-style: none; }
@media (min-width: 680px) { .x-ip__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.x-ip__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgb(0 0 0 / 0.07);
}
.x-ip__row-k { min-width: 0; font: 400 15px/1.4 var(--sans); color: var(--x-body-ink); }
.x-ip__row-note { display: block; margin-top: 2px; font: 400 13px/1.4 var(--sans); color: #6e6e73; }
.x-ip__row-v { flex: none; font: 600 16px/1.4 var(--sans); color: #000000; font-variant-numeric: tabular-nums; }
.x-ip__row-v.is-zero { font-weight: 500; color: #86868b; }
.x-ip__rows--one { grid-template-columns: minmax(0, 1fr); }
.x-ip__sub--soft { margin-top: 24px; }

/* ---------- Result: claim link and QR ---------- */
.x-ip__share { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 8px; }
@media (min-width: 680px) { .x-ip__share { grid-template-columns: minmax(0, 1fr) 236px; align-items: start; } }
.x-ip__claim p { margin: 8px 0 0; font: 400 15px/1.55 var(--sans); color: var(--x-body-ink); text-wrap: pretty; }
.x-ip__url {
  display: block; margin-top: 12px; padding: 14px 18px; border-radius: 18px;
  background: #f5f5f7; border: 1px solid rgb(0 0 0 / 0.07);
  font: 600 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #000000;
  overflow-wrap: anywhere; word-break: break-all;
}
.x-ip__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.x-ip__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap, 44px); margin: 0; padding: 0 22px; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
  transition: background-color 200ms var(--x-ease), border-color 200ms var(--x-ease);
}
.x-ip__btn svg { flex: none; display: block; width: 16px; height: 16px; }
.x-ip__btn--dark { background: #000000; color: #ffffff; border: 1px solid #000000; }
.x-ip__btn--dark:hover { background: #1d1d1f; }
.x-ip__btn--line { background: #ffffff; color: #000000; border: 1px solid rgb(0 0 0 / 0.14); }
.x-ip__btn--line:hover { border-color: rgb(0 0 0 / 0.32); }
.x-ip__btn:focus-visible { outline: 2px solid #000000; outline-offset: 3px; }
@media (max-width: 520px) { .x-ip__btns .x-ip__btn { flex: 1 1 100%; } }
.x-ip__qr {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 20px; border-radius: 24px; background: #f5f5f7; text-align: center;
}
.x-ip__qr canvas { display: block; width: 180px; height: 180px; border-radius: 12px; background: #ffffff; }
.x-ip__qr .x-ip__btn { width: 100%; }

/* ---------- Result: the foot ---------- */
.x-ip__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 40px); padding-top: 20px; border-top: 1px solid rgb(0 0 0 / 0.1);
  font: 400 15px/1.5 var(--sans); color: #6e6e73;
}
.x-ip__code {
  display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 8px; background: #f5f5f7;
  font: 700 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; color: #000000;
  overflow-wrap: anywhere;
}
@media (max-width: 520px) { .x-ip__foot .x-ip__btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .x-ip__drop, .x-ip__submit, .x-ip__btn, .x-ip-hero__login { transition: none; }
  .x-ip__spin { animation-duration: 3s; }
}