/* Page layout: inputs, three-card comparison, then bill details. */
body{background:#f3f6fa}
main{max-width:1160px;padding:28px 28px 12px}
.language-switch{margin-bottom:16px}
.intro{margin-bottom:28px;max-width:880px}
.intro h1{font-size:clamp(30px,4vw,44px);letter-spacing:-1.4px}
.intro>p:last-child{line-height:1.65;max-width:820px}
.workspace{display:flex;flex-direction:column;gap:30px}
.workspace>.inputs,.workspace>.results{width:100%;min-width:0}
.inputs{padding:28px;border-radius:20px;box-shadow:0 8px 28px #17324d06}
.input-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.input-heading .section-label{margin:0}
.tariff-type{margin:0;gap:10px;font-size:12px}
.tariff-type>strong{padding:7px 12px;font-size:12px;white-space:nowrap;background:#edf3ff;color:#27509b;border-radius:999px}
.section-label{gap:12px}
.section-label>span{width:30px;height:30px}
.usage-controls{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:32px;row-gap:14px;padding:22px;background:#f6f9fd;border:1px solid #e3ebf4;border-radius:14px}
.usage-entry label{font-size:13px;color:#50647b}
.unit-input{background:white;border-color:#cbd8e6;padding-right:18px}
.unit-input input{font-size:36px;padding:10px 14px}
.usage-range{align-self:center;padding-top:16px;min-width:0}
.usage-range input[type=range]{margin:12px 0 8px;height:8px;cursor:pointer;accent-color:#2454d6}
.usage-range:has(#slider[hidden]){display:none}
.presets{grid-column:1/-1;margin:0;display:flex;gap:9px;flex-wrap:wrap}
.presets button{flex:0 1 90px;padding:9px 14px;border-radius:999px;background:white;font-size:13px}
.presets button[aria-pressed=true]{background:#2454d6;color:white;border-color:#2454d6}
.settings-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:26px}
.billing-settings{min-width:0;padding-right:28px;border-right:1px solid #e4ebf2}
#cycle-mode,#afa-month{width:100%;min-height:44px;margin-bottom:14px;font-size:14px;border-radius:9px;background:white;border:1px solid #c5d2e2;padding:10px 12px;color:var(--navy)}
#cycle-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.date-field{min-width:0}
.date-field label{font-size:12px}
#cycle-fields input{margin-bottom:8px;min-height:44px}
.cycle-note{margin:0 0 16px;line-height:1.6}
.tax-checkbox{padding:13px;border:1px solid #e4ebf2;border-radius:9px;background:#f8fafc;line-height:1.5;margin:18px 0 0}
.tax-checkbox input{accent-color:#2454d6}
.adjust{margin:0;min-width:0}
.adjust summary{padding:0 0 16px;font-size:14px}
.adjust label{font-size:13px}
.adjust p{line-height:1.6;margin:10px 0;color:#617187;font-size:12px}
#afa{max-width:100%;min-height:44px;background:white}
.month-allocation{background:#f8fafc;margin:12px 0;border-radius:10px}
.month-allocation:last-child{margin-bottom:0}
.input-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:18px;margin-top:24px;padding-top:20px;border-top:1px solid #e4ebf2}
.input-actions .scope{flex:1 1 440px;margin:0;font-size:12px;line-height:1.65;text-align:left}
.input-actions .calculate{width:auto;min-width:210px;min-height:46px;justify-content:center;background:#2454d6}
.input-actions .calculate span{color:white}
.input-actions .calculate:hover{background:#1945b9}
#error:empty{display:none}
#error{flex-basis:100%;margin:0}
.result-top{margin-bottom:16px;padding:0;gap:16px}
.result-top>span{font-size:12px;background:#e9eff6;color:#476078;border-radius:999px;padding:7px 12px}
.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:26px}
.bill,.cards>.difference{border-radius:16px;padding:24px;min-width:0;box-shadow:0 5px 18px #17324d04}
.bill{display:flex;flex-direction:column}
.bill .pill{align-self:flex-start;font-size:10px;letter-spacing:.8px}
.bill p{margin:18px 0 10px;font-size:13px}
.bill strong,.cards>.difference strong{font-size:clamp(26px,3vw,38px);letter-spacing:-1px;line-height:1.2;font-variant-numeric:tabular-nums}
.bill-caption{margin:12px 0 18px}
.bill .bar-track{margin-top:auto}
.new{background:linear-gradient(135deg,#18365a,#102136);border-color:#19395d}
.cards>.difference{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;margin:0;background:#edf7e6;border:1px solid #d4e8c8}
.cards>.difference>div{display:flex;flex-direction:column;gap:18px;width:100%}
.cards>.difference span{font-size:10px;letter-spacing:1px;color:#436436}
.cards>.difference strong{color:#28623a;overflow-wrap:anywhere}
.cards>.difference p{max-width:none;text-align:left;font-size:12px;line-height:1.65;color:#47643c}
.cards>.difference.increase{background:#fff3e9;border-color:#f0d9c5}
.cards>.difference.increase strong,.cards>.difference.increase span,.cards>.difference.increase p{color:#935120}
.breakdown{padding:26px;border-radius:18px}
.breakdown .section-label{margin-bottom:16px}
.table-wrap{width:100%;overflow-x:auto}
.breakdown table{min-width:420px}
.breakdown td{padding-top:14px;padding-bottom:14px}
main>footer{padding:24px 4px;line-height:1.7;color:#6b7b8e}
@media(max-width:760px){
 main{padding:20px 18px 8px}.inputs{padding:20px}.input-heading{align-items:flex-start;flex-wrap:wrap;gap:14px}.tariff-type{margin-left:42px}.usage-controls{grid-template-columns:1fr;padding:18px;gap:12px}.usage-range{padding-top:0}.presets button{flex:1}.settings-grid{grid-template-columns:1fr;gap:22px}.billing-settings{padding-right:0;border-right:0;padding-bottom:22px;border-bottom:1px solid #e4ebf2}.cards{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.cards>.difference{grid-column:1/-1;flex-direction:row;align-items:center;padding:20px;gap:20px}.cards>.difference>div{width:auto;gap:8px;flex:1}.cards>.difference p{flex:1;margin:0}.bill{padding:20px 16px}.bill strong{font-size:clamp(24px,5vw,34px)}.input-actions .calculate{width:100%}.input-actions .scope{flex-basis:100%}.result-top>span{margin-left:42px}.breakdown{padding:20px}.breakdown .analysis-button{margin-left:auto}
}
@media(max-width:420px){
 main{padding:16px 12px 8px}.inputs,.breakdown{padding:16px}.usage-controls{padding:14px}.presets{gap:6px}.presets button{padding:9px 6px}.cards{grid-template-columns:1fr}.cards>.difference{grid-column:auto}.bill strong,.cards>.difference strong{font-size:32px}.bill-caption{min-height:0}.bill{padding:20px}.bill p{margin-top:12px}.breakdown .analysis-button{margin-left:42px}.tariff-type{margin-left:0}.tariff-type>span{font-size:11px}.cards>.difference{flex-direction:column;align-items:flex-start}.intro h1{font-size:30px}
}

/* myTNB palette, from its public tariff stylesheet. */
:root{--blue:#0d6efd;--navy:#212529;--muted:#6c757d;--line:#dee2e6;--tnb-purple:#6646db;--tnb-sky:#2a97fb;--tnb-deep:#0f489d}
body{background:#f8f9fa;border-top:5px solid transparent;border-image:linear-gradient(90deg,#6646db,#2a97fb) 1}
.eyebrow{color:#6646db}
.inputs,.breakdown{border-color:#dee2e6;box-shadow:0 6px 24px #0f489d06}
.usage-controls{background:linear-gradient(180deg,#f3faff,#eaf6ff);border-color:#d7e9fc}
.section-label>span{color:#0f489d;background:#e6f0ff;border-color:#c8ddfa}
.tariff-type>strong,.result-top>span{color:#0f489d;background:#e6f0ff}
.presets button[aria-pressed=true]{background:#0f489d;border-color:#0f489d;color:white}
.usage-range input[type=range],.tax-checkbox input{accent-color:#0d6efd}
.input-actions .calculate{background:#0f489d}.input-actions .calculate:hover{background:#0b397d}
.unit-input:focus-within{border-color:#6646db;box-shadow:0 0 0 3px #6646db15}
input:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible,select:focus-visible{outline-color:#6646db}
.bill.old{background:white;border-color:#dee2e6;border-top:4px solid #0d6efd}
.bill.old .pill{background:#e6f0ff;color:#0f489d;border-color:#cbdfff}
.bill.old .bar-track>div{background:#0d6efd}
.bill.new{background:linear-gradient(145deg,#6646db,#0f489d);border:1px solid #6646db;color:white}
.bill.new .pill{background:#ffffff18;border-color:#ffffff55;color:white}
.bill.new p,.bill.new .bill-caption{color:#edf3ff}
.bill.new .bar-track{background:#ffffff30}.bill.new .bar-track>div{background:#bce4ff}
.cards>.difference{background:linear-gradient(135deg,#eef3ff,#e6f5fc);border-color:#d0d7f5;border-top:4px solid #6646db}
.cards>.difference strong{color:#0f489d}.cards>.difference span{color:#6646db}.cards>.difference p{color:#495a76}
.cards>.difference.increase{background:#fff3eb;border-color:#efd7c7;border-top-color:#b8612f}
.cards>.difference.increase strong,.cards>.difference.increase span,.cards>.difference.increase p{color:#935120}
.analysis-button{color:#0f489d;background:#e6f0ff;border-color:#cbdfff}.analysis-button:hover{background:#d8e9ff}
.language-toggle{background:#0f489d}.language-toggle:hover{background:#0b397d}.language-toggle-thumb{color:#6646db}
#analysis-dialog{background:#f8f9fa;border-color:#d0d7f5}.analysis-detail,.analysis-card{border-color:#dee2e6}
.old-fill{background:#0d6efd!important}.new-fill{background:#6646db!important}
.compare-status:not(:empty){background:#eef3ff;border-color:#d0d7f5;color:#495a76}

/* Compact two-column controls: usage and billing left, fuel settings right. */
.intro{max-width:none}.intro>p:last-child{max-width:none;font-size:14px;line-height:1.65}
@media(min-width:1100px){.intro>p:last-child{white-space:nowrap}}
.inputs{padding:22px}.input-heading{margin-bottom:18px}
.compact-input-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
.consumption-column{min-width:0}
.compact-input-grid .usage-controls{grid-template-columns:1fr;padding:16px;gap:10px}
.compact-input-grid .usage-range{padding-top:0;width:100%}
.compact-input-grid .presets{gap:8px}.compact-input-grid .presets button{flex:1;padding:7px 10px}
.compact-input-grid .unit-input input{font-size:32px;padding:7px 12px}
.compact-input-grid .billing-settings{border:0;padding:0;margin-top:18px}
.compact-input-grid .adjust{border-left:1px solid #e4ebf2;padding-left:26px}
.compact-input-grid .tax-checkbox{margin-top:12px;padding:10px}
.compact-input-grid .cycle-note{margin-bottom:10px}
.input-actions{margin-top:18px;padding-top:16px;gap:12px}
.language-toggle{width:68.31px;height:28.4625px}
.language-toggle::after{content:"";position:absolute;inset:-11px 0;border-radius:999px}
.language-toggle-thumb{left:2.84625px;top:2.84625px;width:22.77px;height:22.77px}
.language-toggle-label{inset:0 2.84625px 0 27.51375px;font-size:11.385px}
.language-toggle.is-ms .language-toggle-thumb{transform:translateX(39.8475px)}
.language-toggle.is-ms .language-toggle-label{inset:0 27.51375px 0 2.84625px}
.language-toggle-thumb svg{width:13.2825px;height:13.2825px}
@media(max-width:760px){.compact-input-grid{grid-template-columns:1fr;gap:20px}.compact-input-grid .adjust{border-left:0;border-top:1px solid #e4ebf2;padding:18px 0 0}.inputs{padding:18px}.intro>p:last-child{white-space:normal}.input-actions .calculate{width:100%}}

/* Separate block-rate and component summaries. */
.summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.summary-card{min-width:0;padding:18px;border:1px solid #dbe5f1;border-radius:14px;background:#fff;overflow:hidden}
.summary-card h3{margin:0 0 16px;font-size:16px;line-height:1.4;color:#0f489d}
.summary-old{border-top:3px solid #0d6efd}.summary-new{border-top:3px solid #6646db}.summary-new h3{color:#6646db}
.breakdown .summary-card table{min-width:380px;font-size:12px}
.summary-card th{font-size:10px;padding:10px 0;vertical-align:bottom}
.summary-card td{vertical-align:top}.breakdown .summary-card td{padding-top:12px;padding-bottom:12px}
.summary-card th:first-child,.summary-card td:first-child{width:40%;white-space:normal;line-height:1.5}
.summary-card th:not(:first-child),.summary-card td:not(:first-child){padding-left:9px}
.summary-card tbody tr.credit td{color:#237147}
.summary-card tfoot{border-top:2px solid #cbd9e9}.summary-card tr.total td{font-size:15px;padding-top:16px}
.summary-dot{display:inline-block;width:7px;height:7px;border-radius:3px;margin-right:7px;background:#94a3b8;vertical-align:middle}
.dot-energy{background:#0d6efd}.dot-fuel{background:#d87732}.dot-capacity{background:#2c9fac}.dot-network{background:#6646db}.dot-incentive{background:#29865a}
@media(max-width:900px){.summary-grid{grid-template-columns:1fr}.breakdown .summary-card table{min-width:350px}}
@media(max-width:420px){.summary-card{padding:12px}.breakdown .summary-card table{min-width:330px}}

/* Unnumbered section titles and signed new-minus-old difference. */
.result-top>span,.tariff-type{margin-left:0}
.cards>.difference>div{gap:10px}
.cards>.difference #saving-title{align-self:flex-start;padding:5px 9px;background:#e2e8fb;border-radius:999px;font-weight:750}
.cards>.difference #saving-context{margin:0;max-width:none;font-size:14px;line-height:1.5;font-weight:650;color:#395078}
.cards>.difference.increase #saving-context{color:#935120}
@media(max-width:760px){.result-top>span,.tariff-type{margin-left:0}.breakdown .analysis-button{margin-left:auto}}
@media(max-width:420px){.breakdown .analysis-button{margin-left:0}}

/* Shared site navbar/footer reused from the main tariff page. */
body{padding-top:92px}
@media(max-width:575px){body{padding-top:80px}}
.navbar-custom{background:linear-gradient(to bottom,#6646db,#2a97fb);padding:.8rem 1rem;box-shadow:none;border:none}
.navbar-custom .navbar-brand{color:#fff}
footer a{text-decoration:none}
/* Match the main site footer base size (--bs-body-font-size:0.9rem there) */
footer.bg-dark{font-size:.9rem}
/* Reuse the main-site navbar language switch; hide this page's own toggle */
.language-switch{display:none}
/* Hero-banner placed inside main: fit content width, keep other layout intact */
.hero-banner{padding:0;margin:0 0 30px;background:transparent}
.hero-banner>.container{max-width:none;width:100%;padding:0}
.switch{position:relative;display:inline-block;width:80px;height:34px}
.switch input{display:none}
.slider{position:absolute;cursor:pointer;inset:0;background:#0f489d;transition:.4s;border-radius:34px;font-size:14px}
.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background:#fff url('../images/Handle shape.svg') center/60% no-repeat;transition:.4s;border-radius:50%}
input:checked + .slider{background:#6646db}
input:checked + .slider:before{transform:translateX(48px)}
.slider:after{content:'EN';color:#fff;position:absolute;transform:translate(-50%,-50%);top:50%;right:10px;font-size:10px;font-weight:normal;font-family:Verdana,sans-serif}
input:checked + .slider:after{content:'BM';right:auto;left:24px}

/* Negative new-minus-old difference: lower bill under the new tariff. */
.cards>.difference.decrease{background:linear-gradient(135deg,#effbea,#dcf3df);border-color:#b8ddbd;border-top-color:#2e8540}
.cards>.difference.decrease strong,.cards>.difference.decrease span,.cards>.difference.decrease p,.cards>.difference.decrease #saving-context{color:#236b36}
.cards>.difference.decrease #saving-title{background:#ceeacf}
.calculated-at{font-size:13px;font-style:italic;color:var(--muted);margin:0 0 14px}
.tax-checkbox:has(input:disabled){opacity:.5}