.calendar-demo{--cal-color-mon: light-dark(#fff, #1f2125);--cal-color-out: light-dark(#f5f6f8, #1a1c20);--cal-color-today-ring: light-dark(#2563eb, #3b82f6);--cal-cat-work: light-dark(#2563eb, #60a5fa);--cal-cat-personal: light-dark(#16a34a, #4ade80);--cal-cat-travel: light-dark(#9333ea, #c084fc);--cal-cat-health: light-dark(#dc2626, #f87171);--cal-cat-social: light-dark(#ea580c, #fb923c);height:100%;display:flex;flex-direction:column;min-height:0}.calendar-demo__grid{flex:1;min-height:0;container-type:inline-size;container-name:calendar}.cal-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.cal-header__title{font-weight:600;font-size:1.15rem}.cal-header__year{font-size:.95rem;padding:4px 8px;border-radius:6px;border:1px solid var(--demo-color-border);background:var(--demo-color-surface);color:var(--demo-color-fg)}.cal-toolbar-nav{display:inline-flex;gap:4px}.cal-header__btn{background:var(--demo-color-surface);border:1px solid var(--demo-color-border);color:var(--demo-color-fg);border-radius:6px;padding:4px 10px;cursor:pointer;font-size:.9rem;line-height:1.2}.cal-header__btn:hover{border-color:var(--demo-color-accent)}.cal-legend{display:flex;align-items:center;gap:14px;padding:4px 10px;font-size:.8rem;color:var(--demo-color-fg-muted)}.cal-legend__item{display:inline-flex;align-items:center;gap:5px}.cal-legend__swatch{width:10px;height:10px;border-radius:50%;display:inline-block}.cal-cell{display:flex;flex-direction:column;align-items:stretch;height:100%;padding:6px 6px 4px;gap:4px;overflow:hidden}.calendar-demo{--cal-color-cell-border: light-dark(#cbd0d6, #4a4d54);--cal-color-cell-focus: light-dark(#2563eb, #3b82f6)}tbw-grid .data-grid-row>.cell{border-top:1px solid var(--cal-color-cell-border);border-right:1px solid var(--cal-color-cell-border);border-bottom:1px solid var(--cal-color-cell-border)}tbw-grid .data-grid-row>.cell:first-child{border-left:1px solid var(--cal-color-cell-border)}tbw-grid .data-grid-row>.cell.cell-focus{outline:2px dotted var(--cal-color-cell-focus);outline-offset:-3px;position:relative;z-index:1}.cal-cell--out-of-month{opacity:.4}.cal-cell--today{background:color-mix(in oklab,var(--cal-color-today-ring) 12%,transparent)}.cal-cell--today .cal-cell__date{align-self:center;color:var(--cal-color-today-ring);font-weight:800;border:2px solid var(--cal-color-today-ring);border-radius:999px;min-width:1.9em;padding:0 .3em;line-height:1.5;box-sizing:border-box}.cal-cell__date{text-align:center;font-weight:600;font-size:.95rem;line-height:1.6}.cal-cell__events{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}.cal-cell__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}.cal-event{display:flex;align-items:baseline;gap:4px;padding:1px 6px;border-radius:4px;font-size:.75rem;line-height:1.25;color:#fff;background:var(--cal-cat-color, var(--cal-cat-work));overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cal-event--work,.cal-dot--work{--cal-cat-color: var(--cal-cat-work)}.cal-event--personal,.cal-dot--personal{--cal-cat-color: var(--cal-cat-personal)}.cal-event--travel,.cal-dot--travel{--cal-cat-color: var(--cal-cat-travel)}.cal-event--health,.cal-dot--health{--cal-cat-color: var(--cal-cat-health)}.cal-event--social,.cal-dot--social{--cal-cat-color: var(--cal-cat-social)}.cal-event__time{font-variant-numeric:tabular-nums;opacity:.85;font-size:.7rem}.cal-event__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cal-cell__dots{display:none;flex-wrap:wrap;gap:3px;align-content:flex-start;justify-content:center}.cal-dot{width:8px;height:8px;border-radius:50%;background:var(--cal-cat-color, var(--cal-cat-work));display:inline-block}.cal-dot__more{font-size:.65rem;color:var(--demo-color-fg-muted);line-height:1;align-self:center}@container calendar (width < 534px){.cal-cell__list{display:none}.cal-cell__dots{display:flex}}@container calendar (width < 480px){.cal-cell__events{display:none}.cal-cell{justify-content:center}.cal-cell__date{font-size:1.1rem}}.cal-wday__full,.cal-wday__mini{display:none}.cal-wday__short{display:inline}@container calendar (width >= 534px){.cal-wday__full{display:inline}.cal-wday__short,.cal-wday__mini{display:none}}@container calendar (width < 480px){.cal-wday__mini{display:inline}.cal-wday__short,.cal-wday__full{display:none}}.cal-week-cell,tbw-grid .data-grid-row .cell[data-field=weekNumber]{text-align:center;font-size:.75rem;color:var(--demo-color-fg-muted);font-variant-numeric:tabular-nums;padding-top:4px}.cal-event-dialog{position:fixed;inset:0;margin:auto;border:1px solid var(--demo-color-border, #d0d4dc);border-radius:10px;padding:0;background:var(--demo-color-surface, light-dark(#fff, #1f2125));color:var(--demo-color-fg, light-dark(#1a1c20, #f0f2f5));min-width:min(380px,92vw);max-height:calc(100vh - 2rem);box-shadow:0 12px 32px light-dark(rgb(0 0 0 / 18%),rgb(0 0 0 / 55%))}.cal-event-dialog::backdrop{background:light-dark(rgb(0 0 0 / 25%),rgb(0 0 0 / 55%));backdrop-filter:blur(2px)}.cal-event-dialog__form{display:flex;flex-direction:column;gap:14px;padding:20px}.cal-event-dialog__title{margin:0;font-size:1rem;font-weight:600}.cal-event-dialog__field{display:flex;flex-direction:column;gap:4px;font-size:.85rem}.cal-event-dialog__field>span{color:var(--demo-color-fg-muted, light-dark(#586070, #aab0bd))}.cal-event-dialog__field input,.cal-event-dialog__field select{font:inherit;padding:6px 8px;border-radius:6px;border:1px solid var(--demo-color-border, #d0d4dc);background:var(--demo-color-bg, light-dark(#fff, #15171b));color:inherit}.cal-event-dialog__field input:focus-visible,.cal-event-dialog__field select:focus-visible{outline:2px solid var(--demo-color-accent, #2563eb);outline-offset:1px}.cal-event-dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.cal-header__btn--primary{background:var(--demo-color-accent, #2563eb);border-color:var(--demo-color-accent, #2563eb);color:#fff}.cal-header__btn--primary:hover{filter:brightness(1.08)}
