/* Expected Energy — Design System
   Bloomberg-data feel × Modern SaaS clean
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Neutral cool slate scale */
  --c-bg-0: oklch(0.16 0.012 240);   /* deepest */
  --c-bg-1: oklch(0.20 0.012 240);   /* surface */
  --c-bg-2: oklch(0.24 0.012 240);   /* elevated */
  --c-bg-3: oklch(0.28 0.014 240);   /* hover */
  --c-line: oklch(0.32 0.014 240);   /* divider */
  --c-line-2: oklch(0.40 0.014 240); /* stronger divider */

  --c-fg-0: oklch(0.98 0.005 240);   /* primary text */
  --c-fg-1: oklch(0.82 0.008 240);   /* secondary */
  --c-fg-2: oklch(0.62 0.010 240);   /* tertiary / labels */
  --c-fg-3: oklch(0.46 0.012 240);   /* muted */

  /* Signals — share chroma 0.13, lightness 0.72 */
  --c-accent:   oklch(0.74 0.13 200);  /* electric teal — primary */
  --c-good:     oklch(0.74 0.13 145);  /* savings green */
  --c-warn:     oklch(0.78 0.13 75);   /* amber — load/cost */
  --c-bad:      oklch(0.66 0.18 25);   /* red — alarms */
  --c-violet:   oklch(0.72 0.13 295);  /* renewables */
  --c-blue:     oklch(0.72 0.13 245);  /* baseline */

  /* Tints (10% / 20% feel — using oklch with low chroma) */
  --c-accent-tint: oklch(0.74 0.13 200 / 0.14);
  --c-good-tint:   oklch(0.74 0.13 145 / 0.14);
  --c-warn-tint:   oklch(0.78 0.13 75 / 0.14);
  --c-bad-tint:    oklch(0.66 0.18 25 / 0.14);

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  --t-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --t-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --shadow-1: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-2: 0 0 0 1px var(--c-line), 0 12px 32px -8px oklch(0 0 0 / 0.5);
}

[data-theme="light"] {
  --c-bg-0: oklch(0.985 0.003 240);
  --c-bg-1: oklch(0.975 0.004 240);
  --c-bg-2: oklch(0.955 0.005 240);
  --c-bg-3: oklch(0.93 0.006 240);
  --c-line: oklch(0.88 0.008 240);
  --c-line-2: oklch(0.78 0.010 240);

  --c-fg-0: oklch(0.20 0.014 240);
  --c-fg-1: oklch(0.32 0.012 240);
  --c-fg-2: oklch(0.46 0.010 240);
  --c-fg-3: oklch(0.60 0.008 240);

  --shadow-1: 0 1px 0 oklch(1 0 0 / 0.6) inset, 0 1px 2px oklch(0 0 0 / 0.06);
  --shadow-2: 0 0 0 1px var(--c-line), 0 12px 32px -8px oklch(0 0 0 / 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--t-sans);
  color: var(--c-fg-0);
  background: var(--c-bg-0);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

/* ---------- App shell ---------- */
.ee-app {
  /* Flex (not grid) so the optional MeterTreeRail column can slot in
     between the nav rail and the main canvas on multi-meter sites
     without changing the layout for single-meter sites. Each child
     declares its own width (rail = 76px, meter-tree-rail = 260px,
     main = flex: 1). */
  display: flex;
  height: 100vh;
  min-height: 0;
  background: var(--c-bg-0);
  color: var(--c-fg-0);
  font-family: var(--t-sans);
  overflow: hidden;
}
.ee-main { flex: 1; min-width: 0; }

.ee-rail {
  /* Wider rail so we can show a small label under each icon — the title
     attribute alone wasn't discoverable enough (esp. for finding SIGi). */
  width: 76px;
  flex: 0 0 76px;
  background: var(--c-bg-1);
  border-right: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 2px;
}
.ee-rail-logo {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-accent), var(--c-violet));
  display: grid; place-items: center;
  color: var(--c-bg-0);
  font-family: var(--t-mono);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
  letter-spacing: -0.02em;
  position: relative;
}
/* The xE wordmark — italic lowercase x + uppercase serif E, styled like
   the football "xG" expected-goals metric. Sits inside .ee-rail-logo. */
.xe-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: 'Times New Roman', Georgia, serif;
  line-height: 1;
}
.xe-mark .xe-x {
  font-style: italic;
  font-weight: 400;
  font-size: 0.85em;
  margin-right: -0.05em;
  opacity: 0.95;
}
.xe-mark .xe-e {
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -0.02em;
}
/* Rail-button variant — used as the 'icon' for the Expected page so the
   xE wordmark glyph cues the feature alongside the regular line icons. */
.xe-mark--rail {
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.xe-mark--rail .xe-x { opacity: 0.85; }
.ee-rail-btn {
  /* Stack icon over a small label so each entry is self-explanatory */
  width: 60px;
  min-height: 50px;
  padding: 6px 4px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--r-sm);
  color: var(--c-fg-2);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  position: relative;
  text-align: center;
}
.ee-rail-btn__label {
  font-size: 10px;
  font-family: var(--t-sans);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.85;
}
.ee-rail-btn[data-active="true"] .ee-rail-btn__label { opacity: 1; }
.ee-rail-btn:hover { background: var(--c-bg-3); color: var(--c-fg-0); }
.ee-rail-btn[data-active="true"] {
  background: var(--c-bg-3);
  color: var(--c-accent);
}
.ee-rail-btn[data-active="true"]::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 8px; bottom: 8px;
  width: 2px;
  background: var(--c-accent);
  border-radius: 0 2px 2px 0;
}
/* Divider between primary features and tools */
.ee-rail-divider {
  width: 36px;
  height: 1px;
  background: var(--c-line);
  margin: 8px auto 6px;
}
/* Featured rail button — used to make standout features (e.g. Optimise) pop.
   Subtle gold ring + a small star top-right that disappears when active. */
.ee-rail-btn--featured {
  background: linear-gradient(135deg, oklch(0.32 0.045 70 / 0.18), oklch(0.32 0.045 290 / 0.10));
  border: 1px solid oklch(0.62 0.10 70 / 0.45);
  color: oklch(0.85 0.08 75);
  box-shadow: 0 0 0 1px oklch(0.62 0.10 70 / 0.18) inset, 0 1px 6px oklch(0.62 0.10 70 / 0.18);
}
.ee-rail-btn--featured:hover {
  background: linear-gradient(135deg, oklch(0.36 0.06 70 / 0.28), oklch(0.36 0.06 290 / 0.16));
  color: oklch(0.92 0.09 75);
}
.ee-rail-btn--featured[data-active="true"] {
  background: linear-gradient(135deg, oklch(0.42 0.10 70 / 0.32), oklch(0.42 0.10 290 / 0.22));
  color: oklch(0.95 0.10 75);
  border-color: oklch(0.72 0.14 70 / 0.6);
}
.ee-rail-btn__star {
  position: absolute;
  top: 4px; right: 6px;
  font-size: 9px;
  color: oklch(0.78 0.14 75);
  pointer-events: none;
  line-height: 1;
}
.ee-rail-btn--featured[data-active="true"] .ee-rail-btn__star { opacity: 0; }

.ee-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }

.ee-topbar {
  height: 44px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-1);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 16px;
  font-size: 12px;
}
.ee-crumbs { display: flex; align-items: center; gap: 8px; color: var(--c-fg-2); }
.ee-crumbs .sep { color: var(--c-fg-3); }
.ee-crumbs .now { color: var(--c-fg-0); }
.ee-topbar .spacer { flex: 1; }
.ee-pill {
  font-family: var(--t-mono);
  font-size: 11px;
  padding: 3px 8px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-fg-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ee-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-good); }

.ee-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; }
.ee-body--with-rail { grid-template-columns: 1fr 320px; }

.ee-canvas {
  overflow: auto;
  padding: 18px;
}

.ee-inspector {
  border-left: 1px solid var(--c-line);
  background: var(--c-bg-1);
  overflow: auto;
  padding: 16px;
}

/* ---------- Reusable atoms ---------- */
.kicker {
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fg-3);
}
.label { color: var(--c-fg-2); font-size: 11px; }
.metric-num {
  font-family: var(--t-mono);
  font-feature-settings: 'tnum';
  font-weight: 500;
  color: var(--c-fg-0);
}
.metric-num--xl { font-size: 28px; line-height: 1.05; letter-spacing: -0.01em; }
.metric-num--lg { font-size: 20px; }
.metric-num--md { font-size: 15px; }
.metric-unit { color: var(--c-fg-2); font-family: var(--t-mono); font-size: 11px; margin-left: 4px; }

.ee-card {
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.ee-card-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-line);
}
.ee-card-h h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--c-fg-0); letter-spacing: 0.01em; }
.ee-card-b { padding: 12px; }

.btn {
  font-family: var(--t-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-bg-2);
  color: var(--c-fg-0);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 120ms, border-color 120ms;
}
.btn:hover { background: var(--c-bg-3); border-color: var(--c-line-2); }
.btn--primary {
  background: var(--c-accent);
  color: oklch(0.18 0.02 240);
  border-color: var(--c-accent);
  font-weight: 600;
}
.btn--primary:hover { background: oklch(0.78 0.13 200); border-color: oklch(0.78 0.13 200); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--c-fg-1); }
.btn--ghost:hover { background: var(--c-bg-2); }
.btn--sm { padding: 3px 8px; font-size: 11px; }

.tag {
  font-family: var(--t-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-flex; align-items: center; gap: 4px;
}
.tag--accent { background: var(--c-accent-tint); color: var(--c-accent); }
.tag--good   { background: var(--c-good-tint); color: var(--c-good); }
.tag--warn   { background: var(--c-warn-tint); color: var(--c-warn); }
.tag--bad    { background: var(--c-bad-tint); color: var(--c-bad); }
.tag--neutral{ background: var(--c-bg-2); color: var(--c-fg-2); border: 1px solid var(--c-line); }

.input, .select {
  width: 100%;
  background: var(--c-bg-0);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-fg-0);
  font: inherit;
  padding: 6px 9px;
  font-family: var(--t-sans);
  font-size: 12px;
  outline: none;
  transition: border-color 120ms;
}
.input:focus, .select:focus { border-color: var(--c-accent); }
.input::placeholder { color: var(--c-fg-3); }

.divider { height: 1px; background: var(--c-line); margin: 12px 0; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }

/* Scrollbar */
.ee-canvas::-webkit-scrollbar, .ee-inspector::-webkit-scrollbar { width: 10px; height: 10px; }
.ee-canvas::-webkit-scrollbar-thumb, .ee-inspector::-webkit-scrollbar-thumb {
  background: var(--c-bg-3);
  border-radius: 4px;
  border: 2px solid var(--c-bg-0);
}
.ee-canvas::-webkit-scrollbar-track, .ee-inspector::-webkit-scrollbar-track { background: transparent; }

/* Tabular grid (Bloomberg row) */
.ee-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--t-mono);
  font-size: 11px;
}
.ee-table th, .ee-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.ee-table th {
  font-weight: 500;
  color: var(--c-fg-3);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--c-bg-1);
  position: sticky; top: 0;
}
.ee-table tbody tr:hover { background: var(--c-bg-2); }
.ee-table .num { text-align: right; font-feature-settings: 'tnum'; }

/* Sparkline-ish bar in row */
.ee-bar {
  height: 6px;
  background: var(--c-bg-3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.ee-bar-fill { height: 100%; background: var(--c-accent); border-radius: 999px; }

/* Drag-drop affordances */
.ee-drop {
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 8px,
      oklch(1 0 0 / 0.012) 8px 16px
    );
}
.ee-drop[data-active="true"] {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
}

/* Step / progress */
.ee-steps { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.ee-step { display: flex; align-items: center; gap: 6px; color: var(--c-fg-3); }
.ee-step .dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--c-line-2);
  display: grid; place-items: center;
  font-family: var(--t-mono); font-size: 10px;
}
.ee-step[data-state="done"] { color: var(--c-good); }
.ee-step[data-state="done"] .dot { border-color: var(--c-good); color: var(--c-good); background: var(--c-good-tint); }
.ee-step[data-state="active"] { color: var(--c-fg-0); }
.ee-step[data-state="active"] .dot { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-tint); }

/* Confidence band stripe legend */
.legend-swatch {
  width: 12px; height: 8px; border-radius: 2px;
  display: inline-block; margin-right: 6px; vertical-align: middle;
}

/* draggable card */
.ee-int-card {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 10px;
  cursor: grab;
  transition: border-color 120ms, transform 120ms;
  user-select: none;
}
.ee-int-card:hover { border-color: var(--c-line-2); }
.ee-int-card:active { cursor: grabbing; transform: scale(0.99); }
.ee-int-card[data-dragging="true"] { opacity: 0.5; }
.ee-int-card .ico {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--t-mono);
  font-weight: 600;
  font-size: 11px;
}

/* Mac-style focus ring for canvas selections */
.ring-accent { box-shadow: 0 0 0 1px var(--c-accent), 0 0 0 4px var(--c-accent-tint); }

/* keyboard hint */
.kbd {
  font-family: var(--t-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--c-line-2);
  border-radius: 3px;
  background: var(--c-bg-2);
  color: var(--c-fg-2);
}

/* Print styles for the Variance Explainer report.
   Hide everything except the report body so users get a clean PDF/print. */
@media print {
  body { background: white !important; }
  .ee-rail, .ee-topbar, .no-print, .navrail, nav { display: none !important; }
  .ee-app, .ee-canvas, .ee-main { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
  .variance-report-wrap { margin: 0 !important; }
  .variance-report-body { box-shadow: none !important; }
  /* Force light background for V1/V4 in print */
  [data-theme="light"] { color: #1B1B18 !important; }
}
.print-mode .ee-rail,
.print-mode .ee-topbar,
.print-mode .navrail { visibility: hidden; }