/* Mythiq.net — Simracing Race Fuel Calculator styles.
   Drives the calculator form in fuelcalc.php (bound by assets/js/fuel-calc.js). */

/* --- Page hero + calculator share one background section, as on live --- */
.fuelcalc-section {
    position: relative;
    padding: 160px 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Live overlay: #202125 at 44% fading to solid at the bottom. */
.fuelcalc-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(32, 33, 37, 0.44) 0%, #202125 100%);
    z-index: 1;
}

.fuelcalc-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.fuelcalc-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-left: 10px;
    margin-bottom: 65px;
}

.fuelcalc-logo {
    width: 75px;
    height: auto;
    flex-shrink: 0;
}

.fuelcalc-head-text {
    margin-top: 17px;
}

.fuelcalc-head h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 37.5px;
    color: #ffffff;
}

.fuelcalc-subtitle {
    font-size: 19px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.52);
}

/* --- Strategy / supported games (two columns over a photo backdrop) --- */
.srfc-strategy {
    position: relative;
    /* No gap: live declares margin-top:0 here. The 280px offset visible on the
       live page is the plus_row_scroll parallax transform, not layout. */
    margin-top: 0;
    padding: 130px 0;
    background-color: #d05543;
    background-image: url('../img/uploads/2025/02/u3343529945_racing_circuit_spa-francorchamps_with_car_from_th_a9086cd5-364e-46f6-b935-37c637da476e_3-2.png');
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.srfc-strategy::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(270deg, rgba(32, 33, 37, 0.33) 0%, #181819 100%);
    opacity: 0.75;
    z-index: 1;
}

.srfc-strategy-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
}

.srfc-strategy-right {
    padding-left: 10px;
}

.srfc-eyebrow {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 39px;
    line-height: 39px;
    color: var(--mythiq-blue);
}

.srfc-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 59px;
    line-height: 59px;
    color: var(--text-white);
    margin-top: 10px;
}

.srfc-title-sm {
    font-size: 39px;
    line-height: 39px;
    margin-top: 12px;
}

.srfc-text {
    font-size: 19px;
    line-height: 28px;
    color: var(--text-white);
    margin-top: 10px;
}

.srfc-strategy-right .srfc-text + .srfc-text {
    margin-top: 10px;
}

/* --- Section 3: supported games --- */
.srfc-games {
    padding: 100px 0 130px;
}

.srfc-games-head {
    border-left: 3px solid var(--mythiq-blue);
    padding-left: 10px;
    margin-bottom: 25px;
}

.srfc-games-sub {
    font-size: 19px;
    line-height: 28px;
    color: var(--text-muted);
    margin-top: 5px;
}

.srfc-games-intro {
    max-width: 1160px;
    margin-top: 0;
}

/* Layout */
.calculator-container {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    font-family: system-ui, -apple-system, sans-serif;
    
}

.grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    
}

.results-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: transparent;
}

/* Cards */
.card {
    border-radius: var(--radius-sm);
}

/* The inputs column is a plain transparent card on the live site — only the
   results column gets the glass panel treatment. */
.grid-layout > .card {
    background: transparent;
    border: none;
    padding: 0;
}

.results {
    background: rgba(17, 17, 17, 0.4);
    border: 1px solid rgba(77,77,77,0.2);
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px) ;
    border-bottom: solid 5px rgba(255,255,255,0.1);
    transform: translateZ(0);  /* Přidejte tento řádek */
    isolation: isolate;       /* Přidejte tento řádek */
}

/* Section Titles */
.section-title {
    font-size: 1.25rem;
    font-weight: 500;
    padding: 16px 24px;
    color: white;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid var(--mythiq-blue);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin: 0;
}

.content-wrapper {
    padding: 24px;
}

/* Main Results */
.main-result {
    margin-bottom: 40px;
}

.main-result-title {
    color: var(--mythiq-blue);
    font-size: 17px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.main-result-value {
    font-size: 18px;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1;
}

.main-result-subtitle {
    color: #7A7A7A;
    font-size: 15px;
}

.separator {
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 24px 0;
}

/* Secondary Results */
.secondary-results {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: start;
}

.vertical-separator {
    width: 1px;
    height: 100%;
    background: rgba(77,77,77,0.5);
}

.secondary-result-title {
    color: #7A7A7A;
    font-size: 15px;
    margin-bottom: 8px;
}

.secondary-result-value {
    font-size: 18px;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1;
}

/* Strategy Section */
.strategy-detail {
    margin-bottom: 16px;
}

.strategy-label {
    color: var(--mythiq-blue);
    font-size: 17px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.strategy-value {
   font-size: 18px;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1;
}

/* Pit Stops */
.pit-stops-divider {
    color: #7A7A7A;  /* Šedý text */
    font-size: 15px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 16px;  /* Mezera mezi textem a čárou */
    width: 100%;
}

.pit-stops-divider::after {
    content: '';
    flex-grow: 1;  /* Čára vyplní zbývající prostor */
    height: 1px;
    background: rgba(77,77,77,0.5);
}

.pit-stop {
    background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.05) 100%);
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.05) 100%);
background: linear-gradient(230deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.05) 100%);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-top: 16px;
     border: 1px solid rgba(77,77,77,0.2);
}



.pit-stop-title {
    background: rgba(255,255,255,0.1);
    width: fit-content;
block-size: fit-content;
    padding: 5px 18px 5px 18px;
    border-radius: var(--radius-lg);
}

.pit-stop-title {
    color: white;
    font-size: 0.875rem;
    margin-bottom: 12px;
}

.pit-stop-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
}

.pit-stop-detail {
    color: #7A7A7A;
    font-size: 15px;
}

.pit-stop-value {
    color: white;
    font-size: 1rem;
    margin-top: 4px;
}

.remaining-laps {
    color: #7A7A7A;
    font-size: 15px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(77,77,77,0.5);
}

/* Input Controls */
.input-group {
    position: relative;
    margin-bottom: 20px;
        -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.input-group input {
    width: 100%;
    height: 58px;
    padding: 19px 19px 0px 19px;
    border: 1px solid rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* Number spinner. The UA draws it in its own colour, and because it lives in the
   content box the 19px label padding shoves it to the bottom of the field. Hide
   the UA artwork with opacity (the control itself, and so its click behaviour,
   is left completely alone) and paint our own blue chevrons on the field in the
   same spot, sized and pulled up so the box centres on the 58px field. */
.input-group input[type="number"]::-webkit-inner-spin-button,
.input-group input[type="number"]::-webkit-outer-spin-button {
    width: 18px;
    height: 26px;
    margin: -10.5px 0 0 6px;
    opacity: 0;
    cursor: pointer;
}

/* Painted on the field itself, not on hover: the UA only reveals its spin button
   while the pointer is over the input, and the chevrons should always be there.
   Position stays put across states — `transition: all` would otherwise slide the
   image in from the corner every time a state rule reintroduced it. */
.input-group input[type="number"] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="26" fill="none" stroke="%23238FCC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 11 L9 7 L13 11"/><path d="M5 15 L9 19 L13 15"/></svg>');
    background-repeat: no-repeat;
    background-position: right 19px center;
}

.input-group input[type="number"]:focus {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="26" fill="none" stroke="%2300A2ED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 11 L9 7 L13 11"/><path d="M5 15 L9 19 L13 15"/></svg>');
}

.input-group input:focus {
    border-bottom-color: var(--mythiq-hover-blue);
    outline: none;
}

.floating-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transition: all 0.3s ease;
    background: transparent;
        font-weight: normal;
}

.input-group input:focus + .floating-label,
.input-group input:not(:placeholder-shown) + .floating-label {
    top: 5px;
    font-size: 12px;
    padding: 0 6px;
    color: var(--mythiq-hover-blue);
    transform: translateY(0);
    border-radius: var(--radius-sm);
    font-weight: normal;
}

.input-group input:not(:placeholder-shown):not(:focus) + .floating-label {
    top: 5px;
    font-size: 12px;
    padding: 0 6px;
    color: var(--mythiq-blue);
    transform: translateY(0);
    border-radius: var(--radius-sm);
    font-weight: normal;
}

/* Special styling for the lap time inputs */
.lap-time-container {
    display: grid;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.lap-time-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    
}

.lap-time-input-group {
    position: relative;
     height: 58px !important; /* Přidáno !important pro přepsání WP stylů */
}

.input-hint {
    color: #7A7A7A;
    font-size: 15px;
    margin-top: -45px;
}


/* Button Group */
.button-group {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background-color: rgba(0,0,0,0.2);
        -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.button-group button {
    flex: 1;
    padding: 20px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    background-color: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.button-group button:hover {
    color: #fff;
}

.button-group button.active {
    background-color: var(--mythiq-blue);
    border-color: var(--mythiq-blue);
    color: #fff;
    font-size: 18px;
}

/* Switch */
.switch-container {
    display: flex;
    align-items: space-between;
    gap: 30px;
          -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}

.switch-container label {
    font-size: 20px;
    color: rgba(255,255,255,0.50);
    font-weight: normal;
}

.switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.2);
    transition: .4s;
    border-radius: var(--radius-pill);
    border-bottom: solid 1px rgba(255,255,255,0.1);
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.slider:hover {
border-bottom: solid 1px rgba(255,255,255,0.2);
        background-color: rgba(0,0,0,0.4);
}


input:checked + .slider {
    background-color: var(--mythiq-blue);
    -webkit-box-shadow:0px 0px 50px 0px color-mix(in srgb, var(--mythiq-hover-blue) 50%, transparent);
-moz-box-shadow: 0px 0px 50px 0px color-mix(in srgb, var(--mythiq-hover-blue) 50%, transparent);
box-shadow: 0px 0px 50px 0px color-mix(in srgb, var(--mythiq-hover-blue) 50%, transparent);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Pit Strategy Inputs */
#enablePitStrategy {
    display: none;
}

#pitStrategyInputs {
    margin-top: 2em;
}

/* Responsive */
@media (max-width: 768px) {
    .grid-layout {
        grid-template-columns: 1fr;
    }
}

.card > label {
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    font-weight: normal;
    
}

#strategyRecommendation div {
    font-size: 15px;
}




/* =========================================================================
   ADDITIONS — the account-connected rebuild.
   Everything above is the original SRFC design and is unchanged. What follows
   only covers controls the original page did not have (the race-type toggle as
   real radios, the stint table, the fuel chart, the garage) and is written to
   sit inside the same visual language: the same blue, the same glass panel,
   the same 4px radii and 58px fields.
   ========================================================================= */

/* --- Race type: radios wearing the original .button-group's clothes -------
   The original was two <button>s driven by inline onclick. Radios submit on
   their own, so the control keeps working without scripting and cannot fall
   out of step with the value the server reads — but it must look identical. */
.button-group label {
    flex: 1;
    position: relative;
    margin: 0;
    padding: 20px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    background-color: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.button-group label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.button-group label:hover {
    color: #fff;
}

.button-group label.active {
    background-color: var(--mythiq-blue);
    border-color: var(--mythiq-blue);
    color: #fff;
}

.button-group label:focus-within {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: 2px;
}

/* --- Field help + validation --------------------------------------------- */
.fuelcalc-hint {
    color: #7A7A7A;
    font-size: 13px;
    margin: -12px 0 20px;
    line-height: 19px;
}

.fuelcalc-err {
    color: #f87171;
    font-size: 14px;
    margin: -12px 0 20px;
}

.fuelcalc-alert {
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    border: 1px solid rgba(77, 77, 77, 0.2);
    background: rgba(0, 0, 0, 0.25);
    color: #cacaca;
}

.fuelcalc-alert-error {
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(248, 113, 113, 0.12);
}

.fuelcalc-alert-ok {
    border-color: color-mix(in srgb, var(--mythiq-blue) 32%, transparent);
    background: color-mix(in srgb, var(--mythiq-blue) 12%, transparent);
}

.fuelcalc-alert a {
    color: var(--mythiq-hover-blue);
}

/* The original had no submit button because the inline handlers recalculated
   on every keystroke. Without scripting this is how you get your numbers; the
   script hides it once the results follow your typing. Geometry and colors
   come from the shared .btn system (ui.css); only the JS hooks live here. */
.fuelcalc-submit {
    margin-bottom: 24px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fuelcalc-submit.is-enhanced {
    display: none;
}

/* The switch reveals the pit inputs, with no JavaScript and no inline style.
   The original page did this by having its inline onchange handler write
   element.style.display — which is exactly why it could not be done in CSS
   afterwards: an inline style outranks every stylesheet rule.
   Driving it from the checkbox's own :checked state instead means the panel is
   correct on page load (the server renders the checkbox checked or not) AND
   opens the instant you click it. */
#pitStrategyInputs {
    display: none;
}

.calculator-container:has(#enablePitStrategy:checked) #pitStrategyInputs {
    display: block;
}

/* --- Members-only lock over the strategy card ---------------------------- */
.fuelcalc-lock {
    padding: 24px;
    text-align: center;
}

.fuelcalc-lock p {
    color: #7A7A7A;
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 18px;
}

/* Geometry and colors come from the shared .btn system (ui.css); this page
   keeps only its layout margins and the uppercase treatment. */
.fuelcalc-lock-btn {
    margin: 0 5px 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Fuel-against-lap chart ----------------------------------------------
   One series, so no legend — the caption names it. The geometry is computed
   server-side (fuel_chart()); nothing here or in the script recalculates it. */
.fuelcalc-chart {
    margin: 0 0 24px;
}

.fuelcalc-chart-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    color: #7A7A7A;
    font-size: 15px;
}

.fuelcalc-chart-peak {
    color: #fff;
}

.fuelcalc-chart-plot {
    position: relative;
    height: 150px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(77, 77, 77, 0.2);
    background: linear-gradient(230deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.05) 100%);
    overflow: hidden;
}

.fuelcalc-chart-plot svg {
    display: block;
    width: 100%;
    height: 100%;
}

.fuelcalc-chart-grid {
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.fuelcalc-chart-line {
    fill: none;
    stroke: var(--mythiq-hover-blue);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.fuelcalc-chart-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* An HTML pin, not an SVG circle: the plot is drawn with
   preserveAspectRatio="none", which would stretch a circle into an ellipse. */
.fuelcalc-chart-stop {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.28);
}

.fuelcalc-chart-stop::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: #fff;
}

.fuelcalc-chart-axis {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 0;
    color: #7A7A7A;
    font-size: 13px;
}

/* --- Stint / comparison tables ------------------------------------------- */
.fuelcalc-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(77, 77, 77, 0.2);
    margin-bottom: 16px;
}

.fuelcalc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    white-space: nowrap;
}

.fuelcalc-table th,
.fuelcalc-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(77, 77, 77, 0.35);
}

.fuelcalc-table thead th {
    color: #7A7A7A;
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.3);
}

.fuelcalc-table tbody th {
    color: #fff;
    font-weight: normal;
}

.fuelcalc-table tbody td {
    color: #cacaca;
}

.fuelcalc-table tbody tr:last-child th,
.fuelcalc-table tbody tr:last-child td {
    border-bottom: 0;
}

.fuelcalc-table-compare tr.is-best th,
.fuelcalc-table-compare tr.is-best td {
    background: color-mix(in srgb, var(--mythiq-blue) 12%, transparent);
}

.fuelcalc-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
}

.fuelcalc-note {
    color: #7A7A7A;
    font-size: 15px;
    line-height: 23px;
    margin-top: 12px;
}

.fuelcalc-note strong {
    color: #fff;
    font-weight: normal;
}

/* --- Save to garage ------------------------------------------------------ */
.fuelcalc-save-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 16px;
}

.fuelcalc-save-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.fuelcalc-select {
    width: 100%;
    height: 58px;
    padding: 0 19px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 20px;
    font-family: inherit;
}

.fuelcalc-select:focus {
    border-bottom-color: var(--mythiq-hover-blue);
    outline: none;
}

.fuelcalc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Settings icon beside the title -------------------------------------- */
/* Shape and colors come from .btn-outline + .btn-icon (ui.css); this page
   rounds it to a circle and keeps the little rotate-on-hover flourish. */
.fuelcalc-settings-btn {
    width: 38px;
    height: 38px;
    margin-left: 12px;
    vertical-align: middle;
    border-radius: 50%;
}

.fuelcalc-settings-btn:hover {
    transform: rotate(45deg);
}

/* --- Save dialog --------------------------------------------------------
   A :target dialog. The whole tool works without JavaScript, so the way to
   save has to as well — and an anchor needs no inline handler, which this
   page's CSP forbids. Hidden until the URL fragment matches; the backdrop is
   itself a link back to "#", so clicking outside closes it. */
.fuelcalc-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.fuelcalc-modal:target {
    display: flex;
}

.fuelcalc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.fuelcalc-modal-card {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    overflow-y: auto;
}

.fuelcalc-modal-card .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.fuelcalc-modal-close {
    color: rgba(255, 255, 255, 0.6);
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.fuelcalc-modal-close:hover {
    color: #fff;
}

/* --- The button that opens it, in the results panel ---------------------- */
/* The row lives inside .content-wrapper's own 24px padding, so it must carry
   no side padding of its own — that double-indented it next to every other
   line in the card once results were showing. */
.fuelcalc-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

/* --- Saved setups, inline on the calculator page ------------------------- */
.fuelcalc-setup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(77, 77, 77, 0.2);
    border-radius: var(--radius-md);
    background: linear-gradient(230deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.fuelcalc-setup:last-child {
    margin-bottom: 0;
}

.fuelcalc-setup.is-current {
    border-color: color-mix(in srgb, var(--mythiq-blue) 55%, transparent);
}

.fuelcalc-setup-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 260px;
    min-width: 0;
}

.fuelcalc-setup-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
}

.fuelcalc-setup-text {
    min-width: 0;
}

.fuelcalc-setup-name {
    color: #fff;
    font-size: 1rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.fuelcalc-setup-meta {
    color: #7A7A7A;
    font-size: 15px;
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

.fuelcalc-setup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* One button in three element types: <a> for Load, <button> for Pin and
   Delete, <summary> for Rename. They MUST be sized identically, which means
   declaring line-height rather than letting each inherit its own — the body
   line-height (28px) applies to the anchor, while a <button> takes the user
   agent's `normal` (~17px), and the buttons came out visibly shorter.
   inline-flex + a fixed line-height makes all three the same height. */
   inline-flex + a fixed line-height makes all three the same height. */
.fuelcalc-mini {
    vertical-align: middle;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* The save button is only meaningful once there are numbers to save. The
   script toggles this as you type, because typing never reloads the page. */
.fuelcalc-mini.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.fuelcalc-inline-form {
    display: inline;
    margin: 0;
}

/* <details> as the rename disclosure - it opens without scripting. */
.fuelcalc-rename {
    display: inline-block;
}

.fuelcalc-rename summary {
    list-style: none;
    display: inline-flex;
}

.fuelcalc-rename summary::-webkit-details-marker {
    display: none;
}

.fuelcalc-rename-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-basis: 100%;
}

.fuelcalc-rename-form input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
}

/* Account sidebar: the Race garage row is a link, not a tab button. */
.account-nav-item[href] {
    text-decoration: none;
}

@media (max-width: 768px) {
    .fuelcalc-setup {
        flex-direction: column;
        align-items: flex-start;
    }
}