/* VJ Aerial — the tokens and base rules every page shares.
   Loaded before each page's own stylesheet, which overrides what it must.
   Before this, five single-file apps each carried their own copy of the
   palette and the form styles, and they had drifted: three primary-button
   colours for "Sign in", two greens, two blues-lighter. One file now. */

:root {
  --ink:      #06090f;
  --paper:    #f0ede4;
  --sky:      #0b1422;
  --panel:    #0c1a28;
  --blue:     #1a7ed0;
  --bright:   #3eb5ff;
  --blue-lt:  #3eb5ff;          /* the portal's older name for --bright */
  --green:    #22a86e;
  --green-lt: #3ed898;
  --gold:     #c8922a;
  --red:      #d42b2b;
  --teal:     #1fa8a0;
  --grey:     #8a94a0;
  --err:      #ff8f7a;
  --mono:     'DM Mono', 'SF Mono', Menlo, 'Courier New', monospace;
  --serif:    'DM Serif Display', Georgia, serif;
  --display:  'Bebas Neue', Impact, sans-serif;
  /* Each app's identity colour — borders, headings, the active tab. The
     portal is blue, the admin green, TRACS red. Buttons do NOT use it:
     the same action looks the same everywhere (see below). */
  --accent:   var(--blue);
  --accent-rgb: 26,126,208;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--sky); color:var(--paper); font-family:var(--mono); }

/* keyboard users see where they are, everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--bright); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ── form base for the two console apps (portal, admin). Opt-in via
      <body class="vj-app"> so the homepage and TRACS keep their own inputs. ── */
.vj-app label {
  display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(240,237,228,.6); margin-bottom:5px;
}
.vj-app input, .vj-app select, .vj-app textarea {
  font-family:inherit; font-size:14px; padding:10px 12px; width:100%;
  border:1px solid rgba(var(--accent-rgb),.3); background:rgba(255,255,255,.04); color:var(--paper);
}
.vj-app input:focus, .vj-app select:focus, .vj-app textarea:focus { outline:none; border-color:var(--accent); }
.vj-app button {
  font-family:inherit; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 18px; border:1px solid rgba(var(--accent-rgb),.4); background:rgba(255,255,255,.04);
  color:var(--paper); cursor:pointer;
}
.vj-app button:hover:not(:disabled) { border-color:var(--accent); }
.vj-app button:disabled { opacity:.35; cursor:default; }
/* One colour per action, in every app: the primary action is blue, a
   destructive one is red, and both read the same on the portal and the admin. */
.vj-app button.p { background:var(--blue); color:#fff; border-color:var(--blue); }
.vj-app button.danger { border-color:rgba(212,43,43,.5); color:#ff8f8f; }
.vj-app button.danger.p { background:var(--red); color:#fff; border-color:var(--red); }
.vj-app .msg { font-size:11.5px; line-height:1.6; margin-top:12px; min-height:16px; }
.vj-app .msg.err { color:var(--err); } .vj-app .msg.ok { color:var(--green-lt); } .vj-app .msg.warn { color:var(--gold); }
.vj-app .note { font-size:11px; line-height:1.65; color:rgba(240,237,228,.55); margin-top:12px; }
.vj-app .hide { display:none; }
@media (max-width: 700px) {
  /* iOS zooms into any field under 16 px, and these pages cannot scroll sideways */
  .vj-app input, .vj-app select, .vj-app textarea { font-size:16px; }
}