/* ═══════════════════════════════════════════════════════════════════════════
   V11: the studio's visual overhaul (20 October 2026).

   The customer's verdict on V9: "everything looks the same as before". V9 and
   V10 added function under an unchanged V7 skin. This layer is the skin, and
   it is loaded last so it wins wherever it meets an earlier rule.

   The language is the one the owner has endorsed on the sibling products:
     - a near-black, neutral ground, not navy;
     - hairline lattices instead of floating rounded cards;
     - large, light display type that tightens as it grows;
     - white primary buttons; cyan only as a signal, never a glow;
     - no gradient text, no pill badges, no drop shadows.
   Colour meanings (peak / standard / off-peak, loss / gain) are untouched.
═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg-deep: #040506;
  --bg-surface: #08090b;
  --bg-surface-2: #0c0e11;
  --bg-surface-3: #12151a;
  --bg-elevated: #181c22;

  --text: #f3f5f7;
  --text-dim: #c6ccd4;
  --text-secondary: #8d95a1;
  --text-muted: #8d95a1;
  --text-faint: #7b8390;

  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.07);
  --border-neon: rgba(255, 255, 255, 0.22);

  --v7-surface: #08090b;
  --v7-surface-flat: #08090b;
  --v7-line: rgba(255, 255, 255, 0.075);
  --v7-line-strong: rgba(255, 255, 255, 0.14);
  --v7-hi: none;
  --v7-radius: 12px;
  --v7-radius-sm: 8px;
  --v7-max: 1240px;
  --v7-fs-h1: clamp(30px, 2.9vw, 44px);
  --v7-fs-kpi: clamp(24px, 2.05vw, 32px);

  --shadow-neon: none;
  --plasma-glow: transparent;

  --w-rail: 232px;
  --h-header: 60px;

  --ink: #f3f5f7;           /* the white of a primary button */
  --ink-text: #05070a;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.14);
}

html, body { background: var(--bg-deep); }
.app-center, .stage { background: var(--bg-deep); }
::selection { background: rgba(60, 204, 252, 0.28); color: #fff; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  border-radius: 8px;
  box-shadow: none;
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.btn:hover:not(:disabled) { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); }
.btn-primary,
.v7-btn.is-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-text);
  box-shadow: none;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled),
.v7-btn.is-primary:hover:not(:disabled) { background: #ffffff; border-color: #ffffff; color: var(--ink-text); transform: none; box-shadow: none; }
.btn-primary:disabled { background: rgba(255, 255, 255, 0.06); border-color: var(--line); color: var(--text-faint); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.v7-btn { border-radius: 8px; box-shadow: none; }

/* ── Shell: the sidebar ──────────────────────────────────────────────────── */

.app-shell { grid-template-areas: 'rail header header header' 'rail left center right'; }

.app-rail {
  align-items: stretch;
  gap: 0;
  padding: 0 12px 16px;
  background: #060709;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-width: none;
}
.rail-mark.lockup-mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  height: var(--h-header);
  padding: 0 6px;
  margin: 0 -12px 14px;
  padding-left: 18px;
  border-bottom: 1px solid var(--line);
}
.rail-mark.lockup-mark img { width: 26px; height: 26px; }
.rail-word { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rail-word b {
  font: 500 14px/1 var(--font-heading);
  letter-spacing: 0.32em;
  color: var(--text);
}
.rail-word s {
  text-decoration: none;
  font: 400 12px/1 var(--font-body);
  color: var(--text-secondary);
}

.rail-items { gap: 2px; }
.rail-group {
  margin: 18px 10px 8px;
  font: 500 11.5px/1.3 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rail-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: start;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
  font: 500 14px/1.3 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  background: none;
}
.rail-item-l {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  letter-spacing: 0;
}
.rail-item svg { width: 18px; height: 18px; flex: none; stroke-width: 1.5; filter: none; }
.rail-item:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.rail-item::before {
  left: -12px;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--cyan);
}
.rail-item[aria-current='page'] { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.rail-item[aria-current='page'] .rail-item-l { color: var(--text); font-weight: 600; letter-spacing: 0; }
.rail-item[aria-current='page'] svg { stroke-width: 1.7; filter: none; color: var(--cyan); stroke: var(--cyan); }
.rail-item[data-related] { background: rgba(255, 255, 255, 0.025); }

/* The step number sits at the row's end: hollow until the step has
 * something on it, then filled. The current step is ringed. */
.rail-step {
  position: static;
  flex: none;
  order: 3;
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  font: 600 11px/1 var(--font-body);
  color: var(--text-faint);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.rail-item[data-has] .rail-step { background: rgba(60, 204, 252, 0.12); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(60, 204, 252, 0.45); }
.rail-item[aria-current='page'] .rail-step { box-shadow: inset 0 0 0 1px var(--cyan); color: var(--cyan); }
/* The stepper's thread: a hairline joining the numbered rows. */
.rail-item[data-step]:not([data-step='7']) .rail-step::after {
  content: '';
  position: absolute;
  right: 20px;
  top: calc(50% + 13px);
  height: calc(100% - 22px);
  width: 1px;
  background: var(--line);
}
.rail-item[data-step] { position: relative; }
/* Summary keeps its "has data" dot, now at the row's end. */
.rail-item[data-has]:not([data-step])::after {
  top: 50%;
  left: auto;
  right: 18px;
  margin-top: -3px;
  box-shadow: none;
}

/* ── Shell: the header ───────────────────────────────────────────────────── */

.app-header {
  background: rgba(4, 5, 6, 0.92);
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(16px, 2vw, 28px);
}
/* The sidebar carries the lockup on wide screens. */
.app-header .hdr-lockup { display: none; }
.hdr-project { font-size: 14px; }
.hdr-part-name { font-weight: 600; }
.hdr-kpis { border-left: 0; padding-left: 0; gap: 4px; }
.kpi {
  border-left: 0;
  padding: 6px 14px;
  border-radius: 8px;
}
.kpi + .kpi { box-shadow: -1px 0 0 0 var(--line); border-radius: 0; }
.kpi > span { font-size: 11.5px; color: var(--text-faint); }
.kpi b { font: 500 16px/1.25 var(--font-heading); }
#kpi-saving:not(.is-empty) { color: var(--cyan); }
.hdr-kpis .kpi { flex: none; }
/* Before a project there are no figures; four dashes are noise. */
.app-header:has(#hdr-project-empty:not([hidden])) .hdr-kpis { display: none; }
/* The sidebar takes 232 px, so the header gives up figures earlier than V7
 * did: Solar first, then the battery; the screen behind carries both. */
@media (max-width: 1640px) { .hdr-kpis .kpi:nth-child(4) { display: none; } }
@media (max-width: 1500px) { .hdr-kpis .kpi:nth-child(3) { display: none; } }
@media (max-width: 1500px) and (min-width: 1281px) {
  .hdr-actions #btn-assumptions, .hdr-actions #btn-tour { padding: 0 10px; }
}
.hdr-actions .btn-sm { border-radius: 8px; height: 36px; }
.hdr-actions .btn-ghost { border-color: transparent; color: var(--text-dim); }
.hdr-actions .btn-ghost:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text); }
.hdr-busy::after { background: var(--cyan); }

/* ── The V7 kit, re-skinned: every screen uses it ────────────────────────── */

.v7-page { gap: 48px; padding-top: 40px; }
.stage > .v7-page { padding-top: 40px; }

.v7-eyebrow-row { gap: 10px; margin-bottom: 18px; }
.v7-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}
.v7-eyebrow::before {
  content: '';
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--cyan);
}
.v7-answer {
  font: 300 var(--v7-fs-h1)/1.14 var(--font-heading);
  letter-spacing: -0.022em;
  color: var(--text);
  max-width: 22ch;
}
.v7-head-main { max-width: 900px; }
.v7-lede { font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); margin-top: 18px; }

/* Figures: solid cyan, never gradient text. */
.v7-fig { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--cyan); font-weight: 400; }
.v7-fig.is-plain { color: var(--text); }
.v7-fig.is-loss { color: var(--loss); }

/* KPIs: one lattice, cells divided by hairlines (the gap shows the line). */
.v7-kpis {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--v7-radius);
  overflow: hidden;
}
.v7-kpi {
  border: 0;
  border-radius: 0;
  background: var(--bg-deep);
  box-shadow: none;
  padding: 22px 24px 24px;
}
.v7-kpi-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.v7-kpi-value { font-weight: 300; letter-spacing: -0.02em; }
.v7-kpi-sub { color: var(--text-faint); }
.v7-kpi:first-child .v7-kpi-value { color: var(--cyan); }
.v7-kpi.is-primary { background: var(--bg-surface-2); border: 0; }
.v7-card.is-selected { background: rgba(60, 204, 252, 0.05); border-color: rgba(60, 204, 252, 0.45); }

/* Stats, cards, charts, sections: flat surfaces on hairlines. */
.v7-card,
.v7-chart,
.v7-callout,
.v7-drawer,
.v7-table-wrap,
.v7-empty {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--v7-radius);
  box-shadow: none;
}
.v7-chart-title, .v7-h2 { font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.v7-h2 { font: 400 22px/1.3 var(--font-heading); }
.v7-chart-sub, .v7-chart-source { color: var(--text-faint); }
.v7-section-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; }

/* Tags, not pills: square-cornered, a dot for the state. */
.v7-pill {
  border-radius: 6px;
  padding: 5px 10px 5px 9px;
  gap: 7px;
  font: 500 12px/1.2 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  box-shadow: none;
}
.v7-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.v7-pill.is-good { color: var(--cyan); background: rgba(60, 204, 252, 0.06); border-color: rgba(60, 204, 252, 0.3); }
.v7-pill.is-good, .v7-pill.is-info, .v7-pill.is-indicative, .v7-pill.is-loss, .v7-pill.is-warn { display: inline-flex; align-items: center; }

/* Segmented controls and tabs: underline, not pill. */
.v7-seg { border-radius: 8px; background: var(--bg-surface); border-color: var(--line); }
.v7-seg-btn { border-radius: 6px; }

/* Inputs */
.v7-input, .v7-select, .v7-input-wrap { border-radius: 8px; background: var(--bg-surface); border-color: var(--line-strong); }

/* Tables */
.v7-table th { color: var(--text-faint); font-weight: 500; }
.v7-table td, .v7-table th { border-color: var(--line); }

/* ── The Business case tabs ──────────────────────────────────────────────── */

.cs-nav {
  background: rgba(4, 5, 6, 0.94);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.cs-tab {
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: inset 0 -2px 0 transparent;
  color: var(--text-secondary);
  font-weight: 500;
}
.cs-tab:hover { color: var(--text); background: none; }
.cs-tab[aria-selected='true'] { color: var(--text); background: none; box-shadow: inset 0 -2px 0 var(--cyan); }

/* ── Worked-example cards (Start and the empty screens) ──────────────────── */

.v7-examples { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--v7-radius); overflow: hidden; }
.v7-example {
  border: 0;
  border-radius: 0;
  background: var(--bg-deep);
  box-shadow: none;
  padding: 20px 22px;
  transition: background 140ms ease;
}
.v7-example:hover { background: var(--bg-surface-2); transform: none; border: 0; }
.v7-example-kicker { color: var(--text-faint); font-weight: 500; }
.v7-example-name { font: 400 17px/1.3 var(--font-heading); color: var(--text); }
.v7-example-bill { color: var(--text-dim); }

/* ── The tour and the palette, on the new ground ─────────────────────────── */

.tour-bar { background: #0b0d10; border-color: var(--line-strong); }
.tour-btn-primary { background: var(--ink); color: var(--ink-text); }
.tour-btn-primary:hover { background: #fff; }
.tour-progress i { background: var(--cyan); }
.tour-ring { box-shadow: 0 0 0 200vmax rgba(2, 3, 4, 0.66); }

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive. Below 1280 the sidebar folds to icons; below 600 it becomes
   the existing top row (app.css), which this layer leaves alone.
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1280px) and (min-width: 601px) {
  :root { --w-rail: 72px; }
  .app-rail { padding: 0 8px 12px; }
  .rail-mark.lockup-mark { justify-content: center; padding: 0; margin: 0 -8px 12px; }
  .rail-word, .rail-group, .rail-item-l { display: none; }
  .rail-item { justify-content: center; padding: 11px 0; }
  .rail-item::before { left: -8px; }
  .rail-step {
    position: absolute;
    top: 4px;
    left: auto;
    right: 8px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    font-size: 9.5px;
    background: var(--bg-deep);
  }
  .rail-item[data-step]:not([data-step='7']) .rail-step::after { display: none; }
  .rail-item[data-has]:not([data-step])::after { right: 10px; top: 10px; margin-top: 0; }
}

@media (max-width: 600px) {
  .app-header .hdr-lockup { display: flex; }
  .rail-group, .rail-word { display: none; }
  .rail-mark.lockup-mark { display: none; }
  .app-rail { padding: 4px 12px; background: var(--bg-deep); }
  .rail-item { width: auto; padding: 8px 9px; }
  .rail-item::before { display: none; }
  .rail-step { display: none; }
  .rail-item[aria-current='page'] { background: rgba(255, 255, 255, 0.06); }
}

/* ── Screen sheets that set their own type or tabs ───────────────────────── */

.cs-tab.is-on { color: var(--text); background: none; border-color: transparent; box-shadow: inset 0 -2px 0 var(--cyan); }
.cs-nav { padding-top: 6px; padding-bottom: 0; }
.cs-nav-list { gap: 2px; }
.cs-tab { padding: 14px 14px 15px; }
.cs-hero .v7-answer { font-size: var(--v7-fs-h1); font-weight: 300; line-height: 1.14; letter-spacing: -0.022em; }
.cs-hero { border-bottom-color: var(--line); }
.cs-step { border-top-color: var(--line); }
.v7-chart-title { font-weight: 400; font-size: 18px; }
@media (max-width: 700px) {
  .cs-hero .v7-answer, .v7-answer { font-size: 27px; }
  .cs-tab { padding: 12px 10px 13px; }
}

/* ── The 3D view's overlay, on V11 ───────────────────────────────────────── */

.case-hud {
  background: rgba(8, 9, 11, 0.86);
  border-color: var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}
.ch-answer-head { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.ch-answer-t { font-weight: 400; font-size: 18px; letter-spacing: -0.01em; }
.ch-pill {
  text-transform: none;
  letter-spacing: 0;
  border-radius: 6px;
  font-weight: 500;
  font-size: 11.5px;
}
.ch-pill.is-good { background: rgba(60, 204, 252, 0.08); color: var(--cyan); border-color: rgba(60, 204, 252, 0.32); }
.ch-bar-lab { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ch-bar-num { font: 500 12.5px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.ch-bar-fill.is-after { background: var(--cyan); }
.ch-cta {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
}
.ch-cta:hover { background: #fff; }
.a3d-play { background: var(--ink); color: var(--ink-text); box-shadow: none; }
.a3d-view.is-on { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* "Back to site": the last item on the right of the header, set off by a hairline so it reads as leaving the Studio.
   The action group packs right: before a project the KPIs are hidden and the group fills the free column. */
.hdr-actions { justify-content: flex-end; }
.hdr-actions .hdr-back { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; position: relative; text-decoration: none; white-space: nowrap; }
.hdr-actions .hdr-back::before { content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 1px; background: var(--line-strong); }
.hdr-actions .hdr-back svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 1100px) {
  .hdr-actions .hdr-back { width: 34px; padding: 0; justify-content: center; }
  .hdr-actions .hdr-back span { display: none; }
}
/* On a phone the wordmark and four header buttons do not fit side by side (the buttons ran over "AMPROTEQ"): keep the mark only. */
@media (max-width: 520px) {
  .hdr-lockup b { display: none; }
}
/* "Back to site" took ~115 px from the figures, and the buttons slid over Payback and Battery at every laptop width
   (the figures' column was 18 px at 1366). The buttons give way first: the palette keeps only its key, then "How it
   works" becomes "?", then Assumptions "i"; the fourth figure goes earlier. */
@media (max-width: 1920px) { .hdr-palette-l { display: none; } }
@media (max-width: 1800px) { .hdr-kpis .kpi:nth-child(4) { display: none; } }
@media (max-width: 1580px) { .hdr-kpis .kpi:nth-child(3) { display: none; } }
@media (max-width: 1340px) {
  .hdr-actions .hdr-back { width: 34px; padding: 0; justify-content: center; }
  .hdr-actions .hdr-back span { display: none; }
}
/* Ctrl + K and "/" still open the palette. */
@media (max-width: 1080px) { .hdr-palette { display: none; } }
@media (max-width: 1760px) {
  .hdr-actions #btn-tour { width: 34px; padding: 0; font-size: 0; justify-content: center; }
  .hdr-actions #btn-tour::before { content: "?"; font: 600 15px/1 var(--font-heading); color: var(--text-dim); }
}
@media (max-width: 1400px) {
  .hdr-actions #btn-assumptions { width: 34px; padding: 0; font-size: 0; justify-content: center; }
  .hdr-actions #btn-assumptions::before { content: "i"; font: 600 15px/1 var(--font-heading); color: var(--text-dim); }
}