:root{color-scheme:light;--bg:oklch(1 0 0);--ink:oklch(.2 0 0);--muted:oklch(.45 0 0);--line:oklch(.87 0 0);--soft:oklch(.97 0 0);--accent:oklch(.45 .16 255);--pale:oklch(.94 .03 255);--warn:oklch(.43 .09 65);--success:oklch(.43 .14 145);--success-bg:oklch(.94 .075 145)}
*{box-sizing:border-box}
body{margin:0;background:var(--soft);color:var(--ink);font:15px/1.4 system-ui,sans-serif}
button,select{font:inherit;color:inherit}
button{cursor:pointer;background:var(--bg);border:1px solid var(--line);border-radius:10px;min-height:44px;touch-action:manipulation}
button:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.35;cursor:default}
.app{--ink:oklch(.25 .035 255);--muted:oklch(.46 .025 255);--line:oklch(.89 .018 255);--soft:oklch(.975 .009 255);--pale:oklch(.94 .035 255);width:100%;max-width:1200px;min-height:100dvh;margin:auto;background:var(--bg);display:flex;flex-direction:column}
.app header{padding:4px 12px 0;flex-shrink:0}
.week-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;text-align:center}
.week-nav button{width:44px;background:var(--soft);border:0;border-radius:50%;font-size:26px;color:var(--accent)}
.week-nav strong{font-size:15px;font-weight:700;letter-spacing:-.02em}
.week-nav small{display:block;font-size:11px;color:var(--muted);line-height:1.3}
#days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:4px;background:var(--soft);border-radius:15px}
#days button{border:0;border-radius:11px;background:transparent;color:var(--muted);padding:2px 0;font-size:12px;line-height:1.4}
#days b{display:block;color:var(--ink);font-size:20px;font-weight:650;font-variant-numeric:tabular-nums}
#days [aria-current=date]{background:var(--accent);color:var(--bg)}
#days [aria-current=date] b{color:inherit}
#days button.complete,#days button.complete b{color:var(--success)}
#days button.complete[aria-current=date]{background:var(--success-bg);box-shadow:inset 0 0 0 2px var(--success)}
.app main{padding:5px 12px;min-width:0}
#lanes{display:flex;flex-direction:column;gap:6px}
.lane{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:3px 8px;min-height:88px;background:var(--soft)}
.lane-title{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px}
.lane-title strong{font-size:13px;font-weight:650;line-height:1.3}
.lane-title small{font-size:11px;color:var(--muted);line-height:1.4}
.count{display:flex;flex-direction:column;align-items:center;line-height:1.1;font-size:12px;color:var(--muted)}
.count b{font-size:26px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--warn);margin:2px 0}
.lane.complete{background:var(--success-bg);border-color:oklch(.76 .14 145)}
.lane.complete .lane-title,.lane.complete .lane-title small,.lane.complete .count,.lane.complete .count b,.lane.complete .add{color:var(--success)}
.lane.over{background:var(--pale);outline:2px solid var(--accent);outline-offset:-2px}
.chips{position:relative;isolation:isolate;align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:6px;min-width:0;min-height:44px}
.chip{position:relative;z-index:1;display:flex;align-items:center;max-width:100%;border:1px solid var(--line);background:var(--bg);border-radius:10px}
.drag-name{touch-action:none;user-select:none;-webkit-user-select:none;border:0;background:transparent;padding:8px;font-size:13px;min-height:44px}
.chip .drag-name{display:flex;align-items:center;gap:8px;min-width:0;text-align:left;font-weight:550}
.car-name{min-width:0;overflow-wrap:anywhere;font-size:14px;font-weight:600}
.car-seats{font-size:20px;color:var(--accent);font-weight:750;font-variant-numeric:tabular-nums}
.remove{flex-shrink:0;border:0;border-radius:9px;background:transparent;min-height:44px;width:44px;padding:0;color:var(--muted);font-size:20px}
.add{overflow:hidden;position:absolute;inset:0;z-index:0;min-width:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--accent);font-size:80px;font-weight:300;line-height:1;opacity:.18}
.add:disabled{opacity:.12}
.add:focus-visible{opacity:1}
.add:not(:disabled):hover{opacity:.3}
.roster{display:flex;flex-direction:column;min-width:0;padding:0 12px calc(8px + env(safe-area-inset-bottom));background:var(--bg)}
.roster-title{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;min-height:30px;padding:0 2px}
.roster-title span{font-size:11px;color:var(--muted)}
.roster-title strong{font-size:13px}
#families{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-content:start;padding:2px}
.family{display:flex;align-items:center;border:1px solid var(--line);background:var(--bg);border-radius:10px;min-width:0}
.family .drag-name{flex:1;text-align:left;min-width:0;padding:8px 6px;font-size:15px;font-weight:600;min-height:44px;overflow-wrap:anywhere}
.family.assigned{border-color:oklch(.69 .12 255);background:var(--pale);color:var(--accent)}
.family.selected{outline:2px solid var(--accent);outline-offset:-2px;background:var(--pale)}
.family select{background:transparent;border:0;border-left:1px solid var(--line);border-radius:0 9px 9px 0;font-size:22px;font-weight:750;min-height:44px;width:44px;flex-shrink:0;color:var(--accent)}
.ghost{position:fixed;z-index:5;pointer-events:none;background:var(--accent);color:var(--bg);padding:12px;border-radius:10px;font-size:14px;transform:translate(-50%,-50%)}
@media(hover:hover){.app button:not(:disabled):hover{filter:brightness(.96)}}
.app button:active:not(:disabled){transform:translateY(1px)}
@media(prefers-reduced-motion:no-preference){.lane,.family,#days button,.add{transition:background-color 160ms ease-out,border-color 160ms ease-out}}

@media(max-width:350px){.lane{grid-template-columns:88px minmax(0,1fr);gap:6px;padding-inline:6px}.family .drag-name{padding-inline:5px;font-size:14px}.chip .drag-name{gap:5px;padding-inline:5px;font-size:12px}.roster-title span{font-size:10px}}
#save-status{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(calc(100% - 16px),464px);z-index:6;background:var(--ink);color:var(--bg);border-radius:10px;padding:8px 8px 8px 14px;font-size:14px}#save-status:not([hidden]){display:flex;align-items:center;gap:8px}#save-message{flex:1}#dismiss-error{flex-shrink:0;width:44px;border:0;background:transparent;color:inherit;font-size:24px}
a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.settings{max-width:480px;min-height:100dvh;margin:auto;padding:12px 18px calc(20px + env(safe-area-inset-bottom));background:var(--bg)}.settings-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.settings-nav a{color:var(--accent);padding-block:12px}.settings h1{font-size:18px;margin:0}.settings fieldset{margin:0 0 14px;padding:8px 0 14px;border:0;border-bottom:1px solid var(--line);min-width:0}.settings legend{font-weight:650;padding:0}.family-fields{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px}.family-fields label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}.family-fields select,.family-fields input{min-width:0;width:100%;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:16px system-ui}.save-families{position:sticky;bottom:12px;width:100%;background:var(--accent);color:var(--bg);border:0}

#unavailable{margin-top:6px}.lane.away{--absent-ink:oklch(.43 .17 25);min-height:60px;background:oklch(.96 .025 25);border:1px dashed oklch(.72 .13 25)}.away .lane-title strong{font-size:12px;color:var(--absent-ink)}.away .add,.away .chip,.away .remove{color:var(--absent-ink)}.away .chip{border-color:oklch(.82 .08 25)}.family.absent{background:oklch(.96 .025 25);border:1px dashed oklch(.72 .13 25);color:oklch(.43 .17 25)}.family.absent select{color:inherit}

@media(min-width:520px){#families{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:760px){
 .app{display:grid;grid-template-columns:minmax(300px,1fr) minmax(360px,1.25fr);grid-template-rows:auto 1fr;align-content:start;padding:12px;column-gap:8px}
 .app header{grid-column:1/-1;padding:0 8px 12px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(340px,1.25fr);gap:24px;align-items:center}
 .week-nav{margin:0}.week-nav strong{font-size:18px}#days button{padding-block:6px}
 .app main{padding:0 8px 12px}#lanes{gap:10px}.lane{min-height:124px;padding:10px;grid-template-columns:104px minmax(0,1fr)}.count b{font-size:36px}
 .roster{padding:0 8px 12px}.roster-title{min-height:30px;margin-bottom:6px}#families{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.family .drag-name,.family select{min-height:48px}.family .drag-name{font-size:16px}
 #unavailable{margin-top:12px}.lane.away{min-height:80px}
}
@media(min-width:1100px){#families{grid-template-columns:repeat(3,minmax(0,1fr))}}