/* The calendar (web/date-picker.js), one for every date field. A native picker takes no CSS, so a
   field opens this instead: round days, today ringed in the accent, the chosen days filled, and a
   soft band joining the two ends of a range with rounded ends at each week's edge. It is drawn in
   the newer skin's palette whichever screen opens it, because it floats above all of them. */
input[type="date"].bdp-field { pointer-events:none; }
:is(label,div):has(> input[type="date"].bdp-field) { cursor:pointer; }
input[type="date"].bdp-field.bdp-open { outline:2px solid color-mix(in srgb, #bf623d 70%, transparent); outline-offset:1px; }
input[type="date"].bdp-source { display:none; }
.bdp {
  --bdp-card:#fefbf5; --bdp-ink:#3e2418; --bdp-muted:#776559; --bdp-line:#e0d9cd; --bdp-soft:#f0e8dc;
  --bdp-primary:#573222; --bdp-primary-ink:#fbf6ee; --bdp-accent:#bf623d;
  /* The accent as text: #bf623d is 4.0:1 on the card, this is 4.9:1 (Waste Logs' --waste-action). */
  --bdp-accent-ink:#ad5532;
  --bdp-band:color-mix(in srgb, var(--bdp-accent) 14%, var(--bdp-card));
  --bdp-band-preview:color-mix(in srgb, var(--bdp-accent) 8%, var(--bdp-card));
  --bdp-cell:min(42px, calc((100vw - 64px) / 7));
  box-sizing:border-box; width:calc(var(--bdp-cell) * 7 + 28px); padding:14px; color:var(--bdp-ink); background:var(--bdp-card);
  font-family:"Karla",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; line-height:1.2; text-transform:none; letter-spacing:normal;
}
.bdp *,.bdp *::before { box-sizing:border-box; }
.bdp-floating {
  position:fixed; inset:auto; z-index:1000; margin:0; overflow:visible;
  border:1px solid var(--bdp-line); border-radius:18px;
  box-shadow:0 2px 4px rgb(61 32 19 / 8%),0 18px 40px -18px rgb(61 32 19 / 32%);
}
.bdp-inline { margin:4px auto 0; padding:6px 0 0; background:transparent; }
@media (prefers-reduced-motion:no-preference) {
  .bdp-floating { animation:bdp-in .14s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes bdp-in { from { opacity:0; transform:translateY(-4px) scale(.985); } }
}
/* Zero specificity, so a day's own state (chosen, today) always wins over the reset. */
.bdp :where(button) { font:inherit; color:inherit; margin:0; -webkit-tap-highlight-color:transparent; }
.bdp :where(button):focus-visible { outline:2px solid var(--bdp-primary); outline-offset:2px; }

/* A range's two ends, the one being chosen raised. */
.bdp-ends { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:12px; border-radius:14px; background:var(--bdp-soft); }
.bdp-end { display:grid; gap:2px; justify-items:start; padding:7px 12px; border:0; border-radius:11px; background:transparent; cursor:pointer; text-align:left; }
.bdp-end-label { color:var(--bdp-muted); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.bdp-end-day { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.bdp-end-on { background:var(--bdp-card); box-shadow:0 1px 2px rgb(61 32 19 / 10%),0 2px 8px -4px rgb(61 32 19 / 22%); }

.bdp-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; }
.bdp-title { margin:0; font-family:"Fraunces",Georgia,"Times New Roman",serif; font-size:17px; font-weight:560; letter-spacing:-.01em; font-variant-numeric:lining-nums; }
.bdp-nav { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--bdp-muted); cursor:pointer; transition:background-color .12s ease,color .12s ease; }
.bdp-nav svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bdp-nav:hover { background:var(--bdp-soft); color:var(--bdp-ink); }

.bdp-grid { display:grid; gap:2px; }
.bdp-row { display:grid; grid-template-columns:repeat(7, var(--bdp-cell)); }
.bdp-weekday { display:grid; place-items:center; height:28px; color:var(--bdp-muted); font-size:11px; font-weight:700; letter-spacing:.06em; }
.bdp-cell { position:relative; display:grid; place-items:center; height:var(--bdp-cell); }
/* The band sits behind the circles: full cells between the ends, half cells from each end's centre,
   and a rounded end wherever a week row starts or stops. */
.bdp-cell::before { content:""; position:absolute; inset:3px 0; background:transparent; pointer-events:none; }
.bdp-cell:is(.bdp-band,.bdp-band-start,.bdp-band-end)::before { background:var(--bdp-band); }
.bdp-cell.bdp-preview:is(.bdp-band,.bdp-band-start,.bdp-band-end)::before { background:var(--bdp-band-preview); }
.bdp-cell.bdp-band-start::before { left:50%; }
.bdp-cell.bdp-band-end::before { right:50%; }
.bdp-cell:first-child:is(.bdp-band,.bdp-band-end)::before { left:3px; border-radius:999px 0 0 999px; }
.bdp-cell:last-child:is(.bdp-band,.bdp-band-start)::before { right:3px; border-radius:0 999px 999px 0; }
.bdp-day {
  position:relative; display:grid; place-items:center; width:calc(var(--bdp-cell) - 6px); height:calc(var(--bdp-cell) - 6px); padding:0;
  border:0; border-radius:50%; background:transparent; font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; cursor:pointer;
  transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;
}
.bdp-day:hover:not(:disabled,.bdp-chosen) { background:var(--bdp-soft); }
.bdp-today:not(.bdp-chosen) { box-shadow:inset 0 0 0 1.5px var(--bdp-accent); color:var(--bdp-accent-ink); font-weight:700; }
.bdp-chosen { background:var(--bdp-primary); color:var(--bdp-primary-ink); font-weight:700; box-shadow:0 1px 2px rgb(61 32 19 / 18%),0 4px 10px -4px rgb(61 32 19 / 40%); }
.bdp-off { color:color-mix(in srgb, var(--bdp-muted) 45%, transparent); cursor:default; }