/* tokens.css -- the shared design language for every page.
 *
 * Apple HIG applied to a static site: dark only, system font, two glass recipes
 * and nothing else. Pages link this FIRST, then their own CSS, which consumes
 * these variables. The inline-<style> pages (stock/restock/scan/dev) stay
 * self-contained by design -- they just stop inventing their own palette.
 *
 * Two rules from foundations/materials.md that this file exists to enforce:
 *   1. Glass is the CONTROL layer only. Cards, tables and rows are content
 *      layer -- flat --surface-*, never backdrop-filter.
 *   2. Max ~3 glass elements per page. Over a 600KB map image, blur is also
 *      the frame-rate budget.
 */

:root {
  color-scheme: dark;

  /* --- Content-layer surfaces (systemBackground family) --------------- */
  --bg: #000;
  --surface-1: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;

  /* --- Label tiers. Dark-mode values from foundations/color.md -------- */
  --label: #fff;
  --label-2: rgba(255, 255, 255, 0.6);
  --label-3: rgba(255, 255, 255, 0.3);
  --label-4: rgba(255, 255, 255, 0.18);

  /* --- Fills + separators -------------------------------------------- */
  --fill-1: rgba(120, 120, 128, 0.36);
  --fill-2: rgba(120, 120, 128, 0.24);
  --fill-3: rgba(118, 118, 128, 0.16);
  --separator: rgba(84, 84, 88, 0.6);
  --hairline: rgba(255, 255, 255, 0.09);

  /* --- Glass. Control layer only. ------------------------------------ */
  /* regular: legibility first, for anything holding real text. */
  --glass-regular: rgba(28, 28, 30, 0.72);
  /* clear: lets a rich background through. Pair with --dim if it is bright. */
  --glass-clear: rgba(28, 28, 30, 0.28);
  --glass-blur: saturate(180%) blur(20px);
  --glass-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.44);
  --dim: rgba(0, 0, 0, 0.35);

  /* --- Accent + semantic colors -------------------------------------- */
  --accent: #f0c44d;
  --accent-press: #ffdd6e;
  --on-accent: #1a1400;
  --green: #30d158;
  --orange: #ff9f0a;
  --red: #ff453a;
  --discord: #5865f2;

  /* --- Type. System font first: nothing to download. ----------------- */
  --font:
    -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  --t-large: 34px;
  --t-title1: 28px;
  --t-title2: 22px;
  --t-title3: 20px;
  --t-headline: 17px;
  --t-body: 17px;
  --t-callout: 16px;
  --t-subhead: 15px;
  --t-foot: 13px;
  --t-cap1: 12px;
  --t-cap2: 11px;

  /* --- Radii, concentric: control sits inside card sits inside window - */
  --r-window: 22px;
  --r-card: 16px;
  --r-control: 11px;
  --r-pill: 999px;

  /* --- Motion. Three durations, no more. ----------------------------- */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-press: 150ms;
  --d-move: 300ms;
  --d-glass: 400ms;

  /* --- Layout -------------------------------------------------------- */
  --pad: 16px;
  --gap: 12px;
  --tap: 44px;
  --nav-h: 56px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  font-size: var(--t-subhead);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Every number that changes over time. Without this, digits change width each
   tick and the whole row visibly twitches. */
.tnum,
.gauge-value,
input[type="number"] {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

/* ===================================================================== */
/* Materials                                                             */
/* ===================================================================== */

.glass {
  background: var(--glass-regular);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  border-radius: var(--r-window);
}

.glass-clear {
  background: var(--glass-clear);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  border-radius: var(--r-card);
}

/* Content layer. Flat, no blur -- see the header note. */
.card {
  background: var(--surface-1);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 0.5px var(--hairline);
}

/* Scroll edge effect (foundations/layout.md): content passes UNDER the nav and
   dissolves, instead of the nav sitting on an opaque bar. */
.scroll-edge {
  position: fixed;
  left: 0;
  right: 0;
  height: 92px;
  z-index: 40;
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 42%, transparent 100%);
}

.scroll-edge.is-top {
  top: 0;
}

.scroll-edge.is-bottom {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 42%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0, #000 42%, transparent 100%);
}

/* ===================================================================== */
/* Controls                                                              */
/* ===================================================================== */

/* Base: 44px hit region, real press state, no exceptions.
   components/menus-and-actions/buttons.md */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--fill-3);
  color: var(--label);
  font-size: var(--t-callout);
  font-weight: 590;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--d-press) var(--ease),
    background var(--d-press) var(--ease),
    opacity var(--d-press) var(--ease);
}

.btn:hover {
  background: var(--fill-2);
}

.btn:active {
  transform: scale(0.96);
  background: var(--fill-1);
}

/* Prominent = accent on the BACKGROUND, and at most one or two per view.
   Colouring several controls at once is the thing color.md tells you not to do. */
.btn-prominent {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 680;
}

.btn-prominent:hover {
  background: var(--accent-press);
}

.btn-prominent:active {
  background: var(--accent-press);
  transform: scale(0.96);
}

.btn-plain {
  background: transparent;
  color: var(--accent);
  padding: 0 10px;
}

.btn-plain:hover {
  background: var(--fill-3);
}

.btn-discord {
  background: var(--discord);
  color: #fff;
  font-weight: 680;
}

.btn-discord:hover {
  background: #6b76f5;
}

.btn-small {
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--t-foot);
  border-radius: 9px;
}

/* Small controls still need a 44px hit region -- grow it invisibly. */
.btn-small::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.btn-small {
  position: relative;
}

.btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

/* Activity state: "Reset" -> "Resetting..." while the POST is in flight. */
.btn.is-busy {
  opacity: 0.6;
  cursor: progress;
}

/* Stepper: - / value / + as one segmented unit.
   components/selection-and-input/steppers.md */
.stepper {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--r-control);
  background: var(--fill-3);
  overflow: hidden;
}

.stepper button {
  width: 40px;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--label);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--d-press) var(--ease);
}

.stepper button:hover {
  background: var(--fill-2);
}

.stepper button:active {
  background: var(--fill-1);
}

.stepper > * + * {
  box-shadow: inset 1px 0 0 var(--hairline);
}

.field {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--fill-3);
  color: var(--label);
  transition: box-shadow var(--d-press) var(--ease);
}

.field:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--fill-3);
  color: var(--label-2);
  font-size: var(--t-cap1);
  font-weight: 590;
  white-space: nowrap;
}

.pill.low {
  color: var(--red);
  box-shadow: inset 0 0 0 1px rgba(255, 69, 58, 0.4);
}

.pill.ok {
  color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(48, 209, 88, 0.36);
}

/* ===================================================================== */
/* Gauge -- continuous style, tiered fill.                               */
/* components/status/gauges.md: continuous for large ranges, change the   */
/* fill colour at significant points in the range.                       */
/* ===================================================================== */

.gauge {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--fill-3);
  overflow: hidden;
}

.gauge > i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  border-radius: inherit;
  background: var(--accent);
  transition:
    width 1s linear,
    background var(--d-move) var(--ease);
}

/* Thresholds match the two the Discord worker actually fires on, so what you
   see and what pings you agree: 30 min, then 8 min. */
.tier-warn > i {
  background: var(--orange);
}

.tier-crit > i {
  background: var(--red);
}

/* ===================================================================== */
/* Status                                                                */
/* ===================================================================== */

.live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--label-3);
  font-size: var(--t-cap2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--label-4);
  transition: background var(--d-move) var(--ease);
}

.live.on b {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

/* Realtime dropped: amber, not a silently green dot over stale numbers. */
.live.off b {
  background: var(--orange);
}

.skeleton {
  border-radius: var(--r-control);
  background: linear-gradient(90deg, var(--fill-3), var(--fill-2), var(--fill-3));
  background-size: 200% 100%;
  animation: shimmer 1.4s var(--ease) infinite;
  color: transparent;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ===================================================================== */
/* Navigation -- the tab bar nav.js mounts.                              */
/* components/navigation-and-search/tab-bars.md: tabs NAVIGATE. Actions  */
/* (clock, sign out, live dot) belong in the trailing toolbar slot.       */
/* ===================================================================== */

.navbar {
  position: fixed;
  z-index: 50;
  left: 50%;
  transform: translateX(-50%);
  top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 20px);
  padding: 7px 10px;
  border-radius: var(--r-pill);
  background: var(--glass-regular);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}

.navbar-brand {
  display: flex;
  align-items: center;
  padding: 0 10px 0 6px;
  color: var(--label);
  font-size: var(--t-subhead);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.navbar-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}

.navbar-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  color: var(--label-2);
  font-size: var(--t-foot);
  font-weight: 590;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--d-press) var(--ease),
    color var(--d-press) var(--ease),
    transform var(--d-press) var(--ease);
}

.navbar-tab svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.navbar-tab:hover {
  background: var(--fill-3);
  color: var(--label);
}

.navbar-tab:active {
  transform: scale(0.94);
}

/* Selected tab is the only place the accent appears in the nav. */
.navbar-tab[aria-current="page"] {
  background: var(--fill-2);
  color: var(--accent);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
  margin-left: 2px;
  box-shadow: inset 1px 0 0 var(--hairline);
  color: var(--label-2);
  font-size: var(--t-cap1);
}

.navbar-actions b {
  color: var(--label);
  font-weight: 590;
}

/* Language toggle: both options always visible. A control that hides the other
   language is no use to someone who cannot read the one currently showing. */
.lang-toggle {
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--fill-3);
}

.lang-toggle button {
  min-height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--label-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color var(--d-press) var(--ease), background var(--d-press) var(--ease);
}

.lang-toggle button:hover {
  color: var(--label);
}

.lang-toggle button[aria-current="true"] {
  background: var(--surface-3);
  color: var(--accent);
}

/* Content clears the floating nav. */
.has-nav {
  padding-top: calc(var(--nav-h) + 22px);
}

/* Phone: the bar goes to the bottom and wraps into two rows -- status above,
   tabs below. The single-row version pushed Sign out ~110px past the right
   edge, reachable only by scrolling sideways *inside* the nav, which nobody
   would ever discover. Two rows keeps every control on screen. */
@media (max-width: 780px) {
  .navbar {
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 20px);
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    padding: 4px 8px 6px;
    border-radius: 20px;
  }

  .navbar-brand {
    display: none;
  }

  .navbar-actions {
    order: 1;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 4px 0 6px;
    margin: 0;
    box-shadow: inset 0 -1px 0 var(--hairline);
  }

  .navbar-tabs {
    order: 2;
    width: 100%;
    justify-content: space-around;
    padding-top: 4px;
  }

  .navbar-tab {
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
    font-size: 10px;
  }

  .has-nav {
    padding-top: 14px;
    padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===================================================================== */
/* Accessibility overrides. Not optional.                                */
/* motion.md: "Make motion optional." materials.md: glass responds to     */
/* reduced-transparency and increased-contrast settings.                 */
/* ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass-clear,
  .navbar {
    background: var(--surface-1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .scroll-edge {
    display: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --label-2: rgba(255, 255, 255, 0.8);
    --label-3: rgba(255, 255, 255, 0.55);
    --hairline: rgba(255, 255, 255, 0.24);
    --separator: rgba(255, 255, 255, 0.4);
    --glass-regular: rgba(20, 20, 22, 0.92);
    --glass-clear: rgba(20, 20, 22, 0.7);
  }
}