/* Ride Fuel Plan: the feed musette. White cotton, screen-printed in flat inks:
   cobalt = drink, yellow = food, black = structure (and glucose; fructose is black hatched),
   green = drink and food together, in the energy split only. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ground: #fbfbf7;       /* white cotton */
  --paper: #ffffff;
  --ink: #151515;          /* black ink: structure */
  --tint: #4a5687;         /* secondary text: black cut with cobalt, never grey */
  --line: #d5d9e8;         /* hairlines inside modules */
  --field: #ffffff;
  --blue: #1d3fc4;         /* cobalt ink: drink */
  --blue-fill: #1d3fc4;
  --on-blue: #ffffff;
  --yellow: #ffcf24;       /* sun ink: food */
  --on-yellow: #151515;
  --green: #2f7d3a;        /* drink + food together (energy split) */
  --band: #1d3fc4;
  --band-ink: #ffffff;
  --band-sub: #d3dbff;
  --strip: #151515;        /* the black alert strip */
  --rule: 2px solid var(--ink);            /* module edges only */
  --soft: #7c86ad;         /* control and cell rules: quieter than ink, still 3:1 */
  --rule-soft: 1px solid var(--soft);
  --sun-tint: #ffe58a;     /* food chips: the sun ink, let down */
  --condensed: 62%;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0c1331;     /* navy cotton */
    --paper: #131c42;
    --ink: #f2f1ea;        /* white ink */
    --tint: #aab3d8;
    --line: #2a3566;
    --field: #0c1331;
    --blue: #8aa0ff;
    --blue-fill: #3352e0;
    --on-blue: #ffffff;
    --yellow: #ffd23f;
    --on-yellow: #0c1331;
    --green: #5cc46c;
    --band: #1d3fc4;
    --band-ink: #ffffff;
    --band-sub: #d3dbff;
    --strip: #04071a;
    --soft: #6f7cb8;
    --sun-tint: #5b4c12;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--blue);
}
::selection { background: var(--yellow); color: var(--on-yellow); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* The print on the bag: a cobalt band with the name knocked out. */
.band { background: var(--band); color: var(--band-ink); margin-bottom: 24px; }
.band-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 18px; }
.band h1 {
  margin: 0;
  font-stretch: var(--condensed); font-weight: 800; text-transform: uppercase;
  font-size: 52px; line-height: .86; letter-spacing: .005em;
}
.band-sum { margin: 0 0 4px; color: var(--band-sub); font-stretch: 75%; font-weight: 700; font-size: 18px; letter-spacing: .01em; font-variant-numeric: tabular-nums; text-align: right; }
.lede { margin: 10px 0 0; max-width: 60ch; color: var(--band-sub); font-size: 15px; flex-basis: 100%; }
.returning .lede { display: none; }

.layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } .layout > .results { margin-left: 0; } }

/* Modules: square, ruled in black ink, packed edge to edge. */
.card { background: var(--paper); border: var(--rule); padding: 20px 22px; }
.inputs .card + .card { margin-top: -2px; }
.results { container-type: inline-size; }
.results > * + * { margin-top: -2px; }
.results > .print-head + * { margin-top: 0; }

h2 {
  margin: 0 0 14px;
  font-stretch: var(--condensed); font-weight: 700; text-transform: uppercase;
  font-size: 21px; line-height: 1; letter-spacing: .01em;
}

.inputs { display: block; }
.hint.top { margin: -6px 0 14px; }
.hint.top-tight { margin: -6px 0 14px; }
.group + .group { border-top: 1px solid var(--line); padding-top: 12px; }
.group { margin-bottom: 12px; }
.group .check.head { font-weight: 700; font-size: 15px; }
.group .sub { margin-top: 10px; }
.group .sub[hidden] { display: none; }
.group .sub .field:last-child { margin-bottom: 0; }
.foods { display: grid; gap: 8px; }
.food { display: grid; grid-template-columns: minmax(0, 1fr) 66px 78px 58px; gap: 6px; align-items: center; }
.food .unit { grid-column: 3; }
.food .max { grid-column: 4; min-height: 38px; padding: 6px 8px; text-align: center; }
.food .max:disabled { opacity: .4; }
.food-head { font-size: 11px; font-weight: 700; color: var(--tint); margin-bottom: -4px; }
.food-head span { text-align: center; }
/* Only the gel row has a mix picker; the others let their name use that space. */
.food .check { grid-column: 1 / 3; }
.food:has(select) .check { grid-column: 1; }
.food select.mini { min-height: 38px; font-size: 14px; padding: 6px 22px 6px 7px; background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; }
.food select.mini:disabled { opacity: .4; }
.food .check { font-size: 15px; font-weight: 600; }
.food .check small { color: var(--tint); font-weight: 400; margin-left: 4px; }
.food .unit input { padding-right: 28px; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.food .unit input:disabled { opacity: .4; }
.field.every { margin-top: 16px; }
.field.glycogen { margin-bottom: 0; }
.field.drink-mix { margin-top: 14px; }
.seg-every { grid-auto-flow: row; grid-template-columns: 1.7fr repeat(4, 1fr); }
.check.caf { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.check.caf small { color: var(--tint); font-size: 12px; margin-left: 4px; }
.form-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

.field { display: block; margin: 0 0 14px; border: 0; padding: 0; min-width: 0; }
.field > span, .field > legend { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; font-size: 13px; margin-bottom: 6px; padding: 0; }
.field small, .hint { font-weight: 400; color: var(--tint); font-size: 12px; }
.hint { display: block; margin-top: 6px; }
.hint.clamp { color: var(--on-yellow); background: var(--yellow); font-weight: 700; padding: 3px 8px; width: max-content; max-width: 100%; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

input[type="number"], input[type="time"], input[type="text"], select {
  width: 100%;
  font: inherit; font-weight: 600;
  color: var(--ink);
  background: var(--field);
  border: var(--rule-soft);
  border-radius: 0;
  padding: 8px 10px;
  min-height: 42px;
  font-variant-numeric: tabular-nums;
}
select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
::placeholder { color: var(--tint); opacity: 1; font-weight: 400; }
input[aria-invalid="true"] { box-shadow: inset 0 0 0 3px var(--yellow); }
input:focus-visible, select:focus-visible, .seg input:focus-visible + span, button:focus-visible, summary:focus-visible, a:focus-visible, .results:focus-visible, .headline:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.unit { position: relative; }
.unit input { padding-right: 46px; }
.unit em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--tint); font-size: 13px; font-weight: 600; pointer-events: none; }

/* Range: a cobalt-inked track with a square black-ink slider. */
input[type="range"] { width: 100%; height: 26px; margin: 4px 0 0; background: transparent; appearance: none; -webkit-appearance: none; --range-fill: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--blue-fill) var(--range-fill), var(--line) var(--range-fill)); }
input[type="range"]::-moz-range-track { height: 6px; background: linear-gradient(90deg, var(--blue-fill) var(--range-fill), var(--line) var(--range-fill)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; background: var(--ink); border: 3px solid var(--paper); outline: 2px solid var(--ink); border-radius: 0; cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--ink); border: 3px solid var(--paper); outline: 2px solid var(--ink); border-radius: 0; cursor: grab; }
input[type="range"]:focus-visible { outline: 0; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--blue); }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--blue); }
output { color: var(--blue); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Segmented controls: one ruled strip, the chosen one inked solid. */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--rule-soft); background: var(--field); }
.seg label { position: relative; }
.seg label + label { border-left: 1px solid var(--line); }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 8px 6px; font-size: 13px; font-weight: 600; color: var(--tint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.seg input:not(:checked):hover + span { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.seg input:checked + span { background: color-mix(in srgb, var(--ink) 11%, var(--field)); color: var(--ink); font-weight: 800; box-shadow: inset 0 0 0 1px var(--ink); }

.extended { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.extended summary { cursor: pointer; font-weight: 700; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; list-style: none; }
.extended summary::-webkit-details-marker { display: none; }
/* Drawn chevron: points right when closed, down when open. */
.extended summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-2px) rotate(-45deg); transition: transform 160ms cubic-bezier(.2, .8, .2, 1); align-self: center; margin-right: 2px; }
.extended[open] summary::before { transform: translateY(-4px) rotate(45deg); }
.extended summary small { font-weight: 400; font-size: 12px; color: var(--tint); }
.extended[open] summary { margin-bottom: 12px; }
.extended .field:last-child { margin-bottom: 0; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.check input { accent-color: var(--blue); margin-top: 3px; width: 16px; height: 16px; }
/* Food is yellow ink, in the form as in the plan. */
.food .check input, .check.caf input { accent-color: var(--yellow); }

.ghost { font: inherit; font-size: 13px; font-weight: 700; background: var(--paper); color: var(--ink); border: var(--rule-soft); border-radius: 0; padding: 6px 14px; cursor: pointer; }
.ghost:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, var(--paper)); }

/* Thumb-reachable shortcut to the plan when the form stacks above it. */
.jump { display: none; }
@media (max-width: 860px) {
  .jump {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    position: sticky; bottom: 12px; z-index: 2; margin-top: 12px;
    padding: 12px 16px;
    background: var(--band); color: var(--band-ink); text-decoration: none; font-weight: 700; font-size: 15px;
    border: 2px solid var(--ink);
  }
  .jump b { font-stretch: var(--condensed); font-weight: 800; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
}

/* Headline: the target, set big in cobalt, beside the two timers. */
.headline { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "alert alert" "title title" "big timers" "sum sum" "warn warn"; gap: 0 28px; align-items: end; }
#alert { grid-area: alert; }
.headline > h2 { grid-area: title; margin-bottom: 4px; }
.headline > .big { grid-area: big; }
.headline > .timers { grid-area: timers; }
.headline > #rSummary { grid-area: sum; }
.headline > #warnings { grid-area: warn; }
@container (max-width: 560px) {
  .headline { grid-template-columns: minmax(0, 1fr); grid-template-areas: "alert" "title" "big" "timers" "sum" "warn"; }
  .headline > .timers { margin-top: 16px; }
}
.big {
  margin: 0; color: var(--blue);
  font-stretch: var(--condensed); font-weight: 800; font-size: 120px; line-height: .8; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.big small { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: .01em; margin-left: 6px; }
#rSummary { margin: 14px 0 0; font-size: 14px; }
.muted { color: var(--tint); }
.small { font-size: 13px; }
.timers { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 1px; background: var(--soft); border: var(--rule-soft); max-width: 480px; }
.timer { background: var(--paper); padding: 9px 14px 10px; }
.timer span { display: block; font-size: 12px; font-weight: 700; color: var(--tint); }
.timer strong { display: block; font-stretch: var(--condensed); font-weight: 800; font-size: 30px; line-height: 1; margin: 2px 0; font-variant-numeric: tabular-nums; }
.timer small { display: block; font-size: 12px; color: var(--tint); }
.recipe-head { grid-column: 1 / -1; font-weight: 800; margin-top: 8px; }
.recipe-head:first-child { margin-top: 0; }

#alert:empty, #warnings:empty { display: none; }
#alert { margin: -20px -22px 18px; }
#warnings { display: grid; gap: 8px; margin-top: 16px; }
.warn { padding: 10px 14px; font-size: 13px; border: var(--rule); background: var(--paper); color: var(--ink); }
.warn p { margin: 0; }
.warn.warn { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
.warn.info { background: var(--paper); color: var(--tint); border: 1px solid var(--line); }
/* The bonk alert: black strip, yellow ink, across the top of the module. */
.warn.danger { background: var(--strip); color: var(--yellow); border: 0; padding: 14px 22px; font-size: 14px; }
.warn.danger > p { font-weight: 800; font-size: 16px; }
.fixes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.fixes li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fixes .note { opacity: .85; }
.fix-btn { font: inherit; font-size: 12px; font-weight: 800; flex: none; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0; padding: 3px 10px; cursor: pointer; }
.fix-btn:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.warn.warn .fix-btn:hover { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.headline.is-bonk .big { color: var(--ink); }
.status.ok { color: var(--ink); font-weight: 800; }
.status.low { color: var(--ink); background: var(--yellow); padding: 0 4px; }
.status.bonk { color: var(--yellow); background: var(--strip); padding: 0 4px; }

/* Tiles share their rules like a printed grid. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 600px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tiles { gap: 1px; background: var(--soft); border: var(--rule); }
.tile { background: var(--paper); padding: 12px 16px; }
.tile span { display: block; font-size: 12px; font-weight: 700; color: var(--tint); }
.tile strong { display: block; margin-top: 2px; font-stretch: var(--condensed); font-weight: 800; font-size: 26px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tile strong small { font-stretch: 100%; font-size: 12px; font-weight: 600; color: var(--tint); }
.tile.ink-blue > span::before, .tile.ink-yellow > span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: 0; }
.tile.ink-blue > span::before { background: var(--blue-fill); }
.tile.ink-yellow > span::before { background: var(--yellow); }
.tiles-inner { margin: 0 0 20px; border: var(--rule-soft); }

.logistics { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.logistics > .card { margin: 0 -2px -2px 0; }
#refillCard { grid-column: 1 / -1; }
@container (max-width: 620px) { .logistics { grid-template-columns: minmax(0, 1fr); } }
.results > .logistics { margin-right: 2px; margin-bottom: 2px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--tint); }
.kv dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.more summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.more summary::-webkit-details-marker { display: none; }
.more summary h2 { margin: 0; }
.more summary::after { content: "Show"; font-size: 13px; font-weight: 700; color: var(--tint); }
.more[open] summary::after { content: "Hide"; }
.more[open] summary { margin-bottom: 16px; }

.split { display: flex; height: 14px; overflow: hidden; background: var(--line); margin-bottom: 8px; }
.split div { height: 100%; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--tint); margin-bottom: 14px; }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; }

.list, .stops { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.list li, .stops li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.list li:last-child, .stops li:last-child { border-bottom: 0; }
.list span { flex: none; }
.list b { text-align: right; }
.stops { margin: 14px 0 10px; font-size: 14px; }
.stops span { color: var(--tint); }
.list b, .stops b { font-variant-numeric: tabular-nums; }

.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.row-between h2 { margin: 0; }
.plan-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 12px; }
.row-between:has(.plan-tools) { flex-wrap: wrap; }
/* First-visit intro: three steps in reading order, then Got it. */
.intro { margin-bottom: 16px; }
.intro[hidden] { display: none; }
.intro-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 20px 24px; border-radius: var(--r, 20px); background: var(--paper); }
.intro h2 { grid-column: 1 / -1; margin: 0; }
.intro ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; counter-reset: step; }
.intro li { position: relative; padding-left: 40px; font-size: 14px; line-height: 1.45; counter-increment: step; }
.intro li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-fill); color: var(--on-blue); font-stretch: var(--condensed); font-weight: 800; font-size: 17px; }
.intro li b { display: block; margin-bottom: 2px; font-size: 15px; }
.intro a { color: var(--blue); font-weight: 700; text-underline-offset: 3px; }
.intro .on-narrow { display: none; }
@media (max-width: 860px) {
  .intro .on-wide { display: none; }
  .intro .on-narrow { display: inline; }
  .intro ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .intro-in { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .intro #introDone { justify-self: start; }
}
.linkish { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Shown when the plan came from a shared link. */
.shared-note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px 12px 20px; border-radius: var(--r-md, 14px); background: color-mix(in srgb, var(--blue-fill) 12%, var(--paper)); color: var(--ink); font-size: 14px; font-weight: 600; }
.shared-note[hidden] { display: none; }
.results > .shared-note[hidden] + * { margin-top: 0; }
.shared-note p { margin: 0; }
.shared-note .ghost { background: var(--paper); }
/* Switch: a square track with a square ink knob; on, the track takes the ink. */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; }
.switch input { appearance: none; -webkit-appearance: none; margin: 0; width: 34px; height: 18px; border: var(--rule-soft); background: var(--field); position: relative; cursor: pointer; flex: none; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--soft); transition: transform 160ms cubic-bezier(.25, 1, .5, 1), background 160ms; }
.switch input:checked { background: var(--ink); border-color: var(--ink); }
.switch input:checked::after { transform: translateX(16px); background: var(--paper); }
.switch input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch input::after { transition: none; } }

/* Simple view swaps the hourly bars for one list of when to eat what. */
.eat-list { display: none; list-style: none; margin: 12px 0 0; padding: 0; }
.plan-card.is-simple .timeline, .plan-card.is-simple .tl-key { display: none; }
.plan-card.is-simple .eat-list { display: block; }
.eat-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.eat-list li:first-child { border-top: var(--rule); }
.eat-list .when { font-stretch: var(--condensed); font-weight: 800; font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; }
.eat-list .when small { margin-left: 8px; font-stretch: 100%; font-weight: 600; font-size: 12px; color: var(--tint); }
.eat-list .chip { font-size: 14px; padding: 3px 10px; }
.eat-list li.none { display: block; color: var(--tint); }
@container (max-width: 560px) { .eat-list li { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } .eat-list .when small { display: block; margin: 3px 0 0; } }


/* Timeline: each hour's carbs printed as two inks against the target stitch. */
.tl-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--tint); }
.tl-key i { display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.tl-key .k-drink { background: var(--blue-fill); }
.tl-key .k-food { background: var(--yellow); }
.tl-key .k-glu { background: var(--tint); }
.tl-key .k-fru { background: repeating-linear-gradient(-45deg, var(--tint) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1.5px var(--tint); }
.tl-key .k-break { flex-basis: 100%; height: 0; }
.tl-key .k-stitch { width: 0; height: 12px; border-left: 2px dashed var(--ink); margin-right: 8px; vertical-align: -2px; }
.timeline { list-style: none; margin: 4px 0 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 7px 18px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.timeline .when { grid-row: span 2; align-self: start; }
.timeline li:first-child { border-top: var(--rule); }
.timeline .when { font-stretch: var(--condensed); font-weight: 800; font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline .when small { display: block; margin-top: 3px; font-stretch: 100%; font-weight: 600; color: var(--tint); font-size: 12px; white-space: nowrap; line-height: 1.3; }
.timeline li.after-empty .when { background: var(--strip); color: var(--yellow); box-shadow: 0 0 0 4px var(--strip); justify-self: start; max-width: 100%; }
.timeline li.after-empty .when small { color: var(--yellow); }
.carb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; }
.bar { position: relative; height: 22px; background: linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat; }
.bar .ink { position: absolute; top: 0; bottom: 0; left: 0; transform-origin: left center; transition: width 220ms cubic-bezier(.2, .8, .2, 1), left 220ms cubic-bezier(.2, .8, .2, 1); }
.bar .drink { background: var(--blue-fill); }
.bar .food { background: var(--yellow); }
/* A hairline of ground where two segments meet, so each reads on its own. */
.bar .ink.joined { border-left: 2px solid var(--paper); }
.bar.sugar { height: 9px; background: none; }
.bar.sugar .glu { background: var(--tint); }
.bar.sugar .fru { background: repeating-linear-gradient(-45deg, var(--tint) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1.5px var(--tint); }
.bar.sugar .fru.joined { border-left-width: 2px; }
.bar[data-tip] { cursor: help; }
.carb .ratio { font-size: 11px; font-weight: 700; color: var(--tint); text-align: right; font-variant-numeric: tabular-nums; min-width: 44px; }

/* Tooltip: the black strip, in the alert's ink. */
.tip { position: fixed; z-index: 10; pointer-events: none; display: grid; gap: 1px; max-width: 260px; padding: 8px 11px; background: var(--strip); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.tip b { color: var(--yellow); font-weight: 800; margin-bottom: 2px; }
.tip[hidden] { display: none; }
.bar .stitch { position: absolute; top: -5px; bottom: -5px; border-left: 2px dashed var(--ink); z-index: 2; }
.carb b { font-stretch: var(--condensed); font-weight: 800; font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.carb b small { font-stretch: 100%; font-size: 11px; font-weight: 600; color: var(--tint); margin-left: 1px; }
/* Squeegee pull: the inks sweep in once, row after row, when the plan first appears. */
.timeline.pull .ink { animation: pull 420ms cubic-bezier(.25, 1, .5, 1) both; animation-delay: calc(var(--row, 0) * 30ms); }
@keyframes pull { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .timeline.pull .ink { animation: none; }
  .bar .ink, .extended summary::before { transition: none; }
}
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Fixed importance ramp: refill > bottle > food > the rest. */
.chip { font-size: 12px; font-weight: 600; padding: 2px 8px; border: 1px solid var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.35; }
.chip.refill { background: var(--blue-fill); color: var(--on-blue); border-color: var(--blue-fill); font-size: 13px; font-weight: 700; padding: 3px 10px; }
.chip.bottle { border-color: var(--blue); color: var(--blue); }
.chip.extra { background: var(--sun-tint); color: var(--ink); border-color: var(--sun-tint); }
.chip.caf { border-color: var(--tint); color: var(--tint); font-weight: 600; }
.chip.empty { background: var(--strip); color: var(--yellow); border-color: var(--strip); font-weight: 800; }
.chip.reserve { background: var(--yellow); color: var(--on-yellow); border-color: var(--strip); }
.chip.sum { border: 0; padding: 0 0 0 4px; color: var(--tint); font-weight: 500; }
@container (max-width: 560px) {
  .timeline li { grid-template-columns: 60px minmax(0, 1fr); gap: 7px 12px; }
  .timeline .when small { white-space: normal; }
}

.print-head { display: none; }

.notes { margin-top: 40px; }
.notes .card { columns: 2 22em; column-gap: 48px; column-rule: 1px solid var(--line); }
.notes h2 { column-span: all; }
.notes p { margin: 0 0 14px; break-inside: avoid; max-width: 36em; }
.foot { padding: 24px 20px 40px; color: var(--tint); }
@media (max-width: 640px) {
  .card { padding: 16px; }
  #alert { margin: -16px -16px 16px; }
  .band h1 { font-size: 48px; }
  .band-sum { text-align: left; }
  .big { font-size: 112px; }
}

/* ---------- Bidon shape layer ----------
   The musette as a bottle: no outlines. Rounded panels float on a pale cobalt
   ground, fields are filled, the bars are capsules, chips are tinted pills, and
   the band is a rounded label. Inks and type are unchanged. */

:root {
  --r: 20px;
  --r-md: 14px;
  --r-sm: 11px;
  --ground: #eef1fa;
  --fill: color-mix(in srgb, var(--soft) 13%, var(--paper));
  --fill-strong: color-mix(in srgb, var(--soft) 24%, var(--paper));
  --rule: 0 solid transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0a102b;
    --fill: color-mix(in srgb, var(--soft) 16%, var(--paper));
    --fill-strong: color-mix(in srgb, var(--soft) 28%, var(--paper));
  }
}

/* The band: a rounded label on the bottle, not a full-bleed strip */
.band { max-width: 1140px; margin: 16px auto 22px; border-radius: var(--r); }
@media (max-width: 1180px) { .band { margin: 12px 20px 20px; } }
.band-in { padding-left: 28px; padding-right: 28px; }

/* Panels: borderless, rounded, set apart by the ground */
.card { border: 0; border-radius: var(--r); padding: 22px 24px; }
.inputs .card + .card { margin-top: 16px; }
.results > * + * { margin-top: 16px; }
.results > .print-head + * { margin-top: 0; }
.headline, .plan-card, .more { overflow: hidden; }
#alert { margin: -22px -24px 18px; }
.warn.danger { padding: 16px 24px; }

/* Fields: filled, no box; a soft underline keeps them findable */
input[type="number"], input[type="time"], input[type="text"], select {
  border: 0;
  border-radius: var(--r-sm);
  background-color: var(--fill);
  box-shadow: inset 0 -1.5px 0 var(--soft);
}
input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--yellow); }
.food .unit input, .food .max, .food select.mini { border-radius: 10px; }

/* Segmented control: a pill track, the chosen one an ink pill */
.seg { border: 0; background: var(--fill); border-radius: 999px; padding: 4px; gap: 4px; }
.seg label + label { border-left: 0; }
.seg span { border-radius: 999px; }
.seg input:not(:checked):hover + span { background: var(--fill-strong); }
.seg input:checked + span { background: var(--ink); color: var(--paper); box-shadow: none; }

.ghost { border: 0; border-radius: 999px; background: var(--fill); padding: 7px 16px; }
.ghost:hover { background: var(--fill-strong); border: 0; }
.fix-btn { border-radius: 999px; }
.switch input { border: 0; background: var(--fill-strong); border-radius: 999px; }
.switch input::after { top: 3px; left: 3px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.switch input:checked { background: var(--ink); }
input[type="range"]::-webkit-slider-runnable-track { border-radius: 999px; height: 8px; }
input[type="range"]::-moz-range-track { border-radius: 999px; height: 8px; }
input[type="range"]::-webkit-slider-thumb { border-radius: 50%; outline: 0; border: 0; width: 22px; height: 22px; margin-top: -7px; background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
input[type="range"]::-moz-range-thumb { border-radius: 50%; outline: 0; border: 0; width: 22px; height: 22px; background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.group + .group, .check.caf, .extended { border-top-color: var(--fill-strong); }

/* Timers and tiles: separate rounded tiles, the drink and food ones tinted */
.timers { border: 0; background: none; gap: 8px; }
.timer { background: var(--fill); border-radius: var(--r-md); }
.tiles { border: 0; background: none; gap: 10px; }
.tile { border-radius: var(--r-md); }
.tile.ink-blue { background: color-mix(in srgb, var(--blue-fill) 14%, var(--paper)); }
.tile.ink-yellow { background: color-mix(in srgb, var(--yellow) 30%, var(--paper)); }
.tile.ink-blue > span::before, .tile.ink-yellow > span::before { border-radius: 50%; }
.tiles-inner { border: 0; }
.tiles-inner .tile { background: var(--fill); }
.logistics { gap: 16px; }
.logistics > .card { margin: 0; }
.results > .logistics { margin: 16px 0 0; }
.results > .tiles { margin-right: 0; margin-bottom: 0; }

/* Lists and rules inside panels: hairlines only */
.timeline li:first-child, .eat-list li:first-child { border-top: 1px solid var(--fill-strong); }
.timeline li, .eat-list li, .list li, .stops li { border-color: var(--fill-strong); }

/* Bars: capsules */
.bar { background: none; }
.bar .ink { border-radius: 0; }
.bar .drink, .bar.sugar .glu { border-radius: 999px; }
.bar:has(.food.joined) .drink, .bar.sugar:has(.fru.joined) .glu { border-radius: 999px 0 0 999px; }
.bar .food, .bar.sugar .fru { border-radius: 0 999px 999px 0; }
.bar .food:not(.joined), .bar.sugar .fru:not(.joined) { border-radius: 999px; }
.bar .ink.joined { border-left-color: var(--paper); }
/* Dotted target: drawn as a 3px column of dots rather than a border. */
.bar .stitch { border-left: 0; width: 3px; margin-left: -1px; background: repeating-linear-gradient(to bottom, var(--ink) 0 3px, transparent 3px 6px); }
.tl-key i { border-radius: 999px; }
.tl-key .k-stitch { border: 0; border-radius: 0; width: 3px; height: 12px; background: repeating-linear-gradient(to bottom, var(--ink) 0 3px, transparent 3px 6px); }
.split { border-radius: 999px; }

/* Chips: tinted pills, no outlines */
.chip { border: 0; border-radius: 999px; padding: 3px 11px; background: var(--fill); }
.chip.bottle { background: color-mix(in srgb, var(--blue-fill) 14%, var(--paper)); color: var(--blue); }
.chip.refill { padding: 3px 12px; }
.chip.caf { background: var(--fill); color: var(--tint); }
.chip.sum { background: none; padding: 0 0 0 4px; }
.eat-list .chip { padding: 4px 13px; }

.warn { border: 0; border-radius: var(--r-md); }
.warn.info { background: var(--fill); border: 0; }
.warn.danger { border-radius: 0; }
.timeline li.after-empty .when { border-radius: 8px; }
.hint.clamp { border-radius: 8px; }
.tip { border-radius: 10px; }
.jump { border: 0; border-radius: 999px; padding: 13px 20px; }

.notes .card { border-radius: var(--r); column-rule-color: var(--fill-strong); }

@media (max-width: 860px) {
  .layout { gap: 20px; }
}
@media (max-width: 640px) {
  .card { padding: 18px; }
  #alert { margin: -18px -18px 16px; }
  .band-in { padding-left: 20px; padding-right: 20px; }
}

@media print {
  @page { margin: 12mm; }
  :root { color-scheme: light; --ground: #fff; --paper: #fff; --ink: #000; --tint: #333; --line: #bbb; --blue: #1d3fc4; --blue-fill: #1d3fc4; --yellow: #ffcf24; --green: #2f7d3a; --on-yellow: #000; --strip: #000; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .inputs, .notes, .foot, .ghost, .more, .fix-btn, .jump, #warnings .info { display: none !important; }
  .layout { display: block; padding: 0; max-width: none; }
  .card, .tile { break-inside: avoid; }
  :root { --ground: #fff; --fill: #fff; --fill-strong: #ccc; }
  .card { border: 1px solid #999; border-radius: 8px; }
  .tiles, .timers { gap: 6px !important; }
  .tile, .timer { border: 1px solid #999 !important; border-radius: 8px; background: #fff !important; }
  .band { display: none !important; }
  #alert { margin: -8px -12px 8px; }
  .warn.danger { padding: 5px 10px; }
  .chip { border: 0.75pt solid #999; }
  input, select { box-shadow: none; }
  .card { padding: 8px 12px; }
  h2 { font-size: 13pt; margin-bottom: 6px; }

  .print-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 3pt solid #000; padding-bottom: 6px; margin-bottom: 8px; }
  .print-head p { margin: 0; }
  .print-title { font-stretch: var(--condensed); font-weight: 900; text-transform: uppercase; font-size: 22pt; line-height: 1; }
  .print-title span { display: block; margin-top: 3px; font-stretch: 100%; font-weight: 600; text-transform: none; font-size: 10pt; }
  #pInputs { font-size: 8.5pt; color: #333; text-align: right; max-width: 60%; }

  .headline { align-items: center; }
  .headline h2, #rSummary { display: none; }
  .big { font-size: 54pt; color: #000 !important; }
  .big small { font-size: 12pt; }
  .timer { padding: 4px 10px; min-width: 0; }
  .timer strong { font-size: 18pt; }
  #alert { margin: -8px -12px 8px; }
  .warn, .warn.warn, .warn.danger { background: none; color: #000; border: 1.5pt solid #000; padding: 5px 10px; font-size: 9pt; }
  .warn.danger { border-width: 3pt; }
  .warn.danger > p { font-size: 10pt; }
  .fixes { margin-top: 3px; gap: 1px; }
  .fixes li { display: list-item; list-style: disc; margin-left: 16px; }

  .tl-key { margin: 4px 0 2px; font-size: 8pt; color: #333; }
  .timeline li { grid-template-columns: 62px 150px 1fr; gap: 2px 10px; padding: 3px 0; break-inside: avoid; }
  .timeline .when { grid-row: auto; }
  .timeline li.after-empty .when { background: none; box-shadow: none; }
  .tile > span::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .layout > .results { margin-left: 0; }
  .notes .card { columns: auto; }
  .timeline .when { font-size: 13pt; }
  .timeline .when small { font-size: 8pt; margin-top: 1px; }
  .timeline li.after-empty .when { color: #000; text-decoration: underline; }
  .timeline li.after-empty .when small { color: #000; }
  .bar { height: 12px; }
  .bar.sugar { height: 6px; }
  .tip { display: none !important; }
  .tl-key .k-break { display: none; }
  .carb .ratio { font-size: 8pt; }
  .bar .ink, .chip, .tl-key i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .bar .ink.joined { border-left-color: #fff; }
  .timeline.pull .ink { animation: none; }
  .carb b { font-size: 12pt; }
  .chips { gap: 3px; }
  .chip { font-size: 8pt; padding: 0 5px; border-width: 1pt; }
  .chip.refill { font-size: 8.5pt; padding: 0 6px; }
  .chip.sum { font-size: 8pt; }

  .tile { padding: 3px 8px; }
  .tiles, .timers { gap: 0; }
  .tile + .tile, .timer + .timer { border-left: 1px solid #888; }
  .tile span { font-size: 7.5pt; }
  .tile strong { font-size: 15pt; }
  .logistics { grid-template-columns: 1fr 1fr; grid-template-areas: "recipe shop" "refill shop"; }
  #recipeCard { grid-area: recipe; }
  #shopCard { grid-area: shop; }
  #refillCard { grid-area: refill; grid-column: auto; }
  .kv { font-size: 8.5pt; gap: 1px 10px; }
  .list li, .stops li { font-size: 8.5pt; padding-bottom: 2px; }
  .stops { margin: 4px 0; }
  #refillTip { display: none; }
  .switch, .shared-note, .intro, .linkish { display: none !important; }
  .eat-list li { padding: 4px 0; grid-template-columns: 90px 1fr; }
  .eat-list .when { font-size: 14pt; }
  .eat-list .chip { font-size: 10pt; }
}