/* Day Routes list v2 — compact cards; normal days shaded by distance (quartiles, light -> deep blue),
   low-movement days red. Text on each tint keeps >= 4.5:1. Loaded after app.css. */
:root {
  --int1-bg: #e0ecff; --int1-fg: #1d4ed8; --int1-bar: #93c5fd;
  --int2-bg: #bfd6fb; --int2-fg: #1e3a8a; --int2-bar: #60a5fa;
  --int3-bg: #2563eb; --int3-fg: #ffffff; --int3-bar: #2563eb;
  --int4-bg: #1e3a8a; --int4-fg: #ffffff; --int4-bar: #1e3a8a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --int1-bg: #172554; --int1-fg: #93c5fd; --int1-bar: #1d4ed8;
    --int2-bg: #1e3a8a; --int2-fg: #dbeafe; --int2-bar: #2563eb;
    --int3-bg: #2563eb; --int3-fg: #ffffff; --int3-bar: #3b82f6;
    --int4-bg: #93c5fd; --int4-fg: #0b1220; --int4-bar: #93c5fd;
  }
}
:root[data-theme="dark"] {
  --int1-bg: #172554; --int1-fg: #93c5fd; --int1-bar: #1d4ed8;
  --int2-bg: #1e3a8a; --int2-fg: #dbeafe; --int2-bar: #2563eb;
  --int3-bg: #2563eb; --int3-fg: #ffffff; --int3-bar: #3b82f6;
  --int4-bg: #93c5fd; --int4-fg: #0b1220; --int4-bar: #93c5fd;
}

/* summary strip under the "Days" header */
.day-summary { margin: 0 10px 8px; padding: 10px 12px 8px; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--violet-soft) 75%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--border)); animation: pop-in .4s var(--ease-out) backwards; }
.day-summary:empty { display: none; }
.ds-top { display: flex; flex-direction: column; gap: 5px; }
.ds-total { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
.ds-total b { font-size: 25px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  background: var(--name-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ds-total span { font-size: 11px; font-weight: 700; color: var(--text-2); }
.ds-side { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-2); white-space: nowrap; }
.ds-side b { color: var(--text); font-variant-numeric: tabular-nums; }
.ds-low { display: inline-flex; align-items: center; gap: 5px; color: var(--mv-low-text, #b91c1c); font-weight: 700; }
.ds-low i { width: 7px; height: 7px; border-radius: 2px; background: var(--mv-crit); }
.ds-ok { color: var(--good-text); font-weight: 700; }
.ds-bars { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin-top: 8px; }
.ds-bars i { flex: 1; min-width: 2px; height: var(--h); border-radius: 2px 2px 1px 1px; cursor: pointer; transform-origin: bottom;
  animation: grow-y .6s var(--ease-out) backwards; transition: filter .15s, opacity .15s; }
.ds-bars i.int-1 { background: var(--int1-bar); } .ds-bars i.int-2 { background: var(--int2-bar); }
.ds-bars i.int-3 { background: var(--int3-bar); } .ds-bars i.int-4 { background: var(--int4-bar); }
.ds-bars i.mv-crit { background: var(--mv-crit); } .ds-bars i.mv-low { background: var(--mv-low); }
.ds-bars:hover i { opacity: .55; } .ds-bars i:hover { opacity: 1; filter: brightness(.9); }
.ds-bars i.sel { opacity: 1; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--text); }

/* month separators carry the month total */
.month-sep { display: flex; justify-content: space-between; align-items: baseline; }
.month-sep .mkm { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* compact cards */
.day-item { grid-template-columns: 34px minmax(0, 1fr); gap: 1px 10px; padding: 6px 8px 7px; border-radius: 11px; margin-bottom: 2px; }
.day-item .dnum { grid-row: span 4; width: 34px; height: 38px; border-radius: 9px; transition: box-shadow .2s var(--ease), transform .2s var(--spring); }
.day-item .dnum b { font-size: 14.5px; }
.day-item .dnum span { font-size: 8.5px; margin-top: 2px; }
.day-item .d1 .km { font-size: 13px; }
.day-item .d1 .st { font-size: 10.5px; line-height: 17px; padding: 0 6px; }
.day-item .d2 { font-size: 11px; }
.day-item .mini { height: 3px; margin-top: 3px; }
.day-item:hover .dnum { transform: scale(1.05); }

/* distance tints (also while selected, so the colour keeps its meaning) */
.day-item.int-1 .dnum, .day-item.int-1[aria-selected="true"] .dnum { background: var(--int1-bg); color: var(--int1-fg); }
.day-item.int-2 .dnum, .day-item.int-2[aria-selected="true"] .dnum { background: var(--int2-bg); color: var(--int2-fg); }
.day-item.int-3 .dnum, .day-item.int-3[aria-selected="true"] .dnum { background: var(--int3-bg); color: var(--int3-fg); }
.day-item.int-4 .dnum, .day-item.int-4[aria-selected="true"] .dnum { background: var(--int4-bg); color: var(--int4-fg); }
.day-item[class*="int-"] .dnum span, .day-item[class*="int-"][aria-selected="true"] .dnum span { color: inherit; opacity: .78; }
.day-item.int-1 .mini i { background: var(--int1-bar); } .day-item.int-2 .mini i { background: var(--int2-bar); }
.day-item.int-3 .mini i { background: var(--int3-bar); } .day-item.int-4 .mini i { background: var(--int4-bar); }

/* selected: a ring around the badge + soft brand card, instead of repainting the badge */
.day-item[aria-selected="true"] .dnum { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.day-item.mv-crit[aria-selected="true"] .dnum, .day-item.mv-low[aria-selected="true"] .dnum { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--mv-crit); }
.day-item[aria-selected="true"] { box-shadow: 0 6px 16px -10px rgba(37, 99, 235, .55); }