/* Calendar (T3): day view, hour grid with now-line, filters bar, move dialog. Loaded after styles.css; uses its theme tokens only. */

/* toolbar */
.cal2-title{min-width:9em;text-align:center;font-variant-numeric:tabular-nums}
.cal-filters select.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset;background:var(--brand-l);color:var(--brand-d)}
.cal2-fbar{display:none}
.cal2-fbar.on{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .8rem;padding:.45rem .5rem .45rem .8rem;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));background:var(--brand-l);color:var(--brand-d);border-radius:12px;font-size:.9rem;font-weight:550;animation:cal2In .26s var(--ease) both}
.cal2-fbar .btn{margin-left:auto}

/* month: the day number opens the day view */
.cal .cal2-n{border:0;background:transparent;color:inherit;font:inherit;font-size:.8rem;font-weight:650;cursor:pointer;padding:0 .3em;border-radius:99px;min-width:1.7em;min-height:1.5em;line-height:1.5em}
.cal .cal2-n:hover{background:var(--hover)}.cal .day.today .cal2-n:hover{background:var(--brand-d)}

/* hour grid (week + day). The scroll container owns both scroll axes, so the page never scrolls sideways. */
.tg-scroll{position:relative;max-width:100%;max-height:min(72vh,780px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:inset 0 1px 0 var(--hl),var(--shadow-1);scrollbar-gutter:stable}
.cal.tgrid,.cal.tgrid.week{display:grid;grid-template-columns:52px repeat(var(--cols),minmax(0,1fr));grid-template-rows:auto calc(24 * var(--hour));border:0;border-radius:0;box-shadow:none;overflow:visible;background:transparent;min-width:100%}
.cal.tgrid.week{min-width:max(100%,calc(52px + var(--cols) * 104px))}
.tg-corner,.tg-dh{position:sticky;top:0;z-index:7;background:var(--card-2);border-bottom:1px solid var(--line)}
.tg-corner{left:0;z-index:8;display:flex;align-items:flex-end;justify-content:center;padding:.3rem .2rem;font-size:.66rem;color:var(--muted);text-align:center;line-height:1.1;border-right:1px solid var(--line)}
.tg-corner span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tg-dh{border-left:1px solid var(--line);padding:3px}
.tg-dbtn{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.74rem;font-weight:650;letter-spacing:.02em;padding:.25rem .2rem;border-radius:10px;cursor:pointer;min-height:44px;transition:background var(--t-fast),color var(--t-fast)}
.tg-dbtn.static{cursor:default}
.tg-dbtn b{display:inline-block;text-align:center;font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums;min-width:1.8em;padding:0 .25em;border-radius:99px;line-height:1.6}
button.tg-dbtn:hover{background:var(--hover);color:var(--ink)}
.tg-dh.today .tg-dbtn{color:var(--brand-d)}.tg-dh.today .tg-dbtn b{background:var(--brand);color:var(--on-brand)}
.tg-dh.past .tg-dbtn b{color:var(--muted)}
.tg-gutter{position:sticky;left:0;z-index:6;background:var(--card);border-right:1px solid var(--line)}
.tg-hl{height:var(--hour);position:relative;font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;padding-right:6px}
.tg-hl{transform:translateY(-.55em)}
.tcol{position:relative;border-left:1px solid var(--line);min-width:0;
  background-image:linear-gradient(to bottom,var(--line) 1px,transparent 1px),linear-gradient(to bottom,transparent calc(var(--hour) / 2),color-mix(in srgb,var(--line) 45%,transparent) calc(var(--hour) / 2),color-mix(in srgb,var(--line) 45%,transparent) calc(var(--hour) / 2 + 1px),transparent calc(var(--hour) / 2 + 1px));
  background-size:100% var(--hour);transition:background-color var(--t-fast)}
.tcol.past{background-color:color-mix(in srgb,var(--card-2) 70%,transparent)}
.tcol.today{background-color:color-mix(in srgb,var(--brand) 3%,transparent)}
.tcol.over{background-color:color-mix(in srgb,var(--brand) 7%,transparent)}
.tg-pastfill{position:absolute;left:0;right:0;top:0;background:color-mix(in srgb,var(--card-2) 70%,transparent);pointer-events:none}
.tg-gap{position:absolute;left:0;right:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0 .3rem;pointer-events:none;color:var(--muted);font-size:.66rem;text-align:center;line-height:1.15;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--line-2) 60%,transparent) 0 6px,transparent 6px 12px)}
.tg-gap span{background:var(--card);border-radius:6px;padding:1px 4px;overflow:hidden;max-height:100%}

/* chips in the grid */
.chip.tchip{position:absolute;z-index:2;margin:0;width:auto;display:flex;align-items:center;padding:3px 6px;font-size:.74rem;line-height:1.25;box-shadow:0 0 0 1px var(--card);min-height:0}
.chip.tchip b{flex:none}
.chip.tchip:focus-visible,.cal .chip:focus-visible{outline:2px solid var(--brand);outline-offset:1px;z-index:5}
.chip.tchip.dragging{opacity:.4}

/* drop indicator: snapped time while dragging; red when the slot is in the past */
.tg-ind{position:absolute;left:2px;right:2px;z-index:5;height:calc(var(--hour) / 2 - 2px);border:2px dashed var(--brand);border-radius:8px;background:color-mix(in srgb,var(--brand) 12%,transparent);pointer-events:none;transition:top .08s linear}
.tg-ind span{position:absolute;left:4px;top:-1px;font-size:.7rem;font-weight:700;color:var(--brand-d);font-variant-numeric:tabular-nums}
.tg-ind.bad{border-color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)}.tg-ind.bad span{color:var(--red)}

/* now-line (workspace time zone): strong in today's column, faint across the other days of the week */
.tg-now{position:absolute;left:0;right:0;height:0;border-top:1px dashed color-mix(in srgb,var(--red) 35%,transparent);z-index:3;pointer-events:none}
.tg-now.on{border-top:2px solid var(--red)}
.tg-now.on::before{content:"";position:absolute;left:1px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 22%,transparent);animation:cal2Beat 2.4s var(--ease) infinite}

/* move dialog */
.cal2-mv-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.cal2-mv-row label{display:grid;gap:.3rem;font-weight:600;font-size:.88rem}
.cal2-mv-row input{width:100%;border:1px solid var(--line-2);border-radius:var(--r-s);padding:.55em .8em;background:var(--field);min-height:44px;color:var(--ink);font:inherit}
.cal2-mv-row input:focus{outline:2px solid var(--brand);outline-offset:1px}

@keyframes cal2In{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes cal2Beat{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 22%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--red) 8%,transparent)}}

@media(max-width:860px){
  .cal.tgrid.week .tg-dh{display:block}
  .tg-scroll{max-height:70vh}
}
@media(max-width:640px){
  .cal2-seg .ico{display:none}
  .cal2-seg button{padding:.35em .7em}
  .cal2 .page-head>.row{width:100%;justify-content:space-between}
  .cal-filters select{flex:1 1 calc(50% - .7rem);max-width:none;min-width:0}
  .cal-filters input[type=search]{flex-basis:100%;max-width:none}
  .cal.tgrid{grid-template-columns:44px repeat(var(--cols),minmax(0,1fr))}
  .tg-corner{font-size:.56rem;padding:.3rem 0}
  .cal.tgrid.week{min-width:calc(44px + var(--cols) * 92px)}
  .chip.tchip{font-size:.7rem;padding:2px 4px}
  .cal2-mv-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .cal2-fbar.on,.tg-now.on::before{animation:none!important}
  .tg-ind,.tcol,.tg-dbtn{transition:none!important}
}