/* ============================================================
   style.css - Energy Comparison Platform
   ============================================================ */

/* --- Palette v1: the Heat Pump Tariffs design system (5 Nov 2026) ---------
   Design system: https://claude.ai/artifact/NXtgz7gVTdjFDRKxXYE1nV
   Deep teal for trust, warm amber for the one thing to do. Every text pair
   is 4.5:1 or better. Use these variables in new code, never a hex value.
   The old --ec-* names are kept and now point at the new colours. */
:root {
    --brand-800: #0B5450;  --brand-700: #0F6E6A;  --brand-100: #E3F2F1;  --brand-50: #F0F8F7;
    --accent-400: #F5A524; --accent-300: #FBBF24; --accent-800: #A35200;
    --warning-100: #FFF4D6; --warning-800: #7A4200;
    --success-700: #1E7B34; --success-100: #E6F4EA; --success-800: #16602A;
    --danger-700: #B42318;  --danger-100: #FDECEA;  --danger-800: #9B1C14;
    --ink: #1F2328; --ink-muted: #56616B;
    --line: #DDE3E4; --line-soft: #EEF2F2; --control-border: #7D8A8D;
    --surface: #FFFFFF; --surface-page: #F3F6F6; --surface-subtle: #F6F8F8;
    --footer-bg: #12302E; --footer-ink: #C5D1D0;
    --on-brand: #FFFFFF; --on-brand-muted: #D8ECEA;
    --chart-current: #0F6E6A;            /* your tariff: solid line / bar */
    --chart-alt: #F5A524;                /* the alternative: fill */
    --chart-alt-line: #C27A00;           /* the alternative: dashed line, bar border (3.5:1 on white) */
    /* Palette v2 (5 Nov 2026): the chart set, for charts that show several things at once.
       Use in this order. Every colour is 3:1 or better on white. 8 (grey) is for "other" or the baseline.
       The -dark shades are for blocks with white text on them (4.5:1 or better). */
    --chart-1: #0F6E6A; --chart-2: #C27A00; --chart-3: #4A6FA5; --chart-4: #8E4A87;
    --chart-5: #6B7A2A; --chart-6: #B5523B; --chart-7: #2E8FB8; --chart-8: #7A8588;
    --chart-1-dark: #0F6E6A; --chart-2-dark: #8A5300; --chart-3-dark: #3D5E8F; --chart-4-dark: #7A3D74;
    --chart-5-dark: #56621F; --chart-6-dark: #9A4230; --chart-7-dark: #1F6F92; --chart-8-dark: #5B6568;
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(16,24,40,0.04), 0 6px 16px rgba(16,24,40,0.05);
    --shadow-raised: 0 8px 24px rgba(16,24,40,0.12);

    /* Old names (Stage 6 and earlier) */
    --ec-primary:      var(--brand-700);
    --ec-primary-dark: var(--brand-800);
    --ec-success:      var(--success-700);
    --ec-warning:      var(--accent-400);
    --ec-danger:       var(--danger-700);
    --ec-dark:         var(--footer-bg);
    --ec-light-bg:     var(--surface-page);
    --ec-border:       var(--line);
    --ec-card-shadow:  var(--shadow-card);
    --ec-radius:       0.5rem;

    /* Bootstrap 5.3 colours */
    --bs-primary: #0F6E6A;  --bs-primary-rgb: 15,110,106;
    --bs-success: #1E7B34;  --bs-success-rgb: 30,123,52;
    --bs-danger:  #B42318;  --bs-danger-rgb: 180,35,24;
    --bs-warning: #F5A524;  --bs-warning-rgb: 245,165,36;
    --bs-info:    #0F6E6A;  --bs-info-rgb: 15,110,106;
    --bs-body-color: #1F2328; --bs-body-color-rgb: 31,35,40;
    --bs-secondary-color: #56616B; --bs-secondary-color-rgb: 86,97,107;
    --bs-border-color: #DDE3E4;
    --bs-link-color: #0F6E6A; --bs-link-color-rgb: 15,110,106;
    --bs-link-hover-color: #0B5450; --bs-link-hover-color-rgb: 11,84,80;
    --bs-focus-ring-color: rgba(15,110,106,.35);
    --bs-primary-text-emphasis: #0B5450; --bs-primary-bg-subtle: #E3F2F1; --bs-primary-border-subtle: #B9DEDA;
    --bs-info-text-emphasis:    #0B5450; --bs-info-bg-subtle:    #E3F2F1; --bs-info-border-subtle:    #B9DEDA;
    --bs-success-text-emphasis: #16602A; --bs-success-bg-subtle: #E6F4EA; --bs-success-border-subtle: #B9DFC3;
    --bs-warning-text-emphasis: #7A4200; --bs-warning-bg-subtle: #FFF4D6; --bs-warning-border-subtle: #F7DB94;
    --bs-danger-text-emphasis:  #9B1C14; --bs-danger-bg-subtle:  #FDECEA; --bs-danger-border-subtle:  #F4C2BC;
}

/* Bootstrap components that carry their own colours */
.btn-primary { --bs-btn-bg: #0F6E6A; --bs-btn-border-color: #0F6E6A; --bs-btn-hover-bg: #0B5450; --bs-btn-hover-border-color: #0B5450;
    --bs-btn-active-bg: #0B5450; --bs-btn-active-border-color: #0B5450; --bs-btn-disabled-bg: #0F6E6A; --bs-btn-disabled-border-color: #0F6E6A;
    --bs-btn-focus-shadow-rgb: 15,110,106; }
.btn-outline-primary { --bs-btn-color: #0F6E6A; --bs-btn-border-color: #0F6E6A; --bs-btn-hover-bg: #0F6E6A; --bs-btn-hover-border-color: #0F6E6A;
    --bs-btn-active-bg: #0F6E6A; --bs-btn-active-border-color: #0F6E6A; --bs-btn-disabled-color: #0F6E6A; --bs-btn-disabled-border-color: #0F6E6A;
    --bs-btn-focus-shadow-rgb: 15,110,106; }
.btn-success { --bs-btn-bg: #1E7B34; --bs-btn-border-color: #1E7B34; --bs-btn-hover-bg: #16602A; --bs-btn-hover-border-color: #16602A;
    --bs-btn-active-bg: #16602A; --bs-btn-active-border-color: #16602A; --bs-btn-disabled-bg: #1E7B34; --bs-btn-disabled-border-color: #1E7B34; --bs-btn-focus-shadow-rgb: 30,123,52; }
.btn-outline-success { --bs-btn-color: #1E7B34; --bs-btn-border-color: #1E7B34; --bs-btn-hover-bg: #1E7B34; --bs-btn-hover-border-color: #1E7B34;
    --bs-btn-active-bg: #1E7B34; --bs-btn-active-border-color: #1E7B34; --bs-btn-focus-shadow-rgb: 30,123,52; }
.btn-danger { --bs-btn-bg: #B42318; --bs-btn-border-color: #B42318; --bs-btn-hover-bg: #9B1C14; --bs-btn-hover-border-color: #9B1C14;
    --bs-btn-active-bg: #9B1C14; --bs-btn-active-border-color: #9B1C14; --bs-btn-focus-shadow-rgb: 180,35,24; }
.btn-outline-danger { --bs-btn-color: #B42318; --bs-btn-border-color: #B42318; --bs-btn-hover-bg: #B42318; --bs-btn-hover-border-color: #B42318;
    --bs-btn-active-bg: #B42318; --bs-btn-active-border-color: #B42318; --bs-btn-focus-shadow-rgb: 180,35,24; }
/* Amber = the call to action: always ink text */
.btn-warning { --bs-btn-color: #1F2328; --bs-btn-bg: #F5A524; --bs-btn-border-color: #F5A524; --bs-btn-hover-color: #1F2328; --bs-btn-hover-bg: #FBBF24;
    --bs-btn-hover-border-color: #FBBF24; --bs-btn-active-color: #1F2328; --bs-btn-active-bg: #FBBF24; --bs-btn-active-border-color: #FBBF24;
    --bs-btn-disabled-color: #1F2328; --bs-btn-disabled-bg: #F5A524; --bs-btn-disabled-border-color: #F5A524; --bs-btn-focus-shadow-rgb: 194,122,0; }
.btn-outline-secondary { --bs-btn-color: #1F2328; --bs-btn-border-color: #7D8A8D; --bs-btn-hover-bg: #56616B; --bs-btn-hover-border-color: #56616B; }
.btn-link { --bs-btn-color: #0F6E6A; --bs-btn-hover-color: #0B5450; }
.text-warning { color: #A35200 !important; }   /* amber as text on light backgrounds */
.navbar .text-warning, .bg-dark .text-warning, .footer .text-warning, .hpt-site-footer .text-warning,
#cookieConsentBanner .text-warning { color: #FBBF24 !important; }
.bg-info { background-color: #E3F2F1 !important; color: #0B5450 !important; }
.text-info { color: #0F6E6A !important; }
.navbar.bg-primary { background-color: #0B5450 !important; }
.navbar-dark { --bs-navbar-color: rgba(255,255,255,.9); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff; }
.navbar-dark .navbar-nav .nav-link.active { background: rgba(255,255,255,.16); border-radius: var(--radius-md); }
.progress, .progress-stacked { --bs-progress-bar-bg: #0F6E6A; }
.dropdown-menu { --bs-dropdown-link-active-bg: #0F6E6A; }
.nav-pills { --bs-nav-pills-link-active-bg: #0F6E6A; }
.nav-tabs, .nav-pills { --bs-nav-link-color: #0F6E6A; --bs-nav-link-hover-color: #0B5450; }   /* not .navbar: its links stay white */
.list-group { --bs-list-group-active-bg: #0F6E6A; --bs-list-group-active-border-color: #0F6E6A; }
.pagination { --bs-pagination-color: #0F6E6A; --bs-pagination-hover-color: #0B5450; --bs-pagination-focus-color: #0B5450;
    --bs-pagination-active-bg: #0F6E6A; --bs-pagination-active-border-color: #0F6E6A; --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(15,110,106,.25); }
.form-control:focus, .form-select:focus { border-color: #7FBDB8; box-shadow: 0 0 0 .25rem rgba(15,110,106,.25); }
.form-check-input:focus { border-color: #7FBDB8; box-shadow: 0 0 0 .25rem rgba(15,110,106,.25); }
.form-check-input:checked { background-color: #0F6E6A; border-color: #0F6E6A; }
.form-switch .form-check-input:focus:not(:checked) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237FBDB8'/%3e%3c/svg%3e"); }
.btn-check:focus-visible + .btn, .btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(15,110,106,.35); }
.accordion { --bs-accordion-active-color: #0B5450; --bs-accordion-active-bg: #E3F2F1; --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(15,110,106,.25);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B5450' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); }
.border-primary { border-color: #0F6E6A !important; }

/* Tariff type badges (includes/helpers.php tariffTypeBadge()). Dynamic is never red. */
.badge.hpt-type-standard { background-color: #56616B; color: #fff; }
.badge.hpt-type-economy7 { background-color: #0B5450; color: #fff; }
.badge.hpt-type-tou      { background-color: #F5A524; color: #1F2328; }
.badge.hpt-type-dynamic  { background-color: #1F2328; color: #fff; }
.badge.hpt-type-daily    { background-color: #fff; color: #1F2328; box-shadow: inset 0 0 0 1px #7D8A8D; }

/* Logo */
.hpt-logo { display: block; height: 32px; width: auto; }
.hpt-logo-footer { display: block; height: 28px; width: auto; margin-bottom: .35rem; }

/* Footer (includes/footer.php) */
.hpt-site-footer { background: var(--footer-bg); color: var(--footer-ink); border-top: 1px solid rgba(255,255,255,.08); }
.hpt-site-footer .hpt-footer-head { color: var(--footer-ink); letter-spacing: .06em; }
.hpt-site-footer .footer-link { color: var(--footer-ink); text-decoration: none; }
.hpt-site-footer .footer-link:hover, .hpt-site-footer .footer-link:focus-visible { color: var(--accent-300); text-decoration: underline; }
.hpt-site-footer .hpt-footer-rule { border-color: rgba(255,255,255,.15); opacity: 1; margin: 1rem 0; }

/* Home page (index.php): solid brand bands, no gradient */
.hpt-hero-band { background: var(--brand-800); color: var(--on-brand); }
.hpt-hero-band .lead { color: var(--on-brand-muted); opacity: 1 !important; }
.hpt-hero-mark { display: inline-block; height: 72px; width: 72px; }
.hpt-cta-band { background: var(--brand-800); color: var(--on-brand); }
.hpt-cta-band p { color: var(--on-brand-muted); opacity: 1 !important; }
.region-tile-op { font-size: .75rem; }

/* --- Layout Safeguards (added 15 Jun 2026) ----------------- */
/* Prevent any single overflowing element from triggering whole-page
   horizontal swipe on mobile. A few known sources can push past the
   viewport:
     - the existing ".card .table { min-width: 480px; }" mobile rule
       below, if a card-table is ever rendered without a
       .table-responsive wrapper
     - inline brand/supplier logos rendered with style="width:auto"
       and an extreme source aspect ratio
     - long unbroken text in narrow grid cells (region tiles etc.)
   Vertical scrolling is unaffected. */
html, body {
    overflow-x: hidden;
}
/* C1 (4 Nov 2026): "hidden" on body makes it a scroll box of its own, so position: sticky
   (the menu bar's sticky-top, the optimiser's results heading) never stuck. "clip" stops
   the sideways swipe in the same way without that. Older browsers keep "hidden". */
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}

/* Defensive width cap on any inline-styled width:auto image.
   Targets the supplier-logo pattern (`style="height:28px;width:auto;"`)
   without forcing a max-width on every <img> on the site - so
   responsive product photos etc. are unaffected. The height stays
   honoured because max-width only caps the WIDTH dimension. */
img[style*="width:auto"] {
    max-width: 100%;
}

/* Long single words (e.g. "ScottishPower") in narrow grid cells can
   push a card wider than its column on small viewports. word-break
   on cards lets the word break mid-character if absolutely necessary. */
.card-body {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* --- Base -------------------------------------------------- */
body {
    background-color: var(--ec-light-bg);
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* --- Page container top spacing (consistent across all pages) --- */
main .container, main .container-fluid {
    padding-top: 1.5rem;
}

/* --- Cards ------------------------------------------------- */
.card {
    border: none;
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-card-shadow);
    transition: box-shadow 0.2s ease;
}

.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }

.card-header {
    background: #fff;
    border-bottom: 2px solid var(--ec-primary);
    font-weight: 600;
    border-radius: var(--ec-radius) var(--ec-radius) 0 0 !important;
}

/* --- Stat Cards -------------------------------------------- */
.stat-card {
    border-top: 3px solid var(--ec-primary);   /* D1: coloured edge on the top, not the left */
    padding: 1.25rem;
}
.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--ec-primary); }
.stat-card .stat-label { font-size: 0.85rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* --- Comparison Results ------------------------------------ */
.comparison-table th { background: var(--brand-50); }
.best-deal {
    background: var(--success-100) !important;   /* D1: the "Best" badge marks the row; no left edge */
}
.best-deal-badge {
    background: var(--ec-success);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 20px;
    vertical-align: middle;
}
.current-tariff-row { background: var(--brand-50) !important; }
.savings-positive { color: var(--ec-success); font-weight: 600; }
.savings-negative { color: var(--ec-danger); font-weight: 600; }
.partial-month-note { font-size: 0.78rem; color: var(--ink-muted); font-style: italic; }
.region-changed-badge {
    background: var(--warning-100);
    border: 1px solid #F7DB94;
    color: var(--warning-800);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 20px;
}

/* --- Tariff Type Badges ------------------------------------ */
.tariff-type-standard  { background: #56616B; }
.tariff-type-economy7  { background: #0B5450; }
.tariff-type-tou       { background: #F5A524; color: #1F2328 !important; }
.tariff-type-dynamic   { background: #1F2328; }

/* --- Rate History Table ------------------------------------ */
.rate-history-table .current-rate { background: var(--success-100); font-weight: 600; }
.rate-history-table .expired-rate { color: var(--ink-muted); }

/* --- Upload Area ------------------------------------------- */
.upload-dropzone {
    border: 2px dashed var(--ec-primary);
    border-radius: var(--ec-radius);
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
    background: var(--brand-50);
}
.upload-dropzone:hover, .upload-dropzone.drag-over {
    background: var(--brand-100);
}
.upload-dropzone i { font-size: 3rem; color: var(--ec-primary); }

/* --- Auth Pages -------------------------------------------- */
.auth-card {
    max-width: 440px;
    margin: 3rem auto;
}
.auth-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}
.auth-logo i { font-size: 3rem; color: var(--ec-primary); }

/* --- Admin Sidebar ----------------------------------------- */
.admin-sidebar {
    background: #fff;
    border-right: 1px solid var(--ec-border);
    min-height: calc(100vh - 56px);
    padding-top: 1rem;
}
.admin-sidebar .nav-link {
    color: #444;
    padding: 0.6rem 1.2rem;
    border-radius: 0.375rem;
    margin: 2px 8px;
    transition: background 0.15s;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    background: var(--brand-100);
    color: var(--ec-primary);
}
.admin-sidebar .nav-link i { width: 20px; }

/* --- Supplier Card ----------------------------------------- */
.supplier-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 4px;
}
.supplier-logo-placeholder {
    width: 48px;
    height: 48px;
    background: var(--brand-100);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ec-primary);
    font-size: 1.4rem;
}
.referral-banner {
    background: var(--success-100);
    border: 1px solid #B9DFC3;
    border-radius: var(--ec-radius);
    padding: 0.75rem 1rem;
}

/* --- Chart containers -------------------------------------- */
.chart-container { position: relative; }

/* --- ToU Band Builder -------------------------------------- */
.tou-band-row {
    background: #f8f9fa;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.tou-coverage-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.tou-coverage-fill {
    height: 100%;
    background: var(--ec-success);
    transition: width 0.3s ease;
}
.tou-coverage-fill.incomplete { background: var(--ec-warning); }

/* --- Reading History --------------------------------------- */
.reading-upload-card {
    border-top: 3px solid var(--ec-primary);   /* D1 */
    padding: 1rem;
    background: #fff;
    border-radius: var(--ec-radius);
    margin-bottom: 0.75rem;
    box-shadow: var(--ec-card-shadow);
}

/* --- Utilities --------------------------------------------- */
.cursor-pointer { cursor: pointer; }
.text-primary { color: var(--ec-primary) !important; }
.bg-primary-soft { background-color: var(--brand-100); }
.border-primary-soft { border-color: #B9DEDA; }
.fw-500 { font-weight: 500; }
.fs-sm { font-size: 0.85rem; }

/* --- Blog post body --------------------------------------- */
/* Parsedown emits bare <table> elements with no Bootstrap classes.
   On narrow viewports wide data tables push the whole page sideways.
   Wrapping each table in a horizontally-scrollable block keeps the
   page width constrained while still letting readers see the full
   table by swiping inside the table's own bounded area. */
.blog-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.blog-body table th,
.blog-body table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.blog-body table thead th {
    background: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

.blog-body table tbody tr:nth-child(even) {
    background: #fcfcfd;
}

/* ============================================================
   Shared page parts (Stage 6a, 30 Oct 2026)
   One look for the user pages. Tariff Comparison and the Optimiser use these
   first; each later group of pages moves over to them. Wording rules are in
   the project doc claude/HOUSE-STYLE.md.
   Put class="hpt-page" on a page's main .container to turn on the touch-screen
   tap sizes below for that page only.
   ============================================================ */

/* Page header: title row, one-line intro, then "How it works" / "Show me around" */
.hpt-page-intro { color: #495057; max-width: 62rem; margin-bottom: .25rem; }
.hpt-page-links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; font-size: .875rem; margin-bottom: 1.5rem; }
.hpt-page-links:empty { display: none; }

/* Numbered step circle at the start of a step card's header */
.hpt-step-num {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--ec-primary); color: #fff; font-size: .85rem; font-weight: 700; margin-right: .5rem;
}
.hpt-step-optional { color: var(--ink-muted); font-weight: 400; font-size: .875em; }

/* "Your choices" bar: what a run used, shown in place of the folded steps.
   C2 (5 Nov 2026): the design system's teal-tinted bar (no side edge). */
.hpt-choices-bar { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-md); scroll-margin-top: 5rem; }
.hpt-choices-bar .card-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .5rem; padding-bottom: .5rem; }
.hpt-choices-bar .hpt-choices-text { font-size: .875rem; }

/* Top result cards: your tariff (teal edge), the best option (green edge).
   C2 (5 Nov 2026): the edge is on the top, as in the design system (Compare and Optimiser). */
.hpt-card-base, .hpt-card-best, .hpt-card-saving, .hpt-card-dearer {
    border: 1px solid var(--line) !important; border-top: 3px solid var(--brand-700) !important;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hpt-card-best, .hpt-card-saving { border-top-color: var(--success-700) !important; }
.hpt-card-dearer { border-top-color: var(--danger-700) !important; }
/* Three classes, so a page's own ".x .stat-value" size rule can't override it */
.stat-card.hpt-card-base .stat-value, .stat-card.hpt-card-best .stat-value,
.stat-card.hpt-card-saving .stat-value, .stat-card.hpt-card-dearer .stat-value { font-size: 1.35rem; }
.stat-card.hpt-card-saving .stat-value { color: var(--success-700); }   /* 5.3:1 on white */
.stat-card.hpt-card-dearer .stat-value { color: var(--danger-700); }
.hpt-cards .stat-label { color: var(--ink-muted); }

/* Short help: the (i) button beside a field, and the text it opens */
.hpt-help-btn { border: 0; background: none; padding: 0 .15rem; color: var(--ec-primary); line-height: 1; vertical-align: baseline; }
.hpt-help-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; border-radius: 50%; }
.hpt-help {
    font-size: .8rem; background: var(--brand-50); border-left: 3px solid var(--ec-primary);
    border-radius: 0 var(--ec-radius) var(--ec-radius) 0; padding: .4rem .6rem; margin-top: .35rem; color: #333;
}
.card-body > .hpt-help:first-child { margin-top: 0; margin-bottom: .75rem; }   /* a note opened from a card header */

/* Messages: red = something went wrong (next to the button pressed),
   amber = you need to do something, blue = information. */
.hpt-run-errors { margin-top: .75rem; }
.hpt-run-errors:empty { display: none; }

/* Wide tables on phones: a hint above the table that it scrolls sideways */
.hpt-swipe { display: none; text-align: right; font-size: .75rem; color: var(--ink-muted); padding: 0 .75rem .15rem; }
@media (max-width: 575.98px) { .hpt-swipe { display: block; } }
/* C2: a hint shown by the page itself whenever the table is wider than its box (any screen size) */
.hpt-swipe.cmp-swipe { display: block; padding-right: 0; }

/* Wide tables (design system WideTable): scroll sideways, first column fixed */
.hpt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.hpt-table-wrap > .table { margin-bottom: 0; }
.hpt-table-wrap th, .hpt-table-wrap td { font-variant-numeric: tabular-nums; }
.hpt-sticky-col { position: sticky; left: 0; z-index: 1; background: var(--surface) !important; box-shadow: 1px 0 0 var(--line); }
thead .hpt-sticky-col { background: var(--surface-subtle) !important; z-index: 2; }
tr.is-current > .hpt-sticky-col { background: var(--brand-50) !important; }

/* Touch screens: small buttons and links big enough to tap (about 44 px) */
@media (pointer: coarse) {
    .hpt-page .btn-sm { min-height: 2.5rem; padding-top: .45rem; padding-bottom: .45rem; }
    .hpt-page .hpt-tap { display: inline-flex; align-items: center; min-height: 2.75rem; }
    .hpt-page .hpt-help-btn { min-width: 2.25rem; min-height: 2.25rem; }
    .hpt-page .form-check-input { width: 1.25em; height: 1.25em; }
}

/* "How it works" pages (Stage 6b): contents pills, section cards, "Technical detail" panels.
   Tariff Comparison's page uses these; the Optimiser's page keeps its own om-* copy for now. */
.hpt-toc { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.5rem; list-style: none; }
.hpt-toc a { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--ec-border); border-radius: 999px; background: #fff; font-size: .85rem; text-decoration: none; }
.hpt-toc a:hover, .hpt-toc a:focus-visible { border-color: var(--ec-primary); }
.hpt-section { scroll-margin-top: 5rem; }
.hpt-section h2 { font-size: 1.2rem; font-weight: 700; }
.hpt-section p, .hpt-section li { max-width: 48rem; }
.hpt-tech { border: 1px solid var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-light-bg); margin-top: .75rem; }
.hpt-tech > summary { cursor: pointer; padding: .55rem .85rem; font-size: .9rem; font-weight: 600; color: var(--ec-primary); }
.hpt-tech > summary:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.hpt-tech > div { padding: 0 .85rem .75rem; font-size: .9rem; }
.hpt-formula { font-family: SFMono-Regular, Consolas, monospace; font-size: .85rem; background: #fff; border: 1px solid var(--ec-border); border-radius: .25rem; padding: .15rem .4rem; overflow-wrap: anywhere; }
.hpt-faq dt { font-weight: 600; margin-top: 1rem; }
.hpt-faq dd { margin-left: 0; max-width: 48rem; }
@media (max-width: 576px) { .hpt-section h2 { font-size: 1.1rem; } .hpt-toc a { font-size: .8rem; } }
@media (pointer: coarse) { .hpt-page .hpt-toc a { padding: .55rem .85rem; } .hpt-page .hpt-tech > summary { padding: .75rem .85rem; } }

/* "Show me around" tours (Stage 6c, assets/js/tour.js): the highlighted part and the panel */
.hpt-tour-hl { position: relative; z-index: 1041; outline: 3px solid var(--ec-primary); outline-offset: 3px; border-radius: var(--ec-radius);
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); background-color: var(--bs-body-bg, #fff); }
.hpt-tour { position: fixed; z-index: 1050; left: 50%; bottom: 1rem; transform: translateX(-50%); width: calc(100% - 2rem); max-width: 28rem;
    background: var(--bs-body-bg, #fff); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25); padding: 1rem; }
@media (pointer: coarse) { .hpt-tour .btn-sm { min-height: 2.5rem; padding-left: 1rem; padding-right: 1rem; } }

/* --- Responsive -------------------------------------------- */
@media (max-width: 768px) {
    .stat-card .stat-value { font-size: 1.4rem; }
    .auth-card { margin: 1rem; }
    .upload-dropzone { padding: 1.5rem; }

    /* Ensure container-fluid doesn't add unwanted side padding on small screens */
    main .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Stack action button groups vertically on mobile */
    .btn-group.btn-group-sm .btn {
        min-width: 2rem;
    }

    /* Prevent wide tables from bleeding into the viewport - fallback for any
       table not yet wrapped in .table-responsive.
       Only applied to tables NOT wrapped in .table-responsive, since wrapping
       already provides internal scroll. Without the :not(), a 480px min-width
       inside a .table-responsive that's inside a card was the prime suspect
       for index.php's horizontal-scroll bug. */
    .card .table:not(.table-responsive .table) {
        min-width: 480px;
    }
    .card .table-sm {
        font-size: 0.8rem;
    }

    /* Shrink stat cards on mobile */
    .stat-card {
        padding: 1rem;
    }

    /* Prevent long code/monospace strings breaking layout */
    code, .font-monospace {
        word-break: break-all;
    }
}

/* ===== Stage 6d: readings pages ===== */
.hpt-meta { font-size: .8rem; color: var(--ink-muted); }
.hpt-meta-sm { font-size: .75rem; }
.hpt-upload-name { max-width: 12.5rem; }
@media (max-width: 575.98px) { .hpt-upload-name { max-width: 60vw; } }
.hpt-progress-thin { height: 6px; }
.upload-dropzone:focus-visible { outline: 3px solid var(--ec-primary); outline-offset: 3px; }
.hpt-meta-btn { font-size: .78rem; }
.hpt-dup-table { font-size: .8rem; max-width: 26.25rem; }
.hpt-bg-danger-soft { background: var(--danger-100); }
.hpt-minw-220 { min-width: 13.75rem; }
.hpt-minw-230 { min-width: 14.375rem; }
.hpt-minw-420 { min-width: 26.25rem; }
.hpt-minw-560 { min-width: 35rem; }
.hpt-minw-640 { min-width: 40rem; }
@media (max-width: 575.98px) { .hpt-minw-220 { min-width: 0; } }
.date-range-bar.date-range-bar-lg { height: 12px; }
[data-hpt-keytoggle] { cursor: pointer; user-select: none; }
[data-hpt-keytoggle]:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: -2px; }
.hpt-chevron { transition: transform .2s; }
[aria-expanded="true"] > .hpt-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .hpt-chevron { transition: none; } }

/* ===== Stage 6e: tariff pages ===== */
.hpt-maxw-240 { max-width: 15rem; }
.hpt-maxw-640 { max-width: 40rem; }
.hpt-maxh-420 { max-height: 26.25rem; }
#tariffDetailsModal .tdm-head { min-width: 0; }   /* was a <style> block in TariffDetailsModal.php */
.tbc-toggle { min-height: 2rem; }

/* ===== Stage 6f: dashboard and settings ===== */
.trend-svg { width: 100%; height: auto; display: block; }
.trend-swatch { width: 32px; height: 0; border-top: 4px solid; }
.trend-swatch-win { border-top-color: var(--success-700); }
.trend-swatch-lose { border-top-color: var(--danger-700); }
/* Palette v1: the savings trend shows your tariff (teal, solid) against the alternative (amber, dashed) */
.trend-swatch-cur { border-top-color: var(--chart-current); }
.trend-swatch-alt { border-top: 4px dashed var(--chart-alt-line); }
.trend-summary { cursor: pointer; }
.trend-missing { font-size: .9em; }
.trend-pt { cursor: pointer; outline: none; }
.trend-hit { fill: transparent; }
.trend-pt-line { stroke: transparent; stroke-width: 1; }
.trend-pt:hover .trend-pt-line, .trend-pt:focus-visible .trend-pt-line, .trend-pt.is-on .trend-pt-line { stroke: var(--ink-muted); stroke-dasharray: 3 3; }
.trend-pt:focus-visible circle, .trend-pt.is-on circle { stroke-width: 3; }
.trend-detail { min-height: 1.5rem; }
.feedback-referral-group { max-width: 26.25rem; margin: 0 auto; }
.feedback-star[aria-checked="true"] i { color: var(--accent-800); }
a.tariff-row-link { display: block; text-decoration: none; color: inherit; }   /* was in dashboard-comparison-card.php */
a.tariff-row-link > div { transition: box-shadow .15s ease, transform .15s ease; }
a.tariff-row-link:hover > div, a.tariff-row-link:focus-visible > div { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { a.tariff-row-link > div { transition: none; } a.tariff-row-link:hover > div { transform: none; } }
.dash-new-badge { font-size: .65rem; letter-spacing: .04em; }
.dash-row-border { border: 1px solid var(--bs-border-color); }
.dash-rank { width: 1.6rem; }
.min-w-0 { min-width: 0; }

/* ===== Stage 6g: Bright and help pages ===== */
.hpt-maxw-420 { max-width: 26.25rem; }
.hpt-maxw-500 { max-width: 31.25rem; }
.hpt-maxw-900 { max-width: 56.25rem; }
.hpt-progress-18 { height: 18px; }
.hpt-pre-line { white-space: pre-line; }
.bs-step-line { height: 2px; background: #dee2e6; }
.bs-step-line.is-done { background: var(--success-700); }
.bs-step-dot { width: 32px; height: 32px; font-size: 13px; background: #dee2e6; color: #495057; }
.bs-step-dot.is-done { background: var(--success-700); color: #fff; }
.bs-step-dot.is-active { background: var(--ec-primary); color: #fff; }
@media (max-width: 400px) { .bs-step-label { font-size: .7rem; } }
.bs-status-dot { width: 44px; height: 44px; }
.bs-status-dot.is-ok { background: var(--success-100); }
.bs-status-dot.is-warn { background: var(--warning-100); }
.bs-label-col { width: 9.375rem; }
@media (max-width: 575.98px) { .bs-label-col { width: auto; } }
.smg-badge { height: 50px; width: auto; }
.smg-example { height: 220px; width: auto; max-width: 100%; object-fit: contain; border: 1px solid #dee2e6; background: #fff; padding: 4px; border-radius: 4px; }
@media (max-width: 575.98px) { .smg-example { height: auto; width: 100%; max-height: 260px; } }
.smg-mpan { max-width: 100%; height: auto; border: 1px solid #dee2e6; background: #fff; padding: 4px; border-radius: 4px; }

/* ===== C1 (4 Nov 2026): Optimiser results layout ===== */
/* Heading strip: stays just below the site menu while the results scroll (--opt-nav-h is set by optimiser.js) */
.opt-res-anchor { scroll-margin-top: calc(var(--opt-nav-h, 56px) + .25rem); }
.opt-res-head { position: sticky; top: var(--opt-nav-h, 56px); z-index: 1010; background: var(--ec-light-bg); padding: .5rem 0; margin-bottom: .75rem; border-bottom: 1px solid var(--ec-border); }
/* Sections that fold: a full-width button as the card header */
.opt-sec > .card-header { padding: 0; }
.opt-sec:not(.is-open) > .card-header { border-bottom: 0; border-radius: var(--ec-radius) !important; }
.opt-sec-btn { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .7rem 1rem; border: 0; background: none; color: inherit; font-weight: 600; text-align: left; }
.opt-sec-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: -2px; border-radius: var(--ec-radius); }
.opt-sec-body > .card-body:last-child, .opt-sec-body > .table-responsive:last-child { border-bottom-left-radius: var(--ec-radius); border-bottom-right-radius: var(--ec-radius); }
@media (pointer: coarse) { .hpt-page .opt-sec-btn { min-height: 2.75rem; } }
/* Simple view: the detailed sections are left out until "Show more detail" */
#results.opt-view-simple .opt-detail { display: none !important; }

/* ===== C2 (4 Nov 2026): easier-to-read optimiser results ===== */
.opt-answer { background: var(--success-100); border-top: 3px solid var(--ec-success); border-radius: var(--ec-radius); padding: .65rem .9rem; font-size: 1.05rem; font-weight: 600; color: var(--success-800); }
.opt-a-year { font-size: .55em; font-weight: 600; color: #495057; }
.opt-choice { font-size: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.opt-sec-notes li { padding: .15rem 0; }
.opt-sec-notes:not(:empty) { border-bottom: 1px solid var(--ec-border); padding-bottom: .5rem; }
/* Phones: wide results tables become one card per tariff (each figure labelled from its column) */
@media (max-width: 575.98px) {
    .opt-cards-sm thead { display: none; }
    .opt-cards-sm, .opt-cards-sm tbody, .opt-cards-sm tr, .opt-cards-sm td { display: block; width: 100%; }
    .opt-cards-sm tr { border: 1px solid var(--ec-border); border-radius: var(--ec-radius); margin: .5rem 0; padding: .35rem .6rem; background: #fff; }
    .opt-cards-sm tr.best-deal { border-top: 3px solid var(--ec-success) !important; }
    .opt-cards-sm tr.current-tariff-row { border-top: 3px solid var(--ec-warning); }
    #results .opt-cards-sm td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border: 0; padding: .15rem 0; text-align: right !important; white-space: normal !important; }
    .opt-cards-sm td::before { content: attr(data-label); font-weight: 600; text-align: left; color: #495057; font-size: .8rem; }
    #results .opt-cards-sm td:first-child { display: block; text-align: left !important; font-weight: 600; padding-bottom: .3rem; border-bottom: 1px solid #f1f3f5; margin-bottom: .2rem; }
    .opt-cards-sm td:first-child::before { content: none; }
    .opt-cards-sm td .opt-pct { display: inline !important; margin-left: .35rem; }
}
/* With the menu bar (and the results heading) staying at the top, things scrolled to stop below them */
#optForm > .card, #runRow { scroll-margin-top: 4.5rem; }
#results .opt-sec, #results #headline, #results #resAnswer { scroll-margin-top: calc(var(--opt-nav-h, 56px) + 6rem); }

/* ============================================================
   Part E (4 Nov 2026): Optimiser "Pick from appliances"
   ============================================================ */
.opt-app > summary { cursor: pointer; }
.opt-app[open] > summary { border-bottom: 1px solid var(--ec-border, #dee2e6); margin-bottom: .5rem; }
.opt-app-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; padding: .4rem 0; border-bottom: 1px solid #f1f3f5; }
.opt-app-row:last-child { border-bottom: 0; }
.opt-app-name { flex: 1 1 14rem; min-width: 0; }
.opt-app-week { flex: 0 0 8.5rem; width: 8.5rem; }
@media (max-width: 575.98px) {
    .opt-app-week { flex-basis: 100%; width: auto; max-width: 11rem; margin-left: 1.5rem; }
}

/* ============================================================
   Part F (5 Nov 2026): Optimiser form fields, plan card status
   ============================================================ */
/* A label with its (i) on one line; the row lines its boxes up along the bottom */
.opt-lbl { display: flex; align-items: center; gap: .1rem; min-width: 0; }
.opt-lbl .form-label { margin-bottom: 0; }
.opt-lbl .hpt-help-btn { margin-top: -.6rem; margin-bottom: -.6rem; }   /* keeps its tap size without making the line taller */
.opt-field-row .opt-lbl { margin-bottom: .25rem; }
/* My switching plan: a coloured status headline; tap it to open the details */
.opt-plan > summary { list-style: none; cursor: pointer; }
.opt-plan > summary::-webkit-details-marker { display: none; }
.opt-plan > summary:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: -2px; }
.opt-plan-title { font-weight: 600; white-space: nowrap; }
.opt-plan-status { min-width: 0; }
.opt-plan-chev { transition: transform .15s ease; margin-left: auto; }
.opt-plan[open] .opt-plan-chev { transform: rotate(180deg); }
.opt-plan-red    > summary { background: var(--bs-danger-bg-subtle, #f8d7da); }
.opt-plan-amber  > summary { background: var(--bs-warning-bg-subtle, #fff3cd); }
.opt-plan-green  > summary { background: var(--bs-success-bg-subtle, #d1e7dd); }
.opt-plan-grey   > summary { background: var(--bs-secondary-bg-subtle, #e2e3e5); }
.opt-plan:not([open]) > summary { border-bottom: 0; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .opt-plan-chev { transition: none; } }


/* ===== Design system v1: shared components (5 Nov 2026) =====================
   From the design system's components/bundle.css, with Bootstrap-friendly
   sizes. Used first by the new dashboard (user/dashboard-new.php); other
   pages move over to them one by one. Colours only from the palette tokens. */
.hpt-label { font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Status pills: never colour alone, always words */
.hpt-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .2rem .6rem; border-radius: var(--radius-pill);
    font-size: .8125rem; line-height: 1.15rem; font-weight: 700; white-space: nowrap; }
.hpt-pill.is-ok      { background: var(--success-100); color: var(--success-800); }
.hpt-pill.is-warn    { background: var(--warning-100); color: var(--warning-800); }
.hpt-pill.is-bad     { background: var(--danger-100);  color: var(--danger-800); }
.hpt-pill.is-info    { background: var(--brand-100);   color: var(--brand-800); }
.hpt-pill.is-neutral { background: var(--line-soft);   color: var(--ink-muted); }

/* Messages (Bootstrap alerts take the same colours) */
.hpt-msg { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem .875rem; border-radius: var(--radius-md); font-size: .875rem; }
.hpt-msg.is-error  { background: var(--danger-100);  color: var(--danger-800); }
.hpt-msg.is-action { background: var(--warning-100); color: var(--warning-800); }
.hpt-msg.is-info   { background: var(--brand-100);   color: var(--brand-800); }
.hpt-msg.is-ok     { background: var(--success-100); color: var(--success-800); }

/* Promotion tags */
.hpt-tag { display: inline-block; padding: .2rem .6rem; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 700;
    background: var(--brand-100); color: var(--brand-800); }
.hpt-tag.is-idle { background: var(--line-soft); color: var(--ink-muted); }
.hpt-tag.is-fit  { background: var(--success-100); color: var(--success-800); }

/* Figure tiles */
.hpt-tiles { display: flex; flex-wrap: wrap; gap: .75rem; }
.hpt-tile { flex: 1 1 10rem; min-width: 0; display: flex; flex-direction: column; gap: .25rem; padding: 1rem;
    background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand-700);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hpt-tile.is-best { border-top-color: var(--success-700); }
.hpt-tile.is-warn { border-top-color: var(--accent-400); }
.hpt-tile.is-bad  { border-top-color: var(--danger-700); }
.hpt-tile p { margin: 0; }
.hpt-tile-label { font-size: .8125rem; color: var(--ink-muted); }
.hpt-tile-value { font-size: 1.75rem; line-height: 2rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hpt-tile-unit  { font-size: .875rem; font-weight: 500; color: var(--ink-muted); }
.hpt-tile-sub   { font-size: .8125rem; color: var(--ink); overflow-wrap: anywhere; }
.hpt-tile-change { margin-top: .25rem !important; font-size: .8125rem; font-weight: 600; color: var(--ink-muted); }
.hpt-tile-change.is-good { color: var(--success-700); }
.hpt-tile-change.is-bad  { color: var(--danger-700); }
.hpt-tile-change.is-warn { color: var(--accent-800); }
.hpt-spark { display: block; width: 100%; height: 2rem; margin-top: .375rem; }
.hpt-spark polyline { fill: none; stroke: var(--chart-current); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hpt-tile.is-best .hpt-spark polyline { stroke: var(--success-700); }

/* Setup checklist */
.hpt-check-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .5rem; }
.hpt-progress { height: 8px; margin: .75rem 0 1rem; background: var(--line-soft); border-radius: var(--radius-pill); overflow: hidden; }
.hpt-progress > span { display: block; height: 100%; width: 0; background: var(--success-700); border-radius: var(--radius-pill);
    transform-origin: left; animation: hpt-fill .9s ease-out both; }
.hpt-progress > .hpt-w-0 { width: 0%; } .hpt-progress > .hpt-w-5 { width: 5%; } .hpt-progress > .hpt-w-10 { width: 10%; } .hpt-progress > .hpt-w-15 { width: 15%; } .hpt-progress > .hpt-w-20 { width: 20%; } .hpt-progress > .hpt-w-25 { width: 25%; } .hpt-progress > .hpt-w-30 { width: 30%; } .hpt-progress > .hpt-w-35 { width: 35%; } .hpt-progress > .hpt-w-40 { width: 40%; } .hpt-progress > .hpt-w-45 { width: 45%; } .hpt-progress > .hpt-w-50 { width: 50%; } .hpt-progress > .hpt-w-55 { width: 55%; } .hpt-progress > .hpt-w-60 { width: 60%; } .hpt-progress > .hpt-w-65 { width: 65%; } .hpt-progress > .hpt-w-70 { width: 70%; } .hpt-progress > .hpt-w-75 { width: 75%; } .hpt-progress > .hpt-w-80 { width: 80%; } .hpt-progress > .hpt-w-85 { width: 85%; } .hpt-progress > .hpt-w-90 { width: 90%; } .hpt-progress > .hpt-w-95 { width: 95%; } .hpt-progress > .hpt-w-100 { width: 100%; }
@keyframes hpt-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hpt-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.hpt-check-step { display: flex; align-items: center; gap: .75rem; padding: .5rem .25rem; }
.hpt-check-step p { overflow-wrap: anywhere; }
.hpt-check-num { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 2px solid var(--control-border);
    display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: var(--ink-muted); }
.hpt-check-step.is-next { align-items: flex-start; padding: .875rem; margin: .375rem 0; background: var(--brand-100); border-radius: var(--radius-md); }
.hpt-check-step.is-next .hpt-check-num { border: 0; background: var(--brand-700); color: var(--on-brand); }
.hpt-check-step.is-locked { color: var(--ink-muted); }
.hpt-next-label { color: var(--brand-800); }
.hpt-check-done { margin: 0 0 .25rem; }
.hpt-check-done > summary { display: flex; align-items: center; gap: .75rem; padding: .5rem .25rem; min-height: 2.75rem; cursor: pointer; list-style: none;
    color: var(--success-800); font-weight: 600; border-radius: var(--radius-sm); }
.hpt-check-done > summary::-webkit-details-marker { display: none; }
.hpt-check-done .hpt-check-step { color: var(--ink-muted); }
.hpt-check-done .hpt-fold-hide, .hpt-check-done[open] .hpt-fold-show { display: none; }
.hpt-check-done[open] .hpt-fold-hide { display: inline; }
.hpt-fold-toggle { color: var(--brand-700); font-weight: 600; }
.hpt-tick { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--success-100);
    display: inline-flex; align-items: center; justify-content: center; }
.hpt-tick svg { width: 14px; height: 14px; stroke: var(--success-800); }

/* Promotions */
.hpt-promos { display: flex; flex-wrap: wrap; gap: .75rem; }
.hpt-promo { flex: 1 1 15rem; min-width: 0; display: flex; flex-direction: column; gap: .375rem; padding: 1.125rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hpt-promo-title { margin: .375rem 0 0; font-weight: 700; }
.hpt-promo-text  { margin: 0 0 .5rem; font-size: .875rem; color: var(--ink); flex: 1 1 auto; }

/* What's changed */
.hpt-changes { list-style: none; margin: 0; padding: 0; }
.hpt-changes li { display: flex; align-items: flex-start; gap: .875rem; padding: .75rem 0; border-top: 1px solid var(--line-soft); }
.hpt-change-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.hpt-change-icon.is-cheaper { background: var(--success-100); color: var(--success-800); }
.hpt-change-icon.is-rate    { background: var(--warning-100); color: var(--warning-800); }
.hpt-change-icon.is-run     { background: var(--brand-100);   color: var(--brand-800); }

/* Admin "Current | New" switch */
.hpt-vswitch { display: inline-flex; align-items: center; gap: .125rem; padding: .1875rem; border-radius: var(--radius-pill); background: var(--line-soft); }
.hpt-vswitch-label { font-size: .75rem; color: var(--ink-muted); padding: 0 .5rem 0 .625rem; }
.hpt-vswitch-opt { display: inline-flex; align-items: center; min-height: 2rem; padding: .25rem .875rem; border-radius: var(--radius-pill);
    font-size: .8125rem; color: var(--ink-muted); text-decoration: none; }
.hpt-vswitch-opt:hover { color: var(--ink); }
.hpt-vswitch-opt.is-on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-card); }

/* ===== The new dashboard (user/dashboard-new.php) ===== */
.hpt-dash-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: .25rem; }
.hpt-dash-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.hpt-dash .card { border-color: var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hpt-dash-notices > :last-child { margin-bottom: 1.5rem !important; }
.hpt-welcome { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: var(--brand-50);
    border: 1px solid var(--bs-primary-border-subtle); border-top: 3px solid var(--brand-700); border-radius: var(--radius-lg); }
.hpt-welcome-mark { flex: 0 0 48px; border-radius: var(--radius-md); }
.hpt-health { display: grid; gap: .5rem; margin: 0; }
.hpt-health > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem .75rem; }
.hpt-health dt { font-weight: 400; color: var(--ink-muted); font-size: .875rem; }
.hpt-health dd { margin: 0; font-size: .875rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; justify-content: flex-end; text-align: right; }
.hpt-trend-rules { overflow-wrap: anywhere; }
.dash-icon-circle { width: 42px; height: 42px; }
@media (max-width: 575.98px) {
    .hpt-dash-actions { width: 100%; }
    .hpt-dash-actions .btn { flex: 1 1 auto; }
    .hpt-welcome { flex-direction: column; }
    .hpt-tile { flex-basis: calc(50% - .375rem); }
    .hpt-tile-value { font-size: 1.5rem; }
}
/* Gentle entrance: cards fade up one after another */
.hpt-fade { animation: hpt-fade-in .45s ease-out both; }
.hpt-tiles .hpt-fade:nth-child(2), .hpt-promos .hpt-fade:nth-child(2) { animation-delay: .06s; }
.hpt-tiles .hpt-fade:nth-child(3) { animation-delay: .12s; }
@keyframes hpt-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .hpt-fade, .hpt-progress > span { animation: none; }
}

/* ---- Small fixes (5 Nov 2026) ---- */
/* Width helper Bootstrap lacks: auto width from tablet up (full width on phones). */
@media (min-width: 768px) { .w-md-auto { width: auto !important; } }

/* Cookie notice: a slim bar at the bottom, not a full-screen overlay.
   Sits below the tour (1040/1050) so the tour always wins. */
.hpt-cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: var(--footer-bg); color: #fff; padding: .25rem 0 calc(.25rem + env(safe-area-inset-bottom));
    border-top: 3px solid var(--accent-400); box-shadow: 0 -2px 10px rgba(0,0,0,.18); font-size: .925rem; }
.hpt-cookie-bar p { flex: 1 1 18rem; }
.hpt-cookie-bar a { color: var(--accent-300); text-decoration: underline; }
.hpt-cookie-bar a:hover, .hpt-cookie-bar a:focus-visible { color: #fff; }
.hpt-cookie-bar .btn { flex: 0 0 auto; min-width: 5.5rem; }
@media (max-width: 575.98px) { .hpt-cookie-bar .btn { width: 100%; } }


/* ===== D1 (6 Nov 2026): site-wide design fixes ===== */
/* Info buttons: Bootstrap's own .btn-info is bright cyan (its colours are compiled in,
   not read from --bs-info). Give them the brand teal, like .btn-primary. */
.btn-info { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-700); --bs-btn-border-color: var(--brand-700);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-800); --bs-btn-hover-border-color: var(--brand-800);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-800); --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--brand-700); --bs-btn-disabled-border-color: var(--brand-700);
    --bs-btn-focus-shadow-rgb: 15,110,106; }
.btn-outline-info { --bs-btn-color: var(--brand-700); --bs-btn-border-color: var(--brand-700);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-800); --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-focus-shadow-rgb: 15,110,106; }

/* Touch screens, every page (public pages had no rule; user pages stopped at 40px):
   buttons, menus, page numbers and fields at least 44px tall; tick boxes bigger,
   with a little more room round their labels. Desktop mouse sizes don't change. */
@media (pointer: coarse) {
    main .btn, main .btn-sm, main .form-select, main .form-control:not(textarea),
    main .page-link, .hpt-page .hpt-tap { min-height: 2.75rem; }
    main .btn, main .btn-sm { display: inline-flex; align-items: center; justify-content: center; }
    main .btn-group > .btn, main .btn-group-sm > .btn { min-height: 2.75rem; }
    main .page-link { display: flex; align-items: center; min-width: 2.75rem; justify-content: center; }
    main .form-check-input:not([role="switch"]) { width: 1.4em; height: 1.4em; }
    main .form-check:not(.form-switch):not(.form-check-inline) { padding-top: .6rem; padding-bottom: .6rem; padding-left: 2em; }
    main .form-check:not(.form-switch):not(.form-check-inline) .form-check-input { margin-left: -2em; margin-top: .05em; }
    main .form-switch { padding-top: .6rem; padding-bottom: .6rem; }
    main .form-switch .form-check-input { height: 1.4em; width: 2.5em; }
    main .hpt-help-btn, .hpt-page .hpt-help-btn { min-width: 2.75rem; min-height: 2.75rem; }
}

/* D1: classes in place of inline styles on content and public pages */
.hpt-lh-relaxed { line-height: 1.7; }
.hpt-summary { cursor: pointer; list-style: none; }
.hpt-summary::-webkit-details-marker { display: none; }
.hpt-chart-320 { position: relative; height: 320px; }
.hpt-h-140 { height: 140px; }
.hpt-cover-16x9 { object-fit: cover; aspect-ratio: 16 / 9; height: auto; }

/* ===== D2 (6 Nov 2026): public page parts (design system) =====
   Used first by the home page; tariff, region, browse and compare pages follow in D3. */

/* The one call to action on a screen: amber with ink text */
.hpt-btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px;
    padding: 0 1.5rem; border-radius: 10px; border: 0; background: var(--accent-400); color: var(--ink);
    font-weight: 700; font-size: 1.0625rem; text-decoration: none; }
.hpt-btn-cta:hover, .hpt-btn-cta:focus-visible { background: var(--accent-300); color: var(--ink); }
.hpt-btn-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Second action on a dark band */
.hpt-btn-on-dark { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem;
    border-radius: 10px; border: 1px solid var(--on-brand-muted); color: #fff; font-size: 1.0625rem; text-decoration: none; }
.hpt-btn-on-dark:hover, .hpt-btn-on-dark:focus-visible { background: rgba(255,255,255,.1); color: #fff; }

/* Hero: text and actions on the left, an example result on the right; stacked on phones */
.hpt-hero { background: var(--brand-800); color: var(--on-brand); }
.hpt-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; padding-top: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 992px) { .hpt-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; padding-top: 3.5rem; padding-bottom: 4.5rem; } }
.hpt-hero-kicker { margin: 0 0 .75rem; font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-300); }
.hpt-hero h1 { margin: 0 0 1rem; font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.hpt-hero-lead { margin: 0 0 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--on-brand-muted); max-width: 36rem; }
.hpt-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hpt-hero-link { display: inline-block; margin-top: 1rem; color: var(--accent-300); }
.hpt-hero-link:hover, .hpt-hero-link:focus-visible { color: #fff; }
@media (max-width: 575.98px) { .hpt-hero-actions > a { width: 100%; } .hpt-hero-lead { font-size: 1rem; } }

/* Example result card (in the hero) */
.hpt-example { background: var(--surface); color: var(--ink); border-radius: 14px; box-shadow: 0 8px 24px rgba(16,24,40,.12); padding: 1.5rem; }
.hpt-example-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: 1rem; }
.hpt-example-title { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.hpt-example-label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted);
    background: var(--surface-subtle, #F6F8F8); border: 1px solid var(--line, #DDE3E4); border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.hpt-example-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem; }
.hpt-example-note { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.4; color: var(--ink-muted); }

/* Top cards: your tariff (teal edge) and best (green edge) */
.hpt-topcard { border: 1px solid var(--line, #DDE3E4); border-top: 3px solid var(--brand-700); border-radius: 14px; padding: 1rem; background: var(--surface); }
.hpt-topcard.is-best { border-top-color: var(--success-700); }
.hpt-topcard-label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--ink-muted); }
.hpt-topcard-name { display: block; font-size: .9375rem; font-weight: 700; margin-top: .15rem; }
.hpt-topcard-figure { display: block; margin-top: .5rem; font-size: 1.75rem; line-height: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hpt-topcard-figure small { font-size: .8125rem; font-weight: 400; color: var(--ink-muted); }
.hpt-badge-best { font-size: .75rem; font-weight: 700; color: #fff; background: var(--success-700); border-radius: 6px; padding: .05rem .45rem; }
.hpt-saving-line { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; padding: .75rem 1rem; border-radius: 10px;
    background: var(--success-100); color: var(--success-800); font-size: .9375rem; }
.hpt-saving-line strong { font-size: 1.0625rem; }

/* Trust strip under the hero */
.hpt-trust { background: var(--brand-100); color: var(--brand-800); }
.hpt-trust-inner { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.hpt-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
@media (min-width: 768px) { .hpt-trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hpt-trust-list li { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; line-height: 1.35; }
.hpt-trust-list .bi { font-size: 1.3rem; color: var(--brand-700); flex: 0 0 auto; }
.hpt-trust-logos { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #C9E3E0; }
.hpt-trust-logos-label { font-size: .8125rem; color: var(--ink-muted); }
.hpt-trust-logo { display: inline-flex; align-items: center; height: 40px; padding: 0 .6rem; background: var(--surface); border-radius: 6px; }
.hpt-trust-logo img { height: 24px; width: auto; max-width: 110px; }
.hpt-trust-logo-name { font-size: .8125rem; font-weight: 600; color: var(--ink); }
/* The design system's short trust note (bottom of public pages) */
.hpt-trust-note { font-size: .8125rem; color: var(--ink-muted); }

/* Section headings on public pages */
.hpt-band { padding-top: 3.5rem; padding-bottom: 3.5rem; }   /* not .hpt-section: that is the How it works pages */
.hpt-section-head { text-align: center; margin-bottom: 2rem; }
.hpt-section-head h2 { margin: 0 0 .5rem; font-size: 1.75rem; line-height: 2.125rem; font-weight: 700; }
.hpt-section-head p { margin: 0 auto; max-width: 40rem; color: var(--ink-muted); }

/* How it works: numbered steps, joined by a line on wide screens */
.hpt-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.hpt-steps > li { display: flex; gap: .9rem; align-items: flex-start; background: var(--surface); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05); padding: 1rem; }
.hpt-step-badge { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; background: var(--brand-700); color: #fff;
    font-weight: 700; font-size: 1.0625rem; display: flex; align-items: center; justify-content: center; }
.hpt-step-icon { display: none; }
.hpt-steps h3 { margin: 0 0 .25rem; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 700; }
.hpt-steps p { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-muted); }
.hpt-steps p + p { margin-top: .4rem; }
@media (min-width: 992px) {
    .hpt-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
    .hpt-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 2px; background: #B9DEDA; }
    .hpt-steps > li { position: relative; flex-direction: column; align-items: center; text-align: center; background: none; box-shadow: none; padding: 0; gap: .9rem; }
    .hpt-step-badge { box-shadow: 0 0 0 6px var(--surface-page); }
    .hpt-step-card { align-self: stretch; flex: 1 1 auto; background: var(--surface); border-radius: 14px; padding: 1.25rem;
        box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05); }
    .hpt-step-icon { display: block; font-size: 1.75rem; color: var(--brand-700); margin-bottom: .5rem; }
}

/* Sign-up band: one per public page */
.hpt-signup { background: var(--brand-800); color: #fff; text-align: center; }
.hpt-signup h2 { color: #fff; }
.hpt-signup p { color: var(--on-brand-muted); }

/* Breadcrumb on public pages (D3) */
.hpt-crumbs { font-size: .875rem; margin-bottom: 1rem; }
.hpt-crumbs .breadcrumb { margin: 0; }
.hpt-crumbs a { color: var(--brand-700); }

/* ===== D3 (6 Nov 2026): public tariff, region and compare pages ===== */
/* Page header band: breadcrumb, title and intro on brand teal (no gradient) */
.hpt-page-hero { background: var(--brand-800); color: var(--on-brand); padding: 1.25rem 0 2rem; }
.hpt-page-hero h1 { color: #fff; font-size: clamp(1.625rem, 1.15rem + 1.6vw, 2.25rem); line-height: 1.2; letter-spacing: -.01em; }
.hpt-page-hero .lead, .hpt-page-hero .text-muted, .hpt-page-hero p { color: var(--on-brand-muted) !important; }
.hpt-page-hero strong { color: #fff; }
.hpt-page-hero a:not(.btn):not(.hpt-btn-cta) { color: var(--accent-300); }
.hpt-page-hero a:not(.btn):not(.hpt-btn-cta):hover, .hpt-page-hero a:not(.btn):not(.hpt-btn-cta):focus-visible { color: #fff; }
.hpt-page-hero .breadcrumb { --bs-breadcrumb-divider-color: var(--on-brand-muted); --bs-breadcrumb-item-active-color: var(--on-brand-muted); margin-bottom: 1rem; }
.hpt-page-hero .hpt-logo-pill { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; padding: 4px 8px; }
.hpt-page-hero .badge.bg-light { color: var(--ink) !important; }

/* Tariff, region and comparison cards: coloured edge on the top */
.hpt-tariff-card { border: 1px solid var(--line); border-top: 3px solid var(--brand-700); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05) !important; }
.hpt-tariff-card.is-closed { border-top-color: var(--accent-800); }
.hpt-tariff-card.is-best { border-top-color: var(--success-700); }
a.hpt-tariff-card:hover, a.hpt-tariff-card:focus-visible { box-shadow: 0 8px 24px rgba(16,24,40,.12) !important; }

/* Amber as text (amber itself is too faint for text) */
.hpt-text-action { color: var(--accent-800) !important; }

/* Sign-up card inside the page container (the band, with rounded corners) */
.hpt-signup-card { border-radius: 14px; }
.hpt-signup-card .text-muted { color: var(--on-brand-muted) !important; }

/* FAQ accordions everywhere: brand tint when open, brand focus ring, card corners */
.accordion { --bs-accordion-active-bg: var(--brand-50); --bs-accordion-active-color: var(--brand-800);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(15,110,106,.25); --bs-accordion-border-color: var(--line);
    --bs-accordion-border-radius: 14px; --bs-accordion-inner-border-radius: 13px; }
.accordion-button { font-weight: 600; }
.hpt-signup .hpt-trust-note, .hpt-signup-card .hpt-trust-note { color: var(--on-brand-muted); }
.hpt-signup .hpt-trust-note a, .hpt-signup-card .hpt-trust-note a { color: #fff; }
.hpt-signup time { color: inherit; }
/* Hover lift for linked cards (was inline on electricity-tariffs.php) */
.region-card, .comparison-card { transition: transform .15s ease, box-shadow .15s ease; }
.region-card:hover, .comparison-card:hover { transform: translateY(-2px); }
.region-card:focus-visible, .comparison-card:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .region-card, .comparison-card { transition: none; } .region-card:hover, .comparison-card:hover { transform: none; } }
.hpt-tariff-card .hpt-btn-cta:focus-visible { outline-color: var(--brand-800); }

/* ===== D4 (6 Nov 2026): readings, usage and Browse tariffs (logged in) ===== */
/* Readings: data status card takes the tone of its figures on the top edge */
.hpt-status-card { border: 1px solid var(--line); border-top: 3px solid var(--brand-700); border-radius: 14px; }
.hpt-status-card.is-best { border-top-color: var(--success-700); }
.hpt-status-card.is-warn { border-top-color: var(--accent-400); }
.hpt-status-card.is-bad  { border-top-color: var(--danger-700); }
.hpt-tile-value-sm { font-size: 1.25rem; line-height: 2rem; }
/* Browse tariffs: custom tariff cards keep a dashed outline; current tariff reads as the green top card */
.hpt-tariff-card.is-custom { border-style: dashed; border-top-style: solid; }
/* Segmented buttons (usage periods, chart/table, total/per day): full tap size on phones */
@media (pointer: coarse) { .hpt-page .hpt-seg .btn, .hpt-page .hpt-seg-btn { min-height: 2.75rem; min-width: 2.75rem; } }

/* Usage page (was an inline <style> block in user/usage.php) */
.us-chart-box { position: relative; height: 340px; }
.us-share-bar { display: flex; height: 28px; border-radius: .375rem; overflow: hidden; background: var(--bs-secondary-bg); }
.us-share-seg { height: 100%; min-width: 2px; }
.us-swatch { display: inline-block; width: .85rem; height: .85rem; border-radius: .2rem; vertical-align: -.1rem; }
.us-table-wrap { max-height: 480px; overflow-y: auto; }
.us-period-row .form-control, .us-period-row .form-select { min-width: 0; }
.us-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Phones and small tablets: tables keep their columns and scroll sideways instead of squashing */
@media (max-width: 767.98px) {
    .us-table { min-width: 560px; }
    .us-share-table { min-width: 520px; }
    .us-table th, .us-table td, .us-share-table th, .us-share-table td { white-space: nowrap; }
}
@media (max-width: 575.98px) {
    .us-chart-box { height: 260px; }
    .us-views .btn { padding-left: .5rem; padding-right: .5rem; }
}

/* ===== R1 (6 Nov 2026): Compare results bar pinned under the menu bar (as on the Optimiser) ===== */
.cmp-res-anchor { height: 0; }
.cmp-res-head { position: sticky; top: var(--cmp-nav-h, 56px); z-index: 1010; background: var(--surface-page);
    padding: .5rem 0; border-bottom: 1px solid var(--line); }
@media (max-width: 575.98px) {
    .cmp-res-head { flex-wrap: nowrap !important; }
    .cmp-res-head h2 { white-space: nowrap; }
    .cmp-res-head #viewToggle { white-space: nowrap; }
}

/* ===== B5 (6 Nov 2026) ===== */
/* Dashboard before the first comparison: step help card and example */
.hpt-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-700); }
.hpt-step-help { border: 1px solid var(--line); border-top: 3px solid var(--brand-700); border-radius: 14px; }
.hpt-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 768px) { .hpt-ways { grid-template-columns: repeat(3, 1fr); } }
.hpt-way { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: .875rem; background: var(--surface); }
.hpt-way > .bi { font-size: 1.25rem; color: var(--brand-700); line-height: 1.4; }
.hpt-dash-example { border: 1px dashed var(--brand-700); border-radius: 14px; padding: 1.25rem; background: var(--surface); }
.hpt-dash-example .hpt-tile { pointer-events: none; }
.hpt-example-list { display: grid; gap: .5rem; }
.hpt-example-row { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .75rem; border: 1px solid var(--line); border-radius: 10px; padding: .625rem .875rem; }
.hpt-example-row.is-best { border-top: 3px solid var(--success-700); }
.hpt-example-row.is-current { background: var(--brand-50); }
.hpt-example-rank { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-100); color: var(--brand-800); font-weight: 700; font-size: .875rem; }
.hpt-example-row.is-best .hpt-example-rank { background: var(--success-700); color: #fff; }
.hpt-example-name { font-weight: 600; }
.hpt-example-cost { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Upload: supported formats */
.hpt-format-name { font-size: .9375rem; font-weight: 700; margin: 1rem 0 .125rem; }
.hpt-formats .card-body > .hpt-format-name:first-of-type { margin-top: 0; }
.hpt-format-note { font-size: .875rem; color: var(--ink-muted); margin-bottom: .375rem; }
.hpt-format-sample { font-size: .8125rem; background: var(--brand-50); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .75rem; margin-bottom: 0; white-space: pre; overflow-x: auto; }
/* Compare: short view puts the three boxes beside the list on wide screens; full view keeps them on top */
@media (min-width: 992px) {
    .cmp-res-grid.is-short { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
    .cmp-res-grid.is-short > #resultsPanel { grid-column: 1; grid-row: 1; }
    .cmp-res-grid.is-short > #headlineCards { grid-column: 2; grid-row: 1; position: sticky;
        top: calc(var(--cmp-nav-h, 56px) + var(--cmp-bar-h, 52px) + .75rem); margin: 0; --bs-gutter-x: 0; }
    .cmp-res-grid.is-short > #headlineCards > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-top: 0; }
    .cmp-res-grid.is-short > #headlineCards > [class*="col-"] + [class*="col-"] { margin-top: 1rem; }   /* B5a: first box level with the list */
}
/* Browse tariffs: "Which tariff are you on?" */
.hpt-which-steps { padding-left: 1.25rem; margin: 0; display: grid; gap: .75rem; }
.hpt-which-steps > li::marker { font-weight: 700; color: var(--brand-700); }
.hpt-footnote a { color: var(--brand-700); }
/* Supplier logos: one tile everywhere (includes/SupplierLogo.php, compare.js) */
.hpt-logo-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff;
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden; vertical-align: middle; }
.hpt-logo-tile.is-48 { width: 48px; height: 48px; padding: 5px; border-radius: 12px; }
.hpt-logo-tile.is-32 { width: 32px; height: 32px; padding: 3px; border-radius: 8px; }
.hpt-logo-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hpt-logo-tile.is-initials { background: var(--brand-100); border-color: var(--brand-100); color: var(--brand-800); font-weight: 700; letter-spacing: .02em; }
.hpt-logo-tile.is-48.is-initials { font-size: 1rem; }
.hpt-logo-tile.is-32.is-initials { font-size: .75rem; }
.sup-desc-trunc { max-width: 200px; }
/* B5b: dashboard plan card, the Next switch date sits under its label */
.hpt-health-when { display: block; font-size: .8125rem; color: var(--ink-muted); margin-top: .125rem; }
.hpt-health > div:has(.hpt-health-when) { align-items: flex-start; }
.hpt-health > div:has(.hpt-health-when) dd { flex: 1 1 10rem; }

/* ===== B6 (7 Nov 2026): Optimiser ===== */
/* Add a battery: three choices as tappable rows */
.opt-batt-choices { display: grid; gap: .5rem; }
@media (min-width: 768px) { .opt-batt-choices { grid-template-columns: repeat(3, 1fr); } }
.opt-batt-choice { margin: 0; padding: .75rem .75rem .75rem 2.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-height: 2.75rem; }
.opt-batt-choice .form-check-input { margin-left: -1.5rem; }
.opt-batt-choice .form-check-label { width: 100%; cursor: pointer; }
.opt-batt-choice:has(.form-check-input:checked) { border-color: var(--brand-700); border-top-width: 3px; background: var(--brand-50); }
.opt-batt-choice.is-off { opacity: .75; }
.opt-batt-choice.is-off .form-check-label { cursor: default; }
/* Two past runs side by side: the page opens on it, below the sticky menu */
.opt-cmp-box { scroll-margin-top: 4.5rem; }
.opt-cmp-bar { background: var(--brand-50); border: 1px solid var(--line); border-radius: 12px; padding: .5rem .75rem; }