/* Fuel calculators share form and result tokens with the TCO calculator. */
#fuel-calculator { scroll-margin-top: 100px; }
.fuel-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--aw-border); margin-bottom: 32px; }
.fuel-tabs .tab-btn { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 12px; border-bottom: 2px solid transparent; background: transparent; color: var(--aw-muted); font-size: 15px; font-weight: 600; cursor: pointer; }
.fuel-tabs .tab-btn > span { font: 500 10px ui-monospace, monospace; color: #78877e; }
.fuel-tabs .tab-btn[aria-selected="true"] { border-bottom-color: #059669; background: #f0f6f2; color: #047852; }
.fuel-tabs .tab-btn:hover { background: #f6f8f5; }
.fuel-panel-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.fuel-form { padding: 32px; }
.fuel-form .kal-fields { gap: 28px 24px; }
.fuel-form .kal-field:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fuel-form .kal-input-wrap { padding-top: 12px; }
.fuel-empty { padding: 32px; border: 1px solid #cdded3; border-radius: 12px; background: #f3f8f5; }
.fuel-empty-symbol { display: block; margin-bottom: 28px; color: #047852; font: 500 30px/1 ui-monospace, monospace; letter-spacing: -1px; }
.aw-fuel-calculator .fuel-empty h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.5px; }
.aw-fuel-calculator .fuel-empty p { margin-top: 16px; font-size: 13px; }
.fuel-formula { margin-top: 28px; padding-top: 20px; border-top: 1px solid #d3e2d9; }
.fuel-formula span { display: block; font-size: 10px; color: var(--aw-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.fuel-formula strong { font-size: 13px; color: #385442; font-weight: 500; }
.fuel-result-column:has(.fuel-result:not(.hidden)) .fuel-empty { display: none; }
.fuel-result { border: 1px solid #cdded3; border-radius: 12px; overflow: hidden; background: white; scroll-margin-top: 112px; }
.aw-fuel-calculator .fuel-main-value { font-size: clamp(28px, 3vw, 42px); font-weight: 600; letter-spacing: -1px; line-height: 1.2; color: white; margin-top: 16px; overflow-wrap: anywhere; }
.aw-fuel-calculator .fuel-detail { margin-top: 12px; color: #bed3c6; font-size: 12px; }
.fuel-metrics { display: grid; gap: 16px; }
.fuel-metrics > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--aw-border); }
.fuel-metrics > div:last-child { border: 0; padding-bottom: 0; }
.fuel-metrics span { font-size: 12px; color: var(--aw-muted); }
.fuel-metrics strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fuel-tank-note { padding: 16px; border: 1px solid #c7dfd0; border-radius: 6px; background: #edf6f0; color: #355b44; font-size: 14px; line-height: 1.7; }
.fuel-tank-missing { border-color: #e8d3ac; background: #fff8ed; color: #80591c; }
.aw-fuel-calculator .kal-education-item { min-width: 0; }
.aw-fuel-calculator .kal-education-body .aw-button { white-space: normal; text-align: center; }
.fuel-equation { margin-block: 20px; padding: 16px; border-left: 3px solid #059669; background: #f0f6f2; border-radius: 4px; }
.fuel-equation dt { font-size: 12px; font-weight: 600; color: #047852; }
.fuel-equation dd { margin-top: 6px; font: 500 13px/1.7 ui-monospace, monospace; }
.aw-fuel-calculator .aw-table-scroll { max-width: 100%; }
.aw-fuel-calculator .aw-table-scroll table { min-width: 380px; font-size: 13px; }
.aw-fuel-calculator .kal-education-body [style] { max-width: 100%; }
@media (max-width: 900px) { .fuel-panel-grid { grid-template-columns: 1fr; }.fuel-empty { padding: 24px; }.fuel-empty-symbol { margin-bottom: 20px; } }
@media (max-width: 550px) { .fuel-tabs { margin-bottom: 24px; }.fuel-tabs .tab-btn { padding: 16px 6px; font-size: 12px; gap: 0; }.fuel-tabs .tab-btn > span { display: none; }.fuel-form { padding: 22px; }.fuel-form .kal-fields { gap: 22px; }.aw-fuel-calculator .fuel-main-value { font-size: 32px; } }