:root { --bg: #f6f5f2; --card: #fff; --text: #1d1d1b; --muted: #6b6b66; --line: #e2e0da;
        --accent: #2d5d8a; --error: #a3302a; --alert: #fff4e5; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #171716; --card: #222220; --text: #ecebe6; --muted: #a09f98; --line: #3a3936;
          --accent: #8db7e0; --error: #f08a80; --alert: #3a2e1c; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
       font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 60rem; margin: 0 auto; padding: 1rem; }
nav { display: flex; max-width: 60rem;
      margin: 0 auto; padding: .75rem 1rem 0; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
small { color: var(--muted); font-weight: normal; font-size: .8em; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem;
        margin-bottom: 1rem; overflow-x: auto; position: relative; }
.card.alert { background: var(--alert); }
.help { color: var(--muted); }
.error { color: var(--error); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
code { font-size: .9em; word-break: break-all; }
label { display: block; margin: .5rem 0; }
input { display: block; width: 100%; margin-top: .25rem; padding: .5rem; font: inherit; color: var(--text);
        background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.actions { display: flex; gap: .5rem; margin-top: 1rem; }
button { font: inherit; padding: .5rem 1rem; border-radius: 6px; border: 0; background: var(--accent);
         color: var(--card); cursor: pointer; }
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
button.link { background: none; color: var(--accent); padding: 0; text-decoration: underline; }
form.inline { display: inline-block; margin: 0 .25rem .25rem 0; }
button.danger { background: var(--error); color: var(--card); }
.nowrap { white-space: nowrap; }
td form.inline button { padding: .25rem .6rem; font-size: .85rem; }
a.button { display: inline-block; padding: .5rem 1rem; border-radius: 6px; background: var(--accent);
           color: var(--card); text-decoration: none; }
/* Sheets, like a workbook's: the current one joins the page; on the phone they scroll sideways. */
.tabs { position: relative; display: flex; gap: .2rem; flex: 1; min-width: 0; overflow-x: auto;
        scrollbar-width: none; box-shadow: inset 0 -1px var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; padding: .4rem .8rem; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0;
       color: var(--muted); text-decoration: none; font-size: .92rem; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.current { background: var(--card); color: var(--text); font-weight: 600; }
.tab.alert { color: var(--error); box-shadow: inset 0 3px var(--error); }
.tab .dot { display: inline-block; width: .5rem; height: .5rem; margin-left: .35rem; border-radius: 50%;
            background: var(--accent); vertical-align: middle; }
.tab.bell { position: relative; padding-left: .7rem; padding-right: .7rem; }
.tab.bell svg { width: 1.2em; height: 1.2em; vertical-align: -.25em; fill: currentColor; }
.tab.bell .count { position: absolute; top: .05rem; right: .1rem; min-width: 1rem; padding: 0 .25rem;
                   border-radius: 999px; background: var(--error); color: var(--card); font-size: .65rem;
                   font-weight: 600; line-height: 1rem; text-align: center; }
.tab.bell:has(.count) { color: var(--text); }
@media (max-width: 30rem) { .tab { padding: .4rem .6rem; font-size: .88rem; } }
select { display: block; width: 100%; margin-top: .25rem; padding: .5rem; font: inherit; color: var(--text);
         background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
label.check { display: flex; gap: .5rem; align-items: center; }
label.check input { display: inline; width: auto; margin: 0; }
a.button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
a.button.small { padding: .25rem .6rem; font-size: .85rem; }
.new { display: inline-block; padding: 0 .4rem; border-radius: 999px; background: var(--error);
       color: var(--card); font-size: .75rem; font-weight: 600; }
/* A small + under a card's table that opens the form adding a row to it; open, it turns into a ×. */
details.add > summary { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem;
                        height: 1.8rem; margin-top: .5rem; border: 1px solid var(--line); border-radius: 50%;
                        list-style: none; cursor: pointer; color: var(--accent); font-size: 1.2rem; line-height: 1;
                        transition: transform .15s; }
details.add > summary::-webkit-details-marker { display: none; }
details.add[open] > summary { transform: rotate(45deg); }
form.row { display: flex; flex-wrap: wrap; gap: 0 .75rem; align-items: flex-end; }
form.row label { flex: 1 1 8rem; }
form.row button { margin: .5rem 0; }
fieldset.checks { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0; padding: 0; border: 0; }
div.row { display: flex; flex-wrap: wrap; gap: 0 .75rem; align-items: flex-end; }
div.row label { flex: 1 1 8rem; }
div.row button { margin: .5rem 0; }
/* Charts (the dataviz palette's first two slots, validated on --card in both modes). */
/* --alcohol, the top of the eaten column: next to orange, the palette's own yellow fails colour-blind
   separation, so a greener one; in dark mode it is lighter than the band to stay apart from orange. */
:root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --alcohol: #c9a800; --critical: #d03b3b;
        --warning: #fab219; }
@media (prefers-color-scheme: dark) { :root { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
                                              --alcohol: #b8a000; }
  .viz .band.burned, .viz .band.eaten { opacity: .24; } }
svg.viz { width: 100%; height: auto; font: 14px system-ui, -apple-system, "Segoe UI", sans-serif; }
/* Each chart comes wide and narrow (web._BOXES): the one that fits the card shows, at its full width. */
svg.viz.wide { display: block; }
svg.viz.narrow { display: none; }
@media (max-width: 40rem) { svg.viz.wide { display: none; } svg.viz.narrow { display: block; } }
/* On the phone the narrow one shrinks a little: its text, in the chart's units, grows to stay readable. */
@media (max-width: 30rem) { svg.viz { font-size: 17px; } }
.viz .grid { stroke: var(--line); stroke-width: 1; }
.viz .tick, .viz .end { fill: var(--muted); font-variant-numeric: tabular-nums; }
.viz .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .line.burned { stroke: var(--series-1); }
.viz .line.eaten { stroke: var(--series-2); }
.viz .line.projected { stroke-dasharray: 5 4; }
/* What Talon estimates in place of Garmin's figure: the burned colour, faded, as the past days' columns. */
.viz .line.burned.estimated, .viz .dot.burned.estimated { opacity: .45; }
.viz .band.burned { fill: var(--series-1); opacity: .12; }
.viz .band.eaten { fill: var(--series-2); opacity: .14; }
.viz .now { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.viz .dot { stroke: var(--card); stroke-width: 2; }
.viz .dot.burned { fill: var(--series-1); }
.viz .dot.eaten { fill: var(--series-2); }
.viz .hit { fill: transparent; }
/* Garmin's own figure, nothing added, shown by the legend's box (layout.js toggles .show-garmin). */
.viz .line.garmin { stroke: var(--text); display: none; }
.show-garmin .viz .line.garmin { display: inline; }
.legend .key.garmin { background: var(--text); }
/* The weight chart (web._weight_chart): neutral inks, the dots recessive, the trend the line he reads. */
.viz .dot.weigh-in { fill: var(--muted); stroke-width: 1.5; }
.viz .line.trend { stroke: var(--text); }
.legend .key.trend { background: var(--text); }
.legend .key.swatch.weigh-in { background: var(--muted); width: .6rem; height: .6rem; border-radius: 50%; }
.viz .col.eaten { fill: var(--series-2); }
.viz .col.burned { fill: var(--series-1); }
.viz .col.alcohol { fill: var(--alcohol); }
.viz .col.burned.estimated { opacity: .45; }
.viz .err { stroke: var(--text); stroke-width: 1.5; opacity: .55; }
.viz .diff { fill: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.viz .diff.weak { fill: var(--muted); font-weight: normal; }
ul.legend { list-style: none; padding: 0; margin: .25rem 0 .5rem; }
ul.legend li { margin: .15rem 0; }
.legend .key { display: inline-block; width: 1rem; height: 3px; margin-right: .4rem; vertical-align: middle; border-radius: 2px; }
.legend .key.burned { background: var(--series-1); }
.legend .key.eaten { background: var(--series-2); }
.legend .key.alcohol { background: var(--alcohol); }
.legend .key.swatch { width: .75rem; height: .75rem; border-radius: 3px; }
ul.legend.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.status.critical { color: var(--critical); }
.status.warning { color: var(--warning); }
/* Réglages, Page Aujourd'hui: the shown sections, numbered in order, then the hidden ones. */
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
ol.layout, ul.layout { padding: 0; margin: 0; list-style: none; counter-reset: pos; }
.layout li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
ol.layout li { counter-increment: pos; }
ol.layout li::before { content: counter(pos); flex: none; width: 1.6rem; color: var(--muted);
                       font-variant-numeric: tabular-nums; text-align: right; }
.layout .what { flex: 1; min-width: 0; }
.layout .what small { display: block; }
.layout .do { flex: none; display: flex; gap: .25rem; align-items: center; }
.layout .do form.inline { margin: 0; }
.layout .do button { min-width: 2.75rem; min-height: 2.5rem; padding: .3rem .6rem; }
.layout .spacer { display: inline-block; width: 2.75rem; }
ul.layout.hidden .what b { color: var(--muted); }
/* The car's map (web._car_map): OpenStreetMap's tiles, the position's accuracy and the car. */
svg.map { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--line); }
.map .accuracy { fill: var(--series-1); fill-opacity: .15; stroke: var(--series-1); stroke-width: 1.5; }
.map .car { fill: var(--critical); stroke: #fff; stroke-width: 3; }
.help.credit { font-size: .75rem; text-align: right; margin-top: .2rem; }
/* A long rounds card (web._rounds_section): its first lines, faded, and a toggle for the rest. */
input.unclip { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.clip { max-height: 16rem; overflow: hidden; position: relative; }
.clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3rem;
               background: linear-gradient(transparent, var(--card)); }
input.unclip:checked + .clip { max-height: none; }
input.unclip:checked + .clip::after { display: none; }
label.unclip { display: inline-block; margin: .5rem 0 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
label.unclip::before { content: "Tout afficher"; }
input.unclip:checked ~ label.unclip::before { content: "Réduire"; }
input.unclip:focus-visible ~ label.unclip { outline: 2px solid var(--accent); outline-offset: 2px; }
label.check { display: flex; gap: .5rem; align-items: baseline; }
label.check input[type=checkbox] { display: inline; width: auto; margin: 0; flex: none; }
/* The flat's plan (Ménage): rooms in ink, the three tasks in the palette's first three slots, each
   figure beside its swatch in text colour, always in the same order. */
svg.plan { display: block; max-width: 44rem; }
.plan .room { fill: none; stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.plan .outside { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 5; }
.plan .name { fill: var(--muted); font-size: 26px; }
.plan .val { fill: var(--text); font-size: 34px; font-variant-numeric: tabular-nums; }
.plan .key { fill: var(--text); font-size: 28px; }
.plan .sw.hoover { fill: var(--series-1); }
.plan .sw.mop { fill: var(--series-2); }
.plan .sw.clean { fill: var(--series-3); }