@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url(assets/gloock.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/hanken-grotesk.woff2) format('woff2')}
:root{
  --ground:#f4f8fc;--ink:#101943;--muted:#4b6086;--blue:#0754ec;--blue-press:#0643bd;
  --line:#dbe5f1;--line-soft:#ebf1f8;--surface:#fff;
  --ease:cubic-bezier(.2,.8,.2,1);
  --lift-1:0 1px 2px #1019430f,0 6px 16px #1019430a;
  --lift-2:0 2px 4px #10194312,0 14px 30px #10194317;
  --serif:'Gloock',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --blocked:#f1f4f8;--blocked-line:#e2e8f0;
  --topbar:60px;--toolbar:60px;--gutter:76px;--head:62px;
}
/* Six people, six colour families from the Optimal workshop palette. */
.p0{--fill:#a8dcd8;--edge:#4fa9a6;--text:#044a4e}
.p1{--fill:#cfc3f2;--edge:#9480d6;--text:#3f2d78}
.p2{--fill:#efd99c;--edge:#c9a347;--text:#5a430c}
.p3{--fill:#bcd9fa;--edge:#6aa1e0;--text:#173f7a}
.p4{--fill:#f4c0cb;--edge:#d77890;--text:#74192f}
.p5{--fill:#c5e5bd;--edge:#62a456;--text:#24561d}

*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;height:100vh;overflow:hidden;background:var(--ground);color:var(--ink);font:15px/1.45 var(--sans);display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
::selection{background:#bcd9fa;color:var(--ink)}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
[hidden]{display:none!important}

/* Header: logo, title, participant, Submit. */
.topbar{height:var(--topbar);flex:none;display:flex;align-items:center;gap:22px;padding:0 28px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;height:30px;padding-right:22px;border-right:1px solid var(--line)}
.brand img{width:96px;height:32px;object-fit:contain}
.topbar h1{margin:0;font:400 24px/1 var(--serif);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-end{margin-left:auto;display:flex;align-items:center;gap:18px;flex:none}
.identity{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 5px;border:0;border-radius:999px;background:none;font-weight:500;transition:background-color 140ms var(--ease)}
.identity:hover{background:var(--line-soft)}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--fill);color:var(--text);box-shadow:inset 0 0 0 1px var(--edge);font-size:13px;font-weight:600}
.primary-button{position:relative;min-width:116px;height:40px;padding:0 20px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background-color 160ms var(--ease),transform 90ms var(--ease),opacity 160ms var(--ease)}
.primary-button:hover:not(:disabled){background:var(--blue-press)}
.primary-button:active:not(:disabled){transform:translateY(1px)}
.primary-button:disabled{background:#e3eaf4;color:#4b6086;cursor:default}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid #ffffff55;border-top-color:#fff;animation:spin 700ms linear infinite}

/* Toolbar: the time picker on the left, the colour key on the right. */
main{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 28px 20px;position:relative}
.toolbar{height:var(--toolbar);flex:none;display:flex;align-items:center;justify-content:space-between;gap:24px}
.picker{display:flex;align-items:center;gap:8px}
.picker .dash{color:var(--muted);padding:0 2px}
.select{position:relative}
.select select{appearance:none;height:38px;padding:0 34px 0 12px;border:1px solid #c9d7ea;border-radius:8px;background:var(--surface);cursor:pointer;transition:border-color 140ms var(--ease)}
.select select:hover{border-color:#8fa9d0}
.select::after{content:'';position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.secondary-button{height:38px;padding:0 16px;border:1px solid var(--ink);border-radius:8px;background:var(--surface);font-weight:600;transition:background-color 140ms var(--ease),color 140ms var(--ease)}
.secondary-button:hover{background:var(--ink);color:#fff}
.key{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0;font-size:14px}
.key li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.key i{width:12px;height:12px;border-radius:3px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--edge)}
.key .me{font-weight:600}

/* The board fills the rest of the window; rows share the height. */
.board{flex:1;min-height:calc(var(--head) + 20 * 24px);display:grid;grid-template-columns:var(--gutter) repeat(5,minmax(0,1fr));grid-template-rows:var(--head) repeat(20,minmax(24px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--lift-1);overflow:hidden;position:relative;user-select:none;-webkit-user-select:none;touch-action:none}
.corner{grid-row:1;grid-column:1;display:flex;flex-direction:column;justify-content:flex-end;padding:0 10px 10px 16px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.3;color:var(--muted)}
.corner strong{font-weight:600;color:var(--ink)}
.day-head{grid-row:1;display:flex;align-items:flex-end;gap:10px;padding:0 16px 9px;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.day-head .num{font:400 34px/.9 var(--serif)}
.day-head .dow{display:flex;flex-direction:column;font-size:13px;line-height:1.25;color:var(--muted);padding-bottom:1px}
.day-head .dow b{font-weight:600;color:var(--ink)}
.day-head.is-blocked{background:var(--blocked);color:#7f8ea8}
.day-head.is-blocked .num,.day-head.is-blocked .dow b{color:#7f8ea8}

.time{grid-column:1;position:relative;font-size:12px;color:var(--muted)}
.time span{position:absolute;top:-8px;right:12px;background:var(--surface);padding:0 2px;line-height:16px}
.time.first span{top:5px}

.blocked{grid-row:2 / span 20;border-left:1px solid var(--line);background:var(--blocked) repeating-linear-gradient(135deg,transparent 0 11px,var(--blocked-line) 11px 12px);display:grid;place-items:center;cursor:not-allowed}
.blocked span{padding:5px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;color:#6b7d9b}

/* A slot holds six lanes, one per person, like side-by-side Outlook events. */
.slot{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:3px;padding:0 8px;border-left:1px solid var(--line);border-top:1px dotted var(--line);cursor:pointer}
.slot.hour{border-top:1px solid var(--line-soft)}
.slot::after{content:'';position:absolute;inset:-1px 0 0;pointer-events:none;background:#10194300;transition:background-color 120ms var(--ease)}
.slot:hover::after,.slot.is-cursor::after{background:#1019430a}
.slot.is-cursor::after{box-shadow:inset 0 0 0 2px var(--blue)}
.board.is-dragging .slot:hover::after{background:none}

.lane{position:relative;margin-top:-1px;background:var(--fill);border-left:1px solid var(--edge);border-right:1px solid var(--edge);opacity:0;transform:scaleX(.55);transition:opacity 120ms var(--ease),transform 160ms var(--ease);pointer-events:none;overflow:hidden}
.lane.on{opacity:1;transform:none}
.lane.start{margin-top:3px;border-top:1px solid var(--edge);border-radius:6px 6px 0 0}
/* The name may wrap to a second line, so the first block lets it hang below. */
.lane.start{overflow:visible}
.lane.end{margin-bottom:3px;border-bottom:1px solid var(--edge);border-radius:0 0 6px 6px}
.lane.start.end{border-radius:6px}
.lane-label{position:absolute;z-index:1;left:0;right:0;top:3px;padding:0 3px;font-size:11px;font-weight:600;line-height:13px;color:var(--text);overflow:hidden}
.lane.mine.on{border-width:1.5px;border-color:var(--text)}

/* One-off reveals: blocks sweep down from the top, lane by lane. */
.lane.sweep{animation:sweep 320ms var(--ease) both;animation-delay:var(--d,0ms)}

/* Everyone free (results page). */
.slot.all::before{content:'';position:absolute;inset:-1px 3px 0;box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink);pointer-events:none;z-index:2}
.slot.all.start::before{top:1px;box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink),inset 0 2px 0 var(--ink);border-radius:9px 9px 0 0}
.slot.all.end::before{bottom:1px;box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink),inset 0 -2px 0 var(--ink);border-radius:0 0 9px 9px}
.slot.all.start.end::before{box-shadow:inset 0 0 0 2px var(--ink);border-radius:9px}
.all-pill{position:absolute;z-index:3;right:12px;bottom:-9px;display:flex;align-items:center;gap:5px;height:20px;padding:0 9px 0 7px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;white-space:nowrap}
.all-pill svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.board.revealing .slot.all::before,.board.revealing .all-pill{opacity:0}
.slot.all::before,.all-pill{transition:opacity 260ms var(--ease)}
.board.results .slot{cursor:default}

/* Hover card: who is free in this slot. */
.hovercard{position:absolute;z-index:6;min-width:190px;padding:10px 14px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--lift-2);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity 140ms var(--ease),transform 180ms var(--ease)}
.hovercard.is-open{opacity:1;transform:none}
.hovercard .when{font-size:12px;color:var(--muted);margin:0 0 7px}
.hovercard ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
.hovercard li{display:flex;align-items:center;gap:8px}
.hovercard li i{width:10px;height:10px;border-radius:3px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--edge)}

/* First-visit hint. */
.hint{position:absolute;left:50%;bottom:38px;z-index:5;display:flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;background:var(--ink);color:#fff;border-radius:999px;font-size:14px;box-shadow:var(--lift-2);transform:translateX(-50%);transition:opacity 220ms var(--ease),transform 280ms var(--ease);pointer-events:none}
.hint svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hint.is-gone{opacity:0;transform:translate(-50%,8px)}

/* Name dialog. */
dialog{width:min(420px,calc(100% - 32px));border:0;border-radius:14px;padding:30px 30px 26px;color:var(--ink);background:var(--surface);box-shadow:var(--lift-2),0 24px 60px #13284826}
dialog::backdrop{background:#15284c38;backdrop-filter:blur(3px)}
dialog[open]{animation:settle 240ms var(--ease)}
dialog label{display:block;font:400 30px/1.1 var(--serif);margin:0 0 18px}
dialog .select select{width:100%;height:46px;padding:0 40px 0 14px;font-size:17px}
dialog .select select:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.dialog-actions{display:flex;justify-content:flex-end;margin-top:18px}

/* Thank-you panel over the saved grid. */
.thanks{position:absolute;inset:var(--toolbar) 28px 20px;z-index:7;display:grid;place-items:center;background:#f4f8fcb8;backdrop-filter:blur(2px);border-radius:12px;animation:fade 200ms var(--ease)}
.thanks-card{min-width:360px;padding:30px 34px 22px;background:var(--surface);border-radius:14px;box-shadow:var(--lift-2),0 24px 60px #13284820;animation:settle 280ms var(--ease)}
.thanks-card svg{width:40px;height:40px;display:block;margin-bottom:14px}
.thanks-card .tick{stroke-dasharray:24;stroke-dashoffset:24;animation:draw 360ms 180ms var(--ease) forwards}
.thanks-card h2{margin:0 0 6px;font:400 32px/1.1 var(--serif)}
.thanks-card p{margin:0 0 6px;color:var(--muted)}
.text-button{border:0;background:none;padding:10px 0;min-height:44px;color:var(--blue);font-weight:500}
.text-button:hover{text-decoration:underline;text-underline-offset:4px}

@keyframes sweep{from{clip-path:inset(0 0 100% 0);opacity:1;transform:none}to{clip-path:inset(0);opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.thanks-card .tick{stroke-dashoffset:0}}