/* North Siders Clearance: shared winter theme.
 *
 * Link it from any site page: <link rel="stylesheet" href="/static/nsc-theme.css">
 * Variables first, then components. Pages keep only page-specific CSS on top of this.
 * The snowfall and aurora are decorative, sit behind the content, and stop for
 * prefers-reduced-motion.
 */
:root{
  color-scheme:dark;
  --bg:#060b13;--bg2:#0a1422;
  --panel:#0f1a28;--panel2:#13212f;--glass:rgba(16,30,46,.72);
  --line:#22364b;--line2:#2f4b66;--frost-line:rgba(190,228,255,.16);
  --text:#eef6fd;--muted:#9fb3c6;--dim:#6f869c;
  --ice:#bfe6ff;--frost:#e6f5ff;--blue:#48b4ff;--glacier:#7fd3ff;--aurora:#5ef0c8;
  --green:#74e0b1;--amber:#ffc978;--red:#ff8791;
  --radius:14px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font:15px/1.5 var(--font);
  background:
    radial-gradient(ellipse 60% 40% at 78% -8%,rgba(94,240,200,.10),transparent 70%),
    radial-gradient(ellipse 70% 45% at 20% -12%,rgba(72,180,255,.16),transparent 70%),
    linear-gradient(180deg,#0a1626 0,var(--bg) 520px);
  background-attachment:fixed}
a{color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.wrap{max-width:1280px;margin:auto;padding:0 24px;position:relative;z-index:1}

/* Snowfall: two layers of soft flakes drifting behind the page (body.nsc-snow turns it on). */
body.nsc-snow::before,body.nsc-snow::after{content:"";position:fixed;inset:-120px 0 0;pointer-events:none;z-index:0;
  background-repeat:repeat;will-change:background-position}
body.nsc-snow::before{opacity:.55;background-size:260px 260px;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px,#fff,transparent),radial-gradient(1.2px 1.2px at 90px 140px,#e6f5ff,transparent),
    radial-gradient(1.8px 1.8px at 170px 60px,#fff,transparent),radial-gradient(1.1px 1.1px at 230px 200px,#dff1ff,transparent),
    radial-gradient(1.4px 1.4px at 60px 220px,#fff,transparent),radial-gradient(1px 1px at 140px 250px,#cfeaff,transparent);
  animation:nsc-snow-a 38s linear infinite}
body.nsc-snow::after{opacity:.35;background-size:420px 420px;
  background-image:
    radial-gradient(2.4px 2.4px at 50px 80px,#fff,transparent),radial-gradient(2px 2px at 300px 40px,#eaf6ff,transparent),
    radial-gradient(2.6px 2.6px at 210px 300px,#fff,transparent),radial-gradient(1.8px 1.8px at 380px 220px,#dff1ff,transparent);
  animation:nsc-snow-b 64s linear infinite}
@keyframes nsc-snow-a{from{background-position:0 0}to{background-position:-60px 260px}}
@keyframes nsc-snow-b{from{background-position:0 0}to{background-position:80px 420px}}
@media (prefers-reduced-motion:reduce){body.nsc-snow::before,body.nsc-snow::after{animation:none}}

/* Hero: frosted panel with snow-capped mountains along the bottom edge. */
.hero{margin:28px 0 8px;border:1px solid var(--line2);border-radius:20px;padding:34px 36px 46px;position:relative;overflow:hidden;
  background:linear-gradient(115deg,rgba(14,30,48,.92) 0,rgba(15,33,52,.9) 52%,rgba(20,52,80,.88) 100%);
  box-shadow:0 0 0 1px var(--frost-line) inset,0 18px 50px -24px rgba(72,180,255,.35)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 70% at 85% 0,rgba(94,240,200,.12),transparent 70%)}
.hero::after{content:"";position:absolute;left:34%;right:0;bottom:0;height:140px;pointer-events:none;opacity:.95;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150V104L190 34L320 92L450 12L600 86L760 42L880 96L1010 22L1200 108V150Z' fill='%2313304b'/%3E%3Cpath d='M190 34L248 60L222 54L205 61L183 52L158 60L141 54L119 60ZM450 12L503 38L479 32L463 39L446 30L431 38L420 32L408 38ZM760 42L804 62L784 57L771 63L753 56L728 62L710 57L688 62ZM1010 22L1067 48L1042 42L1024 49L1005 40L989 48L978 42L964 48Z' fill='%23e6f5ff' opacity='.85'/%3E%3Cpath d='M0 150V128L130 86L270 122L400 70L560 124L700 82L860 126L980 74L1120 118L1200 96V150Z' fill='%230b1d30'/%3E%3Cpath d='M130 86L192 102L164 98L146 103L125 97L108 102L95 98L80 102ZM400 70L447 86L426 82L412 87L396 81L382 86L372 82L360 86ZM700 82L758 98L732 94L715 99L695 93L676 98L663 94L647 98ZM980 74L1031 90L1008 86L993 91L976 85L963 90L954 86L943 90Z' fill='%23d6ecff' opacity='.7'/%3E%3C/svg%3E") no-repeat bottom/100% 100%}
.hero>*{position:relative;z-index:1}
.eyebrow{color:var(--ice);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.18em}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.06;letter-spacing:-.04em;margin:8px 0 10px}
.hero p{color:#b8cbdc;margin:0;max-width:680px}

/* Cards and panels: frosted glass with a thin frost edge. */
.card,.panel{background:linear-gradient(150deg,rgba(19,33,49,.92),rgba(12,22,34,.94));border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;position:relative;box-shadow:0 1px 0 var(--frost-line) inset;backdrop-filter:blur(6px)}
.card h3,.panel h3{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sectionhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:30px 0 12px}
.sectionhead h2{margin:0;font-size:20px;letter-spacing:-.02em}
.sectionhead p{margin:2px 0 0;color:var(--muted);font-size:13px}

/* Status pills. */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--line2);border-radius:999px;font-weight:750;font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;color:#d3e3f0;background:#152536;white-space:nowrap}
.pill.live{color:#a6f0d0;border-color:#2f795e;background:#0f3326}
.pill.research{color:#ffd895;border-color:#7a5c2e;background:#30240f}
.pill.reports{color:#c3e5ff;border-color:#2f6895;background:#102a43}
.pill.warn{color:#ffd895;border-color:#7a5c2e;background:#30240f}
.pill.error{color:#ffc2c8;border-color:#7b3740;background:#2c1318}

/* Buttons and fields. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;border:1px solid var(--line2);background:#132436;color:#dcebf7;
  padding:8px 13px;border-radius:10px;font-size:13px;font-weight:650;line-height:1.2}
.btn:hover{background:#1a3048;border-color:#4a6f90;color:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#4fb8ff,#2f8fe0);border-color:#6cc6ff;color:#04121f;box-shadow:0 6px 18px -8px rgba(72,180,255,.8)}
.btn.primary:hover{background:linear-gradient(180deg,#6cc6ff,#3b9be9);color:#04121f}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:#13243a;color:var(--text)}
.field{background:#0c1826;border:1px solid var(--line2);color:var(--text);border-radius:10px;padding:9px 12px;min-height:40px}
.field:focus{outline:2px solid rgba(127,211,255,.45);outline-offset:1px;border-color:var(--glacier)}
label{color:var(--muted);font-size:13px}

/* Banners: a title line, a detail line, and optional facts/actions. */
.banner{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;border:1px solid var(--line2);border-radius:12px;
  padding:13px 16px;background:linear-gradient(120deg,rgba(18,40,62,.9),rgba(13,27,42,.9));color:#d8e8f5;font-size:13px;margin:14px 0}
.banner::before{content:"❄";grid-column:1;grid-row:1/span 6;font-size:15px;line-height:1.3;color:var(--ice)}
.banner>*{grid-column:2;min-width:0}
.banner.info{border-color:#2f6895}
.banner.warn{border-color:#7a5c2e;background:linear-gradient(120deg,rgba(52,38,14,.85),rgba(30,24,14,.9));color:#f6e3c4}
.banner.warn::before{content:"⚑";color:var(--amber)}
.banner.error{border-color:#7b3740;background:linear-gradient(120deg,rgba(52,18,24,.85),rgba(30,14,18,.9));color:#ffd5d9}
.banner.error::before{content:"✕";color:var(--red)}
.banner.ok{border-color:#2f795e;background:linear-gradient(120deg,rgba(14,50,38,.85),rgba(12,30,24,.9));color:#d3f5e6}
.banner.ok::before{content:"✓";color:var(--green)}
.banner-title{font-weight:750;color:var(--frost)}
.banner.warn .banner-title{color:#ffe2b0}
.banner-body{color:inherit;opacity:.92}
.banner-facts{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--muted);font-size:12px}
.banner-facts b{color:var(--text);font-weight:700}
.banner-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.banner-actions a{color:var(--glacier);font-weight:650;text-decoration:none}
.banner-actions a:hover{text-decoration:underline}

/* Stat tiles. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.stat{background:linear-gradient(150deg,rgba(19,33,49,.92),rgba(12,22,34,.94));border:1px solid var(--line);border-radius:12px;padding:13px 15px;box-shadow:0 1px 0 var(--frost-line) inset}
.stat .label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.stat .value{font-size:24px;font-weight:850;letter-spacing:-.03em;margin-top:2px}
.stat .hint{color:var(--dim);font-size:12px}

/* Tables. */
table.nsc-table{width:100%;border-collapse:collapse;font-size:13px}
table.nsc-table th{text-align:left;color:var(--muted);font-weight:650;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:9px 10px;border-bottom:1px solid var(--line2)}
table.nsc-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
table.nsc-table tr:hover td{background:rgba(127,211,255,.04)}

.empty{text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:var(--radius);padding:34px 20px;background:rgba(12,22,34,.6)}
.empty h3{color:var(--text);margin:6px 0}
.mono{font-family:var(--mono)}
.foot{border-top:1px solid #1a2c3e;margin-top:46px;padding:18px 24px 28px;color:var(--dim);font-size:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;position:relative;z-index:1}

@media(max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.hero::after{left:0;height:70px;opacity:.6}.wrap{padding:0 14px}.hero{padding:24px 20px 40px}.grid,.stats{grid-template-columns:1fr}}