:root { --bg:#eef2ff; --bg-top:#d1d5ee; --fg:#000; --dim:#707070; --title:#af0a0f; --post:#d6daf0; --post-line:#b7c5d9; --subject:#0f0c5d; --link:#34345c; --yes:#c9e3c3; --yes-line:#789922; --maybe:#f3e1c4; --maybe-line:#c08a2c; --bar-maybe:#c6a22b; --no:#eef2ff; --focus:#1f5fbf; color-scheme:light; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --bg:#1d1f21; --bg-top:#1d1f21; --fg:#c5c8c6; --dim:#a2a5a3; --title:#c5c8c6; --post:#282a2e; --post-line:#51545a; --subject:#b294bb; --link:#81a2be; --yes:#2f3a2b; --yes-line:#b5bd68; --maybe:#3f3626; --maybe-line:#de935f; --bar-maybe:#f0c674; --no:#282a2e; --focus:#81a2be; color-scheme:dark; } }
:root[data-theme="dark"] { --bg:#1d1f21; --bg-top:#1d1f21; --fg:#c5c8c6; --dim:#a2a5a3; --title:#c5c8c6; --post:#282a2e; --post-line:#51545a; --subject:#b294bb; --link:#81a2be; --yes:#2f3a2b; --yes-line:#b5bd68; --maybe:#3f3626; --maybe-line:#de935f; --bar-maybe:#f0c674; --no:#282a2e; --focus:#81a2be; color-scheme:dark; }
* { box-sizing:border-box; } [hidden] { display:none !important; }
body { margin:0; color:var(--fg); background:var(--bg) linear-gradient(var(--bg-top),var(--bg) 200px) no-repeat; font:13px Arial,Helvetica,sans-serif; }
main { max-width:1400px; margin:auto; padding:14px 16px 40px; } header { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-bottom:10px; } h1 { margin:0; color:var(--title); font:bold 24px Tahoma,sans-serif; letter-spacing:-1px; } h1 span { font-size:16px; letter-spacing:0; } h1 a { color:inherit; text-decoration:none; } h2 { font-size:16px; color:var(--subject); margin:10px 0 5px; overflow-wrap:anywhere; } a { color:var(--link); } p { margin:7px 0; } .ctl { margin-left:auto; } .notice,.muted { color:var(--dim); } .notice { font-size:11px; margin:0 0 12px; } #message:not(:empty) { margin:8px 0; color:var(--title); font-weight:bold; } button,input,select { font:12px Arial,sans-serif; color:var(--fg); background:var(--bg); border:1px solid var(--post-line); padding:4px 7px; } button { cursor:pointer; } button:hover { border-color:var(--link); } button[aria-pressed="true"] { background:var(--post); font-weight:bold; outline:1px solid var(--link); } button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--focus); outline-offset:1px; } fieldset { border:1px solid var(--post-line); padding:8px; margin:0 0 10px; } legend { color:var(--subject); font-weight:bold; padding:0 4px; } .fields,.toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:8px 12px; } .fields label { display:flex; flex-direction:column; gap:3px; } input[type="text"] { width:240px; max-width:100%; } input[type="time"] { width:115px; } .dates { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; } .dates label { display:flex; align-items:center; gap:2px; padding:3px 5px; background:var(--post); border:1px solid var(--post-line); white-space:nowrap; } .dates input { margin:0; } .help { color:var(--dim); font-size:11px; } .section { margin:12px 0 8px; } .toolbar { align-items:center; margin:8px 0; } .toolbar .spacer { flex:1; } .brush { display:flex; gap:4px; align-items:center; flex-wrap:wrap; } .brush button[data-value="1"][aria-pressed="true"] { background:var(--yes); border-color:var(--yes-line); } .brush button[data-value="2"][aria-pressed="true"] { background:var(--maybe); border-color:var(--maybe-line); } .grid-wrap { border:1px solid var(--post-line); overflow:auto; max-height:65vh; background:var(--post); } .grid { display:flex; width:max-content; min-width:100%; align-items:stretch; } .day { width:132px; flex:1 0 132px; border-right:1px solid var(--post-line); } .day:last-child { border-right:0; } .day-head { position:sticky; top:0; z-index:2; min-height:32px; padding:6px; color:var(--subject); background:var(--post); border-bottom:1px solid var(--post-line); font-weight:bold; } .cell { width:100%; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:3px; border:0; border-bottom:1px solid var(--post-line); border-left:3px solid transparent; padding:5px 7px; text-align:left; font-variant-numeric:tabular-nums; } .cell.yes { background:var(--yes); border-left-color:var(--yes-line); } .cell.maybe { background:var(--maybe); border-left-color:var(--maybe-line); } .cell.no { background:var(--no); } .cell .count { font-size:11px; font-weight:bold; white-space:nowrap; } .cell .time { white-space:nowrap; } .grid-wrap.paint { touch-action:none; user-select:none; } .legend { display:flex; flex-wrap:wrap; gap:6px 15px; font-size:11px; margin:7px 0; } .swatch { display:inline-block; width:11px; height:11px; border:1px solid; vertical-align:-1px; } .swatch.yes { background:var(--yes); border-color:var(--yes-line); } .swatch.maybe { background:var(--maybe); border-color:var(--maybe-line); } .swatch.no { background:var(--no); border-color:var(--post-line); } .error { color:var(--title); } .actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0; } .actions a { margin-left:4px; } @media (max-width:600px) { main { padding:10px 8px 28px; } h1 { font-size:21px; } .day { width:120px; flex-basis:120px; } .grid-wrap { max-height:60vh; } button,input,select { min-height:32px; } .cell { min-height:38px; } }


.picker-section { margin-top:14px; min-width:0; }
.picker-section h3 { color:var(--subject); font-size:13px; margin:0 0 4px; }
fieldset, form { min-width:0; }
.day { width:116px; flex-basis:116px; }
.cell { position:relative; display:block; min-height:30px; padding:6px 7px; border:0; border-bottom:1px solid var(--post-line); background:var(--no); overflow:hidden; }
.cell .time { position:relative; z-index:1; font-size:12px; color:var(--fg); text-shadow:-1px -1px 0 var(--halo),1px -1px 0 var(--halo),-1px 1px 0 var(--halo),1px 1px 0 var(--halo),0 -1px 0 var(--halo),0 1px 0 var(--halo),-1px 0 0 var(--halo),1px 0 0 var(--halo); }
.cell-fill { position:absolute; inset:0; display:flex; pointer-events:none; }
.seg { height:100%; flex:none; }
.seg.yes { background:var(--fill-yes); }
.seg.yes.own { background:var(--fill-yes-own); }
.seg.maybe { background:var(--fill-maybe); }
.seg.maybe.own { background:var(--fill-maybe-own); }
.cell::after { content:""; position:absolute; inset:0; border:2px solid transparent; pointer-events:none; }
.cell.mine-yes::after { border-color:var(--yes-line); }
.cell.mine-maybe::after { border-color:var(--maybe-line); }
.cell.unsaved::after { border-style:dashed; }
.cell.unsaved:not(.mine-yes):not(.mine-maybe)::after { border-color:var(--dim); }
.swatch.yes { background:var(--fill-yes); border-color:var(--yes-line); }
.swatch.yes.own { background:var(--fill-yes-own); }
.swatch.maybe { background:var(--fill-maybe); border-color:var(--maybe-line); }
.swatch.maybe.own { background:var(--fill-maybe-own); }
:root { --fill-yes:#a9d49a; --fill-yes-own:#5aa83a; --fill-maybe:rgb(217 165 32 / .28); --fill-maybe-own:rgb(217 165 32 / .75); --halo:#fff; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --fill-yes:#4b5e34; --fill-yes-own:#88a83c; --fill-maybe:rgb(196 180 138 / .26); --fill-maybe-own:rgb(214 186 112 / .8); --halo:#000; } }
:root[data-theme="dark"] { --fill-yes:#4b5e34; --fill-yes-own:#88a83c; --fill-maybe:rgb(196 180 138 / .26); --fill-maybe-own:rgb(214 186 112 / .8); --halo:#000; }
@media (max-width:600px) { .day { width:104px; flex-basis:104px; } .cell { min-height:36px; } .ctl { margin-left:0; } }
.banner { padding:6px 9px; border:1px solid var(--post-line); background:var(--post); font-weight:bold; }
.banner.chosen { border-color:var(--yes-line); }
.banner.closed { color:var(--dim); }
.cell.chosen::before { content:"★"; position:absolute; right:5px; top:50%; transform:translateY(-50%); z-index:1; color:var(--title); }
.grid-wrap.readonly .cell { cursor:default; }
fieldset.host { margin-top:16px; } fieldset.host select { max-width:100%; }