/* ==========================================================================
   Grey Expedite Logistics — Design System
   Signature: "Dispatch Console" — mono-spaced data readouts styled after a
   fleet dispatch terminal, plus a moving dashed "route-line" divider that
   nods to highway lane markings. Cards use a clipped waybill-style corner
   tab in place of generic rounded shadows.
   ========================================================================== */

:root {
  --ge-navy: #0F172A;
  --ge-navy-light: #1E293B;
  --ge-navy-lighter: #334155;
  --ge-slate: #475569;
  --ge-cyan: #0EA5E9;
  --ge-cyan-dark: #0284C7;
  --ge-cyan-glow: rgba(14, 165, 233, 0.18);
  --ge-white: #FFFFFF;
  --ge-font-display: 'Space Grotesk', sans-serif;
  --ge-font-body: 'Inter', sans-serif;
  --ge-font-mono: 'IBM Plex Mono', monospace;
}

body {
  font-family: var(--ge-font-body);
  color: var(--ge-navy);
  background-color: var(--ge-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .ge-display {
  font-family: var(--ge-font-display);
  letter-spacing: -0.01em;
}

.ge-mono {
  font-family: var(--ge-font-mono);
  letter-spacing: 0.02em;
}

/* Respect reduced motion preference across all custom animation */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------
   Signature element: the Route Line
   A dashed horizontal divider that "travels" left to right, standing in
   for a highway lane marking. Used between major sections instead of a
   plain <hr> or gradient fade.
   -------------------------------------------------------------------- */
.ge-route-line {
  position: relative;
  height: 2px;
  width: 100%;
  overflow: hidden;
  background: repeating-linear-gradient(
    90deg,
    var(--ge-cyan) 0px,
    var(--ge-cyan) 22px,
    transparent 22px,
    transparent 40px
  );
  opacity: 0.55;
}

.ge-route-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    var(--ge-cyan) 0px,
    var(--ge-cyan) 22px,
    transparent 22px,
    transparent 40px
  );
  animation: ge-route-travel 3.6s linear infinite;
}

@keyframes ge-route-travel {
  from { transform: translateX(0); }
  to { transform: translateX(40px); }
}

/* --------------------------------------------------------------------
   Signature element: Waybill card corner
   Instead of a generic rounded-shadow card, cards carry a clipped tab in
   the top-right corner — evoking a shipping label / bill of lading — with
   a small mono "ref" tag.
   -------------------------------------------------------------------- */
.ge-waybill {
  position: relative;
  background: var(--ge-white);
  border: 1px solid #E2E8F0;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ge-waybill::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: var(--ge-cyan);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.ge-waybill:hover {
  border-color: var(--ge-cyan);
  transform: translateY(-3px);
}

.ge-waybill-dark {
  background: var(--ge-navy-light);
  border: 1px solid var(--ge-navy-lighter);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ge-waybill-dark::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: var(--ge-cyan);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.ge-waybill-dark:hover {
  border-color: var(--ge-cyan);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------
   Dispatch console stat readout
   -------------------------------------------------------------------- */
.ge-readout {
  font-family: var(--ge-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ge-cyan);
  text-shadow: 0 0 24px var(--ge-cyan-glow);
}

.ge-readout-cursor::after {
  content: "_";
  animation: ge-blink 1.1s step-end infinite;
  color: var(--ge-cyan);
}

@keyframes ge-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------------
   Utility: coordinate/eyebrow tag styled like a manifest reference code
   -------------------------------------------------------------------- */
.ge-tag {
  font-family: var(--ge-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ge-cyan);
  border: 1px solid var(--ge-cyan);
  padding: 0.2rem 0.6rem;
  display: inline-block;
}

/* --------------------------------------------------------------------
   Focus states — visible keyboard focus everywhere (accessibility floor)
   -------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ge-cyan);
  outline-offset: 2px;
}

/* Mobile nav */
.ge-mobile-menu {
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ge-mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}