/* ============================================================
   Cyclops Labs web app — layout layer.
   Colour, type, buttons, cards and badges all come from
   assets/brand/css/cyclops-theme.css. Nothing here redefines a
   brand value; it only composes the existing --cy-* tokens.
   ============================================================ */

/* ============================================================
   Light and dark themes.
   Everything the app paints reads these tokens. Light values are
   the brand's own; dark values follow the brand's navy "deep
   compute" variant rather than near-black. Dark applies when the
   OS prefers it (unless the user chose light) or when the user
   chose dark; the choice is data-theme on <html> (js/theme.js).
   ============================================================ */

:root {
  color-scheme: light;
  --app-bg: var(--cy-mist);
  --app-bg-grad: var(--cy-grad-cloud);
  --app-surface: #ffffff;
  --app-surface-2: var(--cy-mist);
  --app-card-cloud: var(--cy-grad-cloud);
  /* The kit defines --cy-border only inside .cy-dark; on light it names
     --cy-sky as the border colour, so that is the light value here. */
  --app-border: var(--cy-sky);
  --app-border-strong: var(--cy-ink-200);
  --app-ghost-border: var(--cy-sky);
  --app-text: var(--cy-ink-900);
  --app-text-2: var(--cy-ink-700);
  --app-text-3: var(--cy-ink-500);
  --app-text-soft: var(--cy-ink-400);
  --app-text-muted: var(--cy-ink-300);
  --app-heading: var(--cy-navy);
  --app-eyebrow: var(--cy-primary);
  --app-accent-text: var(--cy-blue-700);
  --app-tint: var(--cy-blue-50);
  --app-tint-2: var(--cy-blue-100);
  --app-grid: var(--cy-ink-100);
  --app-toast: var(--cy-navy);
  --app-baseline: #28456C;
  --logo-light-display: inline-block;
  --logo-dark-display: none;
  /* Validated categorical palette (dataviz skill), light steps. */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948;
  --series-other: #a3a29c;
  /* Load ramp: one blue hue, idle light to full dark (dataviz sequential
     steps 250-700; the lightest clears 2:1 on white and mist). */
  --load-0: #86b6ef; --load-1: #5598e7; --load-2: #2a78d6; --load-3: #1c5cab; --load-4: #0d366b;
  --load-off: var(--cy-ink-100);
  /* Anomaly severity: red, amber, blue; each also differs in ring dash and label. */
  --anom-high: #c23c35; --anom-medium: #b8741a; --anom-low: #3b74c4;
  --anom-high-bg: #fdecea; --anom-medium-bg: #fdf3e2; --anom-low-bg: #e9f1fc;
  /* Separation: a page one step deeper than the cards, so every card
     reads as its own object. */
  --app-page: linear-gradient(180deg, var(--cy-blue-100) 0%, #d9e7f8 100%);
  --app-card-border: var(--cy-blue-200);
  --app-card-shadow: 0 6px 20px rgba(40, 69, 108, 0.10), 0 1px 3px rgba(40, 69, 108, 0.08);
  --app-accent-bar: linear-gradient(90deg, var(--cy-blue-600) 0%, var(--cy-primary) 55%, var(--cy-cyan) 100%);
  /* Ends at #3b74c4, not --cy-blue-600, so white text clears 4.5:1 everywhere. */
  --app-active: linear-gradient(135deg, var(--cy-blue-700) 0%, #3b74c4 100%);
  --tile-tint: 9%;
  /* Raised: tiles and cards inside a section, so each reads as its own object. */
  --app-raised-shadow: 0 6px 16px rgba(40, 69, 108, 0.13), 0 2px 4px rgba(40, 69, 108, 0.08);
  --app-raised-shadow-hover: 0 14px 30px rgba(40, 69, 108, 0.20), 0 4px 8px rgba(40, 69, 108, 0.10);
  /* Tile tones: accent = stripe and tint (series palette), ink = label text. */
  --tone-cost: #eb6834;     --tone-cost-ink: #b0441a;
  --tone-income: #2a78d6;   --tone-income-ink: #1c5cab;
  --tone-profit: #1baf7a;   --tone-profit-ink: #0b7550;
  --tone-loss: #e34948;     --tone-loss-ink: #b02a29;
  --tone-energy: #eda100;   --tone-energy-ink: #845900;
  --tone-cooling: #3fa9cf;  --tone-cooling-ink: #1b6f8f;
  --tone-capacity: #6250d6; --tone-capacity-ink: #4a3bb0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --app-bg: #0e1a2b;
    --app-bg-grad: linear-gradient(180deg, #0e1a2b 0%, #112138 100%);
    --app-surface: #15273d;
    --app-surface-2: #1b3150;
    --app-card-cloud: #1b3150;
    --app-border: rgba(202, 222, 249, 0.14);
    --app-border-strong: rgba(202, 222, 249, 0.28);
    --app-ghost-border: rgba(202, 222, 249, 0.30);
    --app-text: #eaf3fc;
    --app-text-2: #d3e2f5;
    --app-text-3: #b4c8e3;
    --app-text-soft: #9fb5d3;
    --app-text-muted: #7f95b4;
    --app-heading: #f2f7fd;
    --app-eyebrow: #84b4ec;
    --app-accent-text: #a9c9f2;
    --app-tint: rgba(91, 147, 222, 0.16);
    --app-tint-2: rgba(91, 147, 222, 0.30);
    --app-grid: rgba(202, 222, 249, 0.10);
    --app-toast: #22395a;
    --app-baseline: #b4c8e3;
    --logo-light-display: none;
    --logo-dark-display: inline-block;
    --cy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --cy-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
    --cy-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.45);
    /* Dark steps, validated against #15273d (all checks pass). */
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
    --series-other: #6b7a8f;
    /* Inverted on navy: idle dark, full light (550 down to 100). */
    --load-0: #1c5cab; --load-1: #2a78d6; --load-2: #5598e7; --load-3: #86b6ef; --load-4: #cde2fb;
    --load-off: rgba(202, 222, 249, 0.10);
    --anom-high: #f2847d; --anom-medium: #f2b65c; --anom-low: #8bb8f0;
    --anom-high-bg: rgba(242, 132, 125, 0.14); --anom-medium-bg: rgba(242, 182, 92, 0.14); --anom-low-bg: rgba(139, 184, 240, 0.14);
    --app-page: linear-gradient(180deg, #0a1422 0%, #0d1a2d 100%);
    --app-surface: #172b45;
    --app-card-border: rgba(132, 180, 236, 0.30);
    --app-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
    --app-active: linear-gradient(135deg, #2f63ad 0%, #3b74c4 100%);
    --tile-tint: 16%;
    --app-raised-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.35);
    --app-raised-shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.40);
    --tone-cost: #e0703f;     --tone-cost-ink: #ffb592;
    --tone-income: #3987e5;   --tone-income-ink: #a9c9f2;
    --tone-profit: #199e70;   --tone-profit-ink: #7fdcb5;
    --tone-loss: #e66767;     --tone-loss-ink: #ffaaa8;
    --tone-energy: #c98500;   --tone-energy-ink: #f4c766;
    --tone-cooling: #5fc6e8;  --tone-cooling-ink: #a6e4f5;
    --tone-capacity: #9085e9; --tone-capacity-ink: #c4bdf6;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #0e1a2b;
  --app-bg-grad: linear-gradient(180deg, #0e1a2b 0%, #112138 100%);
  --app-surface: #15273d;
  --app-surface-2: #1b3150;
  --app-card-cloud: #1b3150;
  --app-border: rgba(202, 222, 249, 0.14);
  --app-border-strong: rgba(202, 222, 249, 0.28);
  --app-ghost-border: rgba(202, 222, 249, 0.30);
  --app-text: #eaf3fc;
  --app-text-2: #d3e2f5;
  --app-text-3: #b4c8e3;
  --app-text-soft: #9fb5d3;
  --app-text-muted: #7f95b4;
  --app-heading: #f2f7fd;
  --app-eyebrow: #84b4ec;
  --app-accent-text: #a9c9f2;
  --app-tint: rgba(91, 147, 222, 0.16);
  --app-tint-2: rgba(91, 147, 222, 0.30);
  --app-grid: rgba(202, 222, 249, 0.10);
  --app-toast: #22395a;
  --app-baseline: #b4c8e3;
  --logo-light-display: none;
  --logo-dark-display: inline-block;
  --cy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --cy-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --cy-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.45);
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  --series-other: #6b7a8f;
  --load-0: #1c5cab; --load-1: #2a78d6; --load-2: #5598e7; --load-3: #86b6ef; --load-4: #cde2fb;
  --load-off: rgba(202, 222, 249, 0.10);
  --anom-high: #f2847d; --anom-medium: #f2b65c; --anom-low: #8bb8f0;
  --anom-high-bg: rgba(242, 132, 125, 0.14); --anom-medium-bg: rgba(242, 182, 92, 0.14); --anom-low-bg: rgba(139, 184, 240, 0.14);
  --app-page: linear-gradient(180deg, #0a1422 0%, #0d1a2d 100%);
  --app-surface: #172b45;
  --app-card-border: rgba(132, 180, 236, 0.30);
  --app-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --app-active: linear-gradient(135deg, #2f63ad 0%, #3b74c4 100%);
  --tile-tint: 16%;
  --app-raised-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.35);
  --app-raised-shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.40);
  --tone-cost: #e0703f;     --tone-cost-ink: #ffb592;
  --tone-income: #3987e5;   --tone-income-ink: #a9c9f2;
  --tone-profit: #199e70;   --tone-profit-ink: #7fdcb5;
  --tone-loss: #e66767;     --tone-loss-ink: #ffaaa8;
  --tone-energy: #c98500;   --tone-energy-ink: #f4c766;
  --tone-cooling: #5fc6e8;  --tone-cooling-ink: #a6e4f5;
  --tone-capacity: #9085e9; --tone-capacity-ink: #c4bdf6;
}

/* The brand kit's components, re-pointed at the theme tokens. In light
   mode every value below equals the kit's own. */
body.cy-root { color: var(--app-text); }
.cy-card { background: var(--app-surface); border-color: var(--app-border); }
.cy-card-cloud { background: var(--app-card-cloud); border-color: var(--app-border); }
.cy-root h1, .cy-root h2, .cy-root h3, .cy-root h4,
.cy-h1, .cy-h2, .cy-h3, .cy-h4 { color: var(--app-heading); }
.cy-surface-horizon h1, .cy-surface-horizon h2, .cy-surface-horizon h3 { color: var(--cy-white); }
.cy-eyebrow { color: var(--app-eyebrow); }
.cy-surface-horizon .cy-eyebrow { color: var(--cy-cyan-300); }
.cy-lead { color: var(--app-text-soft); }
.cy-btn-ghost { border-color: var(--app-ghost-border); }
.cy-btn-ghost:hover { background: var(--app-tint); }
.cy-badge { background: var(--app-tint); color: var(--app-accent-text); border-color: var(--app-tint-2); }
.cy-badge-qubit { color: var(--cy-white); }
.cy-divider { background: var(--app-border); }
/* Doubled class: must beat component rules such as .signin__mark { display: block }. */
.logo-light.logo-light { display: var(--logo-light-display); }
.logo-dark.logo-dark { display: var(--logo-dark-display); }

/* ---------- theme switch ---------- */

.theme-switch {
  display: inline-flex;
  padding: 3px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--cy-radius-pill);
}

.theme-switch__btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 1.75rem;
  padding: 0;
  color: var(--app-text-soft);
  background: none;
  border: 0;
  border-radius: var(--cy-radius-pill);
  cursor: pointer;
}
.theme-switch__btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch__btn:hover { color: var(--app-heading); }
.theme-switch__btn[aria-checked="true"] { color: var(--cy-primary); background: var(--app-surface); box-shadow: var(--cy-shadow-sm); }
.theme-switch__btn:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }
.landing__signin { position: relative; }
.landing__theme { position: absolute; top: var(--cy-space-6); right: var(--cy-space-6); }

/* Author `display` rules (.landing is a grid) beat the UA stylesheet's
   [hidden] rule, so without this a hidden view still renders. */
[hidden] { display: none !important; }

body.cy-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--app-page) fixed;
}

/* Cards stand off the page: stronger edge, real shadow, and the brand
   gradient as a strip across the top. Chart tooltips position against
   .chart__plot, so making the card a positioning context is safe. The
   strip stays inside the padding box: anything poking out would count as
   overflow and give scrolling cards (the what-if changes) a scrollbar. */
.cy-root .cy-card {
  position: relative;
  border-color: var(--app-card-border);
  box-shadow: var(--app-card-shadow);
}
.cy-root .cy-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--app-accent-bar);
  border-radius: calc(var(--cy-radius-lg) - 1px) calc(var(--cy-radius-lg) - 1px) 0 0;
  pointer-events: none;
}
.cy-root .cy-card-cloud::before { content: none; }

/* ---------- header ---------- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cy-space-4);
  padding: var(--cy-space-4) var(--cy-space-6);
  background: var(--app-surface);
  border-bottom: 3px solid transparent;
  border-image: var(--app-accent-bar) 1;
  box-shadow: var(--cy-shadow-md);
}

.app-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cy-space-3);
  text-decoration: none;
}

.app-header__wordmark {
  font-family: var(--cy-font-display);
  font-weight: 600;
  font-size: var(--cy-fs-h4);
  color: var(--app-heading);
  letter-spacing: var(--cy-ls-display);
}

.app-nav {
  display: flex;
  gap: var(--cy-space-1);
  margin-right: auto;
  margin-left: var(--cy-space-6);
}

.app-nav__link {
  padding: var(--cy-space-2) var(--cy-space-4);
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-small);
  font-weight: 600;
  color: var(--app-text-3);
  text-decoration: none;
  border-radius: var(--cy-radius-btn);
  transition: color var(--cy-dur-fast) var(--cy-ease), background var(--cy-dur-fast) var(--cy-ease);
}

.app-nav__link:hover { color: var(--app-heading); background: var(--app-surface-2); }
.app-nav__link:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }
.app-nav__link.is-active { color: var(--cy-white); background: var(--app-active); box-shadow: var(--cy-shadow-sm); }

.app-header__user {
  display: flex;
  align-items: center;
  gap: var(--cy-space-3);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
}

.user-chip__avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-caption);
  font-weight: 600;
  color: var(--cy-white);
  background: var(--cy-grad-qubit);
  border-radius: var(--cy-radius-pill);
}

.user-chip__text { display: flex; flex-direction: column; line-height: var(--cy-lh-snug); }
.user-chip__name { font-weight: 600; font-size: var(--cy-fs-small); color: var(--app-heading); }
.user-chip__role { font-size: var(--cy-fs-caption); color: var(--app-text-soft); }

/* ---------- app shell ---------- */

.app {
  flex: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--cy-space-8) var(--cy-space-6) var(--cy-space-12);
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-6);
}

.shell {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.view {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-6);
}

/* ---------- tiles (headline numbers) ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--cy-space-4);
  margin-top: var(--cy-space-4);
}

/* Each tile carries a tone by what it measures (js/sites.js); the tone
   tints the fill, draws the left stripe and colours the label. */
.tile {
  --tone: var(--cy-primary);
  --tone-ink: var(--app-accent-text);
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-1);
  padding: var(--cy-space-4);
  background: color-mix(in srgb, var(--tone) var(--tile-tint), var(--app-surface));
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  border-left: 4px solid var(--tone);
  border-radius: var(--cy-radius-md);
  box-shadow: var(--app-raised-shadow);
}
.tile--cost { --tone: var(--tone-cost); --tone-ink: var(--tone-cost-ink); }
.tile--income { --tone: var(--tone-income); --tone-ink: var(--tone-income-ink); }
.tile--profit { --tone: var(--tone-profit); --tone-ink: var(--tone-profit-ink); }
.tile--loss { --tone: var(--tone-loss); --tone-ink: var(--tone-loss-ink); }
.tile--energy { --tone: var(--tone-energy); --tone-ink: var(--tone-energy-ink); }
.tile--cooling { --tone: var(--tone-cooling); --tone-ink: var(--tone-cooling-ink); }
.tile--capacity { --tone: var(--tone-capacity); --tone-ink: var(--tone-capacity-ink); }

.tile__label {
  font-size: var(--cy-fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--cy-ls-caps);
  color: var(--tone-ink);
}
.tile--profit .tile__value { color: var(--tone-profit-ink); }
.tile--loss .tile__value { color: var(--tone-loss-ink); }

.tile__value {
  font-size: var(--cy-fs-h4);
  font-weight: 600;
  color: var(--app-heading);
  font-variant-numeric: tabular-nums;
}

.tile__detail {
  font-size: var(--cy-fs-caption);
  color: var(--app-text-soft);
}

/* ---------- forms ---------- */

.field {
  display: block;
  margin-top: var(--cy-space-4);
}

.field__label {
  display: block;
  margin-bottom: var(--cy-space-2);
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-small);
  font-weight: 600;
  color: var(--app-heading);
}

.field__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--cy-font-body);
  font-size: var(--cy-fs-body);
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--cy-radius-btn);
  transition: border-color var(--cy-dur) var(--cy-ease),
              box-shadow var(--cy-dur) var(--cy-ease);
}

.field__input:focus {
  outline: none;
  border-color: var(--cy-primary);
  box-shadow: var(--cy-shadow-glow);
}

.field__input--area {
  resize: vertical;
  line-height: var(--cy-lh-body);
}

.composer__actions {
  display: flex;
  gap: var(--cy-space-3);
  margin-top: var(--cy-space-6);
}

.editor-hint {
  margin: 0;
  padding: var(--cy-space-4) var(--cy-space-6);
  font-size: var(--cy-fs-small);
  color: var(--app-text-2);
}

/* ---------- notes ---------- */

.notes__head {
  display: flex;
  align-items: baseline;
  gap: var(--cy-space-3);
  margin-bottom: var(--cy-space-4);
}

.notes__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--cy-space-4);
}

/* Beats the theme's `.cy-root h3`, which would otherwise size titles as h3. */
.note-card h3 { font-size: var(--cy-fs-h5); line-height: var(--cy-lh-snug); }

.note-card {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
}

.note-card__body {
  margin: 0;
  font-size: var(--cy-fs-small);
  line-height: var(--cy-lh-body);
  color: var(--app-text-2);
  white-space: pre-wrap;   /* keep author line breaks without innerHTML */
  overflow-wrap: anywhere; /* a long unbroken string must not widen the grid */
}

.note-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--cy-space-3);
  margin-top: auto;
  font-size: var(--cy-fs-caption);
  color: var(--app-text-muted);
}

.note-card__actions {
  display: flex;
  gap: var(--cy-space-2);
}

.note-card__actions .cy-btn {
  padding: 0.4rem 0.8rem;
  font-size: var(--cy-fs-caption);
}

.note-card__delete { color: var(--cy-danger); }
.note-card__delete:hover {
  background: color-mix(in srgb, var(--cy-danger) 10%, var(--app-surface));
  border-color: var(--cy-danger);
}

.empty-state {
  grid-column: 1 / -1;
  padding: var(--cy-space-8);
  text-align: center;
  color: var(--app-text-soft);
  background: var(--app-surface);
  border: 1px dashed var(--app-border);
  border-radius: var(--cy-radius-lg);
}

/* ---------- contracts (admin) ---------- */

.contracts {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-6);
}

.contracts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cy-space-4);
}

/* Equal columns, each as wide as the widest box; stacked on narrow screens. */
.spend {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--cy-space-3);
  margin: 0;
}
@media (max-width: 40rem) {
  .spend { grid-auto-flow: row; width: 100%; }
}

/* Spend is a cost, so it wears the cost tone of the tiles. */
.spend__item {
  padding: var(--cy-space-2) var(--cy-space-4);
  background: color-mix(in srgb, var(--tone-cost) var(--tile-tint), var(--app-surface));
  border: 1px solid color-mix(in srgb, var(--tone-cost) 35%, transparent);
  border-left: 4px solid var(--tone-cost);
  border-radius: var(--cy-radius-md);
  box-shadow: var(--app-raised-shadow);
}

.spend__item dt {
  font-size: var(--cy-fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--cy-ls-caps);
  color: var(--tone-cost-ink);
}

.spend__item dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
  color: var(--app-heading);
}

.contract-detail__cost {
  margin: var(--cy-space-4) 0 0;
  font-size: var(--cy-fs-caption);
  color: var(--app-text-soft);
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cy-space-2);
  padding: var(--cy-space-8) var(--cy-space-6);
  text-align: center;
  color: var(--app-text-2);
  background: var(--app-surface-2);
  border: 2px dashed var(--cy-blue-200);
  border-radius: var(--cy-radius-lg);
  cursor: pointer;
  transition: border-color var(--cy-dur) var(--cy-ease),
              background var(--cy-dur) var(--cy-ease),
              box-shadow var(--cy-dur) var(--cy-ease);
}

.dropzone:hover,
.dropzone:focus-visible {
  outline: none;
  border-color: var(--cy-primary);
  box-shadow: var(--cy-shadow-glow);
}

.dropzone.is-dragover {
  border-style: solid;
  border-color: var(--cy-primary);
  background: var(--app-tint);
}

.dropzone.is-busy {
  cursor: progress;
  opacity: 0.7;
}

.dropzone__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--cy-primary);
}

.dropzone__title {
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-h4);
  font-weight: 600;
  color: var(--app-heading);
}

.dropzone__hint {
  max-width: 36rem;
  margin: 0;
  font-size: var(--cy-fs-small);
  line-height: var(--cy-lh-body);
  color: var(--app-text-soft);
}

.dropzone__browse {
  margin-top: var(--cy-space-2);
  pointer-events: none; /* the whole zone is the control */
}

/* Positioned, so absolutely placed content inside (the visually-hidden
   column labels) is clipped by this scroller and cannot widen the page. */
.table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: var(--cy-radius-md);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cy-fs-small);
}

.data-table th {
  padding: var(--cy-space-3) var(--cy-space-4);
  text-align: left;
  font-size: var(--cy-fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--cy-ls-caps);
  color: var(--app-text-soft);
  background: var(--app-surface-2);
  border-bottom: 1px solid var(--app-border);
}

.data-table td {
  padding: var(--cy-space-3) var(--cy-space-4);
  vertical-align: top;
  color: var(--app-text-2);
  border-bottom: 1px solid var(--app-border);
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table__empty {
  padding: var(--cy-space-8) !important;
  text-align: center;
  color: var(--app-text-soft) !important;
}

.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .nowrap { white-space: nowrap; }
.contracts-table { min-width: 0; }

.contract-row.is-expandable { cursor: pointer; }
.contract-row.is-expandable:hover td,
.contract-row.is-expandable:focus-visible td { background: var(--app-tint); }
.contract-row:focus-visible { outline: 2px solid var(--cy-primary); outline-offset: -2px; }

/* Cells stay display: table-cell; stacking happens on the children, since a
   flex <td> drops out of the table layout. */
.contract-row__who { min-width: 10rem; }
.contract-row__name,
.contract-row__file,
.contract-row__value > span { display: block; }
.contract-row__name { font-weight: 600; color: var(--app-heading); overflow-wrap: anywhere; }
.contract-row__file { margin-top: 0.15rem; font-size: var(--cy-fs-caption); color: var(--app-text-muted); word-break: break-all; }
.contract-row__term { min-width: 13rem; }
.contract-row__status { white-space: nowrap; }
.contract-row__value { white-space: nowrap; }
.contract-row__value > span + span { margin-top: 0.15rem; }

.contract-detail__actions {
  display: flex;
  gap: var(--cy-space-2);
  margin-top: var(--cy-space-4);
}

.contract-action {
  padding: 0.3rem 0.7rem;
  font-size: var(--cy-fs-caption);
}

.contract-action--danger { color: var(--cy-danger); }
.contract-action--danger:hover {
  background: color-mix(in srgb, var(--cy-danger) 10%, var(--app-surface));
  border-color: var(--cy-danger);
}

.contract-status--queued,
.contract-status--processing {
  color: var(--app-accent-text);
  background: var(--app-tint);
}
.contract-status--parsed {
  color: var(--cy-success);
  background: color-mix(in srgb, var(--cy-success) 12%, var(--app-surface));
}
.contract-status--failed {
  color: var(--cy-danger);
  background: color-mix(in srgb, var(--cy-danger) 10%, var(--app-surface));
}

.contract-detail td {
  padding: var(--cy-space-4) var(--cy-space-6) var(--cy-space-6);
  background: var(--app-surface-2);
}

.contract-detail__summary {
  max-width: 48rem;
  margin: 0 0 var(--cy-space-4);
  line-height: var(--cy-lh-body);
  color: var(--app-text-2);
}

.contract-detail__error {
  margin: 0 0 var(--cy-space-4);
  color: var(--cy-danger);
}

.contract-detail__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--cy-space-2) var(--cy-space-6);
  margin: 0;
}

.contract-detail__facts dt {
  font-size: var(--cy-fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--cy-ls-caps);
  color: var(--app-text-soft);
}

.contract-detail__facts dd { margin: 0; overflow-wrap: anywhere; }

.contract-detail__review {
  margin-top: var(--cy-space-4);
  padding: var(--cy-space-3) var(--cy-space-4);
  background: color-mix(in srgb, var(--cy-warning) 12%, var(--app-surface));
  border-left: 3px solid var(--cy-warning);
  border-radius: var(--cy-radius-sm);
}

.contract-detail__review ul { margin: var(--cy-space-2) 0 0; padding-left: var(--cy-space-6); }

.filters { display: flex; flex-wrap: wrap; gap: var(--cy-space-4); }
.filter { display: flex; flex-direction: column; gap: var(--cy-space-1); min-width: 11rem; }
.filter > span { font-size: var(--cy-fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--cy-ls-caps); color: var(--app-text-soft); }
.filter .field__input { padding: 0.45rem 0.7rem; font-size: var(--cy-fs-small); }
.contract-row__more { font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.contract-row__sim { display: block; margin-top: 0.15rem; font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.contract-row__sim .sim-badge { margin-right: var(--cy-space-1); }

.pdf-frame {
  display: block;
  width: 100%;
  height: min(80vh, 60rem);
  margin-top: var(--cy-space-4);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--cy-radius-md);
}

/* ---------- sites ---------- */

.view-lead {
  max-width: 48rem;
  margin: var(--cy-space-2) 0 0;
  font-size: var(--cy-fs-small);
  line-height: var(--cy-lh-body);
  color: var(--app-text-3);
}

.live-note {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
  margin: var(--cy-space-4) 0 0;
  font-size: var(--cy-fs-caption);
  color: var(--app-text-soft);
}

.section-title.section-title {
  margin: var(--cy-space-1) 0 var(--cy-space-2);
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-h5);
  color: var(--app-heading);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cy-space-4);
}

.chart-note {
  margin: 0 0 var(--cy-space-4);
  font-size: var(--cy-fs-caption);
  color: var(--app-text-soft);
}

.back-link {
  align-self: flex-start;
  font-size: var(--cy-fs-small);
  font-weight: 600;
  color: var(--cy-primary);
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

#sites-portfolio,
#site-detail {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-6);
}

.site-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--cy-space-4);
}

.site-card {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-1);
  color: inherit;
  text-decoration: none;
  transition: transform var(--cy-dur) var(--cy-ease), box-shadow var(--cy-dur) var(--cy-ease);
}
/* Doubled class: must beat `.cy-root .cy-card`'s section shadow. */
.site-card.site-card { box-shadow: var(--app-raised-shadow); }
.site-card.site-card:hover { transform: translateY(-3px); box-shadow: var(--app-raised-shadow-hover); }
.site-card:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }

.site-card__head { display: flex; justify-content: space-between; align-items: center; }
.site-card__status { font-size: var(--cy-fs-caption); text-transform: capitalize; color: var(--app-text-soft); }

.site-card__name.site-card__name {
  margin: var(--cy-space-2) 0 0;
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-h5);
  color: var(--app-heading);
}

.site-card__place { margin: 0; font-size: var(--cy-fs-caption); color: var(--app-text-soft); }

.site-card__burn {
  margin: var(--cy-space-3) 0 0;
  font-size: var(--cy-fs-h4);
  font-weight: 600;
  color: var(--app-heading);
}

.site-card__eur { margin: 0; font-size: var(--cy-fs-caption); color: var(--app-text-soft); }

.site-card__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cy-space-1) var(--cy-space-4);
  margin: var(--cy-space-3) 0 0;
  padding-top: var(--cy-space-3);
  border-top: 1px solid var(--app-border);
  font-size: var(--cy-fs-caption);
}
.site-card__facts dt { color: var(--app-text-soft); }
.site-card__facts dd { margin: 0; text-align: right; color: var(--app-text-2); }

.site-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--cy-space-4);
}

.site-head__manage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--cy-space-2);
}

/* Segmented control for the breakdown grouping. */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--cy-radius-btn);
}

.segmented__btn {
  padding: var(--cy-space-1) var(--cy-space-3);
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-caption);
  font-weight: 600;
  color: var(--app-text-3);
  background: none;
  border: 0;
  border-radius: calc(var(--cy-radius-btn) - 2px);
  cursor: pointer;
}
.segmented__btn.is-active { color: var(--cy-white); background: var(--app-active); box-shadow: var(--cy-shadow-sm); }
.segmented__btn:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }

.chart-stack { display: flex; flex-direction: column; gap: var(--cy-space-6); margin-top: var(--cy-space-2); }
.chart-grid--small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--cy-space-4) var(--cy-space-6); }
.figcap-note { margin-left: var(--cy-space-2); font-family: var(--cy-font-mono); font-weight: 400; font-size: var(--cy-fs-caption); color: var(--app-text-soft); }

.subsection-title.subsection-title {
  margin: var(--cy-space-8) 0 var(--cy-space-3);
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-small);
  color: var(--app-heading);
}

/* ---------- stacked charts and view controls ---------- */

.chart__band { stroke: var(--app-surface); stroke-width: 0.75; }   /* surface gap between bands */
.chart__seg { stroke: var(--app-surface); stroke-width: 1; }
.chart__stripe-solid { fill: var(--cy-primary); }
.chart__stripe-ground { fill: var(--app-surface); }
.chart__tooltip--wide { min-width: 13rem; gap: 2px; }
.chart__tip-row { display: grid; grid-template-columns: 0.7rem 1fr auto; align-items: center; gap: var(--cy-space-2); color: var(--app-text-2); }
.chart__tip-num { font-family: var(--cy-font-mono); color: var(--app-text); text-align: right; }
.legend { display: flex; flex-wrap: wrap; gap: var(--cy-space-1) var(--cy-space-4); margin: var(--cy-space-2) 0 0; padding: 0; list-style: none; font-size: var(--cy-fs-caption); color: var(--app-text-2); }
.legend__item { display: inline-flex; align-items: center; gap: var(--cy-space-1); }
.legend__swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; flex: none; }

.view-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cy-space-4); }
.view-controls__group { display: flex; flex-direction: column; gap: var(--cy-space-1); }
.view-controls__label { font-size: var(--cy-fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--cy-ls-caps); color: var(--app-text-soft); }
.segmented__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.chart__line--baseline { stroke: var(--app-baseline); stroke-dasharray: 6 4; }
.legend__line { display: inline-block; width: 1.4rem; height: 0; border-top: 2.4px solid var(--cy-primary); flex: none; }
.legend__line--baseline { border-top: 2px dashed var(--app-baseline); }

/* ---------- selected hour panel ---------- */

.hour-panel { border: 1px solid var(--cy-blue-200); box-shadow: var(--cy-shadow-glow); }
.hour-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--cy-space-4); }
.hour-panel__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--cy-space-8); margin-top: var(--cy-space-6); }
.hour-panel__cols h4.hour-panel__cols { margin: 0; }
.hour-panel__col-title.hour-panel__col-title { margin: 0 0 var(--cy-space-3); font-family: var(--cy-font-display); font-size: var(--cy-fs-small); color: var(--app-heading); }
.hour-panel__meters { display: flex; flex-wrap: wrap; gap: var(--cy-space-2) var(--cy-space-6); margin: var(--cy-space-4) 0 0; font-size: var(--cy-fs-caption); color: var(--app-text-3); }
.hour-panel__meters dt { display: inline; color: var(--app-text-soft); }
.hour-panel__meters dd { display: inline; margin: 0 0 0 var(--cy-space-1); font-family: var(--cy-font-mono); color: var(--app-text-2); }
.hour-panel__meters div { white-space: nowrap; }

.chart--selectable .chart__hit { cursor: pointer; }
.chart__selected { stroke: var(--app-heading); stroke-width: 1.5; }
.chart__selected-dot { fill: var(--app-heading); stroke: var(--app-surface); stroke-width: 2; }
.chart__zero { stroke: var(--app-text-3); stroke-width: 1; }
.chart__zero-label { fill: var(--app-text-3); }
.chart__stripe { fill: var(--cy-primary); opacity: 0.45; }
.chart__tip-hint { color: var(--cy-primary); font-size: 10px; }
.chart--compact .chart__line { stroke-width: 1.5; }
.site-card__spark { margin-top: var(--cy-space-3); }
.site-card__spark-label { margin: var(--cy-space-3) 0 0; font-size: var(--cy-fs-caption); color: var(--app-text-soft); }

/* ---------- bar list ---------- */

.bars { display: flex; flex-direction: column; gap: var(--cy-space-2); }

.bars__row {
  display: grid;
  grid-template-columns: minmax(10rem, 2fr) minmax(6rem, 3fr) minmax(6.5rem, auto);
  align-items: center;
  gap: var(--cy-space-4);
  padding: var(--cy-space-1) 0;
}

.bars__label { display: flex; flex-direction: column; min-width: 0; }
.bars__name { font-size: var(--cy-fs-small); font-weight: 600; color: var(--app-text-2); overflow-wrap: anywhere; }
.bars__sub { font-size: var(--cy-fs-caption); color: var(--app-text-soft); overflow-wrap: anywhere; }

.bars__track { height: 0.75rem; }

.bars__fill {
  height: 100%;
  background: var(--cy-primary);
  border-radius: 0 4px 4px 0; /* rounded data end, flat at the baseline */
}

/* Non-cash costs: same hue, striped, so the distinction is not colour alone. */
.bars__fill--textured {
  background: repeating-linear-gradient(135deg, var(--cy-primary) 0 4px, var(--cy-blue-200) 4px 7px);
}

.bars__value { font-size: var(--cy-fs-small); text-align: right; color: var(--app-text); white-space: nowrap; }

/* Narrow columns: label on its own line, bar and value beneath. */
.bars--stacked .bars__row { grid-template-columns: 1fr auto; row-gap: var(--cy-space-1); }
.bars--stacked .bars__label { grid-column: 1 / -1; }
.bars--stacked .bars__track { grid-column: 1; }
.show-all { margin: var(--cy-space-3) 0 0; }

/* ---------- line charts ---------- */

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--cy-space-6) var(--cy-space-8);
  margin-top: var(--cy-space-4);
}

.chart-card { margin: 0; min-width: 0; }
.chart-card figcaption {
  margin-bottom: var(--cy-space-2);
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-small);
  font-weight: 600;
  color: var(--app-heading);
}

.chart__plot { position: relative; width: 100%; }
.chart__plot svg { display: block; overflow: visible; }
.chart__grid { stroke: var(--app-grid); stroke-width: 1; }
.chart__axis { font-family: var(--cy-font-mono); font-size: 10px; fill: var(--app-text-soft); }
.chart__line { fill: none; stroke: var(--cy-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { fill: var(--cy-primary); opacity: 0.08; }
.chart__dot { fill: var(--cy-primary); stroke: var(--app-surface); stroke-width: 2; }
.chart__focus { fill: var(--app-surface); stroke: var(--cy-primary); stroke-width: 2; }
.chart__cross { stroke: var(--app-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__hit { fill: transparent; cursor: crosshair; }
.chart__empty { color: var(--app-text-soft); font-size: var(--cy-fs-small); }

.chart__tooltip {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--cy-space-1) var(--cy-space-3);
  font-size: var(--cy-fs-caption);
  white-space: nowrap;
  pointer-events: none;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--cy-radius-sm);
  box-shadow: var(--cy-shadow-md);
}
.chart__tip-value { font-family: var(--cy-font-mono); font-weight: 600; color: var(--app-text); }
.chart__tip-time { color: var(--app-text-soft); }

.chart__table { margin-top: var(--cy-space-2); font-size: var(--cy-fs-caption); }
.chart__table summary { cursor: pointer; color: var(--cy-primary); width: max-content; }
.chart__table .table-wrap { max-height: 14rem; overflow-y: auto; margin-top: var(--cy-space-2); }

/* ---------- site tables and management ---------- */

.party-cell { min-width: 10rem; }
.asset-cell { min-width: 11rem; }
/* Site tables fit their card: long pricing formulas and terms wrap, amounts stay on one line. */
.basis-cell { font-size: var(--cy-fs-caption); overflow-wrap: anywhere; }
.basis-cell--wrap { min-width: 9rem; max-width: 15rem; }
.site-table td, .site-table th { padding-left: var(--cy-space-3); padding-right: var(--cy-space-3); }
.site-table .nowrap:not(.num) { white-space: normal; }
.nobr { white-space: nowrap; }
.cell-strong { display: block; font-weight: 600; color: var(--app-heading); }
.cell-main { display: block; }
.cell-sub { display: block; font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.sim-badge { color: var(--app-text-3); background: var(--app-surface-2); }
.agreement-inactive { margin-left: var(--cy-space-2); }

.row-action { padding: 0.25rem 0.6rem; margin-left: var(--cy-space-2); font-size: var(--cy-fs-caption); }
.stacked-actions { white-space: nowrap; text-align: right; }
.stacked-actions > * { display: inline-block; }
.stacked-actions > * + * { display: block; width: max-content; margin: var(--cy-space-1) 0 0 auto; }
.row-action--danger { color: var(--cy-danger); }
.row-action--danger:hover {
  background: color-mix(in srgb, var(--cy-danger) 10%, var(--app-surface));
  border-color: var(--cy-danger);
}

.progress {
  display: block;
  height: 4px;
  margin-top: var(--cy-space-1);
  background: var(--app-grid);
  border-radius: var(--cy-radius-pill);
  overflow: hidden;
}
.progress__fill { display: block; height: 100%; background: var(--cy-primary); }

.mgmt { margin-top: var(--cy-space-4); }
.mgmt > summary { list-style: none; width: max-content; }
.mgmt > summary::-webkit-details-marker { display: none; }
.mgmt[open] > summary { color: var(--app-heading); background: var(--app-surface-2); }
.site-head__manage .mgmt { margin-top: 0; }
.site-head__manage .mgmt[open] { flex-basis: 100%; order: 2; }

.mgmt__panel {
  margin-top: var(--cy-space-3);
  padding: var(--cy-space-6);
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--cy-radius-md);
}

.mgmt-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0 var(--cy-space-4);
}
.mgmt-form__grid .field { margin-top: var(--cy-space-3); }
.mgmt-form__actions { margin-top: var(--cy-space-6); }

.field--check { display: flex; align-items: center; gap: var(--cy-space-2); grid-column: 1 / -1; }
.field--check .field__label { margin: 0; }
.field__check { width: 1rem; height: 1rem; accent-color: var(--cy-primary); }
.field__hint { display: block; margin-top: var(--cy-space-1); font-size: var(--cy-fs-caption); color: var(--app-text-soft); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- what-if ---------- */

.whatif-actions { display: flex; gap: var(--cy-space-2); align-items: flex-start; }
.whatif-setup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cy-space-4); margin-top: var(--cy-space-6); }
.whatif-name { min-width: 16rem; }
.whatif-status { margin: 0 0 0 auto; font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
/* Both panels share one row with the same top edge. The form has no scrollbar
   of its own: its sections are collapsible cards (only the first open on load),
   so it stays short and the page scrolls if several are opened. */
.whatif-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cy-space-6); align-items: stretch; }
.whatif-levers { display: flex; flex-direction: column; gap: var(--cy-space-3); }
.whatif-levers > .cy-eyebrow { margin-bottom: 0; }
.whatif-fold { border: 1px solid var(--app-border); border-radius: var(--cy-radius-md, 10px); background: var(--app-surface); }
.whatif-fold[open] { border-color: var(--app-border-strong, var(--app-border)); }
.whatif-fold__sum { display: flex; align-items: center; gap: var(--cy-space-3); padding: var(--cy-space-3) var(--cy-space-4); cursor: pointer;
  list-style: none; border-radius: inherit; user-select: none; }
.whatif-fold__sum::-webkit-details-marker { display: none; }
.whatif-fold__sum:hover { background: var(--app-tint); }
.whatif-fold__sum:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }
.whatif-fold__sum .section-title { margin: 0; }
.whatif-fold[open] > .whatif-fold__sum { border-bottom: 1px solid var(--app-border); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.whatif-fold__chev { width: 18px; height: 18px; margin-left: auto; flex: none; fill: none; stroke: var(--app-text-soft); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.whatif-fold[open] > .whatif-fold__sum .whatif-fold__chev { transform: rotate(180deg); }
.whatif-fold__body { padding: var(--cy-space-4); }
.whatif-fold__body > :last-child { margin-bottom: 0; }
.lever-grid { display: flex; flex-direction: column; gap: var(--cy-space-3); margin-bottom: var(--cy-space-4); }
.lever { display: grid; grid-template-columns: 9rem 1fr 4.5rem; align-items: center; gap: var(--cy-space-3); font-size: var(--cy-fs-small); }
.lever input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--app-tint-2); border-radius: var(--cy-radius-pill); }
.lever input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--cy-primary); border: 2px solid var(--app-surface); box-shadow: var(--cy-shadow-sm); cursor: pointer; }
.lever input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--cy-primary); border: 2px solid var(--app-surface); }
.lever input[type=range]:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }
.lever-stack input + input { margin-top: var(--cy-space-1); }
.lever-table .cell-strong { min-width: 6.5rem; }
.lever-table th { padding: var(--cy-space-2); letter-spacing: 0.04em; vertical-align: bottom; }
.lever output { text-align: right; font-size: var(--cy-fs-caption); color: var(--app-heading); }
.lever-table td { padding: var(--cy-space-2) var(--cy-space-2); vertical-align: middle; }
.lever-table input[type=number], .lever-table select { width: 100%; min-width: 4rem; padding: 0.3rem 0.45rem; font-size: var(--cy-fs-caption); }
.lever-table input[type=number] { text-align: right; font-family: var(--cy-font-mono); }
.lever-table .changed { border-color: var(--cy-primary); background: var(--app-tint); }
.lever-table tr.is-off td:not(:first-child) { opacity: 0.45; }
.whatif-assumptions { margin: var(--cy-space-4) 0; padding-left: var(--cy-space-6); font-size: var(--cy-fs-small); color: var(--app-text-2); }
.whatif-results .tile__detail.up { color: var(--cy-success); }
.whatif-results.is-busy { opacity: 0.6; transition: opacity var(--cy-dur) var(--cy-ease); }

@media (max-width: 72rem) {
  .whatif-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- usage view ---------- */

.usage { display: flex; flex-direction: column; }

.usage__lead {
  max-width: 44rem;
  margin: var(--cy-space-2) 0 0;
  font-size: var(--cy-fs-small);
  line-height: var(--cy-lh-body);
  color: var(--app-text-3);
}

/* Doubled class: the theme's `.cy h3` rule would otherwise win. */
.usage__heading.usage__heading {
  margin: var(--cy-space-8) 0 var(--cy-space-3);
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-h5);
  color: var(--app-heading);
}

.usage-calls { min-width: 0; }
.usage-calls__doc { min-width: 11rem; max-width: 18rem; overflow-wrap: anywhere; }
.data-table .cy-badge { white-space: nowrap; }

/* Outcome badges: state, so always a word, never colour alone. */
.outcome--success { color: var(--cy-success); background: color-mix(in srgb, var(--cy-success) 12%, var(--app-surface)); }
.outcome--refusal,
.outcome--max_tokens,
.outcome--no_output { color: var(--app-text-2); background: color-mix(in srgb, var(--cy-warning) 18%, var(--app-surface)); }
.outcome--api_error,
.outcome--config_error { color: var(--cy-danger); background: color-mix(in srgb, var(--cy-danger) 10%, var(--app-surface)); }

/* ---------- landing + sign in ---------- */

.landing {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: 100vh;
}

.landing__story {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-8);
  padding: var(--cy-space-8) clamp(var(--cy-space-6), 6vw, var(--cy-space-24));
  overflow: hidden;
  border-radius: 0;
}

.landing__lattice {
  position: absolute;
  top: 0;
  right: 0;
  width: min(36rem, 70%);
  height: auto;
  aspect-ratio: 1;
  color: var(--cy-white);
  opacity: 0.16;
  pointer-events: none;
}

.landing__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--cy-space-3);
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-h4);
  font-weight: 600;
  color: var(--cy-white);
  text-decoration: none;
  letter-spacing: var(--cy-ls-display);
}

.landing__copy {
  position: relative;
  max-width: 34rem;
  margin: auto 0;
}

.landing__eyebrow { color: var(--cy-cyan-300); }

.landing__title {
  margin: var(--cy-space-3) 0 var(--cy-space-6);
  font-family: var(--cy-font-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: var(--cy-lh-tight);
  letter-spacing: var(--cy-ls-display);
  color: var(--cy-white);
}

.landing__lead {
  margin: 0;
  font-size: var(--cy-fs-body);
  line-height: var(--cy-lh-body);
  color: var(--cy-blue-50);
}

.landing__points {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
  margin: var(--cy-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.landing__points li {
  display: flex;
  gap: var(--cy-space-4);
  align-items: flex-start;
}

.landing__points svg {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.55rem;
  fill: none;
  stroke: var(--app-surface);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: rgb(255 255 255 / 0.14);
  border-radius: var(--cy-radius-md);
}

.landing__points strong {
  display: block;
  font-family: var(--cy-font-display);
  font-weight: 600;
  color: var(--cy-white);
}

.landing__points span {
  font-size: var(--cy-fs-small);
  line-height: var(--cy-lh-body);
  color: var(--cy-blue-100);
}

.landing__signin {
  display: grid;
  place-items: center;
  padding: var(--cy-space-8) var(--cy-space-6);
  background: var(--app-bg-grad);
}

.signin {
  width: 100%;
  max-width: 26rem;
  padding: var(--cy-space-8);
  box-shadow: var(--cy-shadow-lg);
}

.signin__mark { display: block; margin-bottom: var(--cy-space-6); }

.signin__title {
  margin: 0;
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-h3);
  color: var(--app-heading);
}

.signin__lead {
  margin: var(--cy-space-1) 0 var(--cy-space-2);
  color: var(--app-text-3);
}

.signin__error {
  margin: var(--cy-space-4) 0 0;
  padding: var(--cy-space-3) var(--cy-space-4);
  font-size: var(--cy-fs-small);
  color: var(--app-text);
  background: color-mix(in srgb, var(--cy-danger) 10%, var(--app-surface));
  border-left: 3px solid var(--cy-danger);
  border-radius: var(--cy-radius-sm);
}

.signin__submit {
  width: 100%;
  margin-top: var(--cy-space-6);
  justify-content: center;
}

.signin__submit:disabled { cursor: progress; opacity: 0.75; }

.signin__help {
  margin: var(--cy-space-4) 0 0;
  font-size: var(--cy-fs-caption);
  line-height: var(--cy-lh-body);
  color: var(--app-text-soft);
  text-align: center;
}

.field__password { position: relative; display: block; }
.field__password .field__input { padding-right: 4.5rem; }

.field__reveal {
  position: absolute;
  top: 50%;
  right: var(--cy-space-2);
  transform: translateY(-50%);
  padding: var(--cy-space-1) var(--cy-space-2);
  font-family: var(--cy-font-display);
  font-size: var(--cy-fs-caption);
  font-weight: 600;
  color: var(--cy-primary);
  background: none;
  border: 0;
  border-radius: var(--cy-radius-sm);
  cursor: pointer;
}

.field__reveal:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }

/* ---------- footer ---------- */

.app-footer {
  display: flex;
  align-items: center;
  gap: var(--cy-space-3);
  padding: var(--cy-space-4) var(--cy-space-6);
  font-size: var(--cy-fs-caption);
  color: var(--app-text-soft);
  background: var(--app-surface);
  border-top: 1px solid var(--app-border);
}

.app-footer__health { margin-left: auto; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--cy-space-8);
  transform: translate(-50%, 1rem);
  max-width: min(32rem, calc(100vw - 2rem));
  padding: var(--cy-space-3) var(--cy-space-6);
  font-size: var(--cy-fs-small);
  color: var(--cy-white);
  background: var(--app-toast);
  border-radius: var(--cy-radius-btn);
  box-shadow: var(--cy-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cy-dur) var(--cy-ease),
              transform var(--cy-dur) var(--cy-ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast[data-variant='success'] { background: var(--cy-success); }
.toast[data-variant='warning'] { background: var(--cy-warning); color: var(--app-text); }
.toast[data-variant='danger']  { background: var(--cy-danger); }

/* ---------- loading note (js/loading.js) ---------- */

.loading-note {
  position: fixed;
  right: var(--cy-space-6);
  bottom: var(--cy-space-6);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--cy-space-3);
  max-width: min(26rem, calc(100vw - 2rem));
  padding: var(--cy-space-3) var(--cy-space-4);
  font-size: var(--cy-fs-small);
  color: var(--app-text-2);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-left: 4px solid var(--cy-primary);
  border-radius: var(--cy-radius-btn);
  box-shadow: var(--cy-shadow-lg);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--cy-dur) var(--cy-ease), transform var(--cy-dur) var(--cy-ease);
  pointer-events: none;
}
.loading-note.is-visible { opacity: 1; transform: none; }
@media (max-width: 40rem) { .loading-note { right: var(--cy-space-4); left: var(--cy-space-4); bottom: var(--cy-space-4); max-width: none; } }
.loading-note__text { display: flex; flex-direction: column; gap: 0.15rem; }
.loading-note strong { color: var(--app-heading); font-weight: 600; }
.loading-note__hint { display: none; }
.loading-note.is-patient .loading-note__hint { display: block; }
.loading-note__spinner {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--app-tint);
  border-top-color: var(--cy-primary);
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }

/* ---------- motion preference ---------- */

/* ---------- floor view: racks and nodes ---------- */

#site-floor { position: relative; }
.floor-time { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cy-space-2) var(--cy-space-3); margin: var(--cy-space-4) 0 var(--cy-space-3); }
.floor-time__slider { flex: 1 1 14rem; min-width: 0; accent-color: var(--cy-primary); }
.floor-time__step, .floor-time__live { padding: var(--cy-space-1) var(--cy-space-3); }
.floor-time__live.is-active { color: var(--cy-primary); border-color: var(--cy-primary); background: var(--app-tint); }
.floor-time__label { font-size: var(--cy-fs-small); color: var(--app-text-2); min-width: 12rem; }
.floor-legend { margin: 0 0 var(--cy-space-4); }
.legend__note { color: var(--app-text-soft); }

.floor-lvl-0 { background: var(--load-0); }
.floor-lvl-1 { background: var(--load-1); }
.floor-lvl-2 { background: var(--load-2); }
.floor-lvl-3 { background: var(--load-3); }
.floor-lvl-4 { background: var(--load-4); }
.floor-off {
  background: repeating-linear-gradient(135deg, var(--load-off) 0 3px, transparent 3px 6px);
  outline: 1px solid var(--app-border);
  outline-offset: -1px;
}

/* Rows pack side by side when they fit, so short rows share a line. */
.floor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--cy-space-6) var(--cy-space-8); }
.floor-row { flex: 0 1 auto; min-width: 0; }
.floor-row__head { display: flex; align-items: baseline; gap: var(--cy-space-2); margin-bottom: var(--cy-space-2); }
.floor-row__label { font-family: var(--cy-font-display); font-weight: 600; font-size: var(--cy-fs-small); color: var(--app-heading); }
.floor-row__purpose { font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.floor-row__racks { display: flex; flex-wrap: wrap; gap: var(--cy-space-2); }

.rack {
  --u: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 2.75rem;
  padding: 4px 4px 3px;
  font: inherit;
  color: var(--app-text-2);
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 140ms var(--cy-ease), box-shadow 140ms var(--cy-ease), border-color 140ms var(--cy-ease);
}
.rack:hover { transform: translateY(-2px); box-shadow: var(--cy-shadow-sm); }
.rack:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }
.rack.is-selected { border-color: var(--cy-primary); box-shadow: var(--cy-shadow-glow); }
.rack__code, .rack__value { font-size: 0.6875rem; line-height: 1; text-align: center; white-space: nowrap; }
.rack__code { font-family: var(--cy-font-display); font-weight: 600; color: var(--app-heading); }
.rack__value { color: var(--app-text-2); }
.rack__frame {
  position: relative;
  display: block;
  height: calc(var(--rack-u) * var(--u));
  background: var(--app-surface);
  border-radius: 2px;
}
.rack__frame::after {  /* the rack's own load: a thin gauge on its right edge */
  content: '';
  position: absolute;
  right: -3px; bottom: 0;
  width: 2px;
  height: calc(var(--rack-fill, 0) * 100%);
  background: var(--app-text-3);
  border-radius: 1px;
}
.rack__node {
  position: absolute;
  left: 2px; right: 3px;
  bottom: calc(var(--slot) * var(--u) + 1px);
  height: calc(var(--h) * var(--u) - 1px);   /* 1px of surface between nodes */
  border-radius: 1px;
}
.rack-panel { margin-top: var(--cy-space-6); padding-top: var(--cy-space-6); border-top: 1px solid var(--app-border); }
.rack-panel__title.rack-panel__title { font-size: var(--cy-fs-body); }
.rack-panel__charts { margin: var(--cy-space-4) 0; }
.rack-panel__swatch { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: var(--cy-space-1); border-radius: 2px; vertical-align: baseline; }

.floor-tip {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 20rem;
  padding: var(--cy-space-2) var(--cy-space-3);
  font-size: var(--cy-fs-caption);
  color: var(--app-text-2);
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--cy-radius-md);
  box-shadow: var(--cy-shadow-md);
  pointer-events: none;
}
.floor-tip strong { font-family: var(--cy-font-mono); color: var(--app-heading); }

@media (prefers-reduced-motion: reduce) {
  .rack { transition: none; }
  .rack:hover { transform: none; }
  .toast, .dropzone, .site-card { transition: none; }
  .loading-note { transition: none; }
  .loading-note__spinner { animation-duration: 2.4s; }
  .site-card:hover { transform: none; }
}

/* ---------- narrow screens ---------- */

/* Below ~84rem the brand, six nav links, theme switch, user and sign-out no
   longer fit on one line, so the nav takes a row of its own. Header labels
   never wrap inside themselves. */
.app-header__wordmark, .app-nav__link, .user-chip__text, #logout-button { white-space: nowrap; }
@media (max-width: 84rem) {
  .app-header { flex-wrap: wrap; }
  .app-nav { order: 3; width: 100%; flex-wrap: wrap; margin: var(--cy-space-2) 0 0; }
}

@media (max-width: 40rem) {
  .app { padding: var(--cy-space-6) var(--cy-space-4) var(--cy-space-8); }
  .app-header__wordmark { display: none; }
  .user-chip__text { display: none; }
  .bars__row { grid-template-columns: 1fr auto; }
  .bars__track { grid-column: 1 / -1; grid-row: 2; }
  .contract-detail__facts { grid-template-columns: 1fr; }
  .floor-time__slider { flex-basis: 100%; order: -1; }
}

@media (max-width: 60rem) {
  .landing { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
  .landing__story { gap: var(--cy-space-8); }
  .landing__copy { margin: 0; }
}

/* Rack layout import */
.floor-files { margin-top: var(--cy-space-4); }
.import-result:not(:empty) { margin-top: var(--cy-space-4); }
.import-report > p { margin: 0 0 var(--cy-space-2); }
.import-problems { margin-top: var(--cy-space-3); padding-left: var(--cy-space-3); border-left: 3px solid var(--app-border); }
.import-problems--error { border-left-color: var(--cy-danger); }
.import-problems__title { margin: 0 0 var(--cy-space-1); font-weight: 600; color: var(--app-heading); }
.import-problems--error .import-problems__title { color: var(--cy-danger); }
.import-problems ul { margin: 0; padding-left: var(--cy-space-4); color: var(--app-text-2); font-size: 0.875rem; }

/* ---------- data sources ---------- */

/* State colours reuse the tile tones: active green, stale and empty amber,
   duplicate red; inactive states are neutral grey and the card is muted. */
.source-pill {
  --pill: var(--app-text-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--cy-space-1);
  padding: 0.15rem 0.55rem;
  font-size: var(--cy-fs-caption);
  font-weight: 600;
  white-space: nowrap;
  color: var(--pill-ink, var(--app-text-3));
  background: color-mix(in srgb, var(--pill) 14%, var(--app-surface));
  border: 1px solid color-mix(in srgb, var(--pill) 40%, transparent);
  border-radius: var(--cy-radius-pill);
}
.source-pill__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--pill); flex: none; }
.source-pill--active { --pill: var(--tone-profit); --pill-ink: var(--tone-profit-ink); }
.source-pill--stale,
.source-pill--no_data { --pill: var(--tone-energy); --pill-ink: var(--tone-energy-ink); }
.source-pill--duplicate { --pill: var(--tone-loss); --pill-ink: var(--tone-loss-ink); }
.source-pill--superseded,
.source-pill--not_connected { --pill: var(--app-text-muted); --pill-ink: var(--app-text-3); }

.source-legend { display: flex; flex-wrap: wrap; gap: var(--cy-space-2) var(--cy-space-6); margin: var(--cy-space-4) 0 0; padding: 0; list-style: none; }
.source-legend__item { display: inline-flex; align-items: center; gap: var(--cy-space-2); font-size: var(--cy-fs-caption); color: var(--app-text-3); }

.source-matrix th[scope="row"] { font-weight: 400; text-transform: none; letter-spacing: 0; background: none; border-bottom: 1px solid var(--app-border); }
.source-matrix__site { text-align: center; }
.source-matrix td { text-align: center; }
.source-matrix__cell { padding: 0; background: none; border: 0; border-radius: var(--cy-radius-pill); cursor: pointer; }
.source-matrix__cell:hover .source-pill { box-shadow: var(--cy-shadow-sm); }
.source-matrix__cell:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }

.source-group.source-group { margin: var(--cy-space-6) 0 var(--cy-space-3); font-family: var(--cy-font-display); font-size: var(--cy-fs-small); color: var(--app-heading); }
/* Equal columns, and the default stretch gives every card in a row the same
   height; the credentials form opens in a dialog so it never breaks that. */
.source-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--cy-space-4); }

.source-card {
  --tone: var(--tone-profit);
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
  padding: var(--cy-space-4);
  background: color-mix(in srgb, var(--tone) var(--tile-tint), var(--app-surface));
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  border-left: 4px solid var(--tone);
  border-radius: var(--cy-radius-md);
  box-shadow: var(--app-raised-shadow);
}
.source-card--stale, .source-card--no_data { --tone: var(--tone-energy); }
.source-card--duplicate { --tone: var(--tone-loss); }
/* Inactive: grey and dashed, but raised like the rest so the row stays even;
   the reason stays fully readable. */
.source-card.is-off {
  --tone: var(--app-text-muted);
  background: var(--app-surface-2);
  border-style: dashed;
  border-left-style: solid;
}
.source-card.is-off .source-card__name,
.source-card.is-off .source-card__facts { opacity: 0.75; }
.source-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--cy-space-2); }
.source-card__name.source-card__name { margin: 0; font-family: var(--cy-font-display); font-size: var(--cy-fs-body); color: var(--app-heading); }
.source-card__reason { margin: 0; font-size: var(--cy-fs-small); color: var(--app-text-2); }
.source-card__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--cy-space-1) var(--cy-space-3); margin: 0; font-size: var(--cy-fs-caption); }
.source-card__facts dt { color: var(--app-text-soft); white-space: nowrap; }
.source-card__facts dd { margin: 0; color: var(--app-text-2); overflow-wrap: anywhere; }
.source-card__sim { margin: auto 0 0; font-family: var(--cy-font-mono); font-size: var(--cy-fs-caption); color: var(--app-text-soft); }

/* Credentials and resync, on each source card (admins only). */
.source-conn { display: flex; flex-direction: column; gap: var(--cy-space-2); padding-top: var(--cy-space-3); border-top: 1px solid var(--app-border); font-size: var(--cy-fs-caption); }
.source-conn__summary { margin: 0; color: var(--app-text-3); }
.source-conn__summary strong { color: var(--app-heading); }
.source-conn__note { margin: 0; color: var(--app-text-soft); }
.source-conn__events { margin: 0; padding: 0; list-style: none; color: var(--app-text-3); }
.source-conn__event::before { content: "· "; }
.source-conn__event--resync_failed { color: var(--tone-loss-ink); }
.source-conn__event--resync_done { color: var(--tone-profit-ink); }
.source-conn__open { align-self: flex-start; font-size: var(--cy-fs-caption); padding: var(--cy-space-1) var(--cy-space-3); }
.source-conn__actions { display: flex; flex-wrap: wrap; gap: var(--cy-space-2); margin-top: var(--cy-space-4); }
.source-conn__actions .cy-btn { font-size: var(--cy-fs-caption); padding: var(--cy-space-2) var(--cy-space-3); }
.source-conn__remove { color: var(--cy-danger); }
/* An inactive card keeps its credentials block at full strength. */
.source-card.is-off .source-conn { opacity: 1; }

/* Credentials dialog. */
.source-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-card-border);
  border-radius: var(--cy-radius-lg);
  box-shadow: var(--cy-shadow-lg);
}
.source-dialog::backdrop { background: rgba(14, 26, 43, 0.55); }
.source-dialog__form { padding: var(--cy-space-6); }
.source-dialog__form .field { margin-top: var(--cy-space-4); }
.source-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--cy-space-4); margin-bottom: var(--cy-space-2); }
.source-dialog__title.source-dialog__title { margin: 0; font-family: var(--cy-font-display); font-size: var(--cy-fs-h5); color: var(--app-heading); }
.source-dialog__close { padding: 0 var(--cy-space-2); font-size: 1.5rem; line-height: 1; color: var(--app-text-soft); background: none; border: 0; border-radius: var(--cy-radius-sm, 6px); cursor: pointer; }
.source-dialog__close:hover { color: var(--app-heading); }
.source-dialog__close:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }
.source-dialog .source-conn__actions .cy-btn { font-size: var(--cy-fs-small); }

/* A what-if value the API would refuse: marked, and held back until fixed. */
.lever-table input.is-invalid,
.lever-table input.is-invalid:focus {
  border-color: var(--tone-loss);
  background: color-mix(in srgb, var(--tone-loss) 10%, var(--app-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-loss) 25%, transparent);
}

/* ---------- anomalies (js/anomalies.js) ---------- */

.chart__anom-band { fill: var(--anom-low); opacity: 0.10; pointer-events: none; }
.chart__anom-band--high { fill: var(--anom-high); opacity: 0.14; }
.chart__anom-band--medium { fill: var(--anom-medium); opacity: 0.14; }
.chart__anom-dot { fill: none; stroke-width: 2.4; stroke: var(--anom-low); stroke-dasharray: 2 2; }
.chart__anom-dot.is-clickable { fill: transparent; pointer-events: all; cursor: pointer; }
.chart__anom-dot.is-clickable:hover, .chart__anom-dot.is-clickable:focus-visible { stroke-width: 4; outline: none; }
.chart__anom-dot--high { stroke: var(--anom-high); stroke-dasharray: none; }
.chart__anom-dot--medium { stroke: var(--anom-medium); stroke-dasharray: 5 2; }
.chart__tip-anom { font-size: 10.5px; font-weight: 600; color: var(--anom-low); }
.chart__tip-anom--high { color: var(--anom-high); }
.chart__tip-anom--medium { color: var(--anom-medium); }

/* The strip under a view's charts: counts, a hint, an optional list. */
.anom-panel.cy-card { padding: var(--cy-space-3) var(--cy-space-4); }
.anom-panel.cy-card::before { display: none; }
.anom-panel--inline { border-top: 1px solid var(--app-border); margin-top: var(--cy-space-3); padding-top: var(--cy-space-3); }
.anom-strip__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cy-space-2) var(--cy-space-3); }
.anom-strip__title { font-weight: 600; color: var(--app-heading); }
.anom-strip__hint { font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.anom-strip__toggle { margin-left: auto; padding: 0.2rem 0.75rem; font-size: var(--cy-fs-caption); }
.anom-strip__list { list-style: none; margin: var(--cy-space-2) 0 0; padding: 0; display: grid; gap: 0.3rem; max-height: 15rem; overflow: auto; }
.anom-line { display: grid; grid-template-columns: auto minmax(7rem, max-content) 1fr auto auto; gap: var(--cy-space-3); align-items: center;
  width: 100%; text-align: left; font: inherit; font-size: var(--cy-fs-small); color: var(--app-text); cursor: pointer;
  background: transparent; border: 1px solid var(--app-border); border-left: 3px solid var(--anom-low); border-radius: var(--cy-radius-btn); padding: 0.3rem 0.6rem; }
.anom-line--high { border-left-color: var(--anom-high); }
.anom-line--medium { border-left-color: var(--anom-medium); }
.anom-line:hover, .anom-line:focus-visible { background: var(--app-tint); }
.anom-line__when { font-size: var(--cy-fs-caption); color: var(--app-text-soft); white-space: nowrap; }
.anom-line__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-heading); }
.anom-line__dev { font-size: var(--cy-fs-caption); white-space: nowrap; }
.anom-strip .anom__method { margin-top: var(--cy-space-2); font-size: var(--cy-fs-caption); }
/* The floating root-cause card. */
.anom-pop { position: absolute; z-index: 80; width: min(28rem, calc(100vw - 24px)); max-height: min(72vh, 36rem); overflow: auto;
  background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; box-shadow: var(--cy-shadow-lg); }
.anom-pop .anom { border: none; border-left: 4px solid var(--anom-low); border-radius: 12px 0 0 12px; padding: var(--cy-space-4) var(--cy-space-4) var(--cy-space-3); }
.anom-pop .anom--high { border-left-color: var(--anom-high); }
.anom-pop .anom--medium { border-left-color: var(--anom-medium); }
.anom-pop .anom__head { padding-right: 2rem; }
.anom-pop__close { position: sticky; top: 0; float: right; z-index: 1; margin: 0.35rem 0.35rem -2.2rem 0; width: 1.9rem; height: 1.9rem;
  border: 1px solid var(--app-border); border-radius: 50%; background: var(--app-surface); color: var(--app-text-2); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.anom-pop__close:hover, .anom-pop__close:focus-visible { background: var(--app-tint); color: var(--app-heading); }
.anom-line__cause { font-size: var(--cy-fs-caption); color: var(--app-text-2); white-space: nowrap; }
@media (max-width: 40rem) { .anom-line { grid-template-columns: auto 1fr auto; } .anom-line__when, .anom-line__cause { display: none; } }
/* Cause category and the list of causes checked, in the card. */
.anom__category { display: flex; align-items: baseline; gap: var(--cy-space-2); margin: var(--cy-space-2) 0 0; font-size: var(--cy-fs-small); color: var(--app-heading); }
.anom__category-label { font-size: var(--cy-fs-caption); text-transform: uppercase; letter-spacing: 0.05em; color: var(--app-text-soft); }
.anom__checked { margin-top: var(--cy-space-3); border-top: 1px solid var(--app-border); padding-top: var(--cy-space-2); }
.anom__checked summary { cursor: pointer; font-size: var(--cy-fs-caption); text-transform: uppercase; letter-spacing: 0.04em; color: var(--app-text-soft); }
.anom__factors { list-style: none; margin: var(--cy-space-2) 0 0; padding: 0; display: grid; gap: 0.45rem; }
.anom__factor { display: grid; gap: 0.1rem; font-size: var(--cy-fs-caption); }
.anom__factor-head { display: flex; align-items: baseline; gap: 0.45rem; color: var(--app-heading); }
.anom__factor-sym { width: 1rem; text-align: center; }
.anom__factor-verdict { margin-left: auto; padding: 0 0.45rem; border-radius: var(--cy-radius-pill); background: var(--app-tint); color: var(--app-text-2); white-space: nowrap; }
.anom__factor-evidence { padding-left: 1.45rem; color: var(--app-text-2); line-height: 1.45; }
.anom__factor--main .anom__factor-sym, .anom__factor--main .anom__factor-verdict { color: var(--anom-high); }
.anom__factor--main .anom__factor-verdict { background: var(--anom-high-bg); font-weight: 600; }
.anom__factor--contributing .anom__factor-sym, .anom__factor--contributing .anom__factor-verdict { color: var(--anom-medium); }
.anom__factor--contributing .anom__factor-verdict { background: var(--anom-medium-bg); }
.anom__factor--ruled_out { opacity: 0.8; }
.anom__factor--ruled_out .anom__factor-sym { color: var(--app-text-soft); }
.anom__sev { display: inline-block; padding: 0.1rem 0.55rem; border-radius: var(--cy-radius-pill); font-size: var(--cy-fs-caption);
  font-weight: 600; white-space: nowrap; color: var(--anom-low); background: var(--anom-low-bg); }
.anom__sev--high { color: var(--anom-high); background: var(--anom-high-bg); }
.anom__sev--medium { color: var(--anom-medium); background: var(--anom-medium-bg); }
.anom { border: 1px solid var(--app-border); border-left: 4px solid var(--anom-low); border-radius: var(--cy-radius-btn);
  padding: var(--cy-space-3) var(--cy-space-4); background: var(--app-surface); }
.anom--high { border-left-color: var(--anom-high); }
.anom--medium { border-left-color: var(--anom-medium); }
.anom__head { display: flex; justify-content: space-between; gap: var(--cy-space-3); flex-wrap: wrap; align-items: baseline; }
.anom__title { display: flex; gap: var(--cy-space-2); align-items: baseline; flex-wrap: wrap; color: var(--app-heading); }
.anom__when { font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.anom__facts { display: flex; flex-wrap: wrap; gap: 0.3rem var(--cy-space-3); margin: var(--cy-space-2) 0; font-size: var(--cy-fs-small); color: var(--app-text-2); }
.anom__dev { font-weight: 600; color: var(--app-heading); }
.anom__cause { margin: var(--cy-space-2) 0; font-size: var(--cy-fs-small); color: var(--app-text); line-height: 1.55; }
.anom__sub { margin: var(--cy-space-2) 0 0.2rem; font-size: var(--cy-fs-caption); color: var(--app-text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.anom__parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.anom__part { display: grid; grid-template-columns: minmax(0, 12rem) minmax(4rem, 1fr) auto; gap: var(--cy-space-2); align-items: center; font-size: var(--cy-fs-caption); }
.anom__part-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-text-2); }
.anom__part-track { height: 8px; border-radius: 4px; background: var(--app-tint); overflow: hidden; }
.anom__part-bar { display: block; height: 100%; background: var(--cy-primary); border-radius: 4px; }
.anom__part-bar.is-neg { background: repeating-linear-gradient(45deg, var(--cy-primary) 0 3px, transparent 3px 6px); }
.anom__part-value { color: var(--app-heading); white-space: nowrap; }
.anom__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: var(--cy-space-2); }
.anom__chip { font-size: var(--cy-fs-caption); padding: 0.1rem 0.5rem; border-radius: var(--cy-radius-pill); background: var(--app-tint); color: var(--app-text-2); }
.anom__chip--event { background: var(--anom-medium-bg); color: var(--app-heading); }
.anom__chip--related { background: transparent; border: 1px dashed var(--app-border); }
.anom__pick { margin-top: var(--cy-space-2); padding: 0.25rem 0.7rem; font-size: var(--cy-fs-caption); }
.anom__method { margin-top: var(--cy-space-3); font-size: var(--cy-fs-small); color: var(--app-text-2); }
.anom__method summary { cursor: pointer; color: var(--cy-primary); font-weight: 600; }
.anom__method dt { font-weight: 600; color: var(--app-heading); margin-top: var(--cy-space-2); }
.anom__method dd { margin: 0.15rem 0 0; }
@media (max-width: 40rem) {
  .anom__part { grid-template-columns: minmax(0, 1fr) auto; }
  .anom__part-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- tables on narrow screens ----------
   No sideways scrolling: below 60rem each row of a stackable table becomes a
   small card, with the column name (data-label, set by tables.js) beside
   each value. The source matrix stays a grid but gets tighter. */
@media (max-width: 64rem) {
  .table-wrap:has(> .is-stackable) { overflow: visible; border: 0; border-radius: 0; }
  .is-stackable { min-width: 0; }
  .is-stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .is-stackable, .is-stackable tbody, .is-stackable tr, .is-stackable td { display: block; width: 100%; }
  .is-stackable [hidden] { display: none !important; }
  .is-stackable tbody tr {
    margin-bottom: var(--cy-space-3);
    padding: var(--cy-space-2) 0;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--cy-radius-md);
  }
  .is-stackable tbody tr:last-child { margin-bottom: 0; }
  /* Label in the first column (spanning every line of the value), the
     cell's content stacked in the second. */
  .data-table.is-stackable td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 36%) minmax(0, 1fr);
    column-gap: var(--cy-space-3);
    align-items: start;
    justify-items: start;
    min-width: 0;
    max-width: none;
    padding: var(--cy-space-1) var(--cy-space-4);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    border-bottom: 0;
  }
  .data-table.is-stackable td > * { grid-column: 2; margin-left: 0; }
  .data-table.is-stackable td > * + * { margin-top: var(--cy-space-1); }
  .data-table.is-stackable td::before {
    content: attr(data-label);
    grid-column: 1;
    grid-row: 1 / span 8;
    font-size: var(--cy-fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--app-text-soft);
    letter-spacing: 0.03em;
    overflow-wrap: normal;
  }
  .data-table.is-stackable td:not([data-label]) { display: block; }
  .data-table.is-stackable td:not([data-label])::before { content: none; }
  .data-table.is-stackable td .cell-sub, .data-table.is-stackable td .cell-main { margin-top: 0; }
  .is-stackable .stacked-actions { white-space: normal; }
  .is-stackable .stacked-actions > * + * { display: inline-block; margin: 0 0 0 var(--cy-space-2); }
  .is-stackable .row-action { margin-left: 0; }

  .source-matrix th, .source-matrix td { padding: var(--cy-space-2); }
  .source-matrix thead th { white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; }
  .source-matrix .source-pill { padding: 0.1rem 0.4rem; white-space: normal; }
}
@media (max-width: 40rem) {
  .source-matrix th, .source-matrix td { padding: var(--cy-space-1); }
  .source-matrix th[scope="row"] { overflow-wrap: anywhere; }
  .source-matrix .source-pill { flex-direction: column; gap: 0.1rem; padding: 0.15rem 0.3rem; font-size: 0.68rem; line-height: 1.15; border-radius: var(--cy-radius-sm); }
}

/* ---------- trend charts: history, outlook, range and threshold ---------- */
.chart__range { fill: var(--cy-primary); opacity: 0.12; }
.chart__line--ahead { stroke-dasharray: 5 4; opacity: 0.85; }
.chart__today { stroke: var(--app-text-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.chart__today-label { font-weight: 600; }
.chart__ref { stroke: var(--cy-warning, #C9821E); stroke-width: 1.2; stroke-dasharray: 6 3; }
.chart__ref-label { fill: var(--app-text-soft); }

/* ---------- site: weather, power market and fuel ---------- */
.ext-block + .ext-block { margin-top: var(--cy-space-8); padding-top: var(--cy-space-6); border-top: 1px solid var(--app-border); }
.ext-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cy-space-2) var(--cy-space-4); }
.ext-block__title.ext-block__title { margin: 0; font-family: var(--cy-font-display); font-size: var(--cy-fs-h5); color: var(--app-heading); }
.ext-source { margin: 0; font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.ext-why { margin: var(--cy-space-3) 0 var(--cy-space-4); padding-left: var(--cy-space-6); font-size: var(--cy-fs-small); line-height: var(--cy-lh-body); color: var(--app-text-2); max-width: 62rem; }
.ext-why li + li { margin-top: var(--cy-space-1); }
.ext-missing { margin: var(--cy-space-3) 0 0; padding: var(--cy-space-3) var(--cy-space-4); font-size: var(--cy-fs-small); color: var(--app-text-2);
  background: var(--app-surface-2); border: 1px dashed var(--app-border); border-radius: var(--cy-radius-md); }
.ext-location { display: flex; flex-wrap: wrap; gap: var(--cy-space-1) var(--cy-space-4); margin: 0 0 var(--cy-space-2); font-size: var(--cy-fs-small); color: var(--app-text-2); }
.ext-location a { color: var(--cy-primary); }
.ext-tiles { margin: var(--cy-space-4) 0; }
.lever--select select { grid-column: 2 / -1; min-width: 0; padding: 0.3rem 0.45rem; font-size: var(--cy-fs-caption); }
.whatif-inputs-note { margin: 0 0 var(--cy-space-4); }
.chart__column { fill: var(--cy-primary); opacity: 0.85; }

/* ---------- site area map ---------- */
.map-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--cy-space-6); align-items: start; }
@media (max-width: 72rem) { .map-layout { grid-template-columns: minmax(0, 1fr); } }
.map-frame { min-width: 0; }
.map-canvas { height: 30rem; border: 1px solid var(--app-border); border-radius: var(--cy-radius-md); overflow: hidden; background: var(--app-surface-2); }
@media (max-width: 40rem) { .map-canvas { height: 22rem; } }
.map-canvas .leaflet-control-attribution { font-size: 10px; }
:root[data-theme="dark"] .map-canvas .leaflet-tile-pane { filter: brightness(0.72) contrast(1.08) saturate(0.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-canvas .leaflet-tile-pane { filter: brightness(0.72) contrast(1.08) saturate(0.85); } }
.map-legend { display: flex; flex-direction: column; gap: 4px; margin-top: var(--cy-space-3); font-size: var(--cy-fs-caption); color: var(--app-text-2); }
.map-legend__title { margin: 0 0 2px; font-weight: 600; color: var(--app-heading); }
.map-legend__row { display: flex; align-items: center; gap: var(--cy-space-2); cursor: pointer; }
.map-legend__row input { margin: 0; }
.map-legend__count { margin-left: auto; color: var(--app-text-soft); }
.map-legend__lines { display: flex; flex-wrap: wrap; gap: 2px var(--cy-space-4); padding-left: 1.6rem; }
.map-legend__line { display: inline-flex; align-items: center; gap: 6px; }
.map-line { display: inline-block; width: 22px; height: 0; border-top: 2px solid; }
.map-legend__scale { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--cy-space-3); margin-top: 4px; }
.map-legend__bin { display: inline-flex; align-items: center; gap: 4px; }
.map-swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(122, 74, 31, 0.6); }
.map-sym { display: inline-grid; place-items: center; width: 16px; height: 16px; font-size: 9px; font-weight: 700; flex: none; }
.map-sym--line { height: 0; border-top: 3px solid #C8443D; }
.map-sym--tap { width: 11px; height: 11px; margin: 0 2.5px; transform: rotate(45deg); background: #C8443D; border: 1.5px solid #fff; box-shadow: 0 0 0 1px #7a1f1a; }
.map-sym--sub { width: 7px; height: 7px; margin: 0 4.5px; border-radius: 50%; background: #3D4657; border: 1px solid #fff; }
.map-sym--tech, .map-badge--tech { background: #1F5FB8; color: #fff; border-radius: 50%; }
.map-sym--dc, .map-badge--dc { background: #6A3FB0; color: #fff; border-radius: 3px; }
.map-sym--office, .map-badge--office { background: #2E8F63; color: #fff; border-radius: 3px 3px 9px 9px; }
.map-sym--pop { border-radius: 50%; background: #E57A2E; opacity: 0.85; border: 1px solid #5A2A12; }
.map-badge { display: grid !important; place-items: center; font: 700 10px/1 var(--cy-font-mono, monospace); border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.map-badge--uni { background: #fff; color: #1F5FB8; border-color: #1F5FB8; border-radius: 50%; }
/* The diamond is drawn inside: rotating the marker itself would also rotate
   the translate3d Leaflet places it with, and move it across the map. */
.map-badge--tap { background: transparent; border: 0; box-shadow: none; }
.map-badge--tap::before { content: ""; position: absolute; inset: 3px; background: #C8443D; border: 1.5px solid #fff;
  border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 0 1px #7a1f1a; }
.map-badge--site { background: #F2B705; color: #3a2a00; border-radius: 50%; width: 24px !important; height: 24px !important;
  margin-left: -12px !important; margin-top: -12px !important; font-size: 14px; border-width: 2px; }
.map-tip { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.map-tip strong { font-size: 12.5px; }
.map-summary { margin: 0 0 var(--cy-space-3); padding: var(--cy-space-3) var(--cy-space-4); font-size: var(--cy-fs-small); color: var(--app-heading);
  background: var(--app-tint); border-left: 3px solid var(--cy-primary); border-radius: var(--cy-radius-sm); }
.map-insights { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--cy-space-2) var(--cy-space-4); font-size: var(--cy-fs-small); }
.map-insights dt { font-weight: 600; color: var(--app-heading); }
.map-insights dd { margin: 0; line-height: var(--cy-lh-body); color: var(--app-text-2); }
@media (max-width: 40rem) { .map-insights { grid-template-columns: minmax(0, 1fr); } .map-insights dd { margin-bottom: var(--cy-space-2); } }
.map-compare tr.is-current td { background: var(--app-tint); }
.map-source { margin-top: var(--cy-space-3); }

/* ---------- Site intelligence ---------- */
/* One column width shared by the key-facts labels and the source states, so the two cards line up. */
#view-intel { --intel-col: 14rem; }
#intel-result { display: flex; flex-direction: column; gap: var(--cy-space-6); }
#intel-result:empty { display: none; }
.intel-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.8fr) auto; gap: var(--cy-space-3) var(--cy-space-4);
  align-items: end; margin-top: var(--cy-space-4); }
.intel-form .field { margin: 0; }
.intel-form__submit { white-space: nowrap; box-sizing: border-box; height: 2.75rem; padding-block: 0; align-self: end; }
@media (max-width: 56rem) { .intel-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .intel-form__submit { grid-column: 1 / -1; } }
@media (max-width: 34rem) { .intel-form { grid-template-columns: minmax(0, 1fr); } }
.intel-form__error { margin: var(--cy-space-3) 0 0; color: #B3261E; font-size: var(--cy-fs-small); }
.intel-recent { margin-top: var(--cy-space-4); }
.intel-recent__title { margin: 0 0 var(--cy-space-2); font-size: var(--cy-fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-text-soft); }
.intel-recent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cy-space-2) var(--cy-space-4); font-size: var(--cy-fs-small); }
.intel-recent__list li { display: inline-flex; align-items: center; gap: var(--cy-space-2); }
.intel-chip { padding: 1px 7px; border-radius: 999px; font-size: 11px; color: #fff; white-space: nowrap; }
.intel-progress__head { display: flex; align-items: center; gap: var(--cy-space-2); color: var(--app-heading); }
.intel-progress__steps { margin: var(--cy-space-2) 0 0; padding-left: 1.2rem; font-size: var(--cy-fs-small); color: var(--app-text-2); columns: 2 16rem; }
.intel-progress__steps li::marker { content: "✓  "; color: #2E8F63; }

.intel-summary { display: flex; gap: var(--cy-space-6); align-items: center; }
@media (max-width: 40rem) { .intel-summary { flex-direction: column; align-items: flex-start; } }
.intel-index { flex: none; display: grid; place-items: center; align-content: center; width: 9.5rem; height: 9.5rem; border-radius: 50%;
  border: 8px solid currentColor; text-align: center; }
.intel-index__value { font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--app-heading); }
.intel-index__scale { font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.intel-index__band { margin-top: 2px; font-size: var(--cy-fs-small); font-weight: 600; }
.intel-summary__meta { min-width: 0; }
.intel-summary__meta .section-title { overflow-wrap: anywhere; }
.intel-summary__line { margin: 2px 0 0; font-size: var(--cy-fs-small); color: var(--app-text-2); }
.intel-warn { margin: var(--cy-space-2) 0 0; padding: var(--cy-space-2) var(--cy-space-3); font-size: var(--cy-fs-small); border-left: 3px solid #C77700;
  background: rgba(199, 119, 0, 0.1); border-radius: var(--cy-radius-sm); color: var(--app-text-2); }

/* bands: text colour on the score, fill on the bars; each band also carries a word or number, never colour alone */
.is-excellent { color: #1E7B4F; } .is-strong { color: #4D8B2A; } .is-moderate { color: #9A6B00; } .is-weak { color: #C2571A; } .is-poor { color: #B3261E; }
.is-none { color: var(--app-text-soft); }
.intel-chip.is-excellent, .intel-bar__fill.is-excellent { background: #1E7B4F; }
.intel-chip.is-strong, .intel-bar__fill.is-strong { background: #4D8B2A; }
.intel-chip.is-moderate, .intel-bar__fill.is-moderate { background: #B58100; }
.intel-chip.is-weak, .intel-bar__fill.is-weak { background: #C2571A; }
.intel-chip.is-poor, .intel-bar__fill.is-poor { background: #B3261E; }
:root[data-theme="dark"] .is-excellent { color: #5FD39A; } :root[data-theme="dark"] .is-strong { color: #9BD46A; }
:root[data-theme="dark"] .is-moderate { color: #F0C24F; } :root[data-theme="dark"] .is-weak { color: #F29A5C; } :root[data-theme="dark"] .is-poor { color: #FF8A80; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .is-excellent { color: #5FD39A; } :root:not([data-theme="light"]) .is-strong { color: #9BD46A; }
  :root:not([data-theme="light"]) .is-moderate { color: #F0C24F; } :root:not([data-theme="light"]) .is-weak { color: #F29A5C; }
  :root:not([data-theme="light"]) .is-poor { color: #FF8A80; }
}

.intel-map { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--cy-space-6); margin-top: var(--cy-space-3); }
@media (max-width: 64rem) { .intel-map { grid-template-columns: minmax(0, 1fr); } }
.intel-map__canvas { height: 34rem; }
@media (max-width: 40rem) { .intel-map__canvas { height: 22rem; } }
.intel-map .map-legend { margin-top: 0; }
.map-sym--plant, .map-badge--plant { background: #B8860B; color: #fff; border-radius: 3px; }
.map-sym--ix, .map-badge--ix { background: #0B6E99; color: #fff; border-radius: 50% 50% 3px 3px; }
.map-sym--firm { width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: #0F8B8D; border: 1px solid #fff; }

.intel-cats { display: flex; flex-direction: column; gap: 2px; margin-top: var(--cy-space-3); }
.intel-cat { border-bottom: 1px solid var(--app-border); }
.intel-cat__head { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem minmax(4rem, 12rem) 4.2rem; gap: var(--cy-space-3); align-items: center;
  padding: var(--cy-space-2) 0; cursor: pointer; list-style: none; }
.intel-cat__head::-webkit-details-marker { display: none; }
.intel-cat__label { font-weight: 600; color: var(--app-heading); }
.intel-cat__label::before { content: "▸"; display: inline-block; width: 1rem; color: var(--app-text-soft); transition: transform 0.15s; }
.intel-cat[open] .intel-cat__label::before { transform: rotate(90deg); }
.intel-cat__weight { font-size: var(--cy-fs-caption); color: var(--app-text-soft); text-align: right; }
.intel-cat__score { text-align: right; font-weight: 700; }
.intel-bar { height: 8px; border-radius: 4px; background: var(--app-surface-2); overflow: hidden; }
.intel-bar__fill { display: block; height: 100%; border-radius: 4px; }
@media (max-width: 34rem) { .intel-cat__head { grid-template-columns: minmax(0, 1fr) 3.6rem; } .intel-cat__weight, .intel-cat__head .intel-bar { display: none; } }
.intel-cat__body { padding: 0 0 var(--cy-space-3) 1rem; }
.intel-cat__note { margin: 0 0 var(--cy-space-2); font-size: var(--cy-fs-small); color: var(--app-text-2); }
.intel-proxy { margin-left: 6px; padding: 0 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--app-border-strong); border-radius: 3px; color: var(--app-text-soft); }
.intel-facts { margin: var(--cy-space-3) 0 0; display: grid; grid-template-columns: var(--intel-col) minmax(0, 1fr); gap: var(--cy-space-2) var(--cy-space-4);
  font-size: var(--cy-fs-small); }
.intel-facts dt { font-weight: 600; color: var(--app-heading); }
.intel-facts dd { margin: 0; color: var(--app-text-2); line-height: var(--cy-lh-body); overflow-wrap: anywhere; }
@media (max-width: 40rem) { .intel-facts { grid-template-columns: minmax(0, 1fr); } .intel-facts dd { margin-bottom: var(--cy-space-2); } }
.intel-indicators, .intel-basis { margin-top: var(--cy-space-4); font-size: var(--cy-fs-small); }
.intel-indicators summary, .intel-basis summary { cursor: pointer; font-weight: 600; color: var(--app-heading); }
.intel-sources { margin: var(--cy-space-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--cy-fs-small); }
.intel-src { display: grid; grid-template-columns: var(--intel-col) minmax(0, 1fr); column-gap: var(--cy-space-4); align-items: baseline; }
.intel-src__body { min-width: 0; overflow-wrap: anywhere; }
.intel-src__state { font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.intel-src.is-ok .intel-src__state::before { content: "✓ "; color: #2E8F63; }
.intel-src.is-failed .intel-src__state::before, .intel-src.is-no_data .intel-src__state::before { content: "– "; }
.intel-src__lic { color: var(--app-text-soft); }
@media (max-width: 40rem) { .intel-src { grid-template-columns: minmax(0, 1fr); } }
.map-sym--tapdot { width: 9px; height: 9px; margin: 0 3.5px; border-radius: 50%; background: #C8443D; border: 1px solid #fff; box-shadow: 0 0 0 1px #7a1f1a; }
/* chips carry their own text colour: the band classes would otherwise paint the text the same colour as the chip */
.intel-chip.intel-chip.intel-chip { color: #fff; }

/* Progress bar fixed to the bottom of the page while an assessment runs. */
.intel-pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--app-surface, #fff);
  border-top: 1px solid var(--app-border-strong); box-shadow: 0 -4px 16px rgba(16, 37, 66, 0.12);
  padding: var(--cy-space-3) 16px calc(var(--cy-space-3) + env(safe-area-inset-bottom, 0px)); }
.intel-pbar[hidden] { display: none; }
.intel-pbar__inner { max-width: 72rem; margin: 0 auto; }
.intel-pbar__text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--cy-space-4);
  font-size: var(--cy-fs-small); color: var(--app-heading); }
.intel-pbar__step { font-weight: 600; }
.intel-pbar__eta { color: var(--app-text-2); font-size: var(--cy-fs-caption); }
.intel-pbar__track { height: 8px; margin-top: 6px; border-radius: 4px; background: var(--app-surface-2); overflow: hidden; }
.intel-pbar__fill { display: block; height: 100%; width: 0; border-radius: 4px; transition: width 0.6s ease;
  background: linear-gradient(90deg, #3B74C4, #4FA3D9); }
.intel-pbar__now { margin: 4px 0 0; font-size: var(--cy-fs-caption); color: var(--app-text-soft); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .intel-pbar__fill { transition: none; } }
body.has-intel-pbar { padding-bottom: 6.5rem; }
.intel-cat__cols { cursor: default; padding-bottom: var(--cy-space-2); border-bottom: 1px solid var(--app-border-strong); }
.intel-cat__cols span { font-size: var(--cy-fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-text-soft); }
.intel-cat__cols .intel-cat__label::before { content: ""; }
@media (max-width: 34rem) { .intel-cat__cols .intel-bar-col { display: none; } }
/* Legend: one line per layer, the voltage key as an indented list under its row. */
.intel-map .map-legend__row span:not(.map-sym):not(.map-legend__count) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.intel-map .map-legend__lines { flex-direction: column; gap: 2px; padding-left: 2.8125rem; margin: 0 0 2px; }   /* under the label text */
/* the two expandable sections use the same marker as the category rows */
.intel-indicators > summary, .intel-basis > summary { list-style: none; }
.intel-indicators > summary::-webkit-details-marker, .intel-basis > summary::-webkit-details-marker { display: none; }
.intel-indicators > summary::before, .intel-basis > summary::before { content: "▸"; display: inline-block; width: 1rem; color: var(--app-text-soft); transition: transform 0.15s; }
.intel-indicators[open] > summary::before, .intel-basis[open] > summary::before { transform: rotate(90deg); }
/* Headlines behind the sentiment and acceptance figures */
.intel-headlines__group { margin: var(--cy-space-3) 0 var(--cy-space-1, 4px); font-weight: 600; color: var(--app-heading); }
.intel-headlines__list { margin: 0; padding: 0 0 0 1rem; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.intel-headlines__list li { line-height: var(--cy-lh-body); overflow-wrap: anywhere; }
.intel-headlines__meta { color: var(--app-text-soft); font-size: var(--cy-fs-caption); }
.intel-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 3px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 1px; border: 1px solid currentColor; }
.intel-tag--opposition, .intel-tag--negative { color: #B3261E; }
.intel-tag--positive { color: #1E7B4F; }
:root[data-theme="dark"] .intel-tag--opposition, :root[data-theme="dark"] .intel-tag--negative { color: #FF8A80; }
:root[data-theme="dark"] .intel-tag--positive { color: #5FD39A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .intel-tag--opposition, :root:not([data-theme="light"]) .intel-tag--negative { color: #FF8A80; }
  :root:not([data-theme="light"]) .intel-tag--positive { color: #5FD39A; }
}

/* ---------- Site intelligence: history sidebar, background indicator, PDF ---------- */
.intel-layout { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: var(--cy-space-6); align-items: start; }
.intel-main { min-width: 0; display: flex; flex-direction: column; gap: var(--cy-space-6); }
.intel-main > [hidden] { display: none; }
/* No inner scrollbar: the sidebar grows with its content and scrolls with the page. */
.intel-side { position: static; max-height: none; overflow: visible; display: flex; flex-direction: column; }
.intel-side__fold > summary { display: none; }
.intel-side__card { padding: var(--cy-space-4) var(--cy-space-4) var(--cy-space-3); }
.intel-side__title { margin-bottom: var(--cy-space-2); }
.intel-side__group { margin: var(--cy-space-3) 0 var(--cy-space-2); font-size: var(--cy-fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-text-soft); }
.intel-side__filter { margin: 0 0 var(--cy-space-2); padding: 0.45rem 0.7rem; font-size: var(--cy-fs-small); }
.intel-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.intel-side__item { display: flex; flex-direction: column; gap: 3px; padding: var(--cy-space-2) var(--cy-space-3); border-radius: var(--cy-radius-sm);
  text-decoration: none; color: var(--app-heading); border-left: 3px solid transparent; }
.intel-side__item:hover { background: var(--app-tint); }
.intel-side__item:focus-visible { outline: 2px solid var(--cy-primary, #1E6FE0); outline-offset: 1px; }
.intel-side__item[aria-current="page"] { background: var(--app-tint); border-left-color: var(--cy-primary, #1E6FE0); }
.intel-side__place { display: flex; align-items: center; gap: var(--cy-space-2); font-size: var(--cy-fs-small); font-weight: 600;
  overflow-wrap: anywhere; }
.intel-side__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--cy-space-2); font-size: var(--cy-fs-caption);
  color: var(--app-text-soft); }
.intel-side__pending { color: var(--app-text-soft); font-style: italic; }
.intel-src.is-pending .intel-src__state::before { content: "… "; color: var(--cy-primary, #1E6FE0); }
.intel-side__dot { flex: none; }
.intel-side__empty { margin: 0; font-size: var(--cy-fs-small); color: var(--app-text-2); }
@media (max-width: 64rem) {
  .intel-layout { grid-template-columns: minmax(0, 1fr); gap: var(--cy-space-4); }
  .intel-side { position: static; max-height: none; overflow: visible; }
  .intel-side__fold > summary { display: block; cursor: pointer; list-style: none; padding: var(--cy-space-3) var(--cy-space-4);
    border: 1px solid var(--app-border); border-radius: var(--cy-radius-md); background: var(--app-surface); font-weight: 600;
    color: var(--app-heading); }
  .intel-side__fold > summary::-webkit-details-marker { display: none; }
  .intel-side__fold > summary::before { content: "▸"; display: inline-block; width: 1rem; color: var(--app-text-soft); transition: transform 0.15s; }
  .intel-side__fold[open] > summary::before { transform: rotate(90deg); }
  .intel-side__fold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .intel-side__fold > .intel-side__card { border-top-left-radius: 0; border-top-right-radius: 0; max-height: 22rem; overflow: auto; }
}
/* the summary card gets its export button on the right */
.intel-summary__meta { flex: 1; }
.intel-summary__actions { flex: none; align-self: flex-start; }
@media (max-width: 40rem) { .intel-summary__actions { align-self: stretch; } .intel-summary__actions .cy-btn { width: 100%; } }
/* a dot on the nav link while an analysis runs in the background */
.app-nav__link.has-activity { position: relative; }
.app-nav__link.has-activity::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: #14B8E0; box-shadow: 0 0 0 2px var(--app-surface); animation: intel-pulse 1.6s ease-in-out infinite; }
@keyframes intel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .app-nav__link.has-activity::after { animation: none; } }
.intel-form .field__label { white-space: nowrap; }

/* Logos are tight-cropped vector files (about 2.3:1); size them by height only. */
.app-header__logo, .landing__logo, .signin__mark { width: auto; flex: none; }
.app-header__logo { height: 20px; }
.landing__logo { height: 22px; }
.signin__mark { height: 26px; }

/* Landing panel: eight capabilities in two columns on wide screens, one below. */
.landing__copy { max-width: 46rem; }
.landing__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cy-space-4) var(--cy-space-6); }
.landing__points svg { width: 2.1rem; height: 2.1rem; padding: 0.45rem; }
.landing__points li { gap: var(--cy-space-3); }
.landing__note { margin: var(--cy-space-6) 0 0; font-size: var(--cy-fs-caption); color: var(--cy-blue-100); opacity: 0.9; }
@media (max-width: 80rem) { .landing__points { grid-template-columns: minmax(0, 1fr); } }
/* keep the landing panel within one laptop screen */
.landing__story { gap: var(--cy-space-6); padding-top: var(--cy-space-6); padding-bottom: var(--cy-space-6); }
/* .landing qualifies the rule: the theme's .cy-root h1 would otherwise win */
.landing .landing__title { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin: var(--cy-space-2) 0 var(--cy-space-4); text-wrap: balance; }
.landing__points { margin-top: var(--cy-space-5, 1.25rem); gap: var(--cy-space-3) var(--cy-space-6); }
.landing__points span { display: block; line-height: 1.45; }
.landing__points strong { line-height: 1.3; margin-bottom: 2px; }
.landing__note { margin-top: var(--cy-space-4); }

/* ---------- Site intelligence: compare two locations ---------- */
.intel-compare__boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cy-space-4); margin-top: var(--cy-space-4); }
@media (max-width: 40rem) { .intel-compare__boxes { grid-template-columns: minmax(0, 1fr); } }
.intel-slot { min-height: 9.5rem; padding: var(--cy-space-4); border: 2px dashed var(--app-border-strong); border-radius: var(--cy-radius-md);
  background: var(--app-surface-2); display: flex; flex-direction: column; gap: var(--cy-space-2); transition: border-color 0.15s, background 0.15s; }
.intel-slot.is-filled { border-style: solid; border-color: var(--app-border); background: var(--app-surface); }
body.is-dragging-intel .intel-slot:not(.is-filled) { border-color: var(--cy-primary, #1E6FE0); }
.intel-slot.is-over { border-color: var(--cy-primary, #1E6FE0); border-style: solid; background: var(--app-tint); }
.intel-slot__label { margin: 0; font-size: var(--cy-fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-text-soft); }
.intel-slot__drop { margin: 0; font-size: var(--cy-fs-small); color: var(--app-text-2); }
.intel-slot__select { padding: 0.45rem 0.7rem; font-size: var(--cy-fs-small); }
.intel-slot__new { align-self: flex-start; }
.intel-slot__place { margin: 0; font-weight: 600; color: var(--app-heading); overflow-wrap: anywhere; }
.intel-slot__status { display: flex; flex-direction: column; gap: 6px; font-size: var(--cy-fs-small); color: var(--app-text-2); }
.intel-slot__status .intel-chip { align-self: flex-start; }
.intel-slot__bar { width: 100%; }
.intel-slot__fill { background: linear-gradient(90deg, #3B74C4, #4FA3D9); transition: width 0.6s ease; }
.intel-slot__remove { align-self: flex-start; margin-top: auto; }
.intel-slot__error { margin: 0; color: #B3261E; font-size: var(--cy-fs-small); }
.intel-slot__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cy-space-2) var(--cy-space-3); }
.intel-slot__form .field { margin: 0; }
.intel-slot__form .field__input { padding: 0.45rem 0.7rem; font-size: var(--cy-fs-small); }
.intel-slot__form .field:nth-child(3), .intel-slot__form .intel-slot__error, .intel-slot__formrow { grid-column: 1 / -1; }
.intel-slot__formrow { display: flex; gap: var(--cy-space-2); }
.intel-compare__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cy-space-3) var(--cy-space-4); margin-top: var(--cy-space-4); }
.intel-compare__actions .cy-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.intel-compare__hint { font-size: var(--cy-fs-small); color: var(--app-text-2); }
.intel-compare__option { display: flex; align-items: center; gap: var(--cy-space-2); margin-top: var(--cy-space-4); padding-top: var(--cy-space-4);
  border-top: 1px solid var(--app-border); font-size: var(--cy-fs-small); color: var(--app-heading); cursor: pointer; }
.intel-compare__option input { width: 16px; height: 16px; accent-color: var(--cy-primary); }
.intel-refdc { margin-top: var(--cy-space-4); padding: var(--cy-space-4); border: 1px solid var(--app-border); border-radius: var(--cy-radius-md);
  background: var(--app-surface); }
.intel-refdc .section-title { margin-top: 0; }

/* Projected implementation cost (compare view, standard floor plan only). */
.intel-cost .section-title { margin-top: 0; }
.intel-cost__warning { display: flex; gap: var(--cy-space-3); align-items: flex-start; margin: var(--cy-space-3) 0 var(--cy-space-4);
  padding: var(--cy-space-3) var(--cy-space-4); border: 1px solid #f59e0b; border-left-width: 4px; border-radius: var(--cy-radius-sm);
  background: #fff7e6; color: #5b3a00; font-size: var(--cy-fs-small); }
.intel-cost__warning p { margin: 0; }
.intel-cost__warning strong { color: #7a4a00; }
.intel-cost__warnicon { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #f59e0b; color: #fff; font-weight: 700; font-size: 14px; line-height: 1; }
:root[data-theme="dark"] .intel-cost__warning { background: rgba(245, 158, 11, 0.14); color: #fde7c0; }
:root[data-theme="dark"] .intel-cost__warning strong { color: #ffd58a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .intel-cost__warning { background: rgba(245, 158, 11, 0.14); color: #fde7c0; }
  :root:not([data-theme="light"]) .intel-cost__warning strong { color: #ffd58a; }
}
.intel-cost__val { display: inline-flex; flex-direction: column; gap: 2px; }
.intel-cost__line { display: inline-flex; align-items: center; gap: 6px; }
.intel-cost__eur { color: var(--app-heading); }
.intel-cost__local { font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.intel-cost__total .intel-cost__eur { font-size: 1.25rem; font-weight: 700; }
.intel-cost__total .is-lower .intel-cost__eur { color: var(--cy-success); }
.intel-cost__grid .is-excluded .intel-cost__eur { color: var(--app-text-soft); }
.intel-cost__diff { margin: var(--cy-space-3) 0 0; font-size: var(--cy-fs-small); color: var(--app-heading); font-weight: 600; }
.intel-info { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; flex: none;
  border: 1px solid var(--cy-primary); background: transparent; color: var(--cy-primary); cursor: pointer;
  font: italic 700 11px/1 Georgia, serif; }
.intel-info:hover, .intel-info:focus-visible { background: var(--cy-primary); color: var(--app-surface); outline: none; }
.intel-pop { position: fixed; inset: auto; margin: 0; max-height: min(70vh, 32rem); overflow: auto; padding: var(--cy-space-3) var(--cy-space-4);
  border: 1px solid var(--app-border-strong); border-radius: var(--cy-radius-md); background: var(--app-surface);
  color: var(--app-text-2); box-shadow: var(--cy-shadow-lg, 0 12px 32px rgba(10, 37, 64, 0.18)); font-size: var(--cy-fs-caption); }
.intel-pop__title { margin: 0 0 var(--cy-space-2); font-weight: 600; color: var(--app-heading); font-size: var(--cy-fs-small); }
.intel-pop__list { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }

/* 3D floor plan (js/dc3d.js): canvas with a side panel, stacked when narrow. */
.dc3d { container-type: inline-size; }
.dc3d__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cy-space-2) var(--cy-space-4); margin-bottom: var(--cy-space-3); }
.dc3d__btn { padding: 0.3rem 0.8rem; font-size: var(--cy-fs-caption); }
.dc3d__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cy-fs-caption); color: var(--app-text-2); cursor: pointer; }
.dc3d__toggle input { accent-color: var(--cy-primary); }
.dc3d__stage { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--cy-space-4); align-items: start; }
@container (max-width: 46rem) { .dc3d__stage { grid-template-columns: minmax(0, 1fr); } }
.dc3d__canvas { position: relative; min-width: 0; border: 1px solid var(--app-border); border-radius: var(--cy-radius-sm); overflow: hidden; }
.dc3d__canvas canvas { display: block; touch-action: none; }
.dc3d__canvas canvas:focus-visible { outline: 2px solid var(--cy-primary); outline-offset: -2px; }
.dc3d__tip { position: absolute; z-index: 2; pointer-events: none; padding: 4px 8px; border-radius: var(--cy-radius-sm); white-space: nowrap;
  font-size: var(--cy-fs-caption); background: var(--app-heading); color: var(--app-surface); }
.dc3d__side { font-size: var(--cy-fs-small); color: var(--app-text-2); }
.dc3d__title, .dc3d__pickname { margin: 0 0 var(--cy-space-2); font-weight: 600; color: var(--app-heading); }
.dc3d__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--cy-space-3); margin: 0 0 var(--cy-space-3); font-size: var(--cy-fs-caption); }
.dc3d__facts dt { color: var(--app-text-soft); }
.dc3d__facts dd { margin: 0; color: var(--app-heading); }
.dc3d__legend { list-style: none; margin: 0 0 var(--cy-space-3); padding: 0; display: grid; gap: 4px; font-size: var(--cy-fs-caption); }
.dc3d__legend li { display: flex; align-items: center; gap: 8px; }
.dc3d__swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.dc3d__picked { margin-bottom: var(--cy-space-3); padding: var(--cy-space-3); border-radius: var(--cy-radius-sm); background: var(--app-tint); }
.dc3d__hint { margin: 0 0 var(--cy-space-2); font-size: var(--cy-fs-caption); color: var(--app-text-soft); }

/* comparing: the history and the form step aside */
.intel-layout.is-comparing { grid-template-columns: minmax(0, 1fr); }
.intel-layout.is-comparing .intel-side,
.intel-layout.is-comparing .intel-main > .cy-card,
.intel-layout.is-comparing #intel-result,
.intel-layout.is-comparing #intel-progress { display: none; }
.intel-cmpview { display: flex; flex-direction: column; gap: var(--cy-space-6); }
.intel-cmpview[hidden] { display: none; }
.intel-cmpview__back { align-self: flex-start; margin-bottom: var(--cy-space-3); }
.intel-cmpview__head { display: flex; flex-direction: column; }
.intel-cmpview__summary { margin: var(--cy-space-2) 0 0; padding: var(--cy-space-3) var(--cy-space-4); background: var(--app-tint);
  border-left: 3px solid var(--cy-primary, #1E6FE0); border-radius: var(--cy-radius-sm); color: var(--app-heading); }

/* the like-for-like grid: label | location A | location B */
.intel-cmp { display: grid; grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); }
.intel-cmp__row { display: contents; }
.intel-cmp__row[hidden] { display: none; }
.intel-cmp__label, .intel-cmp__cell { padding: var(--cy-space-2) var(--cy-space-3); border-bottom: 1px solid var(--app-border);
  font-size: var(--cy-fs-small); line-height: var(--cy-lh-body); min-width: 0; overflow-wrap: anywhere; }
.intel-cmp__label { color: var(--app-heading); font-weight: 600; }
.intel-cmp__cell { color: var(--app-text-2); position: relative; }
.intel-cmp__cell.is-better { background: rgba(30, 123, 79, 0.07); }
.intel-cmp__better { display: inline-block; margin-left: var(--cy-space-2); padding: 0 6px; border-radius: 3px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: #1E7B4F; border: 1px solid currentColor; vertical-align: 1px; }
:root[data-theme="dark"] .intel-cmp__better { color: #5FD39A; }
:root[data-theme="dark"] .intel-cmp__cell.is-better { background: rgba(95, 211, 154, 0.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .intel-cmp__better { color: #5FD39A; }
  :root:not([data-theme="light"]) .intel-cmp__cell.is-better { background: rgba(95, 211, 154, 0.08); }
}
.intel-cmp__top .intel-cmp__label, .intel-cmp__top .intel-cmp__cell { border-bottom: 2px solid var(--app-border-strong); vertical-align: top; }
.intel-cmp__head { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.intel-cmp__head .section-title { margin: 0; }
.intel-index--small { width: 6.2rem; height: 6.2rem; border-width: 6px; margin: var(--cy-space-2) 0; }
.intel-index--small .intel-index__value { font-size: 1.7rem; }
.intel-cmp__section { display: contents; }
.intel-cmp__sectionhead { grid-column: 1 / -1; padding: var(--cy-space-5, 1.25rem) var(--cy-space-3) var(--cy-space-2); font-family: var(--cy-font-display);
  font-weight: 600; font-size: var(--cy-fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-text-soft);
  border-bottom: 1px solid var(--app-border-strong); }
.intel-cmp__score { display: flex; align-items: center; gap: var(--cy-space-3); }
.intel-cmp__score .intel-bar { flex: 1; max-width: 12rem; }
.intel-cmp__score .cy-mono { min-width: 3.5rem; font-weight: 700; }
.intel-cmp__toggle { display: flex; width: 100%; align-items: baseline; gap: var(--cy-space-2); padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--app-heading); text-align: left; }
.intel-cmp__toggle::before { content: "▸"; display: inline-block; width: 1rem; flex: none; color: var(--app-text-soft); transition: transform 0.15s; }
.intel-cmp__toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.intel-cmp__weight { margin-left: auto; font-size: var(--cy-fs-caption); font-weight: 400; color: var(--app-text-soft); }
.intel-cmp__mrow .intel-cmp__label { padding-left: 2.2rem; font-weight: 400; color: var(--app-text-2); }
.intel-cmp__mrow .intel-cmp__label, .intel-cmp__mrow .intel-cmp__cell { background: var(--app-surface-2); border-bottom-color: var(--app-border); }
.intel-cmp__mrow .intel-cmp__cell.is-better { background: rgba(30, 123, 79, 0.09); }
.intel-cmp__mval { display: flex; justify-content: space-between; gap: var(--cy-space-3); }
.intel-cmp__mval .cy-mono { font-weight: 700; }
.intel-cmp__map .intel-map { grid-template-columns: minmax(0, 1fr); gap: var(--cy-space-3); }
.intel-cmp__map .intel-map__canvas { height: 22rem; }
.intel-cmp__map .map-legend { font-size: 11px; }
.intel-cmp__maps .intel-cmp__label { border-bottom: 0; }
@media (max-width: 48rem) {
  .intel-cmp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .intel-cmp__label { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; }
  .intel-cmp__top .intel-cmp__label { display: none; }
  .intel-cmp__mrow .intel-cmp__label { padding-left: var(--cy-space-3); }
  .intel-cmp__score { flex-direction: column; align-items: flex-start; gap: 4px; }
  .intel-cmp__score .intel-bar { width: 100%; }
  .intel-cmp__mval { flex-direction: column; }
  .intel-cmp__map .intel-map__canvas { height: 16rem; }
}
/* the "Higher" tag sits on the score's line; weights never break */
.intel-cmp__cell { display: flex; align-items: center; gap: var(--cy-space-2); }
.intel-cmp__cell > .intel-cmp__score, .intel-cmp__cell > .intel-cmp__mval, .intel-cmp__cell > .intel-cmp__map, .intel-cmp__cell > .intel-cmp__head { flex: 1; min-width: 0; }
.intel-cmp__better { flex: none; margin-left: 0; }
.intel-cmp__weight { white-space: nowrap; }
.intel-cmp__top .intel-cmp__cell { align-items: flex-start; }
@media (max-width: 48rem) { .intel-cmp__cell { flex-wrap: wrap; } }
/* column headers: score circle and PDF button line up across the two locations */
.intel-cmp__top .intel-cmp__cell { align-items: stretch; }
.intel-cmp__head .intel-index--small { margin-top: auto; }
.intel-cmp__head .cy-btn { white-space: nowrap; }
@media (max-width: 48rem) {
  .intel-cmp__score .intel-bar { flex: none; width: 100%; height: 8px; }
  .intel-cmp__head .cy-btn { padding-inline: 0.9rem; }
}
@media (max-width: 48rem) {
  .intel-cmp__score { flex-direction: row; align-items: center; gap: var(--cy-space-2); width: 100%; }
  .intel-cmp__score .intel-bar { flex: 1 1 auto; width: auto; min-width: 3rem; max-width: none; }
  .intel-cmp__score .cy-mono { min-width: 0; }
}
.intel-cmp__score .cy-mono { white-space: nowrap; flex: none; }
@media (max-width: 48rem) { .intel-cmp__cell > .intel-cmp__score { flex: 1 1 100%; } }
@media (max-width: 48rem) { .intel-cmp__cell { align-items: flex-start; } }

/* ---------- Site intelligence: public map servers card (js/intel.js serversCard) ---------- */
.intel-servers { margin-top: var(--cy-space-4); padding: var(--cy-space-4); font-size: var(--cy-fs-small); }
.intel-servers__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--cy-space-2); cursor: pointer; list-style: none; }
.intel-servers__summary::-webkit-details-marker { display: none; }
.intel-servers__summary .cy-eyebrow { margin: 0; white-space: nowrap; }
.intel-servers__badge { font-size: var(--cy-fs-caption); font-weight: 600; padding: 2px 8px; border-radius: var(--cy-radius-pill);
  color: #1F7A4D; background: color-mix(in srgb, #2E9E6A 14%, transparent); white-space: nowrap; }
.intel-servers__badge.is-busy { color: #8A5A00; background: color-mix(in srgb, #E0A21B 20%, transparent); }
.intel-servers__now { margin: var(--cy-space-3) 0 0; line-height: 1.45; color: var(--app-text); }
.intel-servers__label { margin: var(--cy-space-3) 0 var(--cy-space-1); font-size: var(--cy-fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--app-text-soft); }
.intel-servers__count { margin: 0; color: var(--app-heading); }
.intel-servers__bar { height: 6px; margin: 6px 0 4px; border-radius: 3px; background: var(--app-border); overflow: hidden; }
.intel-servers__bar > span { display: block; height: 100%; border-radius: 3px; background: var(--cy-primary); transition: width .4s ease; }
.intel-servers__hint { margin: 4px 0 0; font-size: var(--cy-fs-caption); line-height: 1.4; color: var(--app-text-soft); }
.intel-servers__jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.intel-servers__jobs li { display: flex; flex-direction: column; }
.intel-servers__jobs a { color: var(--app-heading); font-weight: 600; text-decoration: none; }
.intel-servers__jobs a:hover { text-decoration: underline; }
.intel-servers__meta { font-size: var(--cy-fs-caption); color: var(--app-text-soft); }
.intel-servers__summary { position: relative; }
.intel-servers__chev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--app-text-soft); stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .2s ease; }
.intel-servers[open] > .intel-servers__summary .intel-servers__chev,
.intel-servers__fold[open] > .intel-servers__foldsum .intel-servers__chev { transform: rotate(180deg); }
.intel-servers__summary .intel-servers__badge { margin-left: auto; }
.intel-servers__fold { margin-top: var(--cy-space-3); padding-top: var(--cy-space-3); border-top: 1px solid var(--app-border); }
.intel-servers__foldsum { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: var(--cy-fs-caption);
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--app-text-soft); }
.intel-servers__foldsum::-webkit-details-marker { display: none; }
.intel-servers__dots { margin-left: auto; display: inline-flex; gap: 4px; }
.intel-servers__dotchip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px; border-radius: var(--cy-radius-pill);
  font-size: var(--cy-fs-caption); font-weight: 600; letter-spacing: 0; color: var(--st); background: var(--st-bg); }
.intel-servers__dotic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.intel-servers__list { list-style: none; margin: var(--cy-space-3) 0 0; padding: 0; display: grid; gap: var(--cy-space-2); }

/* One inner card per server; the colour and icon say the state, the label says it in words. */
.intel-server, .intel-servers__dotchip { --st: #6B7787; --st-bg: color-mix(in srgb, #8C98A8 14%, transparent); }
:is(.intel-server, .intel-servers__dotchip).is-ok { --st: #1F7A4D; --st-bg: color-mix(in srgb, #2E9E6A 14%, transparent); }
:is(.intel-server, .intel-servers__dotchip).is-working { --st: var(--cy-primary); --st-bg: color-mix(in srgb, var(--cy-primary) 14%, transparent); }
:is(.intel-server, .intel-servers__dotchip).is-busy { --st: #8A5A00; --st-bg: color-mix(in srgb, #E0A21B 18%, transparent); }
:is(.intel-server, .intel-servers__dotchip).is-error { --st: #B3261E; --st-bg: color-mix(in srgb, #D2453A 14%, transparent); }
.intel-server { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 10px 10px 12px;
  border: 1px solid var(--app-border); border-left: 4px solid var(--st); border-radius: var(--cy-radius-md); background: var(--st-bg); }
.intel-server__head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.intel-server__kind { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: var(--app-surface); border: 1px solid var(--app-border); }
.intel-server__kindic { width: 15px; height: 15px; fill: none; stroke: var(--app-text-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.intel-server__title { display: flex; flex-direction: column; min-width: 0; }
.intel-server__name { font-weight: 600; color: var(--app-heading); line-height: 1.25; }
.intel-server__host { font-size: var(--cy-fs-caption); color: var(--app-text-soft); overflow-wrap: anywhere; }
.intel-server__state { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 6px;
  border-radius: var(--cy-radius-pill); font-size: var(--cy-fs-caption); font-weight: 600; color: var(--st);
  background: var(--app-surface); border: 1px solid color-mix(in srgb, var(--st) 45%, transparent); }
.intel-server__stateic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intel-server.is-working .intel-server__stateic { animation: intel-spin 1.1s linear infinite; }
@keyframes intel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .intel-server.is-working .intel-server__stateic { animation: none; } }
.intel-server__role, .intel-server__facts { margin: 0; font-size: var(--cy-fs-caption); line-height: 1.4; color: var(--app-text-soft); }
.intel-server__facts { color: var(--app-text); overflow-wrap: anywhere; }
:root[data-theme="dark"] .intel-servers__badge { color: #7FD8A9; }
:root[data-theme="dark"] .intel-servers__badge.is-busy { color: #F2C35B; }
:root[data-theme="dark"] :is(.intel-server, .intel-servers__dotchip).is-ok { --st: #7FD8A9; } :root[data-theme="dark"] :is(.intel-server, .intel-servers__dotchip).is-busy { --st: #F2C35B; }
:root[data-theme="dark"] :is(.intel-server, .intel-servers__dotchip).is-error { --st: #FF8A80; } :root[data-theme="dark"] .intel-server.is-unused, :root[data-theme="dark"] .intel-servers__dotchip.is-unused { --st: #A9B4C2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .intel-servers__badge { color: #7FD8A9; }
  :root:not([data-theme="light"]) .intel-servers__badge.is-busy { color: #F2C35B; }
  :root:not([data-theme="light"]) :is(.intel-server, .intel-servers__dotchip).is-ok { --st: #7FD8A9; } :root:not([data-theme="light"]) :is(.intel-server, .intel-servers__dotchip).is-busy { --st: #F2C35B; }
  :root:not([data-theme="light"]) :is(.intel-server, .intel-servers__dotchip).is-error { --st: #FF8A80; }
  :root:not([data-theme="light"]) .intel-server.is-unused, :root:not([data-theme="light"]) .intel-servers__dotchip.is-unused { --st: #A9B4C2; }
}

/* ---------- Site intelligence: refresh / delete a history entry ---------- */
.intel-side__list > li { position: relative; }
.intel-side__actions { position: absolute; top: 6px; right: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s ease; }
.intel-side__list > li:hover .intel-side__actions, .intel-side__actions:focus-within { opacity: 1; }
@media (hover: none) { .intel-side__actions { opacity: 1; } }
.intel-side__list > li:has(.intel-side__actions) > .intel-side__item { padding-right: 60px; }
.intel-hact { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--app-border);
  border-radius: 7px; background: var(--app-surface); color: var(--app-text-soft); cursor: pointer; }
.intel-hact:hover { color: var(--cy-primary); border-color: var(--cy-primary); }
.intel-hact.is-delete:hover { color: #B3261E; border-color: #D2453A; }
.intel-hact:focus-visible { outline: 2px solid var(--cy-primary); outline-offset: 1px; }
.intel-hact:disabled { opacity: .5; cursor: progress; }
.intel-hact__ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intel-summary__actions { display: flex; flex-direction: column; gap: var(--cy-space-2); }
.intel-delete-btn:hover { color: #B3261E; border-color: #D2453A; }
:root[data-theme="dark"] .intel-hact.is-delete:hover, :root[data-theme="dark"] .intel-delete-btn:hover { color: #FF8A80; border-color: #FF8A80; }