/* WolfAssistant 3.3 — calendar (module A). Tokens come from app.css; logical properties for RTL. */
.cl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cl-bar h2{font:600 1.05rem var(--disp);margin:0;flex:1;min-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-bar .nav{display:inline-flex;gap:4px}
.cl-bar .nav .iconbtn{width:38px;height:38px;border-radius:10px}
.cl-seg button{padding:7px 11px}
.cl-quick{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.cl-quick input.f{flex:1;min-width:0}
.cl-legend{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.cl-legend .mini{gap:7px}.cl-legend .mini.off{opacity:.45;text-decoration:line-through}
.cl-dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--blue));flex:none}
.cl-hint{font-size:.78rem;color:var(--muted);margin:8px 0 0}
/* ---- month ---- */
.cl-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;background:transparent;user-select:none;-webkit-user-select:none}
.cl-dow{font:600 .72rem var(--disp);color:var(--muted);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:.04em}
.cl-cell{min-height:86px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:4px;display:flex;flex-direction:column;gap:2px;cursor:pointer;transition:border .12s,background .12s;overflow:hidden;position:relative}
.cl-cell.out{opacity:.5}.cl-cell.off{background:var(--surface2)}.cl-cell.today{border-color:var(--blue)}
.cl-cell.over{background:var(--frost);border-color:var(--blue);box-shadow:0 0 0 2px rgba(10,92,255,.25) inset}
.cl-num{font:600 .8rem var(--disp);color:var(--ink2);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;align-self:flex-start}
.cl-cell.today .cl-num{background:var(--grad);color:#fff}
.cl-ev{display:flex;align-items:center;gap:4px;font-size:.72rem;line-height:1.25;padding:2px 5px;border-radius:6px;background:var(--surface2);color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-inline-start:3px solid var(--c,var(--blue));cursor:pointer;touch-action:pan-y}
.cl-ev.allday{background:color-mix(in srgb,var(--c,var(--blue)) 18%,var(--surface2))}
.cl-ev.ro{opacity:.85;border-inline-start-style:dashed}
.cl-ev .tm{color:var(--muted);font-weight:600;flex:none}
.cl-ev .tt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cl-ev.dragging{opacity:.4}
.cl-more{font-size:.7rem;color:var(--blue);font-weight:600;padding:0 5px;text-align:start}
.cl-ghost{position:fixed;z-index:200;pointer-events:none;padding:6px 10px;border-radius:10px;background:var(--paper);border:1px solid var(--blue);box-shadow:var(--sh2);font-size:.8rem;font-weight:600;max-width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform:translate(-50%,-120%)}
@media(max-width:900px){
  .cl-cell{min-height:58px;padding:3px;border-radius:9px;gap:1px}
  .cl-cell .cl-ev .tt,.cl-cell .cl-ev .tm{display:none}
  .cl-cell .cl-ev{padding:0;height:6px;border-inline-start:0;border-radius:3px;background:var(--c,var(--blue));margin:1px 2px}
  .cl-cell .cl-more{font-size:.62rem;padding:0 2px}
  .cl-num{width:24px;height:24px;font-size:.76rem}
}
/* ---- week / day time grid ---- */
.cl-grid{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.cl-ghead{display:grid;grid-template-columns:48px repeat(var(--days,7),minmax(0,1fr));border-bottom:1px solid var(--line)}
.cl-ghead .h{padding:8px 4px;text-align:center;font:600 .74rem var(--disp);color:var(--muted);cursor:pointer;border-inline-start:1px solid var(--line2)}
.cl-ghead .h b{display:block;font-size:1rem;color:var(--ink);margin-top:2px}
.cl-ghead .h.today b{color:var(--blue)}.cl-ghead .h.off{background:var(--surface2)}
.cl-allday{display:grid;grid-template-columns:48px repeat(var(--days,7),minmax(0,1fr));border-bottom:1px solid var(--line);min-height:26px}
.cl-allday>div{padding:3px;display:flex;flex-direction:column;gap:2px;border-inline-start:1px solid var(--line2);min-width:0}
.cl-allday>div:first-child{border:0;font-size:.66rem;color:var(--muted);justify-content:center;align-items:center}
.cl-gbody{height:var(--h,560px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;position:relative}
.cl-ginner{display:grid;grid-template-columns:48px repeat(var(--days,7),minmax(0,1fr));height:var(--ih,780px)}
.cl-hours{position:relative}
.cl-hours span{position:absolute;inset-inline-end:6px;transform:translateY(-50%);font-size:.68rem;color:var(--muted)}
.cl-col{position:relative;border-inline-start:1px solid var(--line2);background-image:linear-gradient(var(--line2) 1px,transparent 1px);background-size:100% calc(100% / var(--rows,13));cursor:pointer}
.cl-col.off{background-color:var(--surface2)}.cl-col.over{background-color:var(--frost)}
.cl-blk{position:absolute;inset-inline-start:2px;border-radius:8px;padding:3px 6px;font-size:.72rem;line-height:1.25;overflow:hidden;background:color-mix(in srgb,var(--c,var(--blue)) 16%,var(--paper));border-inline-start:3px solid var(--c,var(--blue));color:var(--ink);cursor:pointer;box-sizing:border-box;touch-action:pan-y}
.cl-blk b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-blk .tm{color:var(--muted);font-size:.66rem}
.cl-blk.ro{border-inline-start-style:dashed}
.cl-blk.dragging{opacity:.4}
.cl-now{position:absolute;inset-inline:0;height:2px;background:var(--bad);z-index:2;pointer-events:none}
.cl-now::before{content:"";position:absolute;inset-inline-start:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--bad)}
@media(max-width:900px){.cl-ghead,.cl-allday,.cl-ginner{grid-template-columns:40px repeat(var(--days,7),minmax(0,1fr))}.cl-blk{padding:2px 4px;font-size:.66rem}.cl-blk .tm{display:none}.cl-ghead .h{padding:6px 2px;font-size:.66rem}}
/* ---- agenda ---- */
.cl-agenda .cal-day{display:flex;align-items:center;gap:8px}
.cl-agenda .cal-day .tag{text-transform:none;letter-spacing:0}
.cl-agenda .item{padding:10px 12px}
.cl-agenda .timepill{color:var(--c,var(--blue));background:color-mix(in srgb,var(--c,var(--blue)) 12%,var(--surface2))}
.cl-agenda .item .ss .cl-dot{display:inline-block;vertical-align:middle;margin-inline-end:4px}
/* ---- detail sheet / form ---- */
.cl-sheet h2{margin:0 0 6px}
.cl-meta{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px;font-size:.9rem}
.cl-meta>div{display:flex;align-items:flex-start;gap:8px}
.cl-meta svg.i{width:18px;height:18px;color:var(--muted);flex:none;margin-top:2px}
.cl-meta a{color:var(--blue);font-weight:600}
.cl-people{display:flex;flex-wrap:wrap;gap:6px}
.cl-people .tag{padding:4px 10px;font-size:.78rem}
.cl-people .tag a,.cl-people .tag button{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--muted)}
.cl-people .tag a:hover,.cl-people .tag button:hover{background:var(--paper);color:var(--blue)}
.cl-people .tag svg.i{width:13px;height:13px}
.cl-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cl-actions .btn{flex:1 1 calc(50% - 8px);min-width:0}
.cl-actions .btn.full{flex-basis:100%}
.cl-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cl-form .row3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
@media(max-width:420px){.cl-form .row3{grid-template-columns:1fr 1fr}.cl-form .row3>div:first-child{grid-column:span 2}}
.cl-form .chips{margin-top:6px}
.cl-form .chips .mini{padding:6px 11px}.cl-form .chips .mini.on{background:var(--frost);color:var(--blue);border-color:var(--blue)}
.cl-form .daychips .mini{min-width:40px;justify-content:center}
.cl-warn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:9px 12px;border-radius:12px;background:var(--warnbg);color:var(--warn);font-size:.84rem}
:root[data-theme="dark"] .cl-warn{color:#F3C76B}
.cl-warn.ok{background:var(--okbg);color:var(--ok)}
.cl-warn .mini{margin-inline-start:auto}
.cl-slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cl-typeit{display:flex;gap:6px;align-items:center;background:var(--frost);border:1px dashed rgba(10,92,255,.4);border-radius:12px;padding:6px 6px 6px 10px}
.cl-typeit input{flex:1;min-width:0;border:0;background:none;outline:0;padding:6px 0;font-size:.92rem}
.cl-typeit .btn.sm{flex:none}
.cl-typeit svg.i{width:18px;height:18px;color:var(--blue);flex:none}
.cl-pchip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 10px;border-radius:999px;background:var(--frost);color:var(--blue);font-size:.8rem;font-weight:600}
.cl-pchip button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.cl-pchip button:hover{background:var(--paper);color:var(--bad)}
.cl-pchip svg.i{width:12px;height:12px}
.cl-subscribe{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.cl-subscribe code{display:block;font-size:.74rem;word-break:break-all;margin:6px 0;color:var(--ink2);direction:ltr;text-align:start}
/* ---- home card ---- */
.cl-home .item{padding:9px 10px;margin-bottom:6px}
.cl-home .timepill{color:var(--c,var(--blue));background:color-mix(in srgb,var(--c,var(--blue)) 12%,var(--surface2))}
/* skeleton for the month grid */
.cl-skel{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cl-skel .skel{height:70px;border-radius:12px}
@media(max-width:900px){.cl-skel .skel{height:52px}}
.cl-findrow{display:flex;justify-content:flex-end;margin-top:6px}