:root { color-scheme: light; font-family: Inter, system-ui, sans-serif; background:#f4f7fb; color:#172033; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(180deg,#172554 0 17rem,#f4f7fb 17rem); }
header,main { width:min(980px,calc(100% - 2rem)); margin:auto; }
header { color:white; padding:3rem 0 2rem; }
.eyebrow { margin:0 0 .5rem; color:#93c5fd; font-size:.75rem; font-weight:800; letter-spacing:.14em; }
h1 { margin:0; font-size:2.5rem; letter-spacing:-.04em; }
header p:last-child { margin:.65rem 0 0; color:#dbeafe; }
main { padding-bottom:5rem; }
nav { display:grid; grid-template-columns:repeat(5,1fr); padding:.35rem; gap:.25rem; background:white; border-radius:1rem; box-shadow:0 12px 35px #0f172a20; position:sticky; top:.5rem; z-index:2; }
button { border:0; border-radius:.75rem; padding:.75rem .65rem; color:#526071; background:#eaf0f9; font-weight:700; cursor:pointer; }
button.active { color:white; background:#2563eb; }
button.primary { color:white; background:#2563eb; }
button.danger { color:#b91c1c; background:#fef2f2; }
.toolbar,.actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.toolbar { justify-content:space-between; }
.actions { margin-top:1rem; }
#notice { padding:.75rem 1rem; background:#dbeafe; color:#172554; border-radius:.75rem; }
dialog { border:0; border-radius:1.2rem; width:min(520px,calc(100% - 2rem)); padding:1.5rem; box-shadow:0 20px 80px #0f172a55; }
dialog::backdrop { background:#0f172a99; }
dialog form { display:grid; gap:.9rem; }
dialog h2 { margin:0 0 .4rem; }
dialog label { display:grid; gap:.35rem; color:#334155; font-weight:700; }
.task-choice { display:flex; align-items:center; gap:.6rem; font-weight:500; }
.task-choice input { width:auto; flex:none; }
input,textarea,select { width:100%; padding:.75rem; border:1px solid #cbd5e1; border-radius:.6rem; font:inherit; color:#172033; background:white; }
textarea { min-height:7rem; resize:vertical; }
#content { display:grid; gap:.75rem; margin-top:1rem; }
article,.empty { position:relative; padding:1rem 1.1rem; background:#fff; border:1px solid #e3eaf3; border-radius:1rem; box-shadow:0 5px 18px #0f172a0a; }
article h2 { margin:0 0 .35rem; padding-right:10rem; font-size:1rem; line-height:1.35; }
article p { margin:0; color:#667386; font-size:.86rem; }
.badge { position:absolute; top:1rem; right:1rem; max-width:10rem; overflow:hidden; text-overflow:ellipsis; color:#1d4ed8; background:#dbeafe; border-radius:2rem; padding:.25rem .55rem; font-size:.7rem; font-weight:800; }
.empty { min-height:12rem; display:grid; place-content:center; gap:.35rem; text-align:center; color:#68758a; }
.empty strong { color:#253044; font-size:1.1rem; }
.task-filters { justify-content:flex-start; align-items:end; }
.task-filters label { display:grid; gap:.3rem; font-size:.8rem; }
.delivery-calendar { padding:1rem; border:1px solid #e3eaf3; border-radius:1rem; background:white; }
.calendar-heading { display:flex; gap:.5rem; align-items:center; margin-bottom:1rem; }
.calendar-heading h2 { flex:1; margin:0; text-align:center; font-size:1.1rem; text-transform:capitalize; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.3rem; }
.weekday { text-align:center; padding:.3rem; font-size:.75rem; color:#667386; }
.calendar-cell { min-height:64px; padding:.5rem; display:flex; flex-direction:column; gap:.25rem; align-items:center; justify-content:center; background:#f4f7fb; border:2px solid transparent; }
.calendar-cell.today { border-color:#2563eb; }
.calendar-cell.selected { background:#172554; color:white; }
.delivery-count { background:#dbeafe; color:#1d4ed8; border-radius:1rem; min-width:1.5rem; font-size:.7rem; padding:.12rem .35rem; }
.delivery-count.done { background:#dcfce7; color:#166534; }
.calendar-help { font-size:.8rem; color:#526071; margin:.8rem 0 0; }
.calendar-results-title { margin:.5rem 0 0; font-size:1rem; }
button:focus-visible,select:focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
@media (max-width:600px) { .delivery-calendar { padding:.6rem; } .calendar-cell { min-height:52px; padding:.2rem; } .calendar-heading h2 { font-size:.95rem; } .calendar-grid { gap:.15rem; } }
@media (max-width:600px) { header { padding-top:2.2rem; } nav { font-size:.72rem; overflow:auto; } nav button { padding:.7rem .3rem; } article h2 { padding-right:0; } .badge { position:static; display:inline-block; margin-top:.6rem; max-width:100%; } }