.tt{--tt-hour:64px;--tt-row:52px;--tt-band:#f4f4f8;flex-direction:column;gap:20px;display:flex}.tt__head{flex-direction:column;gap:12px;display:flex}.tt__head>*{margin:0}.tt__stat{background:var(--yellow);border:var(--rule);align-self:flex-start;padding:6px 12px;font-size:15px;font-weight:600}.tt__note{color:var(--red-ink);font-weight:500}.tt__scroll{border:var(--rule);box-shadow:8px 8px 0 var(--ink);-webkit-overflow-scrolling:touch;background:#fff;overflow-x:auto}.tt__grid{grid-template-columns:var(--tt-hour) repeat(var(--tt-cols,7), minmax(0, 1fr));min-width:0;display:grid}.tt__row{display:contents}.tt__corner,.tt__day{background:var(--ink);color:#fff;text-align:center;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;padding:10px 4px;font-size:12px;font-weight:600;position:sticky;top:0}.tt__corner{z-index:3;left:0}.tt__hour{z-index:2;min-height:var(--tt-row);border-right:var(--rule);border-top:1px solid var(--grid);font-family:var(--display);background:#fff;justify-content:center;align-items:center;font-size:12px;font-weight:500;display:flex;position:sticky;left:0}.tt__cell{min-height:var(--tt-row);border-top:1px solid var(--grid);border-left:1px solid var(--grid);background:#fff;position:relative}.tt--alt{background:var(--tt-band)}.tt--start{border-top:1.5px solid var(--ink)}.tt__row:first-of-type .tt--start{border-top:0}.tt__free{color:#fff;cursor:pointer;background:0 0;border:1.5px solid #0000;justify-content:center;align-items:center;transition:background .12s,border-color .12s;display:flex;position:absolute;inset:3px}.tt__free:hover{border-color:var(--blue);background:#fff}.tt__free--on,.tt__free--on:hover{background:var(--blue);border-color:var(--blue)}.tt__cell--busy{background:var(--red);color:var(--ink);letter-spacing:.04em;justify-content:center;align-items:center;font-size:12px;font-weight:600;display:flex}.tt__cell--closed{background:repeating-linear-gradient(135deg,#e4e4ea 0 6px,#f1f1f5 6px 12px)}.tt__cell--skeleton:after{content:"";background:linear-gradient(90deg, var(--soft), #fff, var(--soft));background-size:200% 100%;animation:1.4s linear infinite tt-shine;position:absolute;inset:4px}@keyframes tt-shine{to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.tt__cell--skeleton:after{animation:none}}.tt__legend{color:var(--ink-2);flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;font-size:14px;list-style:none;display:flex}.tt__legend li{align-items:center;gap:8px;display:flex}.tt__sw{border:1.5px solid var(--ink);background:#fff;width:18px;height:18px}.tt__sw--on{background:var(--blue);border-color:var(--blue)}.tt__sw--busy{background:var(--red)}.tt__sw--closed{background:repeating-linear-gradient(135deg,#d4d4dc 0 4px,#f1f1f5 4px 8px)}.tt__bar{z-index:5;background:var(--yellow);border:var(--rule);box-shadow:6px 6px 0 var(--ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding:12px 16px;display:flex;position:sticky;bottom:12px}.tt__chosen{flex:240px;margin:0;font-size:15px}.tt__barBtns{gap:8px;display:flex}.tt__form{margin-top:8px;scroll-margin-top:90px}.tt__form p{margin:0}.tt__tabs{display:none}.tt__more{margin:0}.tt--compact .tt__grid{--tt-row:48px}.tt--compact .tt__free{inset:2px}@media (width<=640px){.tt{--tt-hour:64px;--tt-row:48px}.tt__tabs{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.tt__tab{border:1.5px solid var(--ink);min-height:48px;font-family:var(--display);text-transform:uppercase;cursor:pointer;background:#fff;padding:0;font-size:12px;font-weight:600;position:relative}.tt__tab--on{background:var(--ink);color:#fff}.tt__tab small{background:var(--red);min-width:16px;color:var(--ink);font:600 10px/16px var(--ui);text-align:center;padding:0 3px;position:absolute;top:2px;right:3px}.tt:not(.tt--compact) .tt__grid{grid-template-columns:var(--tt-hour) minmax(0, 1fr)}.tt:not(.tt--compact) .tt__day:not(.tt__on),.tt:not(.tt--compact) .tt__cell:not(.tt__on),.tt:not(.tt--compact) .tt__day,.tt:not(.tt--compact) .tt__corner{display:none}.tt__scroll{box-shadow:5px 5px 0 var(--ink)}.tt__free{inset:2px}.tt__bar{padding:10px 12px;bottom:8px}.tt__bar .btn{min-height:44px}}@media (width<=1360px){.tt__bar{margin-right:76px}}
