/* Temperature Data Request — design system
   "ERA5 Acquisition Console": a cool graph-paper surface, monospace
   instrument readouts, and a single diverging cold-to-hot temperature ramp
   used as the one signature device. Shared across every page via base.html. */

:root {
  --ink:#11151C; --paper:#EEF1F5; --panel:#FFFFFF;
  --grid:#D6DCE4; --muted:#69727E; --line:#3A414B;
  --cold:#2166AC; --warm:#E0892B; --hot:#B2182B;
  --thermal:linear-gradient(90deg,#2166AC 0%,#67A9CF 28%,#F2EBD3 50%,#F4A582 72%,#B2182B 100%);
}

body {
  font-family:'IBM Plex Sans', sans-serif;
  background:var(--paper);
  color:var(--ink);
}

/* ---------- chrome (header / nav / footer) ---------- */
header {
  background:var(--ink);
  border-bottom:4px solid transparent;
  border-image:var(--thermal) 1;
}
header h1 {
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; letter-spacing:-.02em; font-size:1.55rem;
}
header .nav-link {
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  color:#AEB6C2 !important;
}
header .nav-link:hover { color:#fff !important; }

main.container { min-height:70vh; padding-top:1.5rem; padding-bottom:3rem; }

footer { background:var(--ink); }
footer p {
  font-family:'IBM Plex Mono', monospace;
  font-size:.74rem; letter-spacing:.05em; color:#8b94a1; margin:0;
}
footer .foot-make { color:#AEB6C2; margin:0 0 .4rem; }
footer .foot-make a {
  color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28);
}
footer .foot-make a:hover { color:#67A9CF; border-color:#67A9CF; }

/* ---------- shared display elements ---------- */
.eyebrow {
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cold); margin:0 0 .5rem;
}
.masthead {
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:2.5rem; letter-spacing:-.03em; line-height:1.02;
  margin:0 0 1.1rem;
}
.thermal-rule { height:7px; border-radius:4px; background:var(--thermal); }
.scale-ticks {
  display:flex; justify-content:space-between;
  font-family:'IBM Plex Mono', monospace;
  font-size:.64rem; letter-spacing:.12em; color:var(--muted);
  margin:.45rem 0 1.9rem;
}

.panel {
  background:var(--panel); border:1px solid var(--grid);
  border-radius:11px; padding:1.4rem 1.5rem;
}
.panel h3 {
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.1rem;
}
.panel .muted { font-family:'IBM Plex Mono', monospace; color:var(--muted); margin:0; }

/* ---------- buttons ---------- */
.btn-thermal, .btn-track {
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  text-transform:uppercase; letter-spacing:.08em; font-size:.82rem;
  background:var(--ink); color:#fff; border:0; border-radius:8px;
  padding:.7rem 1.3rem; text-decoration:none; cursor:pointer;
  transition:background .15s ease;
}
.btn-thermal:hover, .btn-track:hover { background:var(--cold); color:#fff; text-decoration:none; }
.btn-ghost {
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  text-transform:uppercase; letter-spacing:.08em; font-size:.82rem;
  background:transparent; color:var(--ink);
  border:1px solid var(--grid); border-radius:8px;
  padding:.7rem 1.3rem; text-decoration:none; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.btn-ghost:hover { border-color:var(--cold); color:var(--cold); text-decoration:none; }

/* ---------- forms ---------- */
.form-label {
  font-family:'IBM Plex Mono', monospace;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.35rem;
}
.form-control {
  font-family:'IBM Plex Mono', monospace; font-size:.92rem;
  color:var(--ink); background:#fff;
  border:1px solid var(--grid); border-radius:8px; padding:.6rem .75rem; height:auto;
}
.form-control:focus {
  border-color:var(--cold);
  box-shadow:0 0 0 3px rgba(33,102,172,.15);
}
.text-danger {
  font-family:'IBM Plex Mono', monospace; font-size:.72rem;
  color:var(--hot) !important; display:block; margin-top:.3rem;
}
.card { background:var(--panel); border:1px solid var(--grid); border-radius:14px; }

/* ---------- home hero ---------- */
.hero { max-width:760px; margin:2rem auto 0; }
.hero-title {
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:3.2rem; line-height:1.02; letter-spacing:-.03em;
  margin:0 0 1.1rem;
}
.hero .lead {
  font-family:'IBM Plex Sans', sans-serif;
  font-size:1.12rem; color:var(--line); max-width:56ch; margin:0 0 1.8rem;
}
.cta-row { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:2.4rem; }

.spec {
  display:flex; gap:1px; background:var(--grid);
  border:1px solid var(--grid); border-radius:9px; overflow:hidden;
}
.spec .s { flex:1; background:var(--panel); padding:.95rem 1.1rem; }
.spec .s .k {
  font-family:'IBM Plex Mono', monospace;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.25rem;
}
.spec .s .v { font-family:'IBM Plex Mono', monospace; font-size:.86rem; color:var(--ink); }

/* ---------- request form ---------- */
.form-wrap { max-width:560px; margin:1.5rem auto 0; }
.form-wrap .thermal-rule { margin-bottom:1.5rem; }
.form-wrap .btn-thermal { width:100%; margin-top:.6rem; }

/* ---------- dashboard console ---------- */
.console { max-width:1000px; margin:0 auto; }

.console .readout {
  display:flex; gap:1px; background:var(--grid);
  border:1px solid var(--grid); border-radius:9px; overflow:hidden; margin-bottom:1.9rem;
}
.console .cell { flex:1; background:var(--panel); padding:1.05rem 1.2rem; }
.console .cell .k {
  font-family:'IBM Plex Mono', monospace;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.console .cell .v {
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.9rem; line-height:1.15;
}
.console .cell .v.warm { color:var(--warm); }

.console .ledger-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.75rem; }
.console .ledger-head h3 {
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0;
}
.console .ledger-head .note { font-family:'IBM Plex Mono', monospace; font-size:.68rem; color:var(--muted); }

.console table.ledger {
  width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--grid); border-radius:11px; overflow:hidden;
}
.console .ledger thead th {
  font-family:'IBM Plex Mono', monospace;
  font-size:.66rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--grid);
}
.console .ledger tbody td { padding:.95rem 1rem; border-bottom:1px solid var(--grid); font-size:.9rem; vertical-align:middle; }
.console .ledger tbody tr:last-child td { border-bottom:0; }
.console .ledger tbody tr:hover { background:#F6F8FB; }
.console .req { font-family:'IBM Plex Mono', monospace; color:var(--muted); }
.console .station { font-weight:500; }
.console .window, .console .fmt { font-family:'IBM Plex Mono', monospace; font-size:.82rem; color:var(--line); }
.console .fmt { text-transform:uppercase; }

.console .statuscell { display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.console .tag {
  display:inline-flex; align-items:center; gap:.42rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.3rem .62rem; border-radius:999px; border:1px solid;
}
.console .t-ready { color:var(--cold); border-color:rgba(33,102,172,.35); background:rgba(33,102,172,.07); }
.console .t-acq   { color:var(--warm); border-color:rgba(224,137,43,.40); background:rgba(224,137,43,.08); }
.console .t-fault { color:var(--hot);  border-color:rgba(178,24,43,.35);  background:rgba(178,24,43,.07); }
.console .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.console .t-acq .dot { animation:therm-pulse 1.2s ease-in-out infinite; }
@keyframes therm-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.65)} }
.console a.export {
  font-family:'IBM Plex Mono', monospace; font-size:.78rem; color:var(--cold);
  text-decoration:none; border-bottom:1px solid rgba(33,102,172,.4);
}
.console a.export:hover { color:var(--hot); border-color:var(--hot); }

.console .empty {
  font-family:'IBM Plex Mono', monospace; color:var(--muted);
  padding:2.2rem 1rem; text-align:center; border:1px dashed var(--grid); border-radius:11px;
}
.console .empty a { color:var(--cold); }
.console .panel { margin-top:1.9rem; }

/* ---------- accessibility / responsive ---------- */
@media (prefers-reduced-motion: reduce) { .console .t-acq .dot { animation:none; } }
@media (max-width:640px) {
  .hero-title { font-size:2.3rem; }
  .masthead { font-size:1.9rem; }
  .spec, .console .readout { flex-direction:column; }
}