/* ==========================================================================
   verdict.css — the fullscreen result overlay, the whole point of the app.
   Deliberately the loudest thing on screen: flat saturated colour, an icon
   badge, and an enormous verdict word that reads across a dark doorway.
   ========================================================================== */

.result {                                      /* fullscreen verdict */
  position: fixed;                             /* covers everything */
  inset: 0;                                    /* all four edges */
  z-index: 50;                                 /* above every other layer */
  display: flex;                               /* centred column */
  flex-direction: column;                      /* badge → status → name → meta → button */
  align-items: center;                         /* horizontally centred */
  justify-content: center;                     /* vertically centred */
  padding: 2rem calc(1.5rem + var(--safe-right)) calc(2rem + var(--safe-bottom)) calc(1.5rem + var(--safe-left)); /* safe-area-aware gutters */
  text-align: center;                          /* centre all text */
  animation: verdict-in 0.18s cubic-bezier(0.32, 0.72, 0, 1); /* fast pop so the verdict feels locked to the scan */
}                                              /* end result */
.result[hidden] { display: none; }             /* the hidden attribute must win over display:flex */
@keyframes verdict-in {                        /* entrance animation */
  from { opacity: 0; transform: scale(1.04); } /* start slightly oversized and transparent */
  to   { opacity: 1; transform: scale(1); }    /* settle at natural size */
}                                              /* end animation */
.result::after {                               /* subtle top-down sheen for depth on the flat colour field */
  content: "";                                 /* required for a pseudo-element */
  position: absolute;                          /* covers the overlay */
  inset: 0;                                    /* all edges */
  background: radial-gradient(ellipse at 50% 22%, rgb(255 255 255 / 0.16), transparent 62%); /* soft highlight behind the badge */
  pointer-events: none;                        /* never blocks the reset tap */
}                                              /* end sheen */
.result--ok   { background: var(--ok);   color: var(--ok-ink); }   /* admitted */
.result--bad  { background: var(--bad);  color: var(--bad-ink); }  /* rejected */
.result--warn { background: var(--warn); color: var(--warn-ink); } /* indeterminate: do NOT admit or reject yet */

.result__badge {                               /* the circular icon disc */
  position: relative;                          /* sits above the ::after sheen */
  z-index: 1;                                  /* above the sheen */
  display: grid;                               /* centres the icon perfectly */
  place-items: center;                         /* dead centre */
  width: clamp(88px, 26vw, 132px);             /* fluid: large on any phone, capped on tablets */
  aspect-ratio: 1;                             /* circle */
  border-radius: 50%;                          /* circle */
  background: rgb(255 255 255 / 0.18);         /* translucent disc that works on all three colour fields */
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.25), 0 18px 50px rgb(0 0 0 / 0.22); /* crisp rim plus a soft drop shadow */
}                                              /* end badge */
.ico {                                         /* every verdict glyph */
  display: none;                               /* hidden until its verdict class matches */
  width: 52%;                                  /* scales with the badge */
  height: 52%;                                 /* scales with the badge */
  fill: none;                                  /* stroke-only */
  stroke: currentColor;                        /* inherits the verdict ink colour */
  stroke-width: 2.6;                           /* heavy enough to read across a doorway */
  stroke-linecap: round;                       /* rounded ends */
  stroke-linejoin: round;                      /* rounded joins */
}                                              /* end icon */
.result--ok   .ico--ok   { display: block; }   /* tick on green */
.result--bad  .ico--bad  { display: block; }   /* cross on red */
.result--warn .ico--warn { display: block; }   /* exclamation on amber */

.result__status {                              /* the verdict word — the single most important element */
  position: relative;                          /* above the sheen */
  z-index: 1;                                  /* above the sheen */
  margin-top: 1.5rem;                          /* gap under the badge */
  font-size: clamp(2.2rem, 11vw, 3.9rem);      /* fluid and enormous */
  font-weight: 750;                            /* very heavy */
  letter-spacing: -0.02em;                     /* slightly tightened: large type needs less tracking, not more */
  line-height: 1.02;                           /* tight for multi-word verdicts */
}                                              /* end status */
.result__name {                                /* the buyer's name */
  position: relative;                          /* above the sheen */
  z-index: 1;                                  /* above the sheen */
  margin-top: 0.9rem;                          /* separated from the verdict */
  font-size: clamp(1.25rem, 6vw, 1.9rem);      /* large enough to read and say out loud */
  font-weight: 550;                            /* medium-bold */
  word-break: break-word;                      /* long names wrap instead of overflowing */
  opacity: 0.92;                               /* a touch softer than the verdict */
}                                              /* end name */
.result__meta {                                /* secondary detail line */
  position: relative;                          /* above the sheen */
  z-index: 1;                                  /* above the sheen */
  margin-top: 0.6rem;                          /* gap under the name */
  font-size: 0.9rem;                           /* small */
  font-weight: 450;                            /* light */
  opacity: 0.72;                               /* de-emphasised */
  max-width: 34ch;                             /* keeps the line readable */
}                                              /* end meta */
.result .btn--next { position: relative; z-index: 1; } /* keep the reset button above the sheen so it stays tappable */