/* ==========================================================================
   base.css — design tokens, reset, app shell, brand
   Loaded first: every other stylesheet consumes the tokens defined here.
   ========================================================================== */

:root {                                        /* design tokens, defined once and reused everywhere */
  /* Surfaces — slightly blue-tinted blacks read as richer than neutral grey */
  --bg:        #08080a;                        /* page background (pure #000 crushes shadows on OLED) */
  --surface:   #101014;                        /* raised surface: sheets and inputs */
  --glass:     rgb(12 12 16 / 0.72);           /* translucent bar colour, paired with a backdrop blur */
  --line:      rgb(255 255 255 / 0.09);        /* hairline border */
  --line-2:    rgb(255 255 255 / 0.16);        /* stronger border for focus and hover */

  /* Text */
  --ink:       #fafafa;                        /* primary text */
  --ink-2:     #a1a1ab;                        /* secondary text */
  --ink-3:     #6c6c78;                        /* tertiary text and placeholders */

  /* Accent */
  --accent:    #8b5cf6;                        /* violet, used only for focus and small highlights */

  /* Verdict colours — saturated on purpose, these must survive a dark doorway */
  --ok:        #05c66c;                        /* admitted */
  --ok-ink:    #00190e;                        /* text on the green field */
  --bad:       #f5162e;                        /* rejected */
  --bad-ink:   #ffffff;                        /* text on the red field */
  --warn:      #ffb020;                        /* indeterminate: never treated as pass or fail */
  --warn-ink:  #231700;                        /* text on the amber field */

  /* Geometry */
  --r-sm: 10px;                                /* small radius: pills */
  --r-md: 14px;                                /* medium radius: inputs and buttons */
  --r-lg: 22px;                                /* large radius: sheets */

  /* Safe areas */
  --safe-top:    env(safe-area-inset-top, 0px);    /* iOS notch inset */
  --safe-bottom: env(safe-area-inset-bottom, 0px); /* iOS home-indicator inset */
  --safe-left:   env(safe-area-inset-left, 0px);   /* landscape inset */
  --safe-right:  env(safe-area-inset-right, 0px);  /* landscape inset */
}                                              /* end tokens */

* { box-sizing: border-box; }                  /* predictable sizing: padding/border never blow out a width */
html, body {                                   /* full-height, non-scrolling app shell */
  height: 100%;                                /* let child screens use 100% height reliably */
  margin: 0;                                   /* remove default body margin */
  overflow: hidden;                            /* the app never page-scrolls; only the manual sheet moves */
  overscroll-behavior: none;                   /* kills pull-to-refresh, which would reload mid-queue */
}                                              /* end shell */
body {                                         /* base typography and colour */
  background: var(--bg);                       /* dark ground */
  color: var(--ink);                           /* light text */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif; /* native UI font: zero download, renders instantly, and looks current on each OS */
  font-size: 16px;                             /* base size for rem maths */
  line-height: 1.45;                           /* comfortable default leading */
  -webkit-font-smoothing: antialiased;         /* crisper light-on-dark text on WebKit */
  -webkit-tap-highlight-color: transparent;    /* removes the grey flash box on tap */
  user-select: none;                           /* stops accidental text selection when staff tap quickly */
  touch-action: manipulation;                  /* disables double-tap-to-zoom for snappier taps */
}                                              /* end body */

/* --------------------------------------------------------------------------
   SCREENS — only one is visible at a time; js/dom.js toggles .is-active
   -------------------------------------------------------------------------- */
.screen {                                      /* base screen container */
  position: fixed;                             /* pinned to the viewport, immune to scroll */
  inset: 0;                                    /* stretch to all four edges */
  display: none;                               /* hidden unless activated */
}                                              /* end screen */
.screen.is-active { display: block; }          /* the active screen is shown; children position themselves */

/* --------------------------------------------------------------------------
   BRAND
   -------------------------------------------------------------------------- */
.stack {                                       /* generic vertical stack */
  display: flex;                               /* flex column layout */
  flex-direction: column;                      /* one item per row */
  align-items: center;                         /* horizontally centred */
}                                              /* end stack */
.stack--centred {                              /* stack centred in its parent */
  position: absolute;                          /* positioned against the screen */
  inset: 0;                                    /* fill the screen... */
  justify-content: center;                     /* ...so this centres vertically */
}                                              /* end centred stack */
.mark {                                        /* the ring logomark: a void, i.e. a hole with a bright edge */
  width: 56px;                                 /* fixed size */
  height: 56px;                                /* square, so border-radius makes a circle */
  border-radius: 50%;                          /* circle */
  border: 1.5px solid rgb(255 255 255 / 0.28); /* faint outer ring */
  box-shadow: inset 0 0 22px rgb(139 92 246 / 0.4), 0 0 34px rgb(139 92 246 / 0.15); /* violet glow inside and out, giving the ring depth without an image */
  margin-bottom: 1.5rem;                       /* gap before the wordmark */
}                                              /* end mark */
.mark--pulse { animation: pulse 1.8s ease-in-out infinite; } /* the boot screen's loading indicator, replacing a spinner */
@keyframes pulse {                             /* slow breathe */
  0%, 100% { opacity: 0.35; transform: scale(0.94); } /* dim and slightly small */
  50%      { opacity: 1;    transform: scale(1); }    /* bright and full size */
}                                              /* end pulse */
.brand {                                       /* the VOID wordmark */
  font-size: 2rem;                             /* confident but not shouty */
  font-weight: 650;                            /* semibold; the tracking does the work, not the weight */
  letter-spacing: 0.28em;                      /* wide tracking reads as a logotype */
  text-indent: 0.28em;                         /* compensates the trailing letter-space so it stays optically centred */
  line-height: 1;                              /* tight so the subtitle sits close */
}                                              /* end brand */
.brand-sub {                                   /* small label under the wordmark */
  margin-top: 0.6rem;                          /* breathing room below the logotype */
  font-size: 0.8rem;                           /* small */
  font-weight: 450;                            /* light, so it recedes behind the wordmark */
  letter-spacing: 0.06em;                      /* barely tracked; wide tracking here would compete with the logotype */
  color: var(--ink-3);                         /* de-emphasised */
}                                              /* end subtitle */

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */
.sr-only {                                     /* visually hidden but still a real form control (unlike display:none, which password managers ignore) */
  position: absolute;                          /* removed from the layout flow */
  width: 1px;                                  /* collapsed to a single pixel */
  height: 1px;                                 /* collapsed to a single pixel */
  padding: 0;                                  /* no padding to expand it */
  margin: -1px;                                /* pulled off its own box */
  overflow: hidden;                            /* clip any overflow */
  clip-path: inset(50%);                       /* clip to nothing */
  white-space: nowrap;                         /* prevent wrapping from expanding the height */
  border: 0;                                   /* no border to render */
}                                              /* end screen-reader-only utility */

@media (prefers-reduced-motion: reduce) {      /* respect users who disable motion */
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* effectively disable animation, including the scan sweep */
}                                              /* end reduced-motion block */