/*
    ESG Theme Structure
    1. Root tokens
       1.1 Foundation tokens
       1.2 Canonical palette
       1.3 Public semantic tokens
       1.4 Compatibility aliases
       1.5 Component-level tokens
    2. Global base rules
    3. Layout and shared table primitives
    4. Management policy table family
    5. Shared figure, note, and legacy ESG24 helpers
    6. Shared chart families
       6.1 Bar chart
       6.1a Stacked bar chart
       6.2 Energy chart
       6.2a Dual line chart
       6.3 Intensity chart
       6.4 Combo chart
    7. Shared page families
       7.1 Water family
       7.2 Waste family
    8. Responsive overrides
*/

:root {
    /* Foundation neutrals and shared surfaces */
    --esg-foundation-ink-900: #1f1f1f;
    --esg-foundation-ink-850: #222222;
    --esg-foundation-ink-800: #2b2b2b;
    --esg-foundation-ink-700: #333333;
    --esg-foundation-ink-500: #555555;
    --esg-foundation-ink-400: #666666;
    --esg-foundation-white: #ffffff;
    --esg-foundation-danger: #ff0000;
    --esg-foundation-border-green: #d8df8a;
    --esg-foundation-border-green-soft: #d7df8a;
    --esg-foundation-gridline: #dfe6a5;
    --esg-foundation-surface-table-alt: #f9f9f5;
    --esg-foundation-surface-soft: #f8f9ef;

    /* Canonical palette: preferred source for new shared theme work */
    --esg-palette-blue: #3564a8;
    --esg-palette-blue-process: #446db1;
    --esg-palette-blue-strong: #173a8a;
    --esg-palette-blue-deep: #0f4a92;
    --esg-palette-blue-soft: #dfe8f5;
    --esg-palette-orange: #f99b2e;
    --esg-palette-orange-accent: #f28c00;
    --esg-palette-orange-deep: #d77200;
    --esg-palette-orange-soft: #fff3e5;
    --esg-palette-teal: #4db4b8;
    --esg-palette-teal-accent: #2fb8b5;
    --esg-palette-teal-soft: #ebf8f8;
    --esg-palette-green: #b7d21b;
    --esg-palette-green-text: #9dbb00;
    --esg-palette-lime-soft: #f6f8df;
    --esg-palette-purple: #724c9b;
    --esg-palette-purple-soft: #f2eef8;
    --esg-palette-purple-surface: #f5f2fa;
    --esg-palette-gray: #a7accb;

    /* Public semantic tokens: stable shared API */
    --esg-color-heading: #1f3864;
    --esg-color-heading-strong: var(--esg-foundation-ink-900);
    --esg-color-text: var(--esg-foundation-ink-700);
    --esg-color-text-strong: var(--esg-foundation-ink-850);
    --esg-color-text-deep: var(--esg-foundation-ink-800);
    --esg-color-muted: var(--esg-foundation-ink-500);
    --esg-color-subtle: var(--esg-foundation-ink-400);
    --esg-color-white: var(--esg-foundation-white);
    --esg-color-danger: var(--esg-foundation-danger);

    --esg-color-blue: var(--esg-palette-blue);
    --esg-color-orange: var(--esg-palette-orange);
    --esg-color-amber: var(--esg-palette-orange);
    --esg-color-orange-text: var(--esg-palette-orange-accent);
    --esg-color-teal: var(--esg-palette-teal);
    --esg-color-teal-text: var(--esg-palette-teal-accent);
    --esg-color-green: var(--esg-palette-green);
    --esg-color-green-text: var(--esg-palette-green-text);
    --esg-color-lime: var(--esg-palette-green);
    --esg-color-purple: var(--esg-palette-purple);
    --esg-color-chart-orange: var(--esg-palette-orange);
    --esg-color-chart-green: var(--esg-palette-green);

    --esg-process-blue: var(--esg-palette-blue-process);
    --esg-process-blue-strong: var(--esg-palette-blue-strong);
    --esg-process-blue-deep: var(--esg-palette-blue-deep);
    --esg-process-blue-soft: var(--esg-palette-blue-soft);
    --esg-process-orange: var(--esg-palette-orange);
    --esg-process-orange-deep: var(--esg-palette-orange-deep);
    --esg-process-orange-soft: var(--esg-palette-orange-soft);
    --esg-process-teal: var(--esg-palette-teal);
    --esg-process-teal-soft: var(--esg-palette-teal-soft);
    --esg-process-lime: var(--esg-palette-green);
    --esg-process-lime-soft: var(--esg-palette-lime-soft);
    --esg-process-purple: var(--esg-palette-purple);
    --esg-process-purple-strong: var(--esg-palette-purple);
    --esg-process-purple-soft: var(--esg-palette-purple-soft);
    --esg-process-purple-surface: var(--esg-palette-purple-surface);
    --esg-process-gray: var(--esg-palette-gray);

    /* Review-family semantics stay distinct because they encode categories */
    --esg-review-track: #edf7f7;
    --esg-review-quality: #e46da7;
    --esg-review-leadtime: #5851a9;
    --esg-review-safety: #63c29a;
    --esg-review-service: #f9a53b;
    --esg-review-progress: #5dbed0;
    --esg-review-upkeep: #84c84c;
    --esg-review-result-border: #ea5d9b;

    /* Shared border and surface semantics */
    --esg-border-green: var(--esg-foundation-border-green);
    --esg-border-green-soft: var(--esg-foundation-border-green-soft);
    --esg-bg-table-alt: var(--esg-foundation-surface-table-alt);
    --esg-bg-gridline: var(--esg-foundation-gridline);
    --esg-bg-soft: var(--esg-foundation-surface-soft);

    /* Compatibility aliases: preserve migrated pages, avoid for new work */
    /* Alias remap plan:
       orange-chart / orange-warm / orange-process -> orange
       teal-process / process-teal-alt -> teal
       green-chart / lime-process / color-lime -> green
       purple-process / purple-strong / process-purple-alt -> purple
    */
    --esg-process-teal-alt: var(--esg-palette-teal);
    --esg-process-lime-alt: var(--esg-palette-green);
    --esg-process-lime-badge-text: var(--esg-color-green-text);
    --esg-process-lime-text: var(--esg-color-green-text);
    --esg-process-purple-alt: var(--esg-palette-purple);
    /* Structural helpers retained for existing borders and grids */
    --esg-process-purple-border: #7f67a3;
    --esg-process-purple-grid: #76529f;

    --esg-font-family: "Microsoft JhengHei", "Noto Sans TC", Arial, sans-serif;
    --esg-line-height-content: 30px;
    --esg-line-height-table: 1.8;
    --esg-line-height-compact: 1.75;

    --esg-content-width-balanced: 64%;
    --esg-content-width-narrow: 75%;
    --esg-content-width-wide: 100%;
    --esg-table-padding-y: 14px;
    --esg-table-padding-x: 16px;
    --esg-table-head-padding-y: 14px;
    --esg-table-head-padding-x: 12px;
    /* Component-level semantic tokens: structural component colors, not canonical palette entries */
    --esg-management-border-default: var(--esg-border-green);
    --esg-management-border-cyan: #7fd7d8;
    --esg-management-border-green: #b7c92f;
    --esg-management-border-green-soft: #cddc39;
    --esg-management-border-purple: #c9bddc;
    --esg-management-border-teal: var(--esg-color-teal);
    --esg-management-cell-padding-y: 16px;
    --esg-management-cell-padding-x: 14px;
    --esg-management-head-padding-y: 14px;
    --esg-management-head-padding-x: 10px;
    --esg-management-head-size: 15px;
    --esg-management-body-size: 14px;
    --esg-management-body-line-height: var(--esg-line-height-table);
    --esg-management-title-gap: 8px;
    --esg-management-title-size: 15px;
    --esg-management-mobile-title-padding: 10px;
    --esg-management-mobile-title-margin: -16px -14px 14px -14px;

    --esg-space-xs: 5px;
    --esg-space-sm: 10px;
    --esg-space-md: 20px;
    --esg-space-lg: 30px;
    --esg-radius-sm: 6px;
}

/* ==========================================================================
   2. Global Base Rules
   ========================================================================== */

.esg-page,
.esg-page *,
.esg24-page,
.esg24-page * {
    box-sizing: border-box;
}

.esg-page,
.esg24-page {
    font-family: var(--esg-font-family);
    color: var(--esg-color-text);
}

.esg-gri {
    color: var(--esg-color-danger);
}

.esg-section-title {
    color: var(--esg-color-heading);
}

.esg-content-text {
    line-height: var(--esg-line-height-content);
}

.esg-body-copy,
.esg-page .esg-body-copy {
    line-height: var(--esg-line-height-content);
}

/* ==========================================================================
   3. Layout And Shared Table Primitives
   ========================================================================== */

/* Shared ESG layout widths */
.esg-content-balanced,
.esg-width-balanced,
.esg-page .esg-content-balanced,
.esg-page .esg-width-balanced {
    width: 100%;
    max-width: var(--esg-content-width-balanced);
    margin-left: auto;
    margin-right: auto;
}

.esg-content-narrow,
.esg-width-narrow,
.esg-note-narrow,
.esg-page .esg-content-narrow,
.esg-page .esg-width-narrow,
.esg-page .esg-note-narrow {
    width: 100%;
    max-width: var(--esg-content-width-narrow);
    margin-left: auto;
    margin-right: auto;
}

.esg-content-full,
.esg-width-full,
.esg-page .esg-content-full,
.esg-page .esg-width-full {
    width: 100%;
    max-width: var(--esg-content-width-wide);
}

/* Shared ESG table wrappers */
.esg-table-wrap,
.esg-page .table-wrap,
.esg24-page .table-wrap {
    width: 100%;
    border: 1px solid var(--esg-border-green);
}

.esg-table-wrap.esg-wrap-plain,
.esg-page .table-wrap.esg-wrap-plain,
.esg-page .table-wrap.esg24-wrap-plain,
.esg24-page .table-wrap.esg-wrap-plain,
.esg24-page .table-wrap.esg24-wrap-plain {
    border: none;
}

.esg-table-wrap.esg-wrap-narrow,
.esg-page .table-wrap.esg-wrap-narrow,
.esg-page .table-wrap.esg24-wrap-narrow,
.esg24-page .table-wrap.esg-wrap-narrow,
.esg24-page .table-wrap.esg24-wrap-narrow {
    max-width: var(--esg-content-width-narrow);
    margin-left: auto;
    margin-right: auto;
}

.esg-table-scroll,
.esg-page .esg-table-scroll,
.esg24-page .esg24-ifrs-wrap {
    overflow-x: auto;
}

.esg-table-wrap th p,
.esg-table-wrap td p,
.esg-page .table-wrap th p,
.esg-page .table-wrap td p,
.esg24-page .table-wrap th p,
.esg24-page .table-wrap td p {
    margin: 0 0 6px 0;
    text-indent: 0;
}

.esg-table-wrap th ul,
.esg-table-wrap th ol,
.esg-table-wrap td ul,
.esg-table-wrap td ol,
.esg-page .table-wrap th ul,
.esg-page .table-wrap th ol,
.esg-page .table-wrap td ul,
.esg-page .table-wrap td ol,
.esg24-page .table-wrap th ul,
.esg24-page .table-wrap th ol,
.esg24-page .table-wrap td ul,
.esg24-page .table-wrap td ol {
    margin: 0;
    padding-left: 1.2em;
}

.esg-table-wrap th li,
.esg-table-wrap td li,
.esg-page .table-wrap th li,
.esg-page .table-wrap td li,
.esg24-page .table-wrap th li,
.esg24-page .table-wrap td li {
    margin-bottom: 4px;
    padding-left: 0;
    text-indent: 0;
}

/* Shared ESG green-header tables */
.esg-table,
.esg-page .esg-table,
.esg24-page .esg24-data-table,
.esg24-page .esg24-scope3-table,
.esg24-page .esg24-action-table,
.esg24-page .esg24-plan-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.esg-table th,
.esg-page .esg-table th,
.esg24-page .esg24-data-table th,
.esg24-page .esg24-scope3-table th,
.esg24-page .esg24-action-table th,
.esg24-page .esg24-plan-table th {
    background: var(--esg-color-lime);
    color: var(--esg-color-white);
    font-weight: 700;
    padding: var(--esg-table-head-padding-y) var(--esg-table-head-padding-x);
    border: 1px solid var(--esg-border-green-soft);
    text-align: center;
}

.esg-table td,
.esg-page .esg-table td,
.esg24-page .esg24-data-table td,
.esg24-page .esg24-scope3-table td,
.esg24-page .esg24-action-table td,
.esg24-page .esg24-plan-table td {
    border: 1px solid var(--esg-border-green-soft);
    padding: var(--esg-table-padding-y) var(--esg-table-padding-x);
    vertical-align: top;
    background: var(--esg-color-white);
    text-indent: 0;
}

.esg-table p,
.esg-page .esg-table p,
.esg24-page .esg24-management-table p,
.esg24-page .esg24-risk-table p,
.esg24-page .esg24-saving-table p,
.esg24-page .esg24-scope3-table p,
.esg24-page .esg24-action-table p,
.esg24-page .esg24-plan-table p {
    margin: 0 0 6px 0;
    text-indent: 0;
}

.esg-table ul,
.esg-table ol,
.esg-page .esg-table ul,
.esg-page .esg-table ol,
.esg24-page .esg24-management-table ul,
.esg24-page .esg24-management-table ol,
.esg24-page .esg24-risk-table ul,
.esg24-page .esg24-risk-table ol,
.esg24-page .esg24-saving-table ul,
.esg24-page .esg24-saving-table ol,
.esg24-page .esg24-scope3-table ul,
.esg24-page .esg24-scope3-table ol,
.esg24-page .esg24-action-table ul,
.esg24-page .esg24-action-table ol,
.esg24-page .esg24-plan-table ul,
.esg24-page .esg24-plan-table ol {
    margin: 0;
    padding-left: 1.2em;
}

.esg-table li,
.esg-page .esg-table li,
.esg24-page .esg24-management-table li,
.esg24-page .esg24-risk-table li,
.esg24-page .esg24-saving-table li,
.esg24-page .esg24-scope3-table li,
.esg24-page .esg24-action-table li,
.esg24-page .esg24-plan-table li {
    text-indent: 0;
    padding-left: 0;
    margin-bottom: 4px;
}

.esg-table td.number,
.esg-table .number,
.esg-page .esg-table td.number,
.esg-page .esg-table .number,
.esg24-page .esg24-data-table td.number,
.esg24-page .esg24-scope3-table td.number,
.esg24-page .esg24-action-table td.number,
.esg24-page .esg24-plan-table td.number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.esg-table tr.subtotal td,
.esg-table tr.total td,
.esg-page .esg-table tr.subtotal td,
.esg-page .esg-table tr.total td,
.esg24-page .esg24-data-table tr.total td,
.esg24-page .esg24-scope3-table tr.subtotal td,
.esg24-page .esg24-action-table tr.subtotal td,
.esg24-page .esg24-plan-table tr.subtotal td,
.esg24-page .esg24-scope3-table tr.total td {
    background: var(--esg-bg-soft);
    font-weight: 700;
}

.esg-table--compact th,
.esg-table--compact td,
.esg-page .esg-table--compact th,
.esg-page .esg-table--compact td,
.esg24-page .esg24-data-table-compact th,
.esg24-page .esg24-data-table-compact td {
    text-align: center;
}

.esg-table--compact td.number,
.esg-page .esg-table--compact td.number,
.esg24-page .esg24-data-table-compact td.number {
    text-align: right;
}

.esg-table--center th,
.esg-table--center td,
.esg-page .esg-table--center th,
.esg-page .esg-table--center td,
.esg24-page .esg24-plan-table th,
.esg24-page .esg24-plan-table td {
    vertical-align: middle;
    text-align: center;
}

.esg-table--center td.number,
.esg-page .esg-table--center td.number,
.esg24-page .esg24-plan-table td.number {
    text-align: right;
}

.esg-table-list,
.esg-page .esg-table-list,
.esg24-page .esg24-plan-table td.esg24-plan-list {
    text-align: left;
}

.esg-table-list ol,
.esg-page .esg-table-list ol,
.esg24-page .esg24-plan-table td.esg24-plan-list ol {
    padding-left: 1.4em;
    list-style-type: decimal;
    list-style-position: outside;
}

.esg-table-list li,
.esg-page .esg-table-list li,
.esg24-page .esg24-plan-table td.esg24-plan-list li {
    list-style-type: decimal;
}

/* Shared ESG management tables */
/* ==========================================================================
   4. Management Policy Table Family
   ========================================================================== */

.esg-management-table,
.esg-page .esg-management-table,
.esg24-page .esg24-management-table {
    --esg-management-border-color: var(--esg-management-border-default);
    --esg-management-head-padding-block: var(--esg-management-head-padding-y);
    --esg-management-head-padding-inline: var(--esg-management-head-padding-x);
    --esg-management-cell-padding-block: var(--esg-management-cell-padding-y);
    --esg-management-cell-padding-inline: var(--esg-management-cell-padding-x);
    --esg-management-mobile-title-box-padding: var(--esg-management-mobile-title-padding);
    --esg-management-mobile-title-box-margin: var(--esg-management-mobile-title-margin);
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.esg-management-table th,
.esg-page .esg-management-table th,
.esg24-page .esg24-management-table th {
    color: var(--esg-color-white);
    font-size: var(--esg-management-head-size);
    font-weight: 700;
    letter-spacing: 1px;
    padding: var(--esg-management-head-padding-block) var(--esg-management-head-padding-inline);
    text-align: center;
}

.esg-management-table td,
.esg-page .esg-management-table td,
.esg24-page .esg24-management-table td {
    vertical-align: top;
    padding: var(--esg-management-cell-padding-block) var(--esg-management-cell-padding-inline);
    font-size: var(--esg-management-body-size);
    line-height: var(--esg-management-body-line-height);
    border-right: 1px solid var(--esg-management-border-color);
    border-bottom: 1px solid var(--esg-management-border-color);
}

.esg-management-table--policy,
.esg-page .esg-management-table--policy,
.esg24-page .esg-management-table--policy {
    --esg-management-border-color: var(--esg-management-border-default);
}

.esg-management-table--policy td,
.esg-page .esg-management-table--policy td,
.esg24-page .esg-management-table--policy td {
    border: 1px solid var(--esg-management-border-color);
    text-align: left;
    text-indent: 0;
    background: var(--esg-color-white);
}

.esg-management-table--policy th,
.esg-page .esg-management-table--policy th,
.esg24-page .esg-management-table--policy th {
    border: 1px solid var(--esg-management-border-color);
}

.esg-management-table--policy td p,
.esg-management-table--policy td ul,
.esg-management-table--policy td ol,
.esg-page .esg-management-table--policy td p,
.esg-page .esg-management-table--policy td ul,
.esg-page .esg-management-table--policy td ol,
.esg24-page .esg-management-table--policy td p,
.esg24-page .esg-management-table--policy td ul,
.esg24-page .esg-management-table--policy td ol {
    margin-top: 0;
    text-indent: 0;
}

.esg-management-table--policy td p,
.esg-page .esg-management-table--policy td p,
.esg24-page .esg-management-table--policy td p {
    margin-bottom: var(--esg-management-title-gap);
}

.esg-management-table--policy td p:last-child,
.esg-page .esg-management-table--policy td p:last-child,
.esg24-page .esg-management-table--policy td p:last-child {
    margin-bottom: 0;
}

.esg-management-table--policy td ul,
.esg-management-table--policy td ol,
.esg-page .esg-management-table--policy td ul,
.esg-page .esg-management-table--policy td ol,
.esg24-page .esg-management-table--policy td ul,
.esg24-page .esg-management-table--policy td ol {
    margin-bottom: 0;
    padding-left: 1.2em;
    list-style-position: outside;
}

.esg-management-table--policy td li,
.esg-page .esg-management-table--policy td li,
.esg24-page .esg-management-table--policy td li {
    margin-bottom: 4px;
    padding-left: 0;
    text-indent: 0;
}

.esg-management-table--policy td li:last-child,
.esg-page .esg-management-table--policy td li:last-child,
.esg24-page .esg-management-table--policy td li:last-child {
    margin-bottom: 0;
}

.esg-management-table--policy .esg-title-blue,
.esg-management-table--policy .esg-title-orange,
.esg-management-table--policy .esg-title-teal,
.esg-management-table--policy .esg-title-green,
.esg-page .esg-management-table--policy .esg-title-blue,
.esg-page .esg-management-table--policy .esg-title-orange,
.esg-page .esg-management-table--policy .esg-title-teal,
.esg-page .esg-management-table--policy .esg-title-green,
.esg24-page .esg-management-table--policy .esg-title-blue,
.esg24-page .esg-management-table--policy .esg-title-orange,
.esg24-page .esg-management-table--policy .esg-title-teal,
.esg24-page .esg-management-table--policy .esg-title-green {
    font-size: var(--esg-management-title-size);
    margin-bottom: var(--esg-management-title-gap);
}

.esg-management-table--policy.esg-management-table--border-cyan,
.esg-page .esg-management-table--policy.esg-management-table--border-cyan,
.esg24-page .esg-management-table--policy.esg-management-table--border-cyan {
    --esg-management-border-color: var(--esg-management-border-cyan);
}

.esg-management-table--policy.esg-management-table--border-green,
.esg-page .esg-management-table--policy.esg-management-table--border-green,
.esg24-page .esg-management-table--policy.esg-management-table--border-green {
    --esg-management-border-color: var(--esg-management-border-green);
}

.esg-management-table--policy.esg-management-table--border-green-soft,
.esg-page .esg-management-table--policy.esg-management-table--border-green-soft,
.esg24-page .esg-management-table--policy.esg-management-table--border-green-soft {
    --esg-management-border-color: var(--esg-management-border-green-soft);
}

.esg-management-table--policy.esg-management-table--border-purple,
.esg-page .esg-management-table--policy.esg-management-table--border-purple,
.esg24-page .esg-management-table--policy.esg-management-table--border-purple {
    --esg-management-border-color: var(--esg-management-border-purple);
}

.esg-management-table--policy.esg-management-table--border-teal,
.esg-page .esg-management-table--policy.esg-management-table--border-teal,
.esg24-page .esg-management-table--policy.esg-management-table--border-teal {
    --esg-management-border-color: var(--esg-management-border-teal);
}

.esg-management-table--policy.esg-management-table--border-cyan th,
.esg-management-table--policy.esg-management-table--border-green th,
.esg-management-table--policy.esg-management-table--border-green-soft th,
.esg-management-table--policy.esg-management-table--border-purple th,
.esg-management-table--policy.esg-management-table--border-teal th,
.esg-page .esg-management-table--policy.esg-management-table--border-cyan th,
.esg-page .esg-management-table--policy.esg-management-table--border-green th,
.esg-page .esg-management-table--policy.esg-management-table--border-green-soft th,
.esg-page .esg-management-table--policy.esg-management-table--border-purple th,
.esg-page .esg-management-table--policy.esg-management-table--border-teal th,
.esg24-page .esg-management-table--policy.esg-management-table--border-cyan th,
.esg24-page .esg-management-table--policy.esg-management-table--border-green th,
.esg24-page .esg-management-table--policy.esg-management-table--border-green-soft th,
.esg24-page .esg-management-table--policy.esg-management-table--border-purple th,
.esg24-page .esg-management-table--policy.esg-management-table--border-teal th {
    border: 1px solid var(--esg-management-border-color);
}

.esg-bg-blue,
.esg24-page .blue { background: var(--esg-color-blue); }
.esg-bg-orange,
.esg24-page .orange { background: var(--esg-color-orange); }
.esg-bg-teal,
.esg24-page .teal { background: var(--esg-color-teal); }
.esg-bg-green,
.esg24-page .green { background: var(--esg-color-green); }

.esg-title-blue,
.esg-title-orange,
.esg-title-teal,
.esg-title-green,
.esg24-page .title-blue,
.esg24-page .title-orange,
.esg24-page .title-teal,
.esg24-page .title-green {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
}

.esg-title-blue,
.esg24-page .title-blue { color: var(--esg-color-blue); }
.esg-title-orange,
.esg24-page .title-orange { color: var(--esg-color-orange-text); }
.esg-title-teal,
.esg24-page .title-teal { color: var(--esg-color-teal-text); }
.esg-title-green,
.esg24-page .title-green { color: var(--esg-color-green-text); }

/* ESG24 compatibility management-table skin retained here to avoid page-local skeleton drift */
.esg24-page .esg24-management-table,
.esg24-page .esg24-management-table.esg-management-table--column-flow {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.esg24-page .esg24-management-table colgroup,
.esg24-page .esg24-management-table thead {
    display: table-header-group;
}

.esg24-page .esg24-management-table tbody {
    display: table-row-group;
}

.esg24-page .esg24-management-table tr {
    display: table-row;
}

.esg24-page .esg24-management-table td,
.esg24-page .esg24-management-table th {
    display: table-cell;
    vertical-align: top;
    padding: 16px 14px;
    font-size: 14px;
    line-height: 1.8;
    border-right: 1px solid var(--esg-border-green);
    border-bottom: 1px solid var(--esg-border-green);
}

.esg24-page .esg24-management-table th {
    color: var(--esg-color-white);
    font-weight: 700;
    text-align: center;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 14px 10px;
}

.esg24-page .esg24-management-table td::before {
    display: none;
}

.esg24-page .esg24-management-table .blue { background: var(--esg-color-blue); }

.esg24-page .esg24-management-table .orange { background: var(--esg-color-orange); }

.esg24-page .esg24-management-table .teal { background: var(--esg-color-teal); }

.esg24-page .esg24-management-table .green { background: var(--esg-color-green); }

.esg-climate-data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.esg-climate-data-table th {
    background: var(--esg-color-green);
    color: var(--esg-color-white);
    font-weight: 700;
    padding: 14px 12px;
    border: 1px solid var(--esg-border-green-soft);
    text-align: center;
}

.esg-climate-data-table td {
    border: 1px solid var(--esg-border-green-soft);
    padding: 14px 16px;
    vertical-align: top;
    background: var(--esg-color-white);
    text-indent: 0;
}

.esg-climate-data-table td.number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.esg-climate-data-table tr.subtotal td,
.esg-climate-data-table tr.total td {
    background: var(--esg-bg-soft);
    font-weight: 700;
}

.esg-climate-data-table ul,
.esg-climate-data-table ol {
    margin: 0;
    padding-left: 1.2em;
}

.esg-climate-data-table li {
    text-indent: 0;
    padding-left: 0;
    margin-bottom: 4px;
}

/* Shared ESG risk and summary tables */
.esg-risk-table,
/* ==========================================================================
   5. Shared Figure, Note, And Legacy ESG24 Helpers
   ========================================================================== */

.esg-page .esg-risk-table,
.esg24-page .esg24-risk-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    line-height: var(--esg-line-height-compact);
}

.esg-risk-table th,
.esg-page .esg-risk-table th,
.esg24-page .esg24-risk-table th {
    background: var(--esg-color-lime);
    color: var(--esg-color-white);
    font-weight: 700;
    text-align: center;
    padding: 12px 8px;
    border: 1px solid var(--esg-border-green-soft);
}

.esg-risk-table td,
.esg-page .esg-risk-table td,
.esg24-page .esg24-risk-table td {
    vertical-align: top;
    padding: 10px 12px;
    border: 1px solid var(--esg-border-green-soft);
    background: var(--esg-color-white);
    color: var(--esg-color-text);
}

.esg-risk-table tr:nth-child(even) td,
.esg-page .esg-risk-table tr:nth-child(even) td,
.esg24-page .esg24-risk-table tr:nth-child(even) td {
    background: var(--esg-bg-table-alt);
}

.esg-risk-table ol,
.esg-page .esg-risk-table ol,
.esg24-page .esg24-risk-table ol {
    padding-left: 1.1em;
}

.esg-risk-table .risk,
.esg-risk-table .metric-label,
.esg-page .esg-risk-table .risk,
.esg-page .esg-risk-table .metric-label,
.esg24-page .esg24-risk-table .risk,
.esg24-page .esg24-risk-table .metric-label {
    font-weight: 700;
    color: var(--esg-color-text);
}

.esg-risk-table .up,
.esg-page .esg-risk-table .up,
.esg24-page .esg24-risk-table .up {
    color: var(--esg-color-amber);
    font-weight: 700;
}

.esg-risk-table .down,
.esg-page .esg-risk-table .down,
.esg24-page .esg24-risk-table .down {
    color: var(--esg-color-green-text);
    font-weight: 700;
}

.esg-summary-table,
.esg-page .esg-summary-table,
.esg24-page .esg24-saving-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 22px;
    text-align: center;
}

.esg-summary-table th,
.esg-page .esg-summary-table th,
.esg24-page .esg24-saving-table th {
    background: var(--esg-color-lime);
    color: var(--esg-color-white);
    font-weight: 700;
    padding: 14px 10px;
    border: 1px solid var(--esg-color-lime);
}

.esg-summary-table td,
.esg-page .esg-summary-table td,
.esg24-page .esg24-saving-table td {
    background: var(--esg-color-white);
    color: var(--esg-color-text);
    padding: 16px 10px;
    border: 1px solid var(--esg-border-green-soft);
    font-weight: 400;
}

.esg-summary-table .row-title,
.esg-page .esg-summary-table .row-title,
.esg24-page .esg24-saving-table .row-title {
    font-weight: 700;
    width: 22%;
}

/* Shared ESG figure, note and card utilities */
.esg-figure-panel,
.esg-page .esg-figure-panel,
.esg24-page .esg24-figure-panel {
    padding: 24px 26px;
    background: var(--esg-color-white);
}

.esg-figure-panel h5,
.esg-page .esg-figure-panel h5,
.esg24-page .esg24-figure-panel h5 {
    margin: 0 0 14px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--esg-color-heading);
}

.esg-figure-note,
.esg-page .esg-figure-note,
.esg24-page .esg24-figure-note {
    margin-top: 16px;
    color: var(--esg-color-muted);
    text-indent: 0;
}

.esg-note-list,
.esg-page .esg-note-list,
.esg24-page .esg24-note-list {
    margin: 14px 0 0 0;
    padding-left: 1.2em;
    color: var(--esg-color-muted);
    list-style-type: decimal;
    list-style-position: outside;
}

.esg-note-list li,
.esg-page .esg-note-list li,
.esg24-page .esg24-note-list li {
    margin-bottom: 4px;
    list-style-type: decimal;
}

.esg-note-list-centered,
.esg-page .esg-note-list-centered,
.esg24-page .esg24-note-list-centered {
    width: fit-content;
    max-width: 100%;
    margin: 16px auto 0;
    text-align: left;
    padding-left: 1.4em;
    list-style-position: outside;
}

.esg-table-title,
.esg-page .esg-table-title,
.esg24-page .esg24-table-title {
    display: block;
    margin: 10px 0 10px 0;
    padding-left: 0;
    text-indent: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--esg-color-heading);
}

.esg-chart-card,
.esg-page .esg-chart-card,
.esg24-page .esg24-chart-card {
    border: 1px solid var(--esg-border-green-soft);
    background: var(--esg-bg-soft);
    padding: 20px 18px;
}

.esg-chart-card h5,
.esg-page .esg-chart-card h5,
.esg24-page .esg24-chart-card h5 {
    margin: 0 0 14px 0;
    font-size: 18px;
    color: var(--esg-color-heading);
}

.esg-gri-badge,
.esg-page .esg-gri-badge,
.esg24-page .esg24-gri-badge {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--esg-color-lime);
    border-radius: 2px;
    overflow: hidden;
    font-weight: 700;
    line-height: 1;
}

.esg-gri-badge-label,
.esg-page .esg-gri-badge-label,
.esg24-page .esg24-gri-badge-label {
    background: var(--esg-color-lime);
    color: var(--esg-color-white);
    padding: 6px 8px;
    font-size: 12px;
    letter-spacing: 0.4px;
}

.esg-gri-badge-code,
.esg-page .esg-gri-badge-code,
.esg24-page .esg24-gri-badge-code {
    color: var(--esg-color-lime);
    background: var(--esg-color-white);
    padding: 6px 10px;
    font-size: 12px;
}

/* Shared ESG bar chart layout, axis, value labels and hover tooltip */
/* ==========================================================================
   6. Shared Chart Families
   ========================================================================== */

/* T24 contract note:
   - Tier A families should keep raw values in data-* attributes and let shared JS
     derive axis ticks, bar heights and visible labels.
   - Tier B families may temporarily retain manual geometry for compatibility, but
     height/point/polyline/dash geometry is not the preferred long-term source.
   - Tier C charts remain legacy until later migration tasks replace them. */

/* 6.1 Bar Chart */
.esg-bar-chart {
    --esg-bar-chart-axis-left: 86px;
    --esg-bar-chart-axis-top: 52px;
    --esg-bar-chart-axis-offset: 92px;
    --esg-bar-chart-height: 312px;
    --esg-bar-chart-columns: 3;
    --esg-bar-chart-gap: 16px;
    --esg-bar-chart-bar-gap: 18px;
    --esg-bar-chart-bar-width: 28px;
    --esg-bar-chart-tick-left: -68px;
    --esg-bar-chart-tick-width: 60px;
    --esg-bar-chart-label-space: 54px;
    --esg-bar-chart-grid-color: var(--esg-bg-gridline);
    --esg-bar-chart-tick-color: var(--esg-color-subtle);
    --esg-bar-chart-group-label-size: 14px;
    --esg-bar-chart-group-align: stretch;
    --esg-bar-chart-group-justify: flex-start;
    --esg-bar-chart-y2022-bg: var(--esg-color-chart-orange);
    --esg-bar-chart-y2023-bg: var(--esg-color-purple);
    --esg-bar-chart-y2024-bg: var(--esg-color-chart-green);
    --esg-bar-chart-y2022-value-color: var(--esg-bar-chart-y2022-bg);
    --esg-bar-chart-y2023-value-color: var(--esg-bar-chart-y2023-bg);
    --esg-bar-chart-y2024-value-color: var(--esg-bar-chart-y2024-bg);
    --esg-bar-chart-zero: 0%;
    position: relative;
    box-sizing: border-box;
    min-height: calc(var(--esg-bar-chart-axis-top) + var(--esg-bar-chart-height) + var(--esg-bar-chart-label-space));
    padding: 12px 6px 0 var(--esg-bar-chart-axis-left);
}

.esg-bar-chart > h1,
.esg-bar-chart > h2,
.esg-bar-chart > h3,
.esg-bar-chart > h4,
.esg-bar-chart > h5,
.esg-bar-chart > h6,
.esg-bar-chart > .esg-bar-chart-title {
    position: relative;
    z-index: 2;
    margin: 0 0 14px calc(0px - var(--esg-bar-chart-axis-left));
    text-align: center;
    text-indent: 0;
}

/* Plot layers are pinned together so titles/legends cannot move bars away from the axis grid. */
.esg-bar-chart .esg-bar-grid,
.esg-bar-chart .esg-bar-groups {
    position: absolute;
    left: var(--esg-bar-chart-axis-left);
    top: var(--esg-bar-chart-axis-top);
    width: calc(100% - var(--esg-bar-chart-axis-offset));
    height: var(--esg-bar-chart-height);
}

.esg-bar-chart .esg-bar-grid {
    border-left: 1px solid var(--esg-bar-chart-grid-color);
    border-bottom: 1px solid var(--esg-bar-chart-grid-color);
}

.esg-bar-chart.has-negative-range .esg-bar-grid::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--esg-bar-chart-zero);
    border-top: 1px solid var(--esg-bar-chart-grid-color);
}

.esg-bar-chart .esg-bar-grid span {
    position: absolute;
    left: var(--esg-bar-chart-tick-left);
    width: var(--esg-bar-chart-tick-width);
    text-align: right;
    font-size: 12px;
    color: var(--esg-bar-chart-tick-color);
    font-variant-numeric: tabular-nums;
}

.esg-bar-chart .esg-bar-grid span.is-zero {
    font-weight: 700;
}

.esg-bar-chart .esg-bar-groups {
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(var(--esg-bar-chart-columns), minmax(0, 1fr));
    gap: var(--esg-bar-chart-gap);
    align-items: end;
    margin-top: 0;
}

.esg-bar-chart .esg-bar-group {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: var(--esg-bar-chart-group-align);
    justify-content: var(--esg-bar-chart-group-justify);
}

.esg-bar-chart .esg-bars,
.esg-bar-chart .bars {
    flex: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--esg-bar-chart-bar-gap);
    width: 100%;
    height: 100%;
}

.esg-bar-chart.has-negative-range .esg-bars,
.esg-bar-chart.has-negative-range .bars {
    position: relative;
    display: block;
}

.esg-bar-chart .esg-bar,
.esg-bar-chart .bar {
    width: var(--esg-bar-chart-bar-width);
    min-height: 2px;
    height: 0;
    transition: height 0.24s ease, background-color 0.18s ease, filter 0.18s ease;
}

.esg-bar-chart .y2022 { background: var(--esg-bar-chart-y2022-bg); }
.esg-bar-chart .y2023 { background: var(--esg-bar-chart-y2023-bg); }
.esg-bar-chart .y2024 { background: var(--esg-bar-chart-y2024-bg); }

.esg-bar-chart .esg-bar-group p {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    font-size: var(--esg-bar-chart-group-label-size);
    color: var(--esg-color-heading);
    text-indent: 0;
}

.esg-bar-chart .esg-bar,
.esg-bar-chart .bar {
    position: relative;
    cursor: pointer;
}

.esg-bar-chart.has-negative-range .esg-bar,
.esg-bar-chart.has-negative-range .bar {
    position: absolute;
    min-height: 0;
}

.esg-bar-chart.has-negative-range .esg-bar.has-value,
.esg-bar-chart.has-negative-range .bar.has-value {
    min-height: 2px;
}

.esg-bar-chart .esg-bar-value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 6px;
    transform: translateX(-50%);
    color: var(--esg-color-heading);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-indent: 0;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.16s ease, visibility 0.16s ease;
    z-index: 2;
}

.esg-bar-chart.has-negative-range .esg-bar.is-negative-bar .esg-bar-value,
.esg-bar-chart.has-negative-range .bar.is-negative-bar .esg-bar-value {
    top: 100%;
    bottom: auto;
    margin-top: 6px;
    margin-bottom: 0;
}

.esg-bar-chart .bar.y2022 .esg-bar-value,
.esg-bar-chart .esg-bar.y2022 .esg-bar-value { color: var(--esg-bar-chart-y2022-value-color); }
.esg-bar-chart .bar.y2023 .esg-bar-value,
.esg-bar-chart .esg-bar.y2023 .esg-bar-value { color: var(--esg-bar-chart-y2023-value-color); }
.esg-bar-chart .bar.y2024 .esg-bar-value,
.esg-bar-chart .esg-bar.y2024 .esg-bar-value { color: var(--esg-bar-chart-y2024-value-color); }

.esg-bar-chart.is-hovering-bar .esg-bar-value {
    opacity: 0;
    visibility: hidden;
}

.esg-bar-chart .esg-bar[data-value]::after,
.esg-bar-chart .bar[data-value]::after {
    content: attr(data-tooltip-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    margin-bottom: 10px;
    padding: 5px 8px;
    min-width: 74px;
    border-radius: 4px;
    background: #1f1f1f;
    color: var(--esg-color-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: pre;
    text-align: center;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    transform-origin: 50% 100%;
    z-index: 5;
}

.esg-bar-chart .esg-bar[data-value]::before,
.esg-bar-chart .bar[data-value]::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    margin-bottom: 4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #1f1f1f;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 5;
}

.esg-bar-chart.has-negative-range .esg-bar.is-negative-bar[data-value]::after,
.esg-bar-chart.has-negative-range .bar.is-negative-bar[data-value]::after {
    top: 100%;
    bottom: auto;
    margin-top: 10px;
    margin-bottom: 0;
    transform: translateX(-50%) translateY(-6px);
    transform-origin: 50% 0;
}

.esg-bar-chart.has-negative-range .esg-bar.is-negative-bar[data-value]::before,
.esg-bar-chart.has-negative-range .bar.is-negative-bar[data-value]::before {
    top: 100%;
    bottom: auto;
    margin-top: 4px;
    border-top: 0;
    border-bottom: 6px solid #1f1f1f;
    transform: translateX(-50%) translateY(-4px);
}

.esg-bar-chart .esg-bar[data-value]:hover::after,
.esg-bar-chart .esg-bar[data-value]:hover::before,
.esg-bar-chart .esg-bar[data-value]:focus-visible::after,
.esg-bar-chart .esg-bar[data-value]:focus-visible::before,
.esg-bar-chart .bar[data-value]:hover::after,
.esg-bar-chart .bar[data-value]:hover::before,
.esg-bar-chart .bar[data-value]:focus-visible::after,
.esg-bar-chart .bar[data-value]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.esg-bar-chart .esg-bar[data-value]:hover,
.esg-bar-chart .esg-bar[data-value]:focus-visible,
.esg-bar-chart .bar[data-value]:hover,
.esg-bar-chart .bar[data-value]:focus-visible {
    filter: brightness(1.18);
}

.esg-bar-chart .esg-bar[data-value]:focus-visible,
.esg-bar-chart .bar[data-value]:focus-visible {
    outline: 2px solid var(--esg-color-heading);
    outline-offset: 2px;
}

/* 6.1 Responsive */
@media (max-width: 900px) {
    .esg-content-balanced,
    .esg-content-narrow,
    .esg-width-balanced,
    .esg-width-narrow,
    .esg-note-narrow,
    .esg-table-wrap.esg-wrap-narrow,
    .esg-page .esg-content-balanced,
    .esg-page .esg-content-narrow,
    .esg-page .esg-width-balanced,
    .esg-page .esg-width-narrow,
    .esg-page .esg-note-narrow,
    .esg-page .table-wrap.esg-wrap-narrow,
    .esg-page .table-wrap.esg24-wrap-narrow,
    .esg24-page .table-wrap.esg-wrap-narrow,
    .esg24-page .table-wrap.esg24-wrap-narrow {
        width: 100%;
        max-width: 100%;
    }

    .esg-management-table,
    .esg-management-table thead,
    .esg-management-table tbody,
    .esg-management-table tr,
    .esg-management-table th,
    .esg-management-table td,
    .esg-risk-table,
    .esg-risk-table thead,
    .esg-risk-table tbody,
    .esg-risk-table tr,
    .esg-risk-table th,
    .esg-risk-table td,
    .esg-page .esg-management-table,
    .esg-page .esg-management-table thead,
    .esg-page .esg-management-table tbody,
    .esg-page .esg-management-table tr,
    .esg-page .esg-management-table th,
    .esg-page .esg-management-table td,
    .esg-page .esg-risk-table,
    .esg-page .esg-risk-table thead,
    .esg-page .esg-risk-table tbody,
    .esg-page .esg-risk-table tr,
    .esg-page .esg-risk-table th,
    .esg-page .esg-risk-table td,
    .esg24-page .esg24-management-table,
    .esg24-page .esg24-management-table thead,
    .esg24-page .esg24-management-table tbody,
    .esg24-page .esg24-management-table tr,
    .esg24-page .esg24-management-table th,
    .esg24-page .esg24-management-table td,
    .esg24-page .esg24-risk-table,
    .esg24-page .esg24-risk-table thead,
    .esg24-page .esg24-risk-table tbody,
    .esg24-page .esg24-risk-table tr,
    .esg24-page .esg24-risk-table th,
    .esg24-page .esg24-risk-table td {
        display: block;
        width: 100%;
    }

    .esg-management-table thead,
    .esg-risk-table thead,
    .esg-page .esg-management-table thead,
    .esg-page .esg-risk-table thead,
    .esg24-page .esg24-management-table thead,
    .esg24-page .esg24-risk-table thead {
        display: none;
    }

    .esg-management-table td,
    .esg-page .esg-management-table td,
    .esg24-page .esg24-management-table td {
        min-height: auto;
        border-right: none;
    }

    .esg-management-table td::before,
    .esg-page .esg-management-table td::before,
    .esg24-page .esg24-management-table td::before {
        display: block;
        font-weight: 700;
        color: var(--esg-color-white);
        padding: var(--esg-management-mobile-title-box-padding);
        margin: var(--esg-management-mobile-title-box-margin);
    }

    .esg-risk-table tr,
    .esg-page .esg-risk-table tr,
    .esg24-page .esg24-risk-table tr {
        margin-bottom: 18px;
        border: 1px solid var(--esg-border-green-soft);
    }

    .esg-risk-table td,
    .esg-page .esg-risk-table td,
    .esg24-page .esg24-risk-table td {
        border: none;
        border-bottom: 1px solid var(--esg-border-green-soft);
    }

    .esg-risk-table td::before,
    .esg-page .esg-risk-table td::before,
    .esg24-page .esg24-risk-table td::before {
        display: block;
        font-weight: 700;
        color: var(--esg-color-green-text);
        margin-bottom: 4px;
    }
}

@media (max-width: 1199px) {
    .esg-management-table--column-flow,
    .esg-page .esg-management-table--column-flow,
    .esg24-page .esg-management-table--column-flow {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    .esg-management-table--column-flow colgroup,
    .esg-page .esg-management-table--column-flow colgroup,
    .esg24-page .esg-management-table--column-flow colgroup,
    .esg-management-table--column-flow thead,
    .esg-page .esg-management-table--column-flow thead,
    .esg24-page .esg-management-table--column-flow thead {
        display: none !important;
    }

    .esg-management-table--column-flow tbody,
    .esg-page .esg-management-table--column-flow tbody,
    .esg24-page .esg-management-table--column-flow tbody {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0;
        width: 100% !important;
    }

    .esg-management-table--column-flow tr,
    .esg-page .esg-management-table--column-flow tr,
    .esg24-page .esg-management-table--column-flow tr {
        display: contents !important;
    }

    .esg-management-table--column-flow td,
    .esg-page .esg-management-table--column-flow td,
    .esg24-page .esg-management-table--column-flow td {
        display: block !important;
        width: 100% !important;
        min-height: auto;
    }

    .esg-management-table--column-flow td::before {
        display: none !important;
        content: none !important;
    }

    .esg-management-table--column-flow td.col1 {
        order: 1;
    }

    .esg-management-table--column-flow td.col2 {
        order: 2;
    }

    .esg-management-table--column-flow td.col3 {
        order: 3;
    }

    .esg-management-table--column-flow td.col4 {
        order: 4;
    }

    .esg-management-table--column-flow td.show-mobile-title.col2,
    .esg-management-table--column-flow td.show-mobile-title.col3,
    .esg-management-table--column-flow td.show-mobile-title.col4 {
        margin-top: 0;
    }

    .esg-management-table--column-flow td.show-mobile-title::before {
        display: block !important;
        font-weight: 700;
        color: var(--esg-color-white);
        padding: var(--esg-management-mobile-title-box-padding);
        margin: var(--esg-management-mobile-title-box-margin);
    }

    .esg-management-table--column-flow td.show-mobile-title.col1::before {
        content: "管理方針及要素" !important;
        background: var(--esg-color-blue) !important;
    }

    .esg-management-table--column-flow td.show-mobile-title.col2::before {
        content: "管理衝擊" !important;
        background: var(--esg-color-orange) !important;
    }

    .esg-management-table--column-flow td.show-mobile-title.col3::before {
        content: "管理方針目標執行績效" !important;
        background: var(--esg-color-teal) !important;
    }

    .esg-management-table--column-flow td.show-mobile-title.col4::before {
        content: "管理方針的評量" !important;
        background: var(--esg-color-green) !important;
    }
}

@media (max-width: 768px) {
    .esg-summary-table,
    .esg-page .esg-summary-table,
    .esg24-page .esg24-saving-table {
        font-size: 16px;
    }

    .esg-figure-panel,
    .esg-chart-card,
    .esg-page .esg-figure-panel,
    .esg-page .esg-chart-card,
    .esg24-page .esg24-figure-panel,
    .esg24-page .esg24-chart-card {
        padding: 18px 16px;
    }

    .esg-bar-chart .esg-bar-value {
        font-size: 10px;
    }
}

/* Extracted from esg24/esg45 */
/* Tier A family: page provides values and optional range overrides; shared JS
   owns the rendered bar geometry and visible value labels. */

/* 6.1a Stacked Bar Chart */
.esg-stacked-chart {
    --esg-stacked-axis-left: 74px;
    --esg-stacked-axis-top: 24px;
    --esg-stacked-axis-offset: 40px;
    --esg-stacked-height: 420px;
    --esg-stacked-columns: 3;
    --esg-stacked-gap: 56px;
    --esg-stacked-bar-width: 34px;
    --esg-stacked-label-space: 72px;
    --esg-stacked-legend-space: 64px;
    --esg-stacked-grid-color: var(--esg-bg-gridline);
    --esg-stacked-axis-color: var(--esg-color-subtle);
    --esg-stacked-year-color: var(--esg-color-link);
    --esg-stacked-total-color: var(--esg-color-link);
    --esg-stacked-segment-value-color: var(--esg-color-white);
    --esg-stacked-legend-color: var(--esg-color-link);
    --esg-stacked-segment-value-size: 18px;
    --esg-stacked-total-size: 22px;
    --esg-stacked-year-size: 20px;
    position: relative;
    box-sizing: border-box;
    min-height: calc(var(--esg-stacked-axis-top) + var(--esg-stacked-height) + var(--esg-stacked-label-space) + var(--esg-stacked-legend-space));
    padding: 0 12px 0 var(--esg-stacked-axis-left);
}

.esg-stacked-chart .esg-stacked-axis-title {
    position: absolute;
    left: 12px;
    top: calc(var(--esg-stacked-axis-top) + (var(--esg-stacked-height) / 2));
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-size: 20px;
    color: var(--esg-stacked-axis-color);
    white-space: nowrap;
}

.esg-stacked-chart .esg-stacked-axis-labels,
.esg-stacked-chart .esg-stacked-grid,
.esg-stacked-chart .esg-stacked-groups {
    position: absolute;
    left: var(--esg-stacked-axis-left);
    top: var(--esg-stacked-axis-top);
    width: calc(100% - var(--esg-stacked-axis-left) - var(--esg-stacked-axis-offset));
}

.esg-stacked-chart .esg-stacked-axis-labels,
.esg-stacked-chart .esg-stacked-grid {
    height: var(--esg-stacked-height);
}

.esg-stacked-chart .esg-stacked-axis-labels {
    pointer-events: none;
}

.esg-stacked-chart .esg-stacked-axis-labels span {
    position: absolute;
    left: -58px;
    width: 48px;
    transform: translateY(50%);
    text-align: right;
    font-size: 16px;
    color: var(--esg-stacked-axis-color);
    font-variant-numeric: tabular-nums;
}

.esg-stacked-chart .esg-stacked-grid {
    border-left: 1px solid var(--esg-stacked-grid-color);
    border-bottom: 1px solid var(--esg-stacked-grid-color);
}

.esg-stacked-chart .esg-stacked-grid span {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--esg-stacked-grid-color);
}

.esg-stacked-chart .esg-stacked-groups {
    height: calc(var(--esg-stacked-height) + var(--esg-stacked-label-space));
    display: grid;
    grid-template-columns: repeat(var(--esg-stacked-columns), minmax(0, 1fr));
    gap: var(--esg-stacked-gap);
}

.esg-stacked-chart .esg-stacked-group {
    display: grid;
    grid-template-rows: var(--esg-stacked-height) minmax(0, var(--esg-stacked-label-space));
    align-items: start;
}

.esg-stacked-chart .esg-stacked-plot {
    position: relative;
    height: var(--esg-stacked-height);
}

.esg-stacked-chart .esg-stacked-bar {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: var(--esg-stacked-bar-width);
    height: 100%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
}

.esg-stacked-chart .esg-stacked-segment {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 24px;
}

.esg-stacked-chart .esg-stacked-segment-value {
    color: var(--esg-stacked-segment-value-color);
    font-size: var(--esg-stacked-segment-value-size);
    font-weight: 700;
    line-height: 1;
}

.esg-stacked-chart .esg-stacked-total {
    position: absolute;
    left: 50%;
    transform: translate(-50%, calc(-100% - 8px));
    font-size: var(--esg-stacked-total-size);
    font-weight: 700;
    color: var(--esg-stacked-total-color);
    line-height: 1;
    white-space: nowrap;
}

.esg-stacked-chart .esg-stacked-group > p {
    margin: 14px 0 0 0;
    text-align: center;
    font-size: var(--esg-stacked-year-size);
    color: var(--esg-stacked-year-color);
    text-indent: 0;
}

.esg-stacked-chart .esg-stacked-legend {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 0;
    color: var(--esg-stacked-legend-color);
    font-size: 18px;
}

.esg-stacked-chart .esg-stacked-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.esg-stacked-chart .esg-stacked-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .esg-stacked-chart {
        --esg-stacked-axis-left: 62px;
        --esg-stacked-axis-offset: 24px;
        --esg-stacked-height: 340px;
        --esg-stacked-gap: 28px;
        --esg-stacked-label-space: 64px;
        --esg-stacked-legend-space: 56px;
        --esg-stacked-segment-value-size: 16px;
        --esg-stacked-total-size: 18px;
        --esg-stacked-year-size: 16px;
    }

    .esg-stacked-chart .esg-stacked-axis-title {
        font-size: 16px;
    }

    .esg-stacked-chart .esg-stacked-axis-labels span {
        left: -48px;
        width: 40px;
        font-size: 14px;
    }

    .esg-stacked-chart .esg-stacked-legend {
        gap: 14px;
        font-size: 16px;
    }
}


/* 6.2 Energy Chart */
.esg-energy-chart {
    --esg-energy-legend-justify: flex-end;
    --esg-energy-grid-color: var(--esg-bg-gridline);
    --esg-energy-tick-color: var(--esg-color-subtle);
    --esg-energy-y2022-bg: var(--esg-color-chart-orange);
    --esg-energy-y2023-bg: var(--esg-color-purple);
    --esg-energy-y2024-bg: var(--esg-color-chart-green);
    --esg-energy-y2022-value-color: var(--esg-energy-y2022-bg);
    --esg-energy-y2023-value-color: var(--esg-energy-y2023-bg);
    --esg-energy-y2024-value-color: var(--esg-energy-y2024-bg);
    --esg-energy-hover-brightness: 1.2;
    position: relative;
    padding: 12px 6px 0 86px;
}


.esg-energy-legend {
    display: flex;
    justify-content: var(--esg-energy-legend-justify);
    gap: 18px;
    margin: 0 6px 14px 0;
    font-size: 13px;
}


.esg-energy-unit {
    position: absolute;
    left: 2px;
    top: 208px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 14px;
    color: var(--esg-color-subtle);
    letter-spacing: 1px;
}


.esg-energy-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


.esg-energy-legend i {
    width: 12px;
    height: 12px;
    display: inline-block;
}


.esg-energy-chart .y2022 { background: var(--esg-energy-y2022-bg); }

.esg-energy-chart .y2023 { background: var(--esg-energy-y2023-bg); }

.esg-energy-chart .y2024 { background: var(--esg-energy-y2024-bg); }


.esg-energy-grid {
    position: absolute;
    left: 86px;
    top: 52px;
    width: calc(100% - 92px);
    height: 312px;
    border-left: 1px solid var(--esg-energy-grid-color);
    border-bottom: 1px solid var(--esg-energy-grid-color);
}


.esg-energy-grid span {
    position: absolute;
    left: -68px;
    width: 60px;
    text-align: right;
    font-size: 12px;
    color: var(--esg-energy-tick-color);
    font-variant-numeric: tabular-nums;
}


.esg-energy-groups {
    position: relative;
    z-index: 1;
    height: 312px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
    margin-top: 52px;
}


.esg-energy-group {
    display: flex;
    flex-direction: column;
    height: 100%;
}


.esg-energy-group .bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 18px;
}


.esg-energy-group .bar {
    position: relative;
    cursor: pointer;
    width: 28px;
    min-height: 2px;
    height: 0;
    transition: height 0.24s ease, background-color 0.18s ease, filter 0.18s ease;
}


.esg-energy-group p {
    margin: 10px 0 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--esg-color-heading);
    text-indent: 0;
}


.esg-energy-group.total p {
    font-weight: 700;
}


.esg-energy-chart .esg-bar-value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 6px;
    transform: translateX(-50%);
    color: var(--esg-color-heading);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-indent: 0;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.16s ease, visibility 0.16s ease;
    z-index: 2;
}


.esg-energy-chart .bar.y2022 .esg-bar-value {
    color: var(--esg-energy-y2022-value-color);
}


.esg-energy-chart .bar.y2023 .esg-bar-value {
    color: var(--esg-energy-y2023-value-color);
}


.esg-energy-chart .bar.y2024 .esg-bar-value {
    color: var(--esg-energy-y2024-value-color);
}


.esg-energy-chart.is-hovering-bar .esg-bar-value {
    opacity: 0;
    visibility: hidden;
}


.esg-energy-chart .bar[data-value]::after {
    content: attr(data-tooltip-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    margin-bottom: 10px;
    padding: 5px 8px;
    min-width: 74px;
    border-radius: 4px;
    background: #1f1f1f;
    color: var(--esg-color-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: pre;
    text-align: center;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 6;
}


.esg-energy-chart .bar[data-value]::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    margin-bottom: 4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #1f1f1f;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 5;
}


.esg-energy-chart .bar[data-value]:hover::after,
.esg-energy-chart .bar[data-value]:hover::before,
.esg-energy-chart .bar[data-value]:focus-visible::after,
.esg-energy-chart .bar[data-value]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


.esg-energy-chart .bar[data-value]:hover,
.esg-energy-chart .bar[data-value]:focus-visible {
    filter: brightness(var(--esg-energy-hover-brightness));
}


.esg-energy-chart .bar[data-value]:focus-visible {
    outline: 2px solid var(--esg-color-heading);
    outline-offset: 2px;
}


.esg-energy-chart-ghg .esg-energy-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}


/* .esg-energy-chart-ghg .esg-energy-group p {
    margin-top: 16px;
    min-height: 2.8em;
    display: block;
    text-align: center;
    line-height: 1.25;
}
 */

.esg-energy-chart-compact {
    padding-left: 80px;
}


.esg-energy-chart-compact .esg-energy-unit {
    top: 190px;
}


.esg-energy-chart-compact .esg-energy-grid {
    left: 80px;
    width: calc(100% - 86px);
    top: 32px;
    height: 280px;
}


.esg-energy-chart-compact .esg-energy-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px;
    height: 280px;
    overflow: visible;
}


.esg-energy-chart-compact .bars {
    gap: 0;
    flex: 1;
}


.esg-energy-chart-compact .esg-energy-group p {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 6px 0 0 0;
    transform: none;
    line-height: 1.2;
}


.esg-energy-chart-compact .esg-energy-group {
    position: relative;
}


.esg-energy-chart-compact {
    padding-bottom: 34px;
}


.esg-intensity-card {
    border: none;
    background: transparent;
    padding: 0 0 24px 0;
}


.esg-intensity-card h5 {
    margin-bottom: 10px;
    text-align: center;
}


.esg-intensity-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
    color: var(--esg-color-text);
    font-size: 13px;
}


.esg-intensity-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-indent: 0;
}


.esg-intensity-legend i {
    display: inline-block;
    flex: 0 0 auto;
}


.esg-intensity-legend .bar-key {
    width: 12px;
    height: 12px;
    background: var(--esg-intensity-y2022-bar-color);
}


.esg-intensity-legend .line-key {
    width: 26px;
    height: 2px;
    background: var(--esg-intensity-line-color);
    position: relative;
}


.esg-intensity-legend .line-key::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--esg-intensity-line-color);
    transform: translate(-50%, -50%);
}


/* Tier A family:
   page markup provides bar values, line values, axis ranges and x-axis labels;
   shared JS derives axis labels, bar heights, point positions and polyline geometry. */
/* 6.2a Dual Line Chart */
.esg-dual-line-chart {
    --esg-dual-line-axis-side: 86px;
    --esg-dual-line-plot-height: 360px;
    --esg-dual-line-grid-color: var(--esg-bg-gridline);
    --esg-dual-line-axis-color: var(--esg-color-text);
    --esg-dual-line-year-color: var(--esg-color-text);
    --esg-dual-line-primary-color: var(--esg-color-chart-green);
    --esg-dual-line-secondary-color: var(--esg-color-chart-orange);
    --esg-dual-line-stroke-width: 2.5;
    --esg-dual-line-point-size: 12px;
    --esg-dual-line-point-ring: 2px;
    --esg-dual-line-point-ring-color: var(--esg-color-white);
    position: relative;
}

.esg-dual-line-chart .esg-dual-line-chart__axis-title {
    position: absolute;
    top: 90px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 20px;
    color: var(--esg-dual-line-axis-color);
}

.esg-dual-line-chart .esg-dual-line-chart__axis-title.is-left {
    left: calc(0px - var(--esg-dual-line-axis-side) + 40px);
}

.esg-dual-line-chart .esg-dual-line-chart__axis-title.is-right {
    right: calc(0px - var(--esg-dual-line-axis-side) + 40px);
}

.esg-dual-line-chart .esg-dual-line-chart__plot {
    position: relative;
    height: var(--esg-dual-line-plot-height);
    margin: 0 var(--esg-dual-line-axis-side);
    border: 1px solid var(--esg-dual-line-grid-color);
}

.esg-dual-line-chart .esg-dual-line-chart__axis {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.esg-dual-line-chart .esg-dual-line-chart__axis span {
    position: absolute;
    transform: translateY(50%);
    font-size: 14px;
    color: var(--esg-dual-line-axis-color);
    font-variant-numeric: tabular-nums;
}

.esg-dual-line-chart .esg-dual-line-chart__axis.is-left span {
    left: calc(0px - var(--esg-dual-line-axis-side) + 12px);
}

.esg-dual-line-chart .esg-dual-line-chart__axis.is-right span {
    right: calc(0px - var(--esg-dual-line-axis-side) + 12px);
}

.esg-dual-line-chart .esg-dual-line-chart__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.esg-dual-line-chart .esg-dual-line-chart__grid .grid-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--esg-dual-line-grid-color);
}

.esg-dual-line-chart .esg-dual-line-chart__line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.esg-dual-line-chart .esg-dual-line-chart__line polyline {
    fill: none;
    stroke-width: var(--esg-dual-line-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.esg-dual-line-chart .esg-dual-line-chart__line.is-primary polyline {
    stroke: var(--esg-dual-line-primary-color);
}

.esg-dual-line-chart .esg-dual-line-chart__line.is-secondary polyline {
    stroke: var(--esg-dual-line-secondary-color);
}

.esg-dual-line-chart .esg-dual-line-chart__point {
    position: absolute;
    left: var(--x);
    bottom: var(--y);
    z-index: 2;
    width: var(--esg-dual-line-point-size);
    height: var(--esg-dual-line-point-size);
    border: var(--esg-dual-line-point-ring) solid var(--esg-dual-line-point-ring-color);
    border-radius: 50%;
    transform: translate(-50%, 50%);
    box-sizing: border-box;
}

.esg-dual-line-chart .esg-dual-line-chart__point.is-primary {
    background: var(--esg-dual-line-primary-color);
}

.esg-dual-line-chart .esg-dual-line-chart__point.is-secondary {
    background: var(--esg-dual-line-secondary-color);
}

.esg-dual-line-chart .esg-dual-line-chart__point .value {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.esg-dual-line-chart .esg-dual-line-chart__point.is-primary .value {
    bottom: 14px;
    color: var(--esg-dual-line-primary-color);
}

.esg-dual-line-chart .esg-dual-line-chart__point.is-secondary .value {
    top: 14px;
    color: var(--esg-dual-line-secondary-color);
}

.esg-dual-line-chart .esg-dual-line-chart__x-label {
    position: absolute;
    left: var(--x);
    bottom: -42px;
    transform: translateX(-50%);
    font-size: 18px;
    color: var(--esg-dual-line-year-color);
    white-space: nowrap;
}

.esg-dual-line-chart .esg-dual-line-chart__legend {
    margin-top: 52px;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 16px;
}

.esg-dual-line-chart .esg-dual-line-chart__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.esg-dual-line-chart .esg-dual-line-chart__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.esg-dual-line-chart .esg-dual-line-chart__legend-dot.is-primary {
    background: var(--esg-dual-line-primary-color);
}

.esg-dual-line-chart .esg-dual-line-chart__legend-dot.is-secondary {
    background: var(--esg-dual-line-secondary-color);
}

/* 6.3 Intensity Chart */
.esg-intensity-chart {
    --esg-intensity-grid-color: var(--esg-border-green-soft);
    --esg-intensity-line-color: var(--esg-color-teal);
    --esg-intensity-point-color: var(--esg-intensity-line-color);
    --esg-intensity-point-label-color: var(--esg-intensity-line-color);
    --esg-intensity-y2022-bar-color: var(--esg-color-chart-orange);
    --esg-intensity-y2023-bar-color: var(--esg-color-purple);
    --esg-intensity-y2024-bar-color: var(--esg-color-lime);
    --esg-intensity-y2022-label-color: var(--esg-intensity-y2022-bar-color);
    --esg-intensity-y2023-label-color: var(--esg-intensity-y2023-bar-color);
    --esg-intensity-y2024-label-color: var(--esg-intensity-y2024-bar-color);
    position: relative;
    padding: 22px 72px 44px 78px;
    text-indent: 0;
}


.esg-intensity-axis-title {
    position: absolute;
    top: 165px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--esg-color-subtle);
    font-size: 13px;
    line-height: 1.2;
    text-indent: 0;
}


.esg-intensity-axis-title.left {
    left: 0;
}


.esg-intensity-axis-title.right {
    right: 0;
}


.esg-intensity-axis-labels {
    position: absolute;
    top: 22px;
    bottom: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--esg-color-subtle);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}


.esg-intensity-axis-labels.left {
    left: 22px;
    width: 50px;
    align-items: flex-end;
}


.esg-intensity-axis-labels.right {
    right: 18px;
    width: 48px;
    align-items: flex-start;
}


.esg-intensity-plot {
    position: relative;
    height: 300px;
    border: none;
    background: transparent;
}


.esg-intensity-grid,
.esg-intensity-line,
.esg-intensity-points,
.esg-intensity-groups {
    position: absolute;
    inset: 0;
}


.esg-intensity-grid span {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--esg-intensity-grid-color);
}


.esg-intensity-line {
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}


.esg-intensity-line polyline {
    fill: none;
    stroke: var(--esg-intensity-line-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}


.esg-intensity-points {
    z-index: 4;
    pointer-events: none;
}


.esg-intensity-point {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--esg-intensity-point-color);
    transform: translate(-50%, -50%);
    pointer-events: auto;
}


.esg-intensity-point span {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--esg-intensity-point-label-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-indent: 0;
}


.esg-intensity-groups {
    z-index: 2;
}


.esg-intensity-group {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--x);
    width: 86px;
    transform: translateX(-50%);
    height: 100%;
    text-align: center;
}


.esg-intensity-bar {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 28px;
    height: var(--bar-height);
    transform: translateX(-50%);
}


.esg-intensity-bar-label {
    position: absolute;
    left: 50%;
    bottom: calc(var(--bar-height) + 10px);
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-indent: 0;
}


.esg-intensity-group p {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    color: var(--esg-color-heading);
    font-size: 20px;
    line-height: 1;
    white-space: nowrap;
    text-indent: 0;
}


.esg-intensity-group.y2022 .esg-intensity-bar {
    background: var(--esg-intensity-y2022-bar-color);
}


.esg-intensity-group.y2022 .esg-intensity-bar-label {
    color: var(--esg-intensity-y2022-label-color);
}


.esg-intensity-group.y2023 .esg-intensity-bar {
    background: var(--esg-intensity-y2023-bar-color);
}


.esg-intensity-group.y2023 .esg-intensity-bar-label {
    color: var(--esg-intensity-y2023-label-color);
}


.esg-intensity-group.y2024 .esg-intensity-bar {
    background: var(--esg-intensity-y2024-bar-color);
}


.esg-intensity-group.y2024 .esg-intensity-bar-label {
    color: var(--esg-intensity-y2024-label-color);
}


.esg-intensity-bar:focus-visible,
.esg-intensity-point:focus-visible {
    outline: 2px solid var(--esg-color-heading);
    outline-offset: 3px;
}


/* Tier A family:
   page markup provides bar values, line values, axis ranges and x-axis labels;
   shared JS derives bar height, point positions, polyline geometry and labels. */
/* 6.4 Combo Chart */
.esg-combo-chart {
    --esg-combo-min-height: 420px;
    --esg-combo-pad-top: 16px;
    --esg-combo-pad-right: 86px;
    --esg-combo-pad-bottom: 58px;
    --esg-combo-pad-left: 86px;
    --esg-combo-axis-width: 72px;
    --esg-combo-axis-font-size: 13px;
    --esg-combo-y-title-left: -10px;
    --esg-combo-y-title-right: 10px;
    --esg-combo-y-title-size: 13px;
    --esg-combo-text-color: #333;
    --esg-combo-grid-color: var(--esg-border-green-soft);
    --esg-combo-plot-border-width: 1px;
    --esg-combo-plot-border-color: var(--esg-combo-grid-color);
    --esg-combo-line-color: var(--esg-color-chart-orange);
    --esg-combo-line-width: 1.1;
    --esg-combo-columns: 3;
    --esg-combo-group-gap: 20px;
    --esg-combo-group-pad-x: 20px;
    --esg-combo-bar-width: 32%;
    --esg-combo-bar-min-width: 58px;
    --esg-combo-bar-min-height: 4px;
    --esg-combo-bar-color: var(--esg-color-purple);
    --esg-combo-bar-label-color: #fff;
    --esg-combo-bar-label-size: 15px;
    --esg-combo-point-color: var(--esg-combo-line-color);
    --esg-combo-point-size: 12px;
    --esg-combo-point-value-size: 14px;
    --esg-combo-x-offset-bottom: 0;
    --esg-combo-x-font-size: 14px;
    position: relative;
    min-height: var(--esg-combo-min-height);
    padding:
        var(--esg-combo-pad-top)
        var(--esg-combo-pad-right)
        var(--esg-combo-pad-bottom)
        var(--esg-combo-pad-left);
}


.esg-combo-chart__ytitle {
    position: absolute;
    top: 50%;
    left: var(--esg-combo-y-title-left);
    color: var(--esg-combo-text-color);
    font-size: var(--esg-combo-y-title-size);
    line-height: 1.35;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: translateY(-50%);
}


.esg-combo-chart__ytitle--right {
    left: auto;
    right: var(--esg-combo-y-title-right);
}


.esg-combo-chart__axis {
    position: absolute;
    top: var(--esg-combo-pad-top);
    bottom: var(--esg-combo-pad-bottom);
    width: var(--esg-combo-axis-width);
    color: var(--esg-combo-text-color);
    font-size: var(--esg-combo-axis-font-size);
    font-variant-numeric: tabular-nums;
}


.esg-combo-chart__axis--left {
    left: 0;
}


.esg-combo-chart__axis--right {
    right: 0;
}


.esg-combo-chart__axis span {
    position: absolute;
    transform: translateY(50%);
}


.esg-combo-chart__axis--left span {
    right: 8px;
}


.esg-combo-chart__axis--right span {
    left: 8px;
}


.esg-combo-chart__plot {
    position: absolute;
    top: var(--esg-combo-pad-top);
    right: var(--esg-combo-pad-right);
    bottom: var(--esg-combo-pad-bottom);
    left: var(--esg-combo-pad-left);
    border: var(--esg-combo-plot-border-width) solid var(--esg-combo-plot-border-color);
    overflow: visible;
}


.esg-combo-chart__grid {
    position: absolute;
    inset: 0;
}


.esg-combo-chart__grid span {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--esg-combo-grid-color);
}


.esg-combo-chart__line {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: esg-combo-fade-in 0.8s ease both;
    z-index: 3;
}


.esg-combo-chart__line polyline {
    fill: none;
    stroke: var(--esg-combo-line-color);
    stroke-width: var(--esg-combo-line-width);
    stroke-linecap: round;
    stroke-linejoin: round;
}


.esg-combo-chart__bars {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(var(--esg-combo-columns), minmax(0, 1fr));
    gap: 0;
    z-index: 2;
}


.esg-combo-chart__bars--4 {
    --esg-combo-columns: 4;
}


.esg-combo-chart__group {
    position: relative;
    min-width: 0;
}


.esg-combo-chart__stage {
    position: absolute;
    inset: 0;
}


.esg-combo-chart__cluster {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: var(--esg-combo-group-gap);
    padding: 0 var(--esg-combo-group-pad-x);
}


.esg-combo-chart__bar {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: var(--esg-combo-bar-width);
    min-width: var(--esg-combo-bar-min-width);
    background: var(--esg-combo-bar-color);
    transform: translateX(-50%);
    transform-origin: bottom center;
    animation: esg-combo-grow-y-bar 0.85s ease both;
    z-index: 1;
}


.esg-combo-chart__cluster .esg-combo-chart__bar {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    animation: esg-combo-grow-y-bar-inline 0.85s ease both;
}


.esg-combo-chart__bar--short {
    min-height: var(--esg-combo-bar-min-height);
}


.esg-combo-chart__bar-label {
    position: absolute;
    top: 14px;
    left: 50%;
    color: var(--esg-combo-bar-label-color);
    font-size: var(--esg-combo-bar-label-size);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
}


.esg-combo-chart__bar-label--outside {
    top: auto;
    bottom: calc(100% + 10px);
    color: var(--esg-combo-bar-color);
}


.esg-combo-chart__point {
    position: absolute;
    left: var(--x);
    bottom: var(--y);
    width: 0;
    height: 0;
    transform: translate(-50%, 50%);
    z-index: 4;
    color: var(--esg-combo-point-color);
}


.esg-combo-chart__point .dot {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--esg-combo-point-size);
    height: var(--esg-combo-point-size);
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}


.esg-combo-chart__point .value {
    position: absolute;
    left: 0;
    bottom: 9px;
    font-size: var(--esg-combo-point-value-size);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: translate(-50%, -100%);
}


.esg-combo-chart__point .value.is-top {
    bottom: 12px;
}


.esg-combo-chart__point.is-below .value {
    bottom: auto;
    top: 12px;
    transform: translate(-50%, 0);
}


.esg-combo-chart__x-axis {
    position: absolute;
    right: var(--esg-combo-pad-right);
    bottom: var(--esg-combo-x-offset-bottom);
    left: var(--esg-combo-pad-left);
    display: grid;
    gap: 0;
}


.esg-combo-chart__x-axis--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


.esg-combo-chart__x-axis--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


.esg-combo-chart__x-axis p {
    margin: 0;
    color: var(--esg-combo-text-color);
    font-size: var(--esg-combo-x-font-size);
    line-height: 1.35;
    text-align: center;
    text-indent: 0;
}


@keyframes esg-combo-grow-y-bar {
    from {
        transform: translateX(-50%) scaleY(0);
    }

    to {
        transform: translateX(-50%) scaleY(1);
    }
}


@keyframes esg-combo-grow-y-bar-inline {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}


@keyframes esg-combo-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ==========================================================================
   7. Shared Page Families
   ========================================================================== */

/* 7.1 Water Family */
/* Tier A family:
   page markup provides line values, bar values, target values and x-axis labels;
   shared JS derives axis labels, line points, target positions and bar geometry. */
.esg-water-page {
    --esg-water-grid-color: var(--esg-bg-gridline);
    --esg-water-chart-green: var(--esg-color-chart-green);
    --esg-water-chart-orange: var(--esg-color-chart-orange);
    --esg-water-phase-purple: #7c66b1;
    --esg-water-chart-title-size: 24px;
    --esg-water-chart-top: 22px;
    --esg-water-chart-bottom: 86px;
    --esg-water-plot-height: 320px;
    --esg-water-chart-min-height: 470px;
    --esg-water-chart-pad-left: 96px;
    --esg-water-chart-pad-right: 116px;
    --esg-water-axis-width: 72px;
    --esg-water-axis-title-left: 16px;
    --esg-water-axis-title-right: 18px;
    --esg-water-axis-label-left: 14px;
    --esg-water-axis-label-right: 14px;
    --esg-water-point-size: 14px;
    --esg-water-point-value-size: 15px;
    --esg-water-bar-width: 11%;
    --esg-water-bar-min-width: 74px;
    --esg-water-x-label-bottom: -50px;
    --esg-water-x-label-size: 16px;
    --esg-water-legend-gap: 2vw;
    --esg-water-legend-margin-top: 5.5vh;
    --esg-water-risk-source-gap: 8px;
    --esg-water-risk-source-pad-top: 18px;
    --esg-water-risk-source-pad-bottom: 0;
    --esg-water-summary-row-title-width: 46%;
    --esg-water-phase-gap: 18px;
    --esg-water-phase-pad: 28px 30px 28px 34px;
    --esg-water-phase-title-size: 24px;
}


.esg-water-risk-panel {
    padding: 24px 26px;
    border: 1px solid var(--esg-water-grid-color);
    background: var(--esg-color-white);
}


.esg-water-risk-top {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--esg-water-grid-color);
}


.esg-water-risk-level {
    margin: 0 0 16px 0;
    color: #d91f26;
    font-size: 32px;
    font-weight: 700;
    text-indent: 0;
}


.esg-water-risk-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


.esg-water-risk-meta p,
.esg-water-risk-source-list p {
    margin: 0;
    text-indent: 0;
}


.esg-water-risk-source-list {
    display: grid;
    gap: var(--esg-water-risk-source-gap);
    padding:
        var(--esg-water-risk-source-pad-top)
        0
        var(--esg-water-risk-source-pad-bottom);
}


.esg-water-data-table th,
.esg-water-saving-table th {
    background: var(--esg-water-chart-green);
    border: 1px solid var(--esg-water-grid-color);
}


.esg-water-data-table td,
.esg-water-saving-table td {
    border: 1px solid var(--esg-water-grid-color);
}


.esg-water-data-table tbody tr:nth-child(even) td {
    background: #fbfdf1;
}


.esg-water-rowhead {
    background: #fbfdf1;
    font-weight: 700;
    text-align: center;
}


.esg-water-summary-table .row-title {
    width: var(--esg-water-summary-row-title-width);
    text-align: left;
    font-weight: 400;
}


.esg-water-change {
    font-weight: 700;
    white-space: nowrap;
}


.esg-water-change.is-up {
    color: var(--esg-water-chart-orange);
}


.esg-water-change.is-down {
    color: var(--esg-water-chart-green);
}


.esg-water-unit-note {
    margin: 0 0 12px 0;
    color: var(--esg-color-muted);
    text-align: right;
    text-indent: 0;
}


.esg-water-quality-table th,
.esg-water-quality-table td,
.esg-water-saving-table th,
.esg-water-saving-table td {
    text-align: center;
}


.esg-water-saving-table th,
.esg-water-saving-table td {
    vertical-align: middle;
}


.esg-water-chart-scroll {
    overflow-x: auto;
    width: 100%;
}


.esg-water-chart-card,
.esg-water-page .esg-water-chart-card,
.esg-page .esg-water-chart-card {
    min-width: 0;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
}


.esg-water-chart-header {
    display: grid;
    gap: 6px;
    justify-items: center;
    margin-bottom: 10px;
    width: 100%;
}


.esg-water-chart-header h4,
.esg-water-chart-header p {
    margin: 0;
    text-indent: 0;
}


.esg-water-chart-header h4 {
    width: 100%;
    color: var(--esg-color-heading);
    font-size: var(--esg-water-chart-title-size);
    font-weight: 700;
    text-align: center;
}


.esg-water-chart-header p {
    color: var(--esg-color-muted);
    text-align: center;
}


.esg-water-line-chart,
.esg-water-dual-chart {
    position: relative;
    min-height: var(--esg-water-chart-min-height);
    padding:
        var(--esg-water-chart-top)
        var(--esg-water-chart-pad-right)
        var(--esg-water-chart-bottom)
        var(--esg-water-chart-pad-left);
}


.esg-water-axis-title {
    position: absolute;
    top: 50%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: translateY(-50%);
    color: #222;
    font-size: 14px;
    line-height: 1.5;
}


.esg-water-axis-title.is-left {
    left: var(--esg-water-axis-title-left);
}


.esg-water-axis-title.is-right {
    right: var(--esg-water-axis-title-right);
}


.esg-water-axis-labels {
    position: absolute;
    top: var(--esg-water-chart-top);
    height: var(--esg-water-plot-height);
    width: var(--esg-water-axis-width);
}


.esg-water-axis-labels span {
    position: absolute;
    transform: translateY(50%);
    color: #222;
    font-size: 14px;
    line-height: 1;
}


.esg-water-axis-labels.is-left {
    left: var(--esg-water-axis-label-left);
    text-align: right;
}


.esg-water-axis-labels.is-left span {
    right: 0;
}


.esg-water-axis-labels.is-right {
    right: var(--esg-water-axis-label-right);
    text-align: left;
}


.esg-water-axis-labels.is-right span {
    left: 0;
}


.esg-water-plot {
    position: relative;
    height: var(--esg-water-plot-height);
    border-left: 1px solid var(--esg-water-grid-color);
    border-bottom: 1px solid var(--esg-water-grid-color);
}


.esg-water-plot .grid-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--esg-water-grid-color);
}


.esg-water-plot .target-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px solid var(--esg-water-chart-orange);
}


.esg-water-plot .target-badge {
    position: absolute;
    left: 0;
    transform: translate(-110%, 50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--esg-water-chart-orange);
    color: var(--esg-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    z-index: 3;
}


.esg-water-line-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}


.esg-water-line-svg polyline {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 0.85;
}


.esg-water-line-svg.is-lime polyline {
    stroke: var(--esg-water-chart-green);
}


.esg-water-line-svg.is-orange polyline {
    stroke: var(--esg-water-chart-orange);
}


.esg-water-point,
.esg-water-bar,
.esg-water-bar-label,
.esg-water-x-label {
    position: absolute;
    left: var(--x);
}


.esg-water-point,
.esg-water-bar-label,
.esg-water-x-label {
    transform: translateX(-50%);
    text-align: center;
}


.esg-water-point {
    bottom: var(--y);
    width: 0;
    height: 0;
    transform: translate(-50%, 50%);
    z-index: 2;
}


.esg-water-point .dot {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: var(--esg-water-point-size);
    height: var(--esg-water-point-size);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px currentColor;
    background: currentColor;
}


.esg-water-point .value {
    position: absolute;
    left: 0;
    bottom: 14px;
    display: block;
    font-size: var(--esg-water-point-value-size);
    font-weight: 700;
    white-space: nowrap;
    transform: translate(-50%, -100%);
}


.esg-water-point.is-below .value {
    bottom: auto;
    top: 14px;
    transform: translate(-50%, 0);
}


.esg-water-point.lime {
    color: var(--esg-water-chart-green);
}


.esg-water-point.orange {
    color: var(--esg-water-chart-orange);
}


.esg-water-bar {
    bottom: 0;
    width: var(--esg-water-bar-width);
    min-width: var(--esg-water-bar-min-width);
    height: var(--h);
    transform: translateX(-50%);
}


.esg-water-bar.lime {
    background: var(--esg-water-chart-green);
}


.esg-water-bar-label {
    bottom: var(--h);
    z-index: 2;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}


.esg-water-bar-label.inside {
    bottom: calc(var(--h) - 16px);
    color: var(--esg-color-white);
    transform: translate(-50%, 0);
}


.esg-water-bar-label.above {
    color: var(--esg-water-chart-green);
    transform: translate(-50%, calc(-100% - 8px));
}


.esg-water-x-label {
    bottom: var(--esg-water-x-label-bottom);
    color: #222;
    font-size: var(--esg-water-x-label-size);
    white-space: nowrap;
}


.esg-water-legend {
    display: flex;
    justify-content: center;
    gap: var(--esg-water-legend-gap);
    margin-top: var(--esg-water-legend-margin-top);
    color: #222;
    font-size: 16px;
}


.esg-water-legend span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


.esg-water-legend .swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}


.esg-water-legend .swatch.lime {
    background: var(--esg-water-chart-green);
}


.esg-water-legend .swatch.orange {
    background: var(--esg-water-chart-orange);
}


.esg-water-phase-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esg-water-phase-gap);
}


.esg-water-phase-card {
    padding: var(--esg-water-phase-pad);
}


.esg-water-phase-card--arrow {
    clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 8% 50%);
}


.esg-water-phase-card.phase-1 {
    background: #f3f9d5;
}


.esg-water-phase-card.phase-2 {
    background: #fff0d8;
}


.esg-water-phase-card.phase-3 {
    background: #ece6f7;
}


.esg-water-phase-card h4 {
    margin: 0 0 16px 0;
    padding-bottom: 14px;
    border-bottom: 2px solid currentColor;
    font-size: var(--esg-water-phase-title-size);
    font-weight: 700;
    text-indent: 0;
}


.esg-water-phase-card.phase-1 h4 {
    color: var(--esg-color-green-text);
}


.esg-water-phase-card.phase-2 h4 {
    color: var(--esg-color-orange-text);
}


.esg-water-phase-card.phase-3 h4 {
    color: var(--esg-water-phase-purple);
}


.esg-water-phase-card ul {
    margin: 0;
    padding-left: 1.2em;
}


.esg-water-phase-card li {
    margin-bottom: 12px;
    line-height: 1.7;
    text-indent: 0;
}


.esg-water-phase-card li:last-child {
    margin-bottom: 0;
}


.esg-water-phase-list {
    display: grid;
    gap: 28px;
}


.esg-water-phase-list-card {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    background: #fff;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}


.esg-water-phase-list-card h4 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-indent: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 20px 0;
}


.esg-water-phase-list-card ul {
    margin: 0;
    padding: 26px 34px;
}


.esg-water-phase-list-card li {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.8;
    text-indent: 0;
}


.esg-water-phase-list-card li:last-child {
    margin-bottom: 0;
}


.esg-water-phase-list-card.phase-1 h4,
.esg-water-phase-list-card.phase-1::after {
    background: #5654ab;
}


.esg-water-phase-list-card.phase-2 h4,
.esg-water-phase-list-card.phase-2::after {
    background: #6ec3a0;
}


.esg-water-phase-list-card.phase-3 h4,
.esg-water-phase-list-card.phase-3::after {
    background: #dd6aa4;
}


.esg-water-phase-list-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 100%;
}


/* 7.2 Waste Family */
/* Tier A family:
   page markup provides line values, bar values and x-axis labels;
   shared JS derives axis labels, line points and bar geometry. */
.esg-waste-page {
    --esg-waste-grid-color: var(--esg-bg-gridline);
    --esg-waste-orange: var(--esg-color-chart-orange);
    --esg-waste-purple: var(--esg-color-purple);
    --esg-waste-green: var(--esg-color-chart-green);
    --esg-waste-teal: var(--esg-color-teal);
    --esg-waste-unit-note-margin-bottom: 12px;
    --esg-waste-table-cell-padding: 18px 16px;
    --esg-waste-table-section-padding: 14px 16px;
    --esg-waste-table-cell-size: 16px;
    --esg-waste-chart-title-size: 24px;
    --esg-waste-chart-top: 18px;
    --esg-waste-chart-bottom: 82px;
    --esg-waste-plot-height: 320px;
    --esg-waste-chart-min-height: 420px;
    --esg-waste-chart-pad-left: 104px;
    --esg-waste-chart-pad-right: 112px;
    --esg-waste-axis-width: 74px;
    --esg-waste-axis-left: 22px;
    --esg-waste-axis-right: 22px;
    --esg-waste-axis-title-left: 18px;
    --esg-waste-axis-title-right: 18px;
    --esg-waste-bar-width: 13%;
    --esg-waste-bar-min-width: 84px;
    --esg-waste-bar-label-size: 15px;
    --esg-waste-point-size: 18px;
    --esg-waste-point-value-size: 15px;
    --esg-waste-x-label-bottom: -52px;
    --esg-waste-x-label-size: 16px;
}


.esg-waste-unit-note {
    margin: 0 0 var(--esg-waste-unit-note-margin-bottom) 0;
    color: var(--esg-color-muted);
    text-align: right;
    text-indent: 0;
}


.esg-waste-table {
    table-layout: fixed;
}


.esg-waste-table th,
.esg-waste-table td {
    border: 1px solid var(--esg-waste-grid-color);
    text-indent: 0;
    vertical-align: middle;
}


.esg-waste-table th {
    background: var(--esg-waste-green);
    text-align: center;
}


.esg-waste-table td {
    background: #fffef7;
    padding: var(--esg-waste-table-cell-padding);
    font-size: var(--esg-waste-table-cell-size);
}


.esg-waste-table td.method,
.esg-waste-table td.waste-type,
.esg-waste-table td.label,
.esg-waste-table .section-row td {
    text-align: left;
}


.esg-waste-table td.method,
.esg-waste-table td.waste-type {
    word-break: break-word;
}


.esg-waste-table td.number {
    text-align: center;
    font-variant-numeric: tabular-nums;
}


.esg-waste-table tbody tr:nth-child(even):not(.section-row):not(.total-row):not(.rate-row) td {
    background: #fbfdf1;
}


.esg-waste-table .total-row td,
.esg-waste-table .rate-row td {
    background: #ffffff;
}


.esg-waste-table .total-row td {
    font-weight: 700;
}


.esg-waste-table .total-row .label,
.esg-waste-table .rate-row .label {
    text-align: center;
}


.esg-waste-table .section-row td {
    background: #fbfdf1;
    font-weight: 700;
    padding: var(--esg-waste-table-section-padding);
}


.esg-waste-chart-scroll {
    overflow-x: auto;
}


.esg-waste-chart-card,
.esg-waste-page .esg-waste-chart-card,
.esg-page .esg-waste-chart-card {
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}


.esg-waste-chart-header {
    display: grid;
    gap: 6px;
    justify-items: center;
    margin-bottom: 12px;
    width: 100%;
}


.esg-waste-chart-header h4 {
    margin: 0;
    width: 100%;
    color: var(--esg-color-heading);
    font-size: var(--esg-waste-chart-title-size);
    font-weight: 700;
    text-align: center;
    text-indent: 0;
}


.esg-waste-dual-chart {
    position: relative;
    min-height: var(--esg-waste-chart-min-height);
    padding:
        var(--esg-waste-chart-top)
        var(--esg-waste-chart-pad-right)
        var(--esg-waste-chart-bottom)
        var(--esg-waste-chart-pad-left);
}


.esg-waste-axis-title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #222;
    font-size: 14px;
    line-height: 1.5;
}


.esg-waste-axis-title.is-left {
    left: var(--esg-waste-axis-title-left);
}


.esg-waste-axis-title.is-right {
    right: var(--esg-waste-axis-title-right);
}


.esg-waste-axis-labels {
    position: absolute;
    top: var(--esg-waste-chart-top);
    height: var(--esg-waste-plot-height);
    width: var(--esg-waste-axis-width);
}


.esg-waste-axis-labels span {
    position: absolute;
    color: #222;
    font-size: 14px;
    line-height: 1;
    transform: translateY(50%);
}


.esg-waste-axis-labels.is-left {
    left: var(--esg-waste-axis-left);
    text-align: right;
}


.esg-waste-axis-labels.is-left span {
    right: 0;
}


.esg-waste-axis-labels.is-right {
    right: var(--esg-waste-axis-right);
    text-align: left;
}


.esg-waste-axis-labels.is-right span {
    left: 0;
}


.esg-waste-plot {
    position: relative;
    height: var(--esg-waste-plot-height);
    border-left: 1px solid var(--esg-waste-grid-color);
    border-bottom: 1px solid var(--esg-waste-grid-color);
}


.esg-waste-plot .grid-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--esg-waste-grid-color);
}


.esg-waste-line-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


.esg-waste-line-svg polyline {
    fill: none;
    stroke: var(--esg-waste-teal);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 0.85;
}


.esg-waste-bar,
.esg-waste-bar-label,
.esg-waste-point,
.esg-waste-x-label {
    position: absolute;
    left: var(--x);
}


.esg-waste-bar {
    bottom: 0;
    width: var(--esg-waste-bar-width);
    min-width: var(--esg-waste-bar-min-width);
    height: var(--h);
    transform: translateX(-50%);
}


.esg-waste-bar.y2022 {
    background: var(--esg-waste-orange);
}


.esg-waste-bar.y2023 {
    background: var(--esg-waste-purple);
}


.esg-waste-bar.y2024 {
    background: var(--esg-waste-green);
}


.esg-waste-bar-label,
.esg-waste-x-label {
    transform: translateX(-50%);
    text-align: center;
}


.esg-waste-bar-label {
    bottom: var(--h);
    color: var(--esg-color-white);
    font-size: var(--esg-waste-bar-label-size);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
}


.esg-waste-bar-label.inside {
    bottom: calc(var(--h) - 16px);
    transform: translate(-50%, 0);
}


.esg-waste-point {
    bottom: var(--y);
    width: 0;
    height: 0;
    transform: translate(-50%, 50%);
    z-index: 2;
    color: var(--esg-waste-teal);
}


.esg-waste-point .dot {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--esg-waste-point-size);
    height: var(--esg-waste-point-size);
    border: 2px solid #fff;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 1px currentColor;
    transform: translate(-50%, -50%);
}


.esg-waste-point .value {
    position: absolute;
    left: 0;
    bottom: 5px;
    font-size: var(--esg-waste-point-value-size);
    font-weight: 700;
    white-space: nowrap;
    transform: translate(-50%, -100%);
}


.esg-waste-point.is-below .value {
    bottom: auto;
    top: 16px;
    transform: translate(-50%, 0);
}


.esg-waste-x-label {
    bottom: var(--esg-waste-x-label-bottom);
    color: #222;
    font-size: var(--esg-waste-x-label-size);
    white-space: nowrap;
}


.esg-scope3-grid,
.esg-action-grid {
    display: grid;
    gap: 18px;
}


.esg-scope3-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
}


.esg-scope3-grid > .table-wrap {
    grid-column: 1 / -1;
    width: auto;
    max-width: 64%;
    justify-self: center;
}


.esg-scope3-grid > .esg-scope3-summary-card {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 64%;
    justify-self: center;
    box-sizing: border-box;
}


.esg-scope3-summary-card {
    justify-self: center;
    background: var(--esg-color-white);
    text-align: left;
    padding: 1vw 1vw;
    text-indent: 0;
}


.esg-scope3-summary-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--esg-color-heading);
    text-align: left;
    text-indent: 0;
}


.esg-scope3-summary-value {
    display: inline-block;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0 6px;
    color: var(--esg-color-text);
    font-variant-numeric: tabular-nums;
}


.esg-scope3-summary-meta {
    margin: 0;
    color: var(--esg-color-muted);
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    text-align: left;
    text-indent: 0;
}


.esg-scope3-bars {
    display: grid;
    gap: 14px;
}


.esg-scope3-bars p {
    margin: 0 0 4px 0;
    text-indent: 0;
}


.esg-scope3-bar-row {
    display: grid;
    grid-template-columns: 76px 1fr 98px;
    align-items: center;
    gap: 12px;
    color: var(--esg-color-text);
}


.esg-scope3-bar-row .track {
    height: 16px;
    background: var(--esg-bg-gridline);
    position: relative;
}


.esg-scope3-bar-row .fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--esg-color-green);
}


.esg-scope3-bar-row.total .fill {
    background: var(--esg-color-teal);
}


.esg-scope3-bar-row strong {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


.esg-action-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


.esg-action-card {
    border: 1px solid var(--esg-border-green-soft);
    background: var(--esg-bg-soft);
    padding: 20px 22px;
    min-height: 100%;
}


.esg-action-card h5 {
    margin: 0 0 10px 0;
    color: var(--esg-color-heading);
    font-size: 20px;
    font-weight: 700;
}


.esg-action-card ol {
    margin: 0;
    padding-left: 1.3em;
}


.esg-action-card li {
    margin-bottom: 8px;
    text-indent: 0;
}


.esg-action-card .metric {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--esg-border-green-soft);
    display: grid;
    gap: 6px;
    font-weight: 700;
}


.esg-action-card .metric span {
    color: var(--esg-color-green-text);
    font-size: 28px;
}


/* ==========================================================================
   8. Responsive Overrides
   ========================================================================== */

@media (max-width: 900px) {

    .esg-scope3-grid > .table-wrap,
    .esg-scope3-grid > .esg-scope3-summary-card {
        width: 100%;
        max-width: 100%;
    }
}


@media (max-width: 768px) {
    .esg-action-cards,
    .esg-scope3-grid {
        grid-template-columns: 1fr;
    }

    .esg-energy-chart {
        padding-left: 56px;
        overflow-x: auto;
        overflow-y: visible;
    }

    .esg-energy-legend {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px 12px;
        margin-right: 0;
    }

    .esg-energy-unit {
        left: 0;
        top: 208px;
        font-size: 12px;
        letter-spacing: 0;
    }

    .esg-energy-grid {
        left: 56px;
        width: calc(100% - 62px);
        min-width: 620px;
    }

    .esg-energy-grid span {
        left: -54px;
        width: 48px;
        font-size: 11px;
    }

    .esg-energy-groups {
        min-width: 620px;
        gap: 14px;
    }

    .esg-energy-group {
        min-width: 110px;
    }

    .esg-energy-group .bars {
        gap: 14px;
    }

    .esg-energy-group .bar {
        width: 22px;
        width: clamp(18px, 5vw, 24px);
    }

    .esg-energy-group p {
        white-space: nowrap;
        word-break: keep-all;
        line-height: 1.25;
    }

    .esg-energy-chart-compact {
        padding-left: 56px;
    }

    .esg-energy-chart-compact .esg-energy-grid {
        left: 56px;
        width: calc(100% - 62px);
        min-width: 0;
    }

    .esg-energy-chart-compact .esg-energy-groups,
    .esg-energy-chart-ghg .esg-energy-groups {
        min-width: 0;
        gap: 8px;
    }

    .esg-energy-chart-compact .esg-energy-group,
    .esg-energy-chart-ghg .esg-energy-group {
        min-width: 0;
    }

    .esg-energy-chart-ghg .esg-energy-grid {
        min-width: 0;
    }

    .esg-energy-chart-compact .esg-energy-group .bar {
        width: 18px;
        width: clamp(16px, 5vw, 24px);
    }

    .esg-energy-chart-ghg .esg-energy-group .bar {
        width: 12px;
        width: clamp(10px, 3vw, 16px);
    }

    .esg-scope3-bar-row {
        grid-template-columns: 60px 1fr 78px;
        gap: 8px;
        font-size: 13px;
    }

    .esg-intensity-card {
        padding: 0 0 20px 0;
    }

    .esg-intensity-legend {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .esg-intensity-chart {
        padding: 18px 54px 40px 54px;
    }

    .esg-intensity-axis-title {
        top: 148px;
        font-size: 11px;
    }

    .esg-intensity-axis-title.left {
        left: -2px;
    }

    .esg-intensity-axis-title.right {
        right: -4px;
    }

    .esg-intensity-axis-labels {
        top: 18px;
        bottom: 40px;
        font-size: 11px;
    }

    .esg-intensity-axis-labels.left {
        left: 6px;
        width: 44px;
    }

    .esg-intensity-axis-labels.right {
        right: 2px;
        width: 46px;
    }

    .esg-intensity-plot {
        height: 260px;
    }

    .esg-intensity-bar {
        width: clamp(16px, 5vw, 24px);
    }

    .esg-intensity-bar-label,
    .esg-intensity-point span {
        font-size: 16px;
    }

    .esg-intensity-point {
        width: 18px;
        height: 18px;
    }

    .esg-intensity-group p {
        font-size: 16px;
    }
}