/* ========================================
   Neighbourhood Design Interface - Styles
   ======================================== */

/* DBG-048, 2026-08-24. The two faces are served from this repository, not
   from Google. What was here before was a single @import of
   fonts.googleapis.com, and it sat three thousand lines down, after the
   first rule. CSS ignores an @import that follows a rule, so it never
   loaded: every page had been rendering in the sans-serif fallback. Moving
   it up would have fixed the loading and kept the external call, so both
   were dealt with at once. The files are the variable woff2 Google itself
   serves, taken byte for byte, latin and latin-ext only. Both faces are
   SIL Open Font License 1.1, which allows redistribution. See
   vendor/fonts/README.md. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* CSS Variables - Design Tokens */
:root {
  /* Colors - Light Theme */
  --bg-primary: #FAFAFA;
  --bg-secondary: #F1F2F4;
  --bg-card: rgba(255, 255, 255, 0.98);
  --text-primary: #1a1a2e;
  --text-secondary: #5c6370;
  --accent-gradient: linear-gradient(135deg, #F5C400 0%, #C93D0A 100%);
  --accent-gold: #F5C400;
  --accent-amber: #E8860A;          /* alias of --usage-color */
  --accent-burnt: #C93D0A;
  --bg-inactive-tile: #F1F2F4;       /* cool light-gray; reserved for explicit inactive-variant modifier */
  --border-subtle: rgba(0, 0, 0, 0.08);

  /* Banner Bar Tokens */
  --banner-gradient-warm: linear-gradient(90deg, #F5C400 0%, #E8860A 50%, #C93D0A 100%);
  --banner-infra: #4A4E57;
  --banner-emphasis: #C93D0A;
  --banner-mobility: linear-gradient(90deg, #8AA88A 0%, #E8860A 70%, #C93D0A 100%);
  --banner-green: #8AA88A;
  --banner-text: #FFFFFF;
  --accent-teal: #6BA8B8;
  --accent-sage: #8AA88A;

  /* Parameter Button Colors - Adjusted for light theme */
  --usage-color: #E8860A;
  --usage-bg: rgba(232, 134, 10, 0.1);
  --usage-active: rgba(232, 134, 10, 0.25);

  --context-color: #e11d48;
  --context-bg: rgba(225, 29, 72, 0.1);
  --context-active: rgba(225, 29, 72, 0.25);

  --diversity-color: #16a34a;
  --diversity-bg: rgba(22, 163, 74, 0.1);
  --diversity-active: rgba(22, 163, 74, 0.25);

  --density-color: #ea580c;
  --density-bg: rgba(234, 88, 12, 0.1);
  --density-active: rgba(234, 88, 12, 0.25);

  --layout-color: #0284c7;
  --layout-bg: rgba(2, 132, 199, 0.1);
  --layout-active: rgba(2, 132, 199, 0.25);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', var(--font-primary);
  /* KORAL, 2026-08-17. --font-body was asked for by eight rules and defined by
     none of them, so `font-family: var(--font-body)` was an invalid value and
     every one of those rules silently fell back to inheritance. It happened to
     land on --font-primary through body, so nothing looked wrong, but the token
     was dead and any element whose parent set --font-display would have taken
     the display face instead. It is the reading face, and it is the one face
     the explanation boxes use. */
  --font-body: var(--font-primary);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Shadows - Adjusted for light theme */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 30px rgba(232, 134, 10, 0.2);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

/* Typography */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.25rem;
}


/* ========================================
   Zero Page Styles: Ahmed
   ======================================== */


.welcome-title {
    font-family: var(--font-display);
    font-size: 2.25rem;
    color: var(--usage-color);
    margin-bottom: 0.25rem;
}

/* CHV, 2026-08-24. The reference case chooser. It is the same .info-box every
   other explanation on the site uses; only the radio row needs its own layout,
   so nothing here restyles the box itself. */
.reference-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0.5rem 0;
}

.reference-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
}

.reference-option input {
    cursor: pointer;
}

/* CHV, 2026-08-24. LMN V1 is the main title and the full product name sits
   directly under it, above the description. */
.welcome-lede {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 0 auto 0.5rem auto;
}

.welcome-tagline {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 auto 0.5rem auto;
}

.welcome-subtitle {
    color: var(--text-secondary);
    max-width: 760px;
    margin: 0 auto 0.5rem auto;
    font-size: 0.95rem;
}

/* "Start From" / label override */
.initial-label {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: none;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.initial-btn {
    background: var(--bg-card);
    color: var(--text-primary);
}

    .initial-btn .initial-btn-img {
        width: 300px; /* image width */
        height: 200px; /* image height */
        object-fit: contain;
        border-radius: var(--radius-sm);
        transition: transform var(--transition-normal);
        display: block;
    }

    .initial-btn span {
        display: block;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 600;
        color: var(--usage-color);
        text-transform: none;
        margin-top: 0.125rem;
    }

    /* keep hover/active behavior */
    .initial-btn:hover {
        background: var(--usage-active);
        transform: translateY(-3px);
        box-shadow: var(--shadow-glow);
        border-color: var(--usage-color);
    }

    .initial-btn.active,
    .initial-btn.usage.active {
        background: rgba(245, 196, 0, 0.30);
        border-color: #E8860A;
        box-shadow: 0 0 20px rgba(232, 134, 10, 0.35);
    }

/* Responsive: scale initial buttons on narrow screens */
@media (max-width: 768px) {
    .initial-btn {
        width: 140px;
        min-height: auto;
        padding: 0.5rem;
    }

        .initial-btn .initial-btn-img {
            width: 120px;
            height: 80px;
        }

        .initial-btn span {
            font-size: 0.9rem;
        }
}


/* ========================================
   Welcome Page Styles
   ======================================== */

/* Header - Compact */
.header {
  text-align: center;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
  background: transparent;
}

/* ── Title decoration: dark bold uppercase flanked by orange rules (titles.png) ── */
.header h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  /* Remove old gradient clip-text */
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  margin-bottom: 0.25rem;
}

.header h1::before,
.header h1::after {
  content: '';
  flex: 1;
  max-width: 72px;
  height: 2px;
  background: var(--accent-burnt);
  border-radius: 1px;
}

.header p {
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
  font-size: 0.9rem;
}

/* Main Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.container-wide {
  max-width: 1400px;
}

/* Parameters Section - Compact */
.parameters-section {
  padding: var(--spacing-sm) 0;
}

.parameter-group {
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.parameter-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  text-align: center;
}

.parameter-description {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: -2px;
  margin-bottom: var(--spacing-sm);
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}

.parameter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center;
}

/* Usage Image Cards - Compact */
.usage-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.usage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
  width: 140px;
}

.usage-card img {
  width: 120px;
  height: 70px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-normal);
}

.usage-card:hover img,
.context-card:hover img,
.layout-card:hover img,
.density-card:hover img,
.envelope-card:hover img {
  box-shadow: 0 0 20px rgba(107, 168, 184, 0.35);
}

.usage-card span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  text-transform: capitalize;
}

.usage-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
  border-color: var(--usage-color);
}

.usage-card:hover img {
  transform: scale(1.02);
}

/* The parameter cards keep the tinted fill. The frame treatment was tried on
   2026-08-14 and reverted the same day on Koral's reading: on this page the
   fill is the better drawing. The framed selection stays on the neighbourhood
   table, where the cell holds a photograph and white icon tiles. */
.usage-card.active {
  border: 2px solid #E8860A;
  background: rgba(245, 196, 0, 0.35);
  box-shadow: 0 0 20px rgba(232, 134, 10, 0.35);
}

/* Disabled state for all parameter cards */
.usage-card.disabled,
.context-card.disabled,
.density-card.disabled,
.layout-card.disabled,
.generation-card:disabled,
.demand-card:disabled,
.load-card:disabled,
.consumption-card:disabled,
.mobility-card:disabled {
  opacity: 0.3;
  filter: grayscale(100%);
  pointer-events: none;
  cursor: not-allowed;
}

.usage-card.disabled:hover,
.context-card.disabled:hover,
.density-card.disabled:hover,
.layout-card.disabled:hover,
.generation-card:disabled:hover,
.demand-card:disabled:hover,
.load-card:disabled:hover,
.consumption-card:disabled:hover,
.mobility-card:disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-subtle);
}

/* STAGE-05 tasks 5.2 and 5.6, CHV Stage 5 items 2 and 6.
   A card can be greyed for two different reasons: the technology is not
   modelled yet, or it is modelled but not for this neighbourhood. Either way
   the card now carries a visible reason, and the generic rule above fades the
   whole button to 0.3, which would leave that reason unreadable. A card that
   carries a status therefore dims its picture and its name only, and keeps the
   status at full contrast. */
.is-unavailable:disabled {
  opacity: 1;
  filter: none;
  pointer-events: none;
  cursor: not-allowed;
}

.is-unavailable:disabled img,
.is-unavailable:disabled > span:not(.card-status) {
  opacity: 0.35;
  filter: grayscale(100%);
}

.card-status {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #ececec;
  color: #5f5f5f;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* DBG-046, P2, 2026-08-24. The same status word was drawn two ways inside one
   grid: NOT MODELLED YET on the four cards built as generation cards and
   Not Modelled Yet on the three built as consumption cards. The cause is
   specificity, not wording: the source text is identical on all seven, but
   ".consumption-card span", and the context, layout and density rules beside
   it, are one point more specific than ".card-status" and set capitalize.
   CHV Stage 9 item 6 asked for one status vocabulary, and one vocabulary
   drawn two ways is not one vocabulary. The badge now states its own casing
   at a specificity those card rules cannot beat, so a status word reads the
   same on every card on the site. */
/* The class is doubled on purpose: .consumption-card span sits LATER in this
   file and is the same specificity, so source order would win. .card-status
   twice is one point higher and settles it wherever the rule is written. */
.card-status.card-status {
  text-transform: uppercase;
}

/* An author rule that sets display beats the browser rule for [hidden], so
   the two elements the facade PV rule fills in have to say it themselves.
   Without this the page ships an empty grey badge on every neighbourhood. */
.card-status[hidden],
.selection-note[hidden] {
  display: none;
}

/* Same reasoning for the Comparison Mode entry point on the final results
   page: .next-button sets display to inline-flex, which beats the browser
   rule for [hidden], so a button we mean to withhold would be drawn anyway.
   EXT-01, 2026-08-24. */
.next-button[hidden] {
  display: none;
}

/* =====================================================================
   STAGE-08. The final results page. CHV Stage 8 items 1 to 9.
   ===================================================================== */

.final-block {
  margin: 22px 0;
}

.scenario-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.scenario-list > div {
  display: grid;
  grid-template-columns: minmax(140px, 22%) 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle, #ececec);
}

.scenario-list dt {
  margin: 0;
  font-weight: 600;
  font-size: 0.85rem;
}

.scenario-list dd {
  margin: 0;
  color: var(--text-secondary, #4a4a4a);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.45;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.86rem;
}

.comparison-table th,
.comparison-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle, #ececec);
  text-align: left;
}

.comparison-table th {
  font-weight: 700;
  background: #f6f6f6;
}

.comparison-table td.value-cell {
  font-variant-numeric: tabular-nums;
}

/* Item 7. The constraint sentence appears only when a limit actually fires, so
   it is styled to be read rather than to be decorative, and it ships hidden. */
.constraint-line {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #b8860b;
  background: #fdf8ec;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
}

.constraint-line[hidden],
.final-block[hidden] {
  display: none;
}

/* DBG-042, P2, 2026-08-24. A line that exists only on paper. Hidden here, and
   turned on inside the print block below. */
.print-only {
  display: none;
}

/* Item 9. Print carries the numbers, the assumptions and the status labels,
   and drops the parts of the page that mean nothing on paper. */
@media print {
  .no-print,
  .sidebar,
  .nav-buttons {
    display: none !important;
  }

  /* DBG-042. The tool names itself on paper. */
  .print-only {
    display: block;
    margin: 2px 0 10px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #444;
  }

  /* DBG-043, P2, 2026-08-24. The footer used to be hidden on paper with the
     navigation, so the printed document carried no credit to the lab that
     produced it: "Resilient Habitat Lab, directed by Dr. Caroline H-Vermette,
     Concordia University", and the lab logo, were both on screen and absent
     from the print. It now prints, smaller, at the foot of the last page. */
  .site-footer {
    display: block;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #999;
    text-align: center;
    break-inside: avoid;
  }

  .site-footer .footer-logo {
    max-height: 42px !important;
    width: auto;
  }

  .site-footer .footer-text {
    display: block;
    font-size: 0.72rem;
    color: #444;
  }

  .site-footer .footer-doc-link {
    display: none;
  }

  body {
    background: #fff;
  }

  .final-block,
  .summary-card {
    break-inside: avoid;
  }

  .comparison-table th {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* STAGE-07 task 7.2, CHV Stage 7 item 2. The heading that separates the option
   with a calculation method from the ones without. A grey badge on a card is
   easy to miss; a heading over a group is not. */
.group-heading {
  margin: 26px 0 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle, #d9d9d9);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.group-heading-note {
  margin: 0 0 10px;
  max-width: 70ch;
  color: var(--text-secondary, #5f5f5f);
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* A status on a card that is selectable, so it must not read as a refusal. */
.card-status--preliminary {
  background: #f3e6c8;
  color: #6b5518;
}

/* STAGE-06 task 6.9 and STAGE-07 task 7.6, CHV Stage 6 item 9 and Stage 7
   item 6. The maturity of a whole page, in one of the four words of
   LMN_CONFIG.statusTerms. Same reasoning as .card-status[hidden] above: a page
   that ships the badge hidden and fills it by script needs its own rule, or the
   browser rule for [hidden] loses to this one and an empty box is drawn. */
.status-badge-line {
  margin: 6px 0 0;
}

.status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 3px;
  background: #f3e6c8;
  color: #6b5518;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-badge-line[hidden],
.status-badge[hidden],
.empty-state[hidden] {
  display: none;
}

/* STAGE-06 task 6.2, CHV Stage 6 item 2. What the results page shows when no
   scenario was selected. It replaces the table rather than sitting above it, so
   there is no number anywhere on the page to misread. */
.empty-state {
  margin: 24px 0;
  padding: 28px 24px;
  border: 1px solid var(--border-subtle, #d9d9d9);
  border-radius: 6px;
  background: #fafafa;
  text-align: center;
}

.empty-state h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.empty-state p {
  margin: 0 auto 18px;
  max-width: 60ch;
  color: var(--text-secondary, #5f5f5f);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* The one line under a group of cards that explains a restriction, for
   example why facade PV is offered on nine neighbourhoods and not on 35. */
.selection-note {
  margin: 8px 2px 0;
  max-width: 70ch;
  color: var(--text-secondary, #5f5f5f);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* STAGE-05 task 5.6. What a missing icon looks like once it stops hiding
   itself. LMN_CONFIG.iconMissing drops the src and adds this class, so the row
   keeps its alignment, the reader sees a neutral plate instead of a gap, and
   the console names the file. */
img.icon-missing {
  min-width: 40px;
  min-height: 40px;
  background: #e4e4e4;
  border-radius: 3px;
  color: transparent;
  font-size: 0;
}

/* Context Image Cards - Compact */
.context-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.context-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
  width: 140px;
}

.context-card img {
  width: 120px;
  height: 70px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-normal);
}

.context-card span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  text-transform: capitalize;
}

.context-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
  border-color: var(--context-color);
}

.context-card:hover img {
  transform: scale(1.02);
}

.context-card.active {
  border-color: var(--context-color);
  background: var(--context-active);
  box-shadow: 0 0 20px rgba(253, 164, 175, 0.4);
}

/* Layout Image Cards - Compact */
.layout-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.layout-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
  width: 140px;
}

.layout-card img {
  width: 120px;
  height: 70px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-normal);
}

.layout-card span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  text-transform: capitalize;
}

.layout-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
  border-color: var(--layout-color);
}

.layout-card:hover img {
  transform: scale(1.02);
}

.layout-card.active {
  border-color: var(--layout-color);
  background: var(--layout-active);
  box-shadow: 0 0 20px rgba(125, 211, 252, 0.4);
}

/* Density Image Cards - Compact */
.density-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.density-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
  width: 140px;
}

.density-card img {
  width: 120px;
  height: 70px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-normal);
}

.density-card span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  text-transform: capitalize;
}

.density-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
  border-color: var(--density-color);
}

.density-card:hover img {
  transform: scale(1.02);
}

.density-card.active {
  border-color: var(--density-color);
  background: var(--density-active);
  box-shadow: 0 0 20px rgba(253, 164, 175, 0.4);
}



/* Envelope Image Cards - Flexible Grid for Regions */
.envelope-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
}

.envelope-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    width: 140px;
    box-sizing: border-box;
}

.envelope-card img {
    width: 120px;
    height: 70px;
    object-fit: contain;
    background: #fff;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-normal);
}

.envelope-card span {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    text-transform: capitalize;
    text-align: center;
    line-height: 1.1;
}

/* D2.6, CHV Stage 2 item 3: name the standard on each climate card, so the
   reader can see that ASHRAE 90.1 and NECB 2017 are two different standards.
   Deliberately smaller and lighter than the card name, it is a qualifier. */
.envelope-card .envelope-card-standard {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    text-transform: none;
    line-height: 1;
    margin-top: 1px;
}

.envelope-region-badge {
    display: none;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--accent-amber);
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 2px;
}

.envelope-card.active .envelope-region-badge:not(:empty) {
    display: inline-block;
}

.envelope-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
    border-color: var(--usage-color);
}

.envelope-card:hover img {
    transform: scale(1.02);
}

.envelope-card.active {
    border: 2px solid #E8860A;
    background: rgba(245, 196, 0, 0.35);
    box-shadow: 0 0 20px rgba(232, 134, 10, 0.35);
}

/* Envelope Popup Modal Styles */
.envelope-popup-modal {
    display: none;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
}

.envelope-popup-content {
    position: relative;
    background-color: #ffffff;
    margin: auto;
    padding: 24px 28px;
    border-radius: var(--radius-md);
    width: 420px;
    max-width: 92vw;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    animation: popupFadeIn 0.2s ease-out;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.envelope-popup-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.envelope-popup-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 18px;
    font-weight: 500;
}

.envelope-popup-options {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.envelope-tier-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.envelope-tier-btn .tier-label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.envelope-tier-btn .tier-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 3px;
}

.envelope-tier-btn:hover {
    border-color: #E8860A;
    background: rgba(245, 196, 0, 0.15);
    transform: translateY(-2px);
}

.envelope-tier-btn.active {
    border-color: #E8860A;
    background: rgba(245, 196, 0, 0.35);
    box-shadow: 0 0 12px rgba(232, 134, 10, 0.3);
}

/* KORAL, 2026-08-17. The HPerf definition written in by js/app.js from
   LMN_CONFIG.envelopeTiers. It shipped with no rule of its own, so it took
   text-align: center and the 1rem body size straight off
   .envelope-popup-content and read as a centred ragged block rather than as a
   paragraph. It is an explanation, so it takes the explanation face and the
   explanation size: the same --font-body, 0.8rem, 1.5 and --text-secondary
   that .info-box and .selection-note carry, and it is justified because it is
   a paragraph and the popup is a fixed 420px column. hyphens keeps the
   justification from opening rivers in a box that narrow. */
.envelope-popup-note {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Written by script: before the popup is opened for the first time it is
   empty, and an empty note is a rule with a border and nothing above it. */
.envelope-popup-note:empty {
    display: none;
}

.envelope-popup-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.15s ease;
}

.envelope-popup-close:hover {
    color: var(--text-primary);
}

/* ========================================
   Energy Selection Page Cards
   ======================================== */

/* Responsive Sidebar */
@media (max-width: 1024px) {
    .sidebar-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }
}


/* Ahmed: Popup Styling */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); /* Dims the background */
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 25px;
    border-radius: 12px;
    width: 320px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
}

.confirm-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 25px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: bold;
}

.cancel-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 25px;
    cursor: pointer;
    border-radius: 6px;
}

/* Add a hover effect to the image to show it's clickable */
.neighbourhood-cell img {
    cursor: pointer;
    transition: transform 0.2s;
}

    .neighbourhood-cell img:hover {
        transform: scale(1.05);
    }

/* Consumption Cards Container */
.consumption-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}

/* Consumption Card - Blue/Electric theme */
.consumption-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  width: 135px;
}

.consumption-card img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: transform var(--transition-normal);
}

.consumption-card span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
  text-align: center;
}

.consumption-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(232, 134, 10, 0.3);
  border-color: rgba(232, 134, 10, 0.5);
}

.consumption-card:hover img {
  transform: scale(1.05);
}

.consumption-card.active {
  border-color: #E8860A;
  background: rgba(245, 196, 0, 0.30);
  box-shadow: 0 0 20px rgba(232, 134, 10, 0.3);
}

/* Generation Cards Container */
/* Generation, Load, and Demand Containers */
.generation-container {
  width: 100%;
  margin-bottom: var(--spacing-md);
}

.generation-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
  width: 100%;
}

.generation-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}

/* Generation, Load, and Demand Card - Green/Energy theme */
.generation-card,
.load-card,
.demand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  width: 135px;
}

.generation-card img,
.load-card img,
.demand-card img {
  width: 105px;
  height: 68px;
  object-fit: contain;
  background-color: #fff;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-normal);
}

.generation-card span,
.load-card span,
.demand-card span {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.generation-card:hover,
.load-card:hover,
.demand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.5);
}

.generation-card:hover img,
.load-card:hover img,
.demand-card:hover img {
  transform: scale(1.02);
}

.generation-card.active,
.load-card.active,
.demand-card.active {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

/* Submit Button - Compact */
.submit-section {
  text-align: center;
  padding: var(--spacing-sm) 0;
}

.submit-btn {
  padding: 0.75rem 2rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent-gradient);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 15px rgba(232, 134, 10, 0.4);
}

.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(232, 134, 10, 0.5);
}

/* D2.9, DBG-022, P0: the button ships grey and wakes up only once a climate
   has been chosen. Without this a user reached every result in the tool on a
   silent Montreal fallback. */
.submit-btn:disabled,
.submit-btn[disabled] {
  background: var(--border-subtle);
  color: var(--text-secondary);
  cursor: not-allowed;
  box-shadow: none;
}

.submit-btn:disabled:hover,
.submit-btn[disabled]:hover {
  transform: none;
  box-shadow: none;
}

.submit-hint {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

.submit-btn:active {
  transform: translateY(0);
}

/* Toggle Buttons Base */
.toggle-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  background: var(--bg-card);
  color: var(--text-primary);
}

.toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.toggle-btn:active {
  transform: translateY(0);
}

/* Button Color Variants */
.toggle-btn.usage {
  border-color: var(--usage-color);
  background: var(--usage-bg);
  color: var(--usage-color);
}

.toggle-btn.usage.active,
.toggle-btn.usage:hover {
  background: var(--usage-active);
}

.toggle-btn.context {
  border-color: var(--context-color);
  background: var(--context-bg);
  color: var(--context-color);
}

.toggle-btn.context.active,
.toggle-btn.context:hover {
  background: var(--context-active);
}

.toggle-btn.diversity {
  border-color: var(--diversity-color);
  background: var(--diversity-bg);
  color: var(--diversity-color);
}

.toggle-btn.diversity.active,
.toggle-btn.diversity:hover {
  background: var(--diversity-active);
}

.toggle-btn.density {
  border-color: var(--density-color);
  background: var(--density-bg);
  color: var(--density-color);
}

.toggle-btn.density.active,
.toggle-btn.density:hover {
  background: var(--density-active);
}

.toggle-btn.layout {
  border-color: var(--layout-color);
  background: var(--layout-bg);
  color: var(--layout-color);
}

.toggle-btn.layout.active,
.toggle-btn.layout:hover {
  background: var(--layout-active);
}

/* Concepts Grid */
.concepts-section {
  padding: var(--spacing-xl) 0;
}

.concepts-section h2 {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.concepts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

/* Concept Card */
.concept-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all var(--transition-normal);
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.concept-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(232, 134, 10, 0.5);
}

.concept-card.hidden {
  display: none;
}

.concept-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.concept-card-content {
  padding: var(--spacing-md);
}

.concept-card h3 {
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.concept-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
}

/* No Results Message */
.no-results {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--text-secondary);
  display: none;
}

.no-results.visible {
  display: block;
}

/* ========================================
   Output Page Styles
   ======================================== */

/* Back button — outlined dark (buttons.png) */
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: #ffffff;
  border: 1.5px solid var(--text-primary);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  transition: all var(--transition-normal);
}

.back-button:hover {
  background: rgba(0, 0, 0, 0.04);
  transform: translateX(-3px);
}

/* Navigation Buttons Container */
.nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

/* Next button — outlined orange (buttons.png) */
.next-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: #ffffff;
  border: 1.5px solid var(--accent-burnt);
  border-radius: var(--radius-sm);
  color: var(--accent-burnt);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  transition: all var(--transition-normal);
  box-shadow: none;
}

.next-button:hover {
  background: rgba(201, 61, 10, 0.06);
  transform: translateX(3px);
  box-shadow: none;
}

.next-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(1);
}

/* PV Content Placeholder - deprecated, keeping for reference */
.pv-content-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* ========================================
   PV Profile Page Styles
   ======================================== */

/* Single Column Layout (legacy layout now stats-only) */
.pv-profile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

.pv-left-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.pv-right-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Section Styling */
.pv-section {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Inputs section gets more space */
.pv-inputs-section {
  flex: 2;
}

/* KPIs section gets less space */
.pv-kpis-section {
  flex: 1;
}

/* Parameter Groups - deprecated */
.pv-parameter-group {
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.pv-parameter-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

/* PV Parameter Values - Pink theme - deprecated */
.pv-parameter-value {
  padding: 0.5rem 1rem;
  background: rgba(200, 150, 150, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  display: inline-block;
}

/* PV Input Bars - New horizontal style */
.pv-input-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: 1rem 1.5rem;
  background: rgba(200, 150, 150, 0.35);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  border: 1px solid rgba(150, 100, 100, 0.2);
}

.pv-input-label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pv-input-value {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-primary);
}

/* KPIs Section */
.pv-kpi-item {
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.pv-kpi-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.pv-kpi-value {
  padding: 0.75rem 1.5rem;
  background: rgba(180, 200, 200, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Chart Containers */
.pv-chart-container {
  flex: 1;
  margin-bottom: var(--spacing-xs);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pv-chart-container:last-child {
  margin-bottom: 0;
}

.pv-chart-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
}

/* Responsive for PV Profile (legacy RC-HR2 layout) */
@media (max-width: 992px) {
  .pv-profile-layout {
    grid-template-columns: 1fr;
  }
}

/* ── PV New 3-Row Layout ─────────────────────────────────────── */

/* Row 1: Stats bar */
.pv-stats-bar {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
  background: var(--bg-card);
}

.pv-stat-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1rem;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
  min-width: 110px;
}

.pv-stat-item:last-child {
  border-right: none;
}

.pv-stat-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.pv-stat-value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Canvas cell — overrides flex centering so canvas fills the cell */
.pv-canvas-cell {
  display: block;
  padding: 0;
}

.pv-hourly-canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* Rows 2 & 3: Image rows (now single generation chart) */
.pv-image-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.pv-image-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pv-image-cell .pv-chart-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Responsive for new PV layout */
@media (max-width: 768px) {
  .pv-stats-bar {
    flex-direction: column;
  }
  .pv-stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .pv-stat-item:last-child {
    border-bottom: none;
  }
  .pv-image-row {
    grid-template-columns: 1fr;
  }
}

/* EV Content Placeholder - deprecated, keeping for reference */
.ev-content-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* ========================================
   EV Profile Page Styles
   ======================================== */

/* Two Column Layout */
.ev-profile-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  height: calc(100vh - 200px);
  max-height: calc(100vh - 200px);
  min-height: 450px;
  overflow: hidden;
}

.ev-left-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  height: 100%;
  overflow: hidden;
}

.ev-right-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Section Styling */
.ev-section {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.ev-section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

/* Parameter Groups */
.ev-parameter-group {
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.ev-parameter-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.ev-parameter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center;
}

/* EV Toggle Buttons */
.ev-toggle-btn {
  padding: 0.6rem 1.25rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  background: rgba(200, 150, 150, 0.2);
  color: var(--text-primary);
}

.ev-toggle-btn:hover {
  background: rgba(200, 150, 150, 0.4);
  transform: translateY(-2px);
}

.ev-toggle-btn.active {
  background: rgba(180, 120, 120, 0.5);
  border-color: rgba(150, 80, 80, 0.6);
  box-shadow: 0 2px 8px rgba(150, 80, 80, 0.2);
}

/* KPIs Section */
.ev-kpi-item {
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.ev-kpi-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.ev-kpi-value {
  padding: 0.75rem 1.5rem;
  background: rgba(200, 180, 160, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Chart Containers */
.ev-chart-container {
  flex: 1;
  margin-bottom: var(--spacing-xs);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-chart-container:last-child {
  margin-bottom: 0;
}

.ev-chart-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
}

/* Responsive for EV Profile */
@media (max-width: 992px) {
  .ev-profile-layout {
    grid-template-columns: 1fr;
  }
}

/* LPV Content Placeholder - deprecated, keeping for reference */
.lpv-content-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* ========================================
   LPV Profile Page Styles
   ======================================== */

/* Two Column Layout */
.lpv-profile-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  height: calc(100vh - 200px);
  max-height: calc(100vh - 200px);
  min-height: 450px;
  overflow: hidden;
}

.lpv-left-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  height: 100%;
  overflow: hidden;
}

.lpv-right-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Section Styling */
.lpv-section {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Inputs section gets more space */
.lpv-left-column .lpv-section:first-child {
  flex: 2;
}

/* KPIs section gets less space */
.lpv-left-column .lpv-section:last-child {
  flex: 1;
}

.lpv-section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

/* Parameter Groups */
.lpv-parameter-group {
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.lpv-parameter-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.lpv-parameter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center;
}

/* LPV Toggle Buttons - Purple theme */
.lpv-toggle-btn {
  padding: 0.5rem 1rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  background: rgba(245, 196, 0, 0.15);
  color: var(--text-primary);
}

.lpv-toggle-btn:hover {
  background: rgba(245, 196, 0, 0.35);
  transform: translateY(-2px);
}

.lpv-toggle-btn.active {
  background: rgba(232, 134, 10, 0.45);
  border-color: rgba(201, 61, 10, 0.6);
  box-shadow: 0 2px 8px rgba(201, 61, 10, 0.2);
}

/* KPIs Section */
.lpv-kpi-item {
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.lpv-kpi-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.lpv-kpi-value {
  padding: 0.75rem 1.5rem;
  background: rgba(180, 200, 200, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Chart Containers */
.lpv-chart-container {
  flex: 1;
  margin-bottom: var(--spacing-xs);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lpv-chart-container:last-child {
  margin-bottom: 0;
}

.lpv-chart-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
}

/* Responsive for LPV Profile */
@media (max-width: 992px) {
  .lpv-profile-layout {
    grid-template-columns: 1fr;
  }
}

/* Table container — outer frame (frames.png) */
.table-container {
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-top: var(--spacing-lg);
}

/* Results Table - Extended Width */
.results-table {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

/* Column widths - 4 columns (Energy Status removed) */
/* Concepts - first column */
.results-table th:nth-child(1),
.results-table td:nth-child(1) {
  width: 12%;
}

/* Neighbourhoods */
.results-table th:nth-child(2),
.results-table td:nth-child(2) {
  width: 18%;
}

/* Properties */
.results-table th:nth-child(3),
.results-table td:nth-child(3) {
  width: 25%;
}

/* Buildings column */
.results-table th:nth-child(4),
.results-table td:nth-child(4) {
  width: 45%;
}

/* Energy Results Table Column Widths (6 columns) */
.energy-results-table th:nth-child(1),
.energy-results-table td:nth-child(1) {
  width: 10%;
  /* Match output.html */
}

.energy-results-table th:nth-child(2),
.energy-results-table td:nth-child(2) {
  width: 15%;
  /* Match output.html */
}

.energy-results-table th:nth-child(3),
.energy-results-table td:nth-child(3) {
  width: 15%;
  /* Match output.html */
}

.energy-results-table th:nth-child(4),
.energy-results-table td:nth-child(4) {
  width: 30%;
  /* Match output.html */
}

.energy-results-table th:nth-child(5),
.energy-results-table td:nth-child(5) {
  width: 15%;
}

.energy-results-table th:nth-child(6),
.energy-results-table td:nth-child(6) {
  width: 15%;
}

/* EUI Cell Styling */
.eui-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.eui-value {
  font-size: 1.1rem;
  font-weight: 600;
}

.eui-unit {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.eui-bar {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #22c55e 0%, #eab308 50%, #ef4444 100%);
  position: relative;
  overflow: hidden;
}

.eui-indicator {
  position: absolute;
  width: 4px;
  height: 12px;
  background: #1a1a2e;
  border-radius: 2px;
  top: -2px;
  transform: translateX(-50%);
}

/* Energy Status Cell Styling */
.energy-status-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-icon {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

/* Table header frame (frames.png) — transparent bg, bold uppercase, orange bottom rule */
.results-table th {
  text-align: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  border-bottom: 2px solid var(--accent-burnt);
  border-top: none;
}

.results-table td {
  padding: var(--spacing-md);
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.results-table tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

/* The selected row is framed, not filled, for the same reason as the parameter
   cards: the picture and icon tiles inside it keep their own white ground. One
   outline on the row, drawn inside its own box, so the four sides are the same
   3px and the row does not grow when it is picked. Built with cell shadows
   first, which was 4px at the bottom because the divider border sits there and
   an inset shadow cannot cover a border. The divider is hidden on this row for
   the same reason. */
.results-table tr.selected {
  outline: 3px solid var(--accent-burnt);
  outline-offset: -3px;
}

.results-table tr.selected td {
  background: transparent;
  border-bottom-color: transparent;
}

/* Table Interaction Styles */
.clickable-cell {
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  position: relative;
}

.clickable-cell:hover {
  background-color: rgba(245, 196, 0, 0.08) !important;
}

.clickable-cell:active {
  transform: scale(0.98);
}

.clickable-cell::after {
  content: '→';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--primary);
  font-size: 1.2rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.clickable-cell:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(5px);
}

/* Concept Cell */
.concept-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.concept-cell img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.concept-cell span {
  font-style: italic;
  color: var(--text-secondary);
}

/* Neighbourhood Cell */
.neighbourhood-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.neighbourhood-cell img {
  width: 200px;
  height: auto;
  border-radius: var(--radius-sm);
}

.neighbourhood-cell .code {
  font-weight: 600;
  font-size: 1.1rem;
}

/* D2.8, CHV Stage 2 item 5: the two actions per NU, both labelled. Before
   this they existed but were invisible, one as an unlabelled row click and
   one as a hidden click on the picture. */
.nu-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
}

.nu-action-btn {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s);
}

.nu-action-btn:hover {
  border-color: var(--usage-color);
  box-shadow: var(--shadow-glow);
}

.nu-select-btn {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #ffffff;
}

/* Task 3.4, D3.2: the energy basis, next to the EUI value. */
.energy-basis-note {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

/* Task 3.2, D3.5, CHV Stage 3 item 2: baseline, selected and change. */
.baseline-comparison {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 1rem auto 1.25rem;
  max-width: 900px;
}

.baseline-comparison:empty {
  display: none;
}

.comparison-row {
  display: grid;
  grid-template-columns: 6.5rem 5rem 6rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.comparison-row--selected {
  border-color: var(--usage-color);
}

.comparison-row--change {
  background: rgba(232, 134, 10, 0.08);
}

.comparison-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
}

.comparison-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-align: right;
}

.comparison-unit,
.comparison-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Task 3.5: assumptions and model info. */
.assumptions-box {
  margin: 1.5rem auto 0;
  max-width: 900px;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.assumptions-box:empty {
  display: none;
}

.assumptions-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.assumptions-list {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 0.3rem 1rem;
  font-size: 0.8rem;
  line-height: 1.45;
}

.assumptions-list dt {
  font-weight: 600;
  color: var(--text-primary);
}

.assumptions-list dd {
  margin: 0;
  color: var(--text-secondary);
}

/* CHV, 2026-08-17, point 7. Her named container for everything that is a model
   input rather than a result: "Technical parameters such as PV efficiency, PV
   area, GCR, weather file, floor-area basis, model version, etc. should remain
   accessible under Assumptions & Model Information, rather than appearing as
   main KPIs."

   Accessible, not prominent, so it is a <details> that opens closed. It reuses
   .assumptions-list inside, so the rows above need no second rule.

   Centred on the column and sized to itself, like every other block on this
   site. Koral, 2026-08-12: "ceci n'est pas une rapport, c'est une page de web." */
.assumptions-details {
  margin: 1.5rem auto 0;
  max-width: 900px;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  text-align: left;
}

.assumptions-details > summary {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: revert;
}

.assumptions-details[open] > summary {
  margin-bottom: 0.75rem;
}

/* The two explanation boxes inside it are styled down in the explanation-box
   section, not here. That placement is deliberate: verify_session16.js reads
   the first rule for that component in this file to test its colour, so a
   nested selector written above the component would be the rule it found, and
   the colour check would silently start testing the wrong block. */

/* Documentation page: the expansion of an abbreviation, under the name it
   expands. Added 2026-08-17 with CHV's scenario names, which use HPerf and DHW
   and have to say once what each stands for. */
.doc-small {
  font-size: 0.8em;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Documentation page: a note that records a decision or a correction. */
.doc-note {
  margin-top: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* DBG-027, task 3.12: why a neighbourhood is missing from this climate. */
.data-gap-note {
  margin: 1rem auto 0;
  max-width: 1100px;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--accent-amber);
  background: rgba(232, 134, 10, 0.08);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary);
}

/* D2.7, CHV Stage 2 item 4: the two planning quantities. The unit sits under
   the value because the floor-area basis has to be readable, D6.0. */
.metric-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.metric-cell .metric-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.metric-cell .metric-unit {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Properties Cell */
.properties-cell {
  font-size: 0.9rem;
  line-height: 1.8;
}

.properties-cell p {
  margin-bottom: 0.25rem;
}

/* Buildings Cell - 4 columns grid layout */
.buildings-cell {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  align-items: start;
  width: 100%;
}

.building-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  text-align: center;
}

/* 60px, the same box as the Properties icons, which are sized inline in
   js/app.js. The two columns sit side by side on the same row, so a building
   drawn at 90px read as more important than the parameters beside it. */
.building-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.building-icon span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Energy Selection Cell Styling */
.energy-selection-cell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.energy-selection-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.energy-selection-item img {
  width: 50px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.energy-selection-item span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ========================================
   Treemap Visualization
   ======================================== */

.treemap-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: var(--spacing-lg) auto;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.treemap-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-fast);
  cursor: pointer;
  overflow: hidden;
}

.treemap-item:hover {
  transform: scale(1.02);
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.treemap-name {
  width: 100%;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.treemap-value {
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.treemap-percent {
  width: 100%;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
}

/* Legend */
.treemap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  max-width: 1200px;
  margin: var(--spacing-md) auto;
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.legend-name {
  color: var(--text-primary);
  font-weight: 500;
}

.legend-value {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* EUI Clickable */
.eui-cell {
  cursor: pointer;
  transition: all var(--transition-fast);
}

.eui-cell:hover {
  transform: scale(1.05);
}

.error-message {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* EUI Scale Display for Energy Page */
.eui-scale-container {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-sm);
}

.eui-scale-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 280px;
}

.eui-scale-value {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
}

.eui-scale-unit {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

/* STAGE-03 task 3.3, D6.0. The floor-area basis, written under the compact
   unit rather than folded into it. The compact form alone does not say which
   square metres the number is divided by, and for the house neighbourhoods the
   two candidate areas differ by a factor of 2. Only the energy scale carries
   this caption; the PV and LPV scales reuse .eui-scale-unit and are untouched. */
.eui-scale-basis {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-secondary);
  opacity: 0.85;
  text-align: center;
  margin-top: -0.15rem;
  margin-bottom: 0.35rem;
}

/* STAGE-04. The PV result caption: which standard and which rung produced the
   numbers below it. Both PV layouts use it, and both are empty until js/pv.js
   fills them, so an empty element must not leave a gap. */
.pv-result-caption {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-secondary);
  margin: 0 0 0.6rem 0;
}
.pv-result-caption:empty {
  display: none;
}

/* STAGE-04, DBG-013. Why the four house neighbourhoods report a different
   array. Reads as a footnote to the parameter row above it. */
.pv-roof-note {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
  opacity: 0.9;
  margin: 0.7rem 0 0 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--border-subtle);
}
/* STAGE-04 tasks 4.2, 4.3 and 4.9. */
.pv-scenario-note {
    margin: 0.35rem 0 0.75rem 0;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border-subtle);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-secondary);
    max-width: 70ch;
}

.pv-scenario-note:empty {
    display: none;
}

.pv-method-link-wrap {
    margin: 0.25rem 0 1rem 0;
}

.pv-method-link {
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.pv-roof-note:empty {
  display: none;
}

.eui-scale-bar {
  width: 100%;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(to right, #22c55e 0%, #eab308 50%, #ef4444 100%);
  position: relative;
  overflow: visible;
}

.eui-scale-indicator {
  position: absolute;
  width: 6px;
  height: 18px;
  background: #1a1a2e;
  border-radius: 3px;
  top: -3px;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.eui-scale-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Energy Indicators Row (Energy Status + EUI Scale) */
.energy-indicators-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-sm);
}

/* Energy Status Header Display */
.energy-status-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.energy-status-header-display {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.energy-status-header-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* ========================================
   EV & V2G Visual Header
   ======================================== */

.ev-visual-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.ev-header-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ev-header-card-img {
  width: 140px;
  height: 100px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.ev-header-card--ev .ev-header-card-img {
  object-fit: contain;
}

.ev-header-card--neighbourhood .ev-header-card-img {
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ev-header-card-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ========================================
   EV & V2G Breakdown Table
   ======================================== */


#ev-v2g-table.ev-v2g-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* EV/V2G table header — matches frames.png update */
.ev-v2g-table thead th {
  background: transparent;
  color: var(--text-primary);
  padding: var(--spacing-sm) 1.25rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  vertical-align: top;
  border-bottom: 2px solid var(--accent-burnt);
}

.ev-v2g-table thead th .th-sub {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  opacity: 0.85;
  margin-top: 0.2rem;
}

.ev-v2g-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background var(--transition-fast);
}

.ev-v2g-table tbody tr:last-child {
  border-bottom: none;
}

.ev-v2g-table tbody tr:hover {
  background: rgba(232, 134, 10, 0.05);
}

.ev-v2g-table tbody td {
  padding: 0.85rem 1.25rem;
  vertical-align: middle;
}

.ev-v2g-table .metric-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.ev-v2g-table .metric-value {
  display: inline;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
}

.ev-v2g-table .metric-unit {
  margin-left: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.energy-status-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
}

.ev-status-cell {
  vertical-align: middle;
}

.ev-status-cell-content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.ev-status-table-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.ev-status-table-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .container {
    padding: 0 var(--spacing-sm);
  }

  .toggle-btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .concepts-grid {
    grid-template-columns: 1fr;
  }

  .results-table {
    display: block;
    overflow-x: auto;
  }
}

/* ========================================
   Sidebar Layout System
   ======================================== */

.sidebar-layout {
  display: flex;
  min-height: calc(100vh - 140px);
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: 4.5rem;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
}

.main-content {
  flex: 1;
  min-width: 0;
}

/* Sidebar Sections */
.sidebar-section {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

.sidebar-section--purple {
  background: rgba(245, 196, 0, 0.10);
}

.sidebar-section--pink {
  background: rgba(201, 61, 10, 0.08);
}

.sidebar-title {
  display: none;
}

.sidebar-block {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-block:last-child {
  border-bottom: none;
}

.sidebar-subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}

/* Sidebar Items */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-primary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.sidebar-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

/* Hide alt text of broken sidebar images to prevent visual collision with text labels */
.sidebar img,
.sidebar-building-icon img {
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

.sidebar-item span {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

.sidebar-item--large img {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
}

.sidebar-item--large span {
  font-weight: 600;
  font-size: 1rem;
}

.sidebar-properties {
  margin-top: 4px;
  background: var(--bg-primary);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sidebar-properties p strong {
  color: var(--text-primary);
  width: 50px;
  display: inline-block;
}

.sidebar-buildings {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.sidebar-building-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-primary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

.sidebar-building-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.sidebar-items-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Clickable interactive items */
.sidebar-item--clickable {
  cursor: pointer;
}

.sidebar-item--clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sidebar-item--active {
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(232, 134, 10, 0.3);
}

/* Sidebar Error */
.sidebar-error {
  padding: var(--spacing-lg);
  background: #fee2e2;
  color: #991b1b;
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 500;
}

/* Responsive Sidebar */
@media (max-width: 1024px) {
  .sidebar-layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────
   LPV Breakdown Page
   ───────────────────────────────────────────────────────── */

/* Visual header — 2-col layout
   Col 1 (1fr): GI image (if selected) + neighbourhood image stacked
   Col 2 (2fr): LPV.png spanning full height                        */
.lpv-visual-header-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  align-items: stretch;
}

/* Left column stacks GI + neighbourhood vertically */
.lpv-left-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  grid-column: 1;
  grid-row: 1;
}

/* Base card */
.lpv-header-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  overflow: hidden;
}

/* Grid placement */
.lpv-card--gi                    { grid-column: 1; grid-row: 1; }
.lpv-card--neighbourhood          { grid-column: 1; grid-row: 2; }
.lpv-card--neighbourhood-full     { grid-column: 1; grid-row: 1 / 3; } /* no GI selected */
.lpv-card--lpv                   { grid-column: 2; grid-row: 1 / 3; }

/* Empty placeholder — hides completely when GI is missing */
.lpv-card--empty {
  display: none;
}

/* When neighbourhood is alone in col 1 (no GI), span both rows */
.lpv-card--neighbourhood:first-child {
  grid-row: 1 / 3;
}

/* Images */
.lpv-header-card-img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
  display: block;
}

.lpv-card--lpv .lpv-header-card-img {
  height: 100%;
  min-height: 240px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
}

/* Labels */
.lpv-header-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* LPV results table */
#lpv-table.lpv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* LPV table header — matches frames.png update */
#lpv-table.lpv-table thead th {
  background: transparent;
  color: var(--text-primary);
  padding: var(--spacing-sm) 1.25rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  vertical-align: top;
  border-bottom: 2px solid var(--accent-burnt);
}

#lpv-table.lpv-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background var(--transition-fast);
}

#lpv-table.lpv-table tbody tr:last-child {
  border-bottom: none;
}

#lpv-table.lpv-table tbody tr:hover {
  background: rgba(232, 134, 10, 0.05);
}

#lpv-table.lpv-table tbody td {
  padding: 0.85rem 1.25rem;
  vertical-align: middle;
}

/* metric-label: small uppercase caption — must be display:block to sit above the value */
#lpv-table.lpv-table .metric-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

/* metric-value: the actual data value on its own line */
#lpv-table.lpv-table .metric-value {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
}

/* ========================================
   Site Footer & Brand Logo
   ======================================== */
.site-footer {
  padding: 0.5rem 1.5rem 2rem 1.5rem;
  margin-top: 0;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-logo {
  max-height: 125px;
  width: auto;
  opacity: 0.85;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.footer-logo:hover {
  opacity: 1;
  transform: scale(1.04);
}

.footer-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-family: var(--font-primary);
  text-align: center;
}

/* STAGE-01 item 7, built 2026-08-13 on CHV's instruction. The version and
   last-updated stamp on the landing page. Its own row under the logo and the
   copyright, quieter than either, because it is a fact about the build and
   not a thing to read first. */
.site-version {
  flex-basis: 100%;
  width: 100%;
  margin: 0.4rem 0 0 0;
  font-family: var(--font-primary);
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
}

.footer-disclaimer {
  flex-basis: 100%;          /* force its own row below the logo + copyright */
  width: 100%;
  max-width: 70ch;
  margin: 0.4rem auto 0 auto;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--text-secondary);
}
.footer-disclaimer strong {
  font-style: normal;
}

.footer-doc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: #ffffff;
  border: 1.5px solid var(--text-secondary);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  transition: all var(--transition-normal);
}
.footer-doc-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

/* Top Disclaimer Box Styling */
.top-disclaimer-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px 16px;
  background: rgba(232, 134, 10, 0.08);
  border-left: 4px solid var(--accent-amber);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  text-align: left;
}

.disclaimer-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--accent-amber);
}

/* =====================================================================
   Explanation boxes, session 16.

   Every sentence that says how to read a number, or what a number does
   not include, used to sit as a loose grey line under the table it
   belonged to. On a page that already carries a table, a badge and a
   disclaimer, a loose line reads as leftover text and gets skipped.
   These sentences are the ones CHV asked for, so they are given the
   same standing as the assumptions card: a bounded box with a rule down
   its left edge.

   Teal is the explanation colour. Amber already means "warning about
   this whole layer" on the disclaimer box, so it is kept here only for
   .info-box--caution, a stated limitation. The two never sit next to
   each other by accident.

   A box is made by adding one class to the paragraph the script already
   fills, so no script has to learn a new element. Several sentences that
   belong together are wrapped in an .info-box with .info-box-line
   children instead, and only that form carries a title.
   ===================================================================== */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* Centred on the column, like the assumptions card, not hung on the left
     margin. This is a web page and its content sits in the middle of it; a
     block pinned to the left edge is the shape of a printed report. The box
     hugs its sentence rather than running to a fixed width, so a short note
     does not become a wide empty panel. The text inside stays left aligned,
     because a centred paragraph is unreadable past one line. */
  width: fit-content;
  max-width: min(74ch, 100%);
  margin: 12px auto;
  padding: 10px 14px;
  border: 1px solid rgba(107, 168, 184, 0.35);
  border-left: 4px solid var(--accent-teal);
  border-radius: var(--radius-sm);
  background: rgba(107, 168, 184, 0.09);
  color: var(--text-secondary);
  font-family: var(--font-primary);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: left;
}

/* The mark that opens the box. A glyph rather than an inline SVG, so a
   note becomes a box by adding a class and nothing else. */
.info-box::before {
  content: "i";
  flex: 0 0 17px;
  height: 17px;
  margin-top: 1px;
  border: 1.5px solid var(--accent-teal);
  border-radius: 50%;
  color: var(--accent-teal);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.info-box--caution {
  border-color: rgba(232, 134, 10, 0.35);
  border-left-color: var(--accent-amber);
  background: rgba(232, 134, 10, 0.08);
}

.info-box--caution::before {
  content: "!";
  border-color: var(--accent-amber);
  color: var(--accent-amber);
}

/* A box with nothing in it is a box with no reason to be on the page.
   The selector repeats the class so it outranks .info-box itself, and
   it leaves .selection-note[hidden] and .pv-roof-note:empty alone. */
.info-box.info-box:empty,
.info-box-line:empty {
  display: none;
}

/* display: flex above outranks the browser rule for [hidden], the same trap
   that once shipped an empty grey badge on every card. */
.info-box[hidden] {
  display: none;
}

/* CHV, 2026-08-17, points 5 and 8. Inside Assumptions & Model Information the
   two explanation boxes sit under the rows rather than beside them. The empty
   case needs no rule of its own: .info-box.info-box:empty above already hides
   it, which is why this block is here and not up with .assumptions-details. */
.assumptions-details .info-box {
  margin-top: 0.9rem;
}

.info-box-body {
  flex: 1 1 auto;
  min-width: 0;
}

.info-box-title {
  margin: 0 0 5px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.info-box-line {
  margin: 0;
  max-width: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Two sentences in one box stay two sentences. */
.info-box-line + .info-box-line {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

@media print {
  .info-box {
    background: #fff;
    border-color: #999;
    color: #333;
  }
}

/* ─────────────────────────────────────────────────────────
   Comparison Mode Button (finish-design page)
   ───────────────────────────────────────────────────────── */
.comparison-mode-btn {
  background: rgba(107, 168, 184, 0.08) !important;
  border: 2px solid var(--accent-teal) !important;
  color: var(--text-primary) !important;
}

.comparison-mode-btn:hover {
  background: rgba(107, 168, 184, 0.18) !important;
  box-shadow: 0 4px 12px rgba(107, 168, 184, 0.25);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────
   Selection Pills (Scenario Summary / Comparison)
   ───────────────────────────────────────────────────────── */
.selection-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--spacing-xs);
}

.selection-pill {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.82rem;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.selection-pill img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
}

/* =====================================================================
   Card Info Badges and Popovers (CHV / Supervisor Feedback)
   ===================================================================== */
.demand-card,
.generation-card,
.load-card,
.usage-card,
.consumption-card,
.mobility-card {
  position: relative;
}

.card-info-wrap {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1.4px solid var(--accent-teal);
  border-radius: 50%;
  background: var(--bg-card, #ffffff);
  color: var(--accent-teal);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  user-select: none;
}

.card-info-btn:hover,
.card-info-btn:focus-visible,
.card-info-wrap.is-open .card-info-btn {
  background: var(--accent-teal);
  color: #ffffff;
  transform: scale(1.1);
  outline: none;
}

.card-info-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: -4px;
  width: max-content;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 12px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-subtle, #e0e0e0);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  color: var(--text-secondary, #555555);
  font-family: var(--font-primary);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast, 0.15s ease), visibility var(--transition-fast, 0.15s ease);
  white-space: normal;
  text-transform: none;
}

.card-info-wrap:hover .card-info-popover,
.card-info-wrap.is-open .card-info-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.card-info-popover-title {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary, #1a1a1a);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

.card-info-popover-text {
  display: block;
  color: var(--text-secondary, #555555);
  font-family: var(--font-primary);
  font-size: 0.73rem;
  line-height: 1.4;
  text-transform: none;
}

/* =====================================================================
   Terminology Compact Trigger and Popover (CHV & Supervisor Feedback)
   ===================================================================== */
.terminology-compact-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 10px auto 16px auto;
  z-index: 80;
}

.terminology-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  background: rgba(107, 168, 184, 0.09);
  border: 1px solid rgba(107, 168, 184, 0.4);
  border-radius: 20px;
  color: var(--text-primary, #222222);
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s ease);
  user-select: none;
}

.terminology-trigger-btn:hover,
.terminology-trigger-btn:focus-visible,
.terminology-compact-wrap.is-open .terminology-trigger-btn {
  background: rgba(107, 168, 184, 0.18);
  border-color: var(--accent-teal);
  box-shadow: 0 2px 8px rgba(107, 168, 184, 0.25);
  outline: none;
}

.terminology-trigger-text {
  display: inline-block;
  letter-spacing: 0.01em;
}

.terminology-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(540px, calc(100vw - 32px));
  padding: 12px 16px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-subtle, #e0e0e0);
  border-left: 4px solid var(--accent-teal);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast, 0.15s ease), visibility var(--transition-fast, 0.15s ease);
  text-align: left;
}

.terminology-compact-wrap:hover .terminology-popover,
.terminology-compact-wrap.is-open .terminology-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.terminology-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.terminology-popover-title {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.terminology-popover-rule {
  margin: 0 0 10px 0;
  color: var(--text-secondary);
  font-size: 0.77rem;
  line-height: 1.5;
}

/* =====================================================================
   Discreet Info Popovers (Replaces bulky static blue explanation boxes)
   ===================================================================== */
.info-popover-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 8px auto 14px auto;
}

.info-popover-row .info-popover-wrap {
  margin: 0;
}

.info-popover-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 8px auto 14px auto;
  z-index: 70;
}

.info-popover-wrap[hidden] {
  display: none !important;
}

.info-popover-wrap:has(.info-popover-line:empty:only-of-type) {
  display: none;
}

.info-popover-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  background: rgba(107, 168, 184, 0.08);
  border: 1px solid rgba(107, 168, 184, 0.35);
  border-radius: 18px;
  color: var(--text-primary, #333333);
  font-family: var(--font-primary);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s ease);
  user-select: none;
}

.info-popover-btn:hover,
.info-popover-btn:focus-visible,
.info-popover-wrap.is-open .info-popover-btn {
  background: rgba(107, 168, 184, 0.18);
  border-color: var(--accent-teal);
  box-shadow: 0 2px 8px rgba(107, 168, 184, 0.2);
  outline: none;
}

.info-popover-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 14px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-subtle, #e0e0e0);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
  color: var(--text-secondary);
  font-size: 0.76rem;
  line-height: 1.5;
  text-align: left;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast, 0.15s ease), visibility var(--transition-fast, 0.15s ease);
}

.info-popover-wrap:hover .info-popover-panel,
.info-popover-wrap.is-open .info-popover-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.info-popover-title {
  display: block;
  margin-bottom: 6px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.info-popover-line {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.76rem;
  line-height: 1.48;
}

.info-popover-line + .info-popover-line {
  margin-top: 6px;
}

.info-popover-panel .selection-note,
.info-popover-panel .info-box {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: auto;
  max-width: none;
}

.info-popover-panel .info-box::before {
  display: none;
}

/* =====================================================================
   Terminology Legend and Term Chips (CHV, 2026-08-30, WP22)
   ===================================================================== */
.term-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.term-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  user-select: none;
}

.term-chip-label {
  display: inline-block;
}

.term-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.term-info-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 50%;
  color: var(--accent-teal);
  transition: transform var(--transition-fast);
}

.term-info-btn:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

.term-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1.2px solid var(--accent-teal);
  border-radius: 50%;
  color: var(--accent-teal);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.term-info-btn:hover .term-info-icon,
.term-info-wrap.is-open .term-info-icon,
.term-info-btn[aria-expanded="true"] .term-info-icon {
  background: var(--accent-teal);
  color: var(--bg-card);
}

.term-def-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  color: var(--text-secondary);
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  white-space: normal;
}

.term-info-wrap:hover .term-def-panel,
.term-info-wrap.is-open .term-def-panel,
.term-info-btn[aria-expanded="true"] + .term-def-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.term-def-title {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.term-def-body {
  display: block;
  color: var(--text-secondary);
  font-family: var(--font-primary);
  font-size: 0.74rem;
  line-height: 1.45;
}
/* ========================================
   Sign-in page (login.html), access gate s06
   ======================================== */
.login-card {
  max-width: 420px;
  margin: 2rem auto;
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-heading {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-primary);
  margin: 0;
}

.login-disclaimer {
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--usage-bg);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.login-label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.login-input {
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.login-input:focus {
  outline: none;
  border-color: var(--usage-color);
  box-shadow: 0 0 0 3px var(--usage-bg);
}

.login-submit {
  margin-top: 0.5rem;
}

.login-error {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.85rem;
  color: var(--accent-burnt);
}

.login-request {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.login-request a {
  color: var(--accent-burnt);
}