/* ==========================================================
   ENDURANCE FUELING — page styles

   Colors/fonts come from css/style.css (loaded first on every
   page) — this file only adds Fueling-specific layout.
========================================================== */

.fueling-page{

    max-width:1500px;

    margin:auto;

    padding:
        40px
        24px
        80px;

}

/* ==========================================================
   HERO
========================================================== */

.page-title{

    margin-bottom:30px;

    position:relative;

    overflow:hidden;

}

.page-title::before{

    content:"";
    position:absolute;
    top:-45px;
    right:-25px;
    width:200px;
    height:200px;
    background-image:url('../icons/icon-512.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    opacity:.05;
    mix-blend-mode:screen;
    filter:saturate(.9) brightness(1.15);
    pointer-events:none;

}

.page-title h1{

    font-size:64px;

    font-weight:800;

    line-height:1;

    margin-bottom:8px;

}

.page-subtitle{

    color:var(--muted);

    font-size:18px;

    margin-bottom:14px;

}

.page-blurb{

    color:var(--muted);

    font-size:15px;

    line-height:1.7;

    max-width:780px;

}

/* ==========================================================
   TOOLBAR — mode toggle + marathon integration
========================================================== */

.fuel-toolbar{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:16px 24px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:20px 24px;

    margin-bottom:32px;

    box-shadow:var(--shadow);

}

.mode-toggle{

    display:inline-flex;

    background:var(--surface-light);

    border-radius:999px;

    padding:4px;

    gap:4px;

}

.mode-btn{

    border:none;

    background:transparent;

    color:var(--muted);

    font-weight:700;

    font-size:14px;

    padding:9px 20px;

    border-radius:999px;

    cursor:pointer;

    transition:.2s;

}

.mode-btn.active{

    background:var(--primary);

    color:var(--on-primary);

}

.mode-caption{

    color:var(--muted);

    font-size:14px;

    flex:1 1 260px;

}

.marathon-integration{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}

.marathon-workout-preview{

    color:var(--muted);

    font-size:14px;

}

.marathon-workout-preview strong{

    color:var(--text);

}

/* ==========================================================
   PANELS
========================================================== */

.fuel-panel{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:28px;

    margin-bottom:32px;

    box-shadow:var(--shadow);

}

.fuel-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:22px;

}

.fuel-panel-header h2{

    font-size:26px;

    font-weight:800;

}

.fuel-panel-tag{

    color:var(--muted);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-weight:700;

}

/* ==========================================================
   INPUT GRID / CARDS
========================================================== */

.fuel-input-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

    margin-bottom:22px;

}

.fuel-card{

    background:var(--surface-light);

    border:1px solid var(--border);
    border-top:3px solid var(--fuel-color, transparent);

    border-radius:16px;

    padding:20px;

    box-shadow:0 10px 26px rgba(0,0,0,.22);

}

.fuel-card-wide{

    grid-column:1 / -1;

}

.fuel-card h3{

    font-size:16px;

    font-weight:700;

    margin-bottom:14px;

    color:var(--text);

}

.fuel-field{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-bottom:14px;

    font-size:13px;

    color:var(--muted);

}

.fuel-field:last-child{

    margin-bottom:0;

}

.fuel-field-row{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));

    gap:14px;

}

.fuel-field input[type="number"],
.fuel-field input[type="text"],
.fuel-field select,
.fuel-field textarea{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:10px;

    padding:10px 12px;

    color:var(--text);

    font-size:14px;

    font-family:inherit;

    outline:none;

    transition:.2s;

}

.fuel-field textarea{

    resize:vertical;

}

.fuel-field input:focus,
.fuel-field select:focus,
.fuel-field textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(201,173,132,.20);

}

/* Checkboxes */

.fuel-checkbox-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));

    gap:10px;

    margin-bottom:14px;

}

.fuel-checkbox{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:var(--text);

    cursor:pointer;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:999px;

    padding:9px 14px;

    transition:.15s;

}

.fuel-checkbox:hover{

    border-color:var(--primary);

}

.fuel-checkbox input{

    accent-color:var(--primary);

    width:16px;

    height:16px;

}

.fuel-caffeine-toggle{

    max-width:280px;

}

/* ==========================================================
   BUTTONS
========================================================== */

.fuel-btn{

    border:none;

    border-radius:999px;

    padding:13px 24px;

    font-size:14px;

    font-weight:700;

    font-family:inherit;

    cursor:pointer;

    transition:.2s;

}

.fuel-btn.primary{

    background:
        linear-gradient(135deg,var(--primary),var(--primary-dark));

    color:var(--on-primary);

}

.fuel-btn.primary:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(201,173,132,.35);

}

.fuel-btn.secondary{

    background:var(--surface-light);

    color:var(--text);

    border:1px solid var(--border);

}

.fuel-btn.secondary:hover{

    background:var(--primary);

    color:var(--on-primary);

    transform:translateY(-2px);

}

.fuel-btn.danger{

    background:rgba(239,68,68,.12);

    color:var(--red);

    border:1px solid rgba(239,68,68,.35);

}

.fuel-btn.danger:hover{

    background:var(--red);

    color:white;

    transform:translateY(-2px);

}

.fuel-btn.small{

    padding:9px 16px;

    font-size:13px;

}

.fuel-btn:active{

    transform:scale(.97);

}

.fuel-calc-btn{

    width:100%;

}

.fuel-form-actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:16px;

}

/* ==========================================================
   SECTION 2 — TARGETS
========================================================== */

.fuel-target-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.fuel-target-card{

    background:var(--surface-light);

    border:1px solid var(--border);
    border-top:3px solid var(--fuel-color, transparent);

    border-radius:16px;

    padding:20px;

    box-shadow:0 10px 26px rgba(0,0,0,.22);

}

.fuel-target-label{

    display:block;

    color:var(--muted);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.06em;

    font-weight:700;

    margin-bottom:10px;

}

.fuel-target-value{

    display:flex;

    align-items:baseline;

    gap:8px;

    margin-bottom:10px;

}

.fuel-target-value input{

    width:110px;

    background:transparent;

    border:none;

    border-bottom:2px solid var(--border);

    color:var(--fuel-color, var(--text));

    font-size:38px;

    font-weight:800;

    padding:0 0 4px;

    font-family:inherit;

    outline:none;

    transition:.2s;

}

.fuel-target-value input:focus{

    border-bottom-color:var(--fuel-color, var(--primary));

}

.fuel-target-value small{

    color:var(--muted);

    font-size:14px;

}

.fuel-target-sub{

    color:var(--muted);

    font-size:13px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:6px;

}

.fuel-target-sub span{

    color:var(--text);

    font-weight:700;

}

.fuel-target-sub input{

    width:46px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:6px;

    color:var(--text);

    padding:2px 4px;

    font-size:13px;

    text-align:center;

    font-family:inherit;

}

.fuel-note{

    margin-top:18px;

    color:var(--muted);

    font-size:13px;

    line-height:1.6;

}

/* ==========================================================
   SECTION 3 — TIMELINE
========================================================== */

.fuel-timeline{

    display:flex;

    flex-direction:column;

    gap:0;

}

.fuel-timeline-item{

    display:grid;

    grid-template-columns:70px 24px 1fr;

    align-items:start;

    gap:0;

}

.fuel-timeline-time{

    color:var(--text);

    font-weight:700;

    font-size:14px;

    padding-top:10px;

}

.fuel-timeline-rail{

    display:flex;

    flex-direction:column;

    align-items:center;

    height:100%;

}

.fuel-timeline-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--primary);

    margin-top:12px;

    flex-shrink:0;

}

.fuel-timeline-line{

    width:2px;

    flex:1;

    background:var(--border);

    margin-top:2px;

}

.fuel-timeline-item:last-child .fuel-timeline-line{

    display:none;

}

.fuel-timeline-content{

    padding:6px 0 20px 16px;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.fuel-tag{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    background:var(--surface-light);

    border:1px solid var(--border);

    color:var(--text);

}

.fuel-tag.carb{

    color:var(--yellow);

    border-color:rgba(250,204,21,.3);

}

.fuel-tag.fluid{

    color:var(--primary);

    border-color:rgba(201,173,132,.3);

}

.fuel-tag.sodium{

    color:#C4B5FD;

    border-color:rgba(196,181,253,.3);

}

.fuel-tag.caffeine{

    color:var(--green);

    border-color:rgba(34,197,94,.3);

}

.fuel-tag.start{

    color:var(--muted);

}

/* ==========================================================
   SECTION 4 — DIY RESULTS
========================================================== */

.fuel-diy-results{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:24px;

    margin-top:20px;

    padding:20px;

    background:var(--surface-light);

    border:1px solid var(--border);

    border-radius:16px;

}

.fuel-diy-stat{

    display:flex;

    flex-direction:column;

}

.fuel-diy-stat span{

    font-size:26px;

    font-weight:800;

}

.fuel-diy-stat small{

    color:var(--muted);

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.fuel-saved-list{

    margin-top:18px;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.fuel-saved-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:var(--surface-light);

    border:1px solid var(--border);

    border-radius:12px;

    padding:12px 16px;

    font-size:14px;

}

.fuel-saved-item-meta{

    color:var(--muted);

    font-size:13px;

}

/* ==========================================================
   SECTION 5 — LIBRARY
========================================================== */

.fuel-library-tabs{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:20px;

}

.fuel-tab{

    border:1px solid var(--border);

    background:var(--surface-light);

    color:var(--muted);

    font-weight:700;

    font-size:13px;

    padding:8px 16px;

    border-radius:999px;

    cursor:pointer;

    transition:.2s;

}

.fuel-tab.active{

    background:var(--primary);

    color:var(--on-primary);

    border-color:var(--primary);

}

.fuel-library-form{

    margin-bottom:22px;

}

.fuel-lib-caffeine{

    align-self:flex-end;

}

.fuel-library-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:16px;

}

.fuel-lib-item{

    background:var(--surface-light);

    border:1px solid var(--border);

    border-radius:14px;

    padding:16px;

}

.fuel-lib-item-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:8px;

}

.fuel-lib-item-top h4{

    font-size:15px;

    font-weight:700;

}

.fuel-lib-category{

    color:var(--muted);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.fuel-lib-macros{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:10px 0;

    font-size:12px;

    color:var(--muted);

}

.fuel-lib-macros b{

    color:var(--text);

}

.fuel-lib-actions{

    display:flex;

    gap:8px;

}

.fuel-lib-actions button{

    flex:1;

    padding:7px;

    font-size:12px;

    border-radius:8px;

    border:1px solid var(--border);

    background:var(--surface);

    color:var(--text);

    cursor:pointer;

}

.fuel-lib-actions button:hover{

    background:var(--primary);

    color:var(--on-primary);

}

.fuel-lib-actions button.add-to-plan{

    background:var(--primary);

    color:var(--on-primary);

    border-color:var(--primary);

}

/* ==========================================================
   SECTION 6 — BUILD A PLAN
========================================================== */

.fuel-plan-name{

    max-width:420px;

    margin-bottom:20px;

}

.fuel-plan-summary{

    background:var(--surface-light);

    border:1px solid var(--border);

    border-radius:16px;

    padding:20px;

}

.fuel-empty-state{

    color:var(--muted);

    font-size:14px;

}

.fuel-plan-row{

    display:flex;

    justify-content:space-between;

    padding:10px 0;

    border-bottom:1px solid var(--border);

    font-size:14px;

}

.fuel-plan-row:last-child{

    border-bottom:none;

}

.fuel-plan-row span:first-child{

    color:var(--muted);

}

.fuel-plan-row span:last-child{

    font-weight:700;

}

.fuel-plan-items-list{

    margin-top:14px;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

/* ==========================================================
   SAVED PLANS
========================================================== */

.fuel-saved-plans-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:16px;

}

.fuel-saved-plan-card{

    background:var(--surface-light);

    border:1px solid var(--border);

    border-radius:16px;

    padding:18px;

}

.fuel-saved-plan-card h4{

    font-size:16px;

    margin-bottom:6px;

}

.fuel-saved-plan-meta{

    color:var(--muted);

    font-size:13px;

    margin-bottom:12px;

}

.fuel-saved-plan-targets{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:14px;

    font-size:12px;

}

.fuel-saved-plan-targets span{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:8px;

    padding:4px 8px;

}

.fuel-saved-plan-actions{

    display:flex;

    gap:8px;

}

.fuel-saved-plan-actions button{

    flex:1;

    padding:8px;

    font-size:12px;

    border-radius:8px;

    border:1px solid var(--border);

    background:var(--surface);

    color:var(--text);

    cursor:pointer;

}

.fuel-saved-plan-actions button:hover{

    background:var(--primary);

    color:var(--on-primary);

}

.fuel-saved-plan-actions button.delete:hover{

    background:var(--red);

    border-color:var(--red);

}

/* ==========================================================
   DISCLAIMER
========================================================== */

.fuel-disclaimer{

    color:var(--muted);

    font-size:12px;

    line-height:1.6;

    text-align:center;

    max-width:720px;

    margin:20px auto 0;

}

/* ==========================================================
   RESPONSIVE / MOBILE
========================================================== */

@media(max-width:900px){

    .fuel-panel{

        padding:22px 18px;

    }

    .fuel-toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .marathon-integration{

        justify-content:space-between;

    }

}

@media(max-width:650px){

    .page-title h1{

        font-size:44px;

    }

    .fuel-input-grid,
    .fuel-target-grid,
    .fuel-library-grid,
    .fuel-saved-plans-grid{

        grid-template-columns:1fr;

    }

    .fuel-field-row{

        grid-template-columns:1fr;

    }

    .fuel-timeline-item{

        grid-template-columns:60px 20px 1fr;

    }

    .fuel-target-value input{

        font-size:32px;

        width:90px;

    }

    .fuel-form-actions{

        flex-direction:column;

    }

    .fuel-form-actions .fuel-btn{

        width:100%;

    }

    .fuel-diy-results{

        flex-direction:column;

        align-items:flex-start;

    }

}

/* ==========================================================
   SELECT MARATHON WORKOUT
========================================================== */

.week-select-row{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:20px;

}

.week-chip{

    border:1px solid var(--border);

    background:var(--surface-light);

    color:var(--muted);

    font-weight:700;

    font-size:13px;

    padding:8px 14px;

    border-radius:999px;

    cursor:pointer;

    transition:.2s;

}

.week-chip.current{

    border-color:var(--primary);

    color:var(--primary);

}

.week-chip.active{

    background:var(--primary);

    color:var(--on-primary);

    border-color:var(--primary);

}

.workout-day-list{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:18px;

}

.workout-day-row{

    display:grid;

    grid-template-columns:44px 1fr auto auto auto;

    align-items:center;

    gap:14px;

    background:var(--surface-light);

    border:1px solid var(--border);

    border-radius:12px;

    padding:12px 16px;

    cursor:pointer;

    transition:.2s;

    font-size:14px;

}

.workout-day-row:hover{

    border-color:var(--primary);

}

.workout-day-row.selected{

    border-color:var(--primary);

    box-shadow:0 0 0 2px rgba(201,173,132,.20);

}

.workout-day-row.has-plan{

    border-color:rgba(34,197,94,.35);

}

.workout-day-abbr{

    font-weight:800;

    color:var(--text);

}

.workout-day-session{

    color:var(--text);

}

.workout-day-miles,
.workout-day-pace{

    color:var(--muted);

    font-size:13px;

    white-space:nowrap;

}

.workout-day-check{

    color:var(--green);

    font-size:12px;

    font-weight:700;

    white-space:nowrap;

}

.workout-detail-card{

    background:var(--surface-light);

    border:1px solid var(--border);

    border-radius:16px;

    padding:20px;

}

.workout-detail-card h3{

    font-size:18px;

    margin-bottom:8px;

}

.workout-detail-line{

    color:var(--muted);

    font-size:14px;

    margin-bottom:14px;

}

.workout-detail-card .fuel-tag{

    margin-right:10px;

}

/* ==========================================================
   MARATHON CALENDAR
========================================================== */

.marathon-calendar-shell{
    overflow-x:auto;
    padding-bottom:4px;
}

.marathon-calendar-legend{
    display:flex;
    flex-wrap:wrap;
    gap:14px 22px;
    color:var(--muted);
    font-size:12px;
    margin-bottom:14px;
}

.marathon-calendar-legend span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.legend-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    display:inline-block;
    background:var(--primary);
}

.legend-fueling{ background:var(--green); }
.legend-today{ background:transparent; border:2px solid var(--primary); }

.marathon-calendar{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.fuel-week-tabs{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding-bottom:6px;
    margin-bottom:4px;
    scroll-behavior:smooth;
}

.fuel-week-tab{
    flex-shrink:0;
    min-width:34px;
    height:34px;
    padding:0 4px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface);
    color:var(--text-secondary);
    font-size:12.5px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    transition:.15s;
    position:relative;
}

.fuel-week-tab:hover{
    border-color:var(--primary);
    color:var(--text);
}

.fuel-week-tab.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#0f2019;
}

.fuel-week-tab.is-current::after{
    content:"";
    position:absolute;
    top:4px;
    right:4px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--green);
}

.fuel-week-tab.active.is-current::after{
    background:#0f2019;
}

.fuel-week-header{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:0 2px;
}

.fuel-week-header strong{
    font-size:14px;
}

.fuel-week-header span{
    color:var(--muted);
    font-size:12px;
}

.marathon-calendar-week-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:8px;
}

.workout-day-compact{
    font-family:var(--font-mono);
    font-size:13px;
    font-weight:700;
    color:var(--text);
}

.marathon-calendar-week{
    display:grid;
    grid-template-columns:190px repeat(7,minmax(125px,1fr));
    gap:8px;
    align-items:stretch;
}

.calendar-header-row{
    margin-bottom:2px;
}

.calendar-header-row > div{
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:0 8px;
}

.calendar-day-heading{
    text-align:center;
}

.calendar-week-label{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 13px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    min-width:0;
}

.current-week .calendar-week-label{
    border-color:var(--primary);
    box-shadow:0 0 0 1px rgba(201,173,132,.18);
}

.calendar-week-label strong{
    color:var(--text);
    font-size:13px;
}

.calendar-week-label span{
    color:var(--muted);
    font-size:11px;
    line-height:1.25;
}

.marathon-calendar-day{
    position:relative;
    width:100%;
    min-width:0;
    min-height:76px;
    border:1px solid var(--border);
    background:var(--surface-light);
    color:var(--text);
    border-radius:12px;
    padding:8px 6px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    overflow:hidden;
    text-align:left;
    cursor:pointer;
    transition:.2s;
}

.marathon-calendar-day.rest{
    opacity:.6;
}

.marathon-calendar-day:hover{
    border-color:var(--primary);
    transform:translateY(-1px);
}

.marathon-calendar-day.today{
    box-shadow:inset 0 0 0 1px var(--primary);
}

.marathon-calendar-day.selected{
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(201,173,132,.20);
}

.marathon-calendar-day.has-plan{
    border-color:rgba(34,197,94,.45);
}

.marathon-calendar-day .calendar-day-date,
.marathon-calendar-day .workout-day-abbr,
.marathon-calendar-day .workout-day-compact{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.marathon-calendar-day .calendar-day-date{
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}

.marathon-calendar-day .workout-day-abbr{
    color:var(--primary);
    font-size:11px;
}

.marathon-calendar-day .workout-day-compact{
    font-size:12px;
    font-weight:700;
    line-height:1.25;
}

.marathon-calendar-day .workout-day-check{
    margin-top:auto;
    font-size:10px;
}

.marathon-calendar-day .workout-day-check.empty{
    opacity:0;
}

/* ==========================================================
   FUELING COMPOSITION
========================================================== */

.fuel-plan-total{

    font-weight:800;

    border-top:1px solid var(--border);

    margin-top:6px;

    padding-top:14px !important;

}

.fuel-plan-target span:last-child{

    color:var(--muted);

}

.fuel-plan-target.on-target span:last-child{

    color:var(--green);

}

.fuel-plan-target.off-target span:last-child{

    color:var(--yellow);

}

/* ==========================================================
   TIMELINE — editable rows + actions
========================================================== */

.fuel-timeline-actions{

    display:flex;

    gap:10px;

}

.fuel-timeline-content{

    align-items:center;

}

.timeline-time-input{

    width:60px;

    background:transparent;

    border:none;

    border-bottom:1px solid transparent;

    color:var(--text);

    font-weight:700;

    font-size:14px;

    font-family:inherit;

    padding:2px 0;

}

.timeline-time-input:focus{

    border-bottom-color:var(--primary);

    outline:none;

}

.timeline-label-input{

    flex:1;

    min-width:140px;

    background:var(--surface-light);

    border:1px solid var(--border);

    border-radius:8px;

    color:var(--text);

    font-size:14px;

    font-family:inherit;

    padding:8px 12px;

}

.timeline-label-input:focus{

    border-color:var(--primary);

    outline:none;

}

.timeline-remove-btn{

    border:none;

    background:transparent;

    color:var(--muted);

    cursor:pointer;

    font-size:14px;

    padding:4px 8px;

}

.timeline-remove-btn:hover{

    color:var(--red);

}

.fuel-timeline-time{

    padding-top:6px !important;

}

/* ==========================================================
   HOMEMADE DRINK — include toggle
========================================================== */

.fuel-include-drink{

    padding:8px 14px;

}

/* ==========================================================
   PRE-WORKOUT FUEL
========================================================== */

.pre-workout-groups{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:18px;

}

.pre-workout-group h4{

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.06em;

    color:var(--muted);

    margin-bottom:10px;

}

.pre-workout-chips{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.pre-workout-chip{

    border:1px solid var(--border);

    background:var(--surface-light);

    color:var(--text);

    font-size:13px;

    padding:8px 14px;

    border-radius:999px;

    cursor:pointer;

    transition:.2s;

}

.pre-workout-chip:hover{

    background:var(--primary);

    color:var(--on-primary);

    border-color:var(--primary);

}

.fuel-preworkout-field{

    max-width:480px;

}

/* ==========================================================
   SAVED PLANS — week grouping
========================================================== */

.fuel-plan-week-group{

    margin-bottom:24px;

}

.fuel-plan-week-group:last-child{

    margin-bottom:0;

}

.fuel-plan-week-heading{

    font-size:16px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:12px;

    text-transform:uppercase;

    letter-spacing:.04em;

}

/* ==========================================================
   RESPONSIVE — additions
========================================================== */

@media(max-width:650px){

    .workout-day-row{

        grid-template-columns:32px 1fr;

        grid-template-areas:
            "abbr session"
            "abbr miles"
            "abbr pace"
            "abbr check";

        row-gap:4px;

    }

    .workout-day-abbr{ grid-area:abbr; }
    .workout-day-session{ grid-area:session; }
    .workout-day-miles{ grid-area:miles; }
    .workout-day-pace{ grid-area:pace; }
    .workout-day-check{ grid-area:check; }

    .fuel-timeline-actions{

        width:100%;

    }

    .fuel-timeline-actions .fuel-btn{

        flex:1;

    }

}