/* Structure shared by every rendition. Each page sets the look with its own tokens. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:14px/1.4 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
button,select{font:inherit;color:inherit;cursor:pointer}
.bar{display:flex;align-items:center;gap:12px;padding:0 var(--pad);height:var(--bar,64px);flex:none}
.bar .grow{flex:1}
.cal-wrap{flex:1;min-height:0;display:flex;padding:0 var(--pad) var(--pad);overflow-x:auto}
.cal{flex:1;min-width:640px;display:flex;flex-direction:column;min-height:0}
.c-head{display:grid;grid-template-columns:var(--gut,56px) repeat(var(--days),1fr);flex:none}
.c-body{flex:1;min-height:0;display:grid;grid-template-columns:var(--gut,56px) 1fr;position:relative}
.c-gut{position:relative}
.c-hour{position:absolute;right:10px;transform:translateY(-50%);font-size:11px;color:var(--muted);white-space:nowrap}
.c-cols{display:grid;grid-template-columns:repeat(var(--days),1fr);position:relative;
  background-image:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px calc(100% / var(--rows)))}
.c-col{position:relative;border-left:1px solid var(--line)}
.c-col:last-child{border-right:1px solid var(--line)}
.c-busy,.c-free,.c-past{position:absolute;left:0;right:0}
.c-free span,.c-busy span{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-now{position:absolute;left:-4px;right:0;height:2px;background:var(--now,#e5484d);z-index:3}
.c-now::before{content:"";position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:inherit}
.c-col--cells{display:grid;grid-template-rows:repeat(var(--cells),1fr)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:.2s;z-index:10;padding:10px 16px;border-radius:10px;font-size:13px;background:var(--toast-bg,#111);color:var(--toast-ink,#fff)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:700px){:root{--pad:16px}.hide-sm{display:none!important}}