/* ==========================================================================
   EmiTrack v1 — design system
   Net-Zero Carbon Emission Lab (NCEL), College of Engineering, KNUST

   Third application in the NCEL platform family. Uses a navy–emerald–gold
   institutional palette and Inter typography across the public and analytical
   surfaces.
   ========================================================================== */

/* -------------------------------------------------- tokens: light (default) */
/* Light is not dark inverted. The dark theme builds hierarchy by lifting
   surfaces out of a near-black ground; on a cream ground the same hierarchy has
   to come from the opposite move — the workspace chrome recedes, the cards sit
   above the page on a real shadow, and the rules carry enough weight to be seen
   against warm paper. The tone ladder below is therefore:

     panel   #fffefa   cards, the lit surface the reader works on
     paper   #f1eee4   the page the cards sit on
     panel-2 #e9e5d8   chrome that recedes: rail, footer, key-figure strip
     paper-2 #e6e1d4   filled areas inside figures, e.g. the map's land
     sunk    #eae6da   inset wells and hover states
*/
:root {
  --paper:        #f4f7f5;
  --paper-2:      #e9f0ed;
  --panel:        #ffffff;
  --panel-2:      #edf2f0;
  --sunk:         #e7eeeb;

  --ink:          #0b2431;
  --ink-2:        #294752;
  --muted:        #586f76;
  --faint:        #6f8288;

  --green:        #0b7654;
  --green-hi:     #095f45;
  --green-deep:   #064936;
  --mint:         #d5ebe0;
  --mint-2:       #e4f2eb;

  --gold:         #8e620c;
  --gold-soft:    #e7bc58;
  --red:          #b03a30;
  --red-soft:     #d9695e;
  --blue:         #1d4f8f;
  --violet:       #5b4b8a;

  --line:         #0b24311f;
  --line-2:       #0b243138;
  --line-strong:  #0b24315c;

  /* A cream ground swallows a weak shadow. These are tuned to read on paper,
     not carried over from a white-background default. */
  --shadow-sm:    0 1px 2px #0d2a2617, 0 2px 8px #0d2a2612;
  --shadow:       0 2px 6px #0d2a2617, 0 10px 28px #0d2a261c;
  --shadow-lg:    0 6px 18px #0d2a2624, 0 26px 60px #0d2a2626;

  /* Categorical theme — fixed hue order, never cycled. Validated against the
     cream surface with the dataviz validator: lightness band, chroma floor,
     protan/deutan/tritan separation, normal-vision floor, contrast. */
  --c1: #0d8f7c;  --c2: #b45309;  --c3: #2a63ad;
  --c4: #b03a58;  --c5: #5f9c22;  --c6: #7a4a9e;

  /* Assets take categorical slots 1-3 and keep them everywhere. */
  --f-jubilee:    #0d8f7c;
  --f-ten:        #b45309;
  --f-octp:       #2a63ad;

  /* Sequential ramp: one hue, monotone lightness. The six steps mirror the
     dark ramp's contrast spread against its own surface (12.8 down to 3.2),
     rather than being the dark ramp flipped — so the dominant first slice
     reads as a colour and the sixth step still separates from the card. */
  --s1: #06392b; --s2: #0c4938; --s3: #135945;
  --s4: #1f6b55; --s5: #2f8069; --s6: #449e84;

  --grid:         #0d2a2621;
  --axis:         #0d2a264a;
  --on-chart:     #ffffff;
  --tip-muted:    #c2d0cd;

  --font-body:    "Inter", "Avenir Next", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px;
  --sidebar: 264px;
  --topbar: 60px;
  --maxw: 1440px;
}

/* ------------------------------------------------------------ tokens: dark */
:root[data-theme="dark"] {
  --paper:        #071a2b;
  --paper-2:      #05131f;
  --panel:        #0d2639;
  --panel-2:      #102e42;
  --sunk:         #061724;

  --ink:          #e8f1ec;
  --ink-2:        #c3d5cd;
  --muted:        #90a8a0;
  --faint:        #6e847d;

  --green:        #54c882;
  --green-hi:     #6bdc97;
  --green-deep:   #109068;
  --mint:         #123b32;
  --mint-2:       #0d302a;

  --gold:         #e0b455;
  --gold-soft:    #efc978;
  --red:          #e2766a;
  --red-soft:     #ef9a90;
  --blue:         #74a8e8;
  --violet:       #a294d8;

  --line:         #e8f1ec1f;
  --line-2:       #e8f1ec2b;
  --line-strong:  #e8f1ec4d;

  --shadow-sm:    0 1px 2px #0004, 0 2px 6px #0003;
  --shadow:       0 4px 12px #0006, 0 12px 32px #0004;
  --shadow-lg:    0 8px 24px #0007, 0 28px 64px #0005;

  /* Dark steps are selected against the dark surface, not flipped. */
  --c1: #1aa392;  --c2: #c08529;  --c3: #5892dc;
  --c4: #d4708a;  --c5: #6da33a;  --c6: #a481cf;

  --f-jubilee:    #1aa392;
  --f-ten:        #c08529;
  --f-octp:       #5892dc;

  --s1: #2a7f61; --s2: #3f9c78; --s3: #5fb391;
  --s4: #83c9aa; --s5: #a9dcc4; --s6: #cfefdf;

  --grid:         #e8f1ec12;
  --axis:         #e8f1ec2e;
  --on-chart:     #071a2b;
  --tip-muted:    #a9bdb6;
}

/* Analytical-workspace refinements. The public homepage keeps its established
   palette; these higher-contrast values apply only to the application. */
:root.app-document {
  --faint:        #536b73;
  --c1:           #0b786a;
  --c5:           #4c771c;
  --f-jubilee:    #0b786a;
  --line:         #0b243129;
  --line-2:       #0b243145;
  --grid:         #0d2a262e;
  --axis:         #0d2a265c;
}
:root.app-document[data-theme="dark"] {
  --faint:        #829a92;
  --c1:           #1aa392;
  --c5:           #6da33a;
  --f-jubilee:    #1aa392;
  --line:         #e8f1ec1f;
  --line-2:       #e8f1ec2b;
  --grid:         #e8f1ec12;
  --axis:         #e8f1ec2e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #071a2b; --paper-2: #05131f; --panel: #0d2639; --panel-2: #102e42;
    --sunk: #061724;
    --ink: #e8f1ec; --ink-2: #c3d5cd; --muted: #90a8a0; --faint: #6e847d;
    --green: #54c882; --green-hi: #6bdc97; --green-deep: #109068;
    --mint: #123b32; --mint-2: #0d302a;
    --gold: #e0b455; --gold-soft: #efc978; --red: #e2766a; --red-soft: #ef9a90;
    --blue: #74a8e8; --violet: #a294d8;
    --line: #e8f1ec1f; --line-2: #e8f1ec2b; --line-strong: #e8f1ec4d;
    --shadow-sm: 0 1px 2px #0004, 0 2px 6px #0003;
    --shadow: 0 4px 12px #0006, 0 12px 32px #0004;
    --shadow-lg: 0 8px 24px #0007, 0 28px 64px #0005;
    --c1: #1aa392; --c2: #c08529; --c3: #5892dc;
    --c4: #d4708a; --c5: #6da33a; --c6: #a481cf;
    --f-jubilee: #1aa392; --f-ten: #c08529; --f-octp: #5892dc;
    --s1: #2a7f61; --s2: #3f9c78; --s3: #5fb391;
    --s4: #83c9aa; --s5: #a9dcc4; --s6: #cfefdf;
    --grid: #e8f1ec12; --axis: #e8f1ec2e;
    --on-chart: #071a2b; --tip-muted: #a9bdb6;
  }
  :root.app-document:not([data-theme="light"]) { --faint: #829a92; }
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: .98rem; }

p { margin: 0 0 .85em; }
a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green-hi); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--mint); color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

svg { display: block; }
svg text { font-family: var(--font-body); }

/* --------------------------------------------------------------- utilities */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em; }
.serif { font-family: var(--font-display); }

.eyebrow {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.lede { font-size: 1.05rem; color: var(--ink-2); max-width: 62ch; }
.small { font-size: .82rem; }
.dim { color: var(--muted); }
.faint { color: var(--faint); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--green); color: #fff; padding: 10px 16px;
  border-radius: var(--r); font-weight: 600; transition: top .15s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ------------------------------------------------------------------ chrome */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--green-deep), var(--green));
  box-shadow: var(--shadow-sm);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.16rem;
  letter-spacing: -0.02em; line-height: 1;
}
.brand-name em { font-style: normal; color: var(--green); }
.brand-sub {
  display: block; font-family: var(--font-body); font-size: .58rem;
  font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .12s,
              box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-hi); color: #fff; box-shadow: var(--shadow); }

.btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--line-strong); background: var(--panel-2); color: var(--ink); }

.btn-quiet { background: transparent; color: var(--muted); padding: 8px 12px; }
.btn-quiet:hover { color: var(--ink); background: var(--sunk); }

.btn-sm { padding: 6px 13px; font-size: .8rem; }

/* -------------------------------------------------------------------- card */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 20px 22px; }

.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.card-head h3 { margin: 0; }
.card-head .eyebrow { margin-bottom: 4px; }
.card-title-note { font-size: .82rem; color: var(--muted); margin-top: 3px; max-width: 70ch; }

/* -------------------------------------------------------------------- chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--mint-2); color: var(--green-deep);
  border: 1px solid var(--line);
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
}
:root[data-theme="dark"] .chip { color: var(--green-hi); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip { color: var(--green-hi); }
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip-gold { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
.chip-red  { background: color-mix(in srgb, var(--red) 14%, transparent);  color: var(--red); }
.chip-plain{ background: var(--sunk); color: var(--muted); }

/* ------------------------------------------------------------------ tables */
.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tbl th {
  text-align: left; font-weight: 600; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 12px 9px; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--sunk); }
.tbl .r { text-align: right; font-family: var(--font-mono);
          font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .strong { font-weight: 600; color: var(--ink); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x table { min-width: 560px; }

/* ------------------------------------------------------------------ scroll */
.scroll-x::-webkit-scrollbar, .side::-webkit-scrollbar { height: 9px; width: 9px; }
.scroll-x::-webkit-scrollbar-thumb, .side::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 99px;
}
.scroll-x::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ inputs */
select, input[type="text"], input[type="number"] {
  font: inherit; font-size: .86rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 7px 11px;
}
select { cursor: pointer; padding-right: 28px;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px; background: var(--line-2);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 99px; background: var(--line-2);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px;
  border-radius: 50%; background: var(--green); border: 2px solid var(--panel);
  box-shadow: var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--green);
  border: 2px solid var(--panel); box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------- segmented */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--sunk); border: 1px solid var(--line);
  border-radius: 999px;
}
.seg button {
  font: inherit; font-size: .79rem; font-weight: 600;
  padding: 5px 13px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
  white-space: nowrap; transition: background .15s, color .15s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------- tooltip */
.tip {
  position: fixed; z-index: 200; pointer-events: none; opacity: 0;
  transform: translate(-50%, -120%);
  background: var(--ink); color: var(--paper);
  padding: 8px 11px; border-radius: var(--r-sm);
  font-size: .78rem; line-height: 1.45; max-width: 260px;
  box-shadow: var(--shadow); transition: opacity .1s;
}
.tip.on { opacity: 1; }
.tip b { color: #fff; font-weight: 600; }
:root[data-theme="dark"] .tip { background: #041312; color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tip { background: #041312; color: var(--ink); }
}
.tip-k { color: var(--tip-muted); }
.tip-row { display: flex; justify-content: space-between; gap: 14px; }

/* ------------------------------------------------------------------- misc */
/* Views set their desktop column ratio with --cols-lg rather than an inline
   grid-template-columns, so the narrow-screen rules below can still win: an
   inline declaration would outrank any stylesheet rule; a custom property that
   the media query never reads does not. */
.grid { display: grid; gap: 16px; grid-template-columns: var(--cols-lg, none); }
.g2 { grid-template-columns: var(--cols-lg, repeat(2, minmax(0, 1fr))); }
.g3 { grid-template-columns: var(--cols-lg, repeat(3, minmax(0, 1fr))); }
.g4 { grid-template-columns: var(--cols-lg, repeat(4, minmax(0, 1fr))); }
@media (max-width: 1080px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px)  { .grid, .g3, .g2 { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .g4 { grid-template-columns: 1fr; } }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }