/* =========================================================
   CRS.Codes — Global Stylesheet
   ---------------------------------------------------------
   Contents
     01) Colour variables (light & dark)
     02) Base & layout
     03) Navbar
     04) Search bar + "Near me"
     05) Generic components: chips, lists, states
     06) Stations — cards
     07) TOCs — cards
     08) Performance — grouped by TOC
     09) Popovers (Tiger menu)
     10) Motion, accessibility, print
========================================================= */


/* =========================================================
   01) Colour variables (light & dark)
========================================================= */
:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#6b7280;

  --accent:#2563eb;
  --accent-2:#1d4ed8;

  --card:#ffffff;
  --border:#e5e7eb;
  --error:#b91c1c;

  --shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);

  --radius:14px;
  --radius-pill:999px;
  --maxw:1000px;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b1020;
    --fg:#e5e7eb;
    --muted:#94a3b8;

    --accent:#60a5fa;
    --accent-2:#3b82f6;

    --card:#0f172a;
    --border:#1f2937;
    --error:#ef4444;

    --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.35);
  }
}


/* =========================================================
   02) Base & layout
========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; }

.wrapper{
  max-width:var(--maxw);
  margin:0 auto;
  padding:16px clamp(12px,2.2vw,24px);
}

.page-title{ margin:10px 0 6px; }
hr{ border:0; border-top:1px solid var(--border); margin:18px 0; }


/* =========================================================
   03) Navbar
========================================================= */
.navbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}

.nav-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 0;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
}

.brand-icon{ font-size:20px; }
.brand-text{ font-size:16px; }

.nav-toggle{
  display:none;
  width:40px; height:36px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
}

.nav-burger{
  position:relative; display:block;
  width:20px; height:2px; margin:0 auto;
  background:var(--fg);
}
.nav-burger::before,.nav-burger::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--fg);
}
.nav-burger::before{ top:-6px; }
.nav-burger::after{ top:6px; }

.nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; gap:14px; justify-self:end;
}
.nav-links a{
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
}
.nav-links a.active{
  background:color-mix(in srgb, var(--accent) 12%, var(--card));
  color:var(--accent-2);
}
.nav-links a:hover{
  background:color-mix(in srgb, var(--accent) 6%, var(--card));
}

@media (max-width:720px){
  .nav-inner{ grid-template-columns:auto auto 1fr; }
  .nav-toggle{ display:inline-block; }
  .nav-links{
    position:absolute; left:0; right:0; top:56px;
    display:none; flex-direction:column; gap:0;
    background:var(--card);
    border-bottom:1px solid var(--border);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 16px; border-radius:0; }
}


/* =========================================================
   04) Search bar + "Near me"
========================================================= */
.searchbar{
  margin:8px 0 18px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.searchbar .searchwrap{ position:relative; flex:1 1 360px; }

.searchbar input[type="search"]{
  width:100%;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 44px 12px 42px;
  box-shadow:var(--shadow);
  transition:border-color .12s ease, box-shadow .12s ease;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat:no-repeat; background-position:14px 50%;
}
.searchbar input[type="search"]::placeholder{ color:var(--muted); }
.searchbar input[type="search"]:focus-visible{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}


/* =========================================================
   05) Generic components: chips, lists, states
========================================================= */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; line-height:32px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--accent) 6%, var(--card));
  color:var(--fg);
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.chip:hover{ transform:translateY(-1px); }
.chip:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset:2px;
}

.chips{
  list-style:none; margin:12px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}

.muted{ color:var(--muted); }

.error{
  color:var(--error);
  background:color-mix(in srgb, var(--error) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--error) 35%, var(--border));
  padding:12px 14px; border-radius:var(--radius);
}

#loading-message{
  background:var(--card);
  border:1px dashed var(--border);
  color:var(--muted);
  padding:14px 16px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:12px 0 18px;
  display:flex; align-items:center; gap:10px;
}


/* =========================================================
   06) Stations — cards
========================================================= */
.station-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px;
}

.station-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.station-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}

.station-card-inner{
  padding:14px;
  border-radius:calc(var(--radius) - 4px);
  background:linear-gradient(0deg, color-mix(in srgb, var(--bg) 8%, transparent), transparent);
  outline:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  outline-offset:-6px;
}

.station-header{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

.station-title{
  flex:1 1 auto; min-width:0;
  text-decoration:none; font-weight:700; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.station-title:hover{ text-decoration:underline; }

.station-actions{
  flex:0 1 auto;
  display:flex; align-items:center; gap:10px;
  max-width:100%; flex-wrap:wrap; justify-content:flex-end;
}

/* chip ordering: airport -> tiger -> CRS */
.chip-inline-airport{ order:0; }
.chip-inline-tiger{ order:1; }
.station-crs{ order:2; }

/* CRS squircle */
.station-crs.squircle{
  min-width:64px; justify-content:center;
  font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;
  background:color-mix(in srgb, var(--accent) 10%, var(--card));
  color:var(--accent-2);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* Extras row */
.chip-distance{
  background:color-mix(in srgb, var(--accent) 0%, var(--card));
  color:var(--muted);
  border-style:dashed;
}
.chip-icon-plane{ font-size:.95em; }

@media (max-width:520px){
  .station-header{ gap:8px; }
  .chip{ height:30px; line-height:30px; padding:0 10px; font-size:12px; }
  .station-crs.squircle{ min-width:58px; }
}


/* =========================================================
   07) TOCs — cards
========================================================= */
.tocs-filters{ margin:10px 0 16px; }
.tocs-filters input[type="search"]{
  width:100%; background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; box-shadow:var(--shadow);
}

.tocs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:14px;
}

.toc-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.toc-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.toc-card-link{ display:block; color:inherit; text-decoration:none; padding:12px; }

.toc-header{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px; align-items:center;
}

.toc-badge{
  width:48px; height:48px;
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 70%, var(--bg));
  border:2px solid var(--border);
  display:grid; place-items:center;
  font-weight:800; letter-spacing:.5px; color:var(--fg);
  box-shadow:inset 0 0 0 9999px color-mix(in srgb, var(--toc-accent,#0ea5e9) 10%, transparent);
}

.toc-title h2{ margin:0; font-size:16px; }
.toc-meta{ margin-top:2px; display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--muted); }
.toc-code{
  padding:2px 6px; border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--toc-accent,#0ea5e9) 10%, var(--card));
  color:color-mix(in srgb, var(--toc-accent,#0ea5e9) 60%, var(--fg));
  font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;
}
.toc-desc{ margin:10px 0 0; color:var(--fg); }


/* =========================================================
   08) Performance — grouped by TOC
========================================================= */
.perf-controls{ margin:8px 0 14px; }
.perf-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.perf-field{ display:flex; align-items:center; gap:6px; }
.perf-grow{ flex:1 1 360px; }

#perf-search{
  width:100%; background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 12px; box-shadow:var(--shadow);
}
#perf-operator,#perf-severity{
  height:36px; border:1px solid var(--border); border-radius:10px;
  background:var(--card); color:var(--fg); padding:0 10px;
}

.perf-stats{ margin-top:6px; }

.perf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr));
  gap:14px;
  min-height:120px;
}

.perf-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:12px;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.perf-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}

.perf-head{
  display:grid; grid-template-columns:1fr; gap:6px;
}
.perf-title{ margin:0; font-size:16px; font-weight:700; letter-spacing:.2px; }
.perf-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.perf-desc{ margin:8px 0 10px; }

.disruptions-list{
  list-style:none; margin:10px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.disruption-row{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
}
.disruption-text{ line-height:1.4; }

/* Severity + status pills */
.sev,.pill{
  display:inline-flex; align-items:center;
  height:26px; line-height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--accent) 6%, var(--card));
}
.sev-severe{
  background:color-mix(in srgb, #dc2626 18%, var(--card));
  color:#7f1d1d;
  border-color:color-mix(in srgb, #dc2626 35%, var(--border));
}
.sev-major{
  background:color-mix(in srgb, #f97316 18%, var(--card));
  color:#7c2d12;
  border-color:color-mix(in srgb, #f97316 35%, var(--border));
}
.sev-moderate{
  background:color-mix(in srgb, #f59e0b 18%, var(--card));
  color:#78350f;
  border-color:color-mix(in srgb, #f59e0b 35%, var(--border));
}
.sev-minor{
  background:color-mix(in srgb, #84cc16 18%, var(--card));
  color:#365314;
  border-color:color-mix(in srgb, #84cc16 35%, var(--border));
}
.sev-info{
  background:color-mix(in srgb, var(--accent) 10%, var(--card));
  color:var(--accent-2);
}
.sev-planned{
  background:color-mix(in srgb, #22c55e 16%, var(--card));
  color:#065f46;
  border-color:color-mix(in srgb, #22c55e 35%, var(--border));
}
.sev-good{
  background:color-mix(in srgb, #22c55e 18%, var(--card));
  color:#065f46;
  border-color:color-mix(in srgb, #22c55e 35%, var(--border));
}

.pill-live{ background:color-mix(in srgb, #ef4444 14%, var(--card)); color:#7f1d1d; }
.pill-ended{ background:color-mix(in srgb, #6b7280 10%, var(--card)); color:#374151; }
.pill-scheduled{ background:color-mix(in srgb, #60a5fa 12%, var(--card)); color:#1d4ed8; }

/* Skeleton placeholders */
.skeleton{
  height:120px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%),
    var(--card);
  background-size:200% 100%;
  border:1px solid var(--border);
  border-radius:var(--radius);
  animation:shimmer 1.2s infinite;
}
@media (prefers-color-scheme:dark){
  .skeleton{
    background:
      linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 100%),
      var(--card);
  }
}
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }


/* =========================================================
   09) Popovers (Tiger menu)
========================================================= */
.popover.tiger-menu{
  position:absolute; z-index:1000;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow);
  padding:6px; min-width:180px;
}
.popover.tiger-menu ul{ list-style:none; margin:0; padding:0; }
.popover.tiger-menu li{ margin:0; }
.popover.tiger-menu a{
  display:block; text-decoration:none; color:inherit;
  padding:10px 12px; border-radius:8px;
}
.popover.tiger-menu a:hover{
  background:color-mix(in srgb, var(--accent) 10%, var(--card));
  color:var(--accent-2);
}


/* =========================================================
   10) Motion, accessibility, print
========================================================= */
.mt-lg{ margin-top:24px; }
.hidden{ display:none !important; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px);
  white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

footer{ margin-top:24px; border-top:1px solid var(--border); }
footer .data-version{ color:var(--muted); font-size:13px; }

@media print{
  .navbar,.searchbar,#loading-message{ display:none !important; }
  body{ background:#fff; color:#000; }
  .station-card,.toc-card,.perf-card{ box-shadow:none; border-color:#bbb; }
}