.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 1px 9px; }
.calendar-view-label { color: var(--muted); font-size: 12px; }
.calendar-switcher { display:flex; align-items:center; gap:9px; min-width:0; }
.calendar-tabs { display:flex; align-items:center; gap:5px; min-width:0; max-width:min(48vw,680px); overflow-x:auto; padding:2px; scrollbar-width:none; overscroll-behavior-x:contain; }
.calendar-tabs::-webkit-scrollbar { display:none; }
.calendar-tabs button[role=tab] { display:flex; align-items:center; gap:7px; flex:none; min-height:34px; max-width:170px; padding:3px 11px 3px 4px; border:1px solid transparent; border-radius:18px; color:var(--muted); background:transparent; }
.calendar-tabs button[role=tab]:hover { color:var(--ink); background:var(--control-bg); }
.calendar-tabs button[role=tab].active { color:var(--ink); border-color:var(--blue-edge); background:var(--selection-bg); box-shadow:0 2px 9px #234b7d10; }
.calendar-tabs button[role=tab] > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:650; }
.calendar-family-tab-wrap { position:relative; display:flex; align-items:center; flex:none; isolation:isolate; gap:3px; max-width:min(270px,42vw); }
.calendar-family-tab-wrap .calendar-family-tab { min-width:0; max-width:none; padding-right:11px; }
.calendar-family-edit { flex:none; z-index:2; display:flex; align-items:center; gap:2px; min-width:44px; height:31px; padding:0 7px; border:1px solid var(--blue-edge); border-radius:999px; background:var(--surface); color:var(--blue); box-shadow:0 5px 14px #234b7d16; font-size:10px; font-weight:850; line-height:1; }
.calendar-family-edit .icon { width:13px; height:13px; stroke-width:1.9; }
.calendar-family-tab-wrap.active .calendar-family-edit { background:color-mix(in srgb,var(--selection-bg) 80%,var(--surface)); }
.calendar-family-edit:hover { color:var(--ink); background:var(--blue-bg); transform:scale(1.03); }
.calendar-tabs .avatar { width:26px; height:26px; overflow:hidden; border:1px solid color-mix(in srgb,var(--surface) 82%,var(--line)); box-shadow:none; }
.calendar-tabs .avatar svg { width:15px; height:15px; }
.calendar-tabs .avatar img,.calendar-tabs .avatar picture { display:block; width:100%; height:100%; object-fit:cover; }
.family-calendar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-width:0; flex:1; }
.family-day-scroll { padding-top:2px; padding-bottom:128px; scroll-padding-block:112px 150px; contain:paint; }
.family-day-calendar { width:max-content; min-width:0; max-width:none; contain:layout paint style; }
.family-week-head { width:max-content; height:98px; grid-template-columns:44px repeat(7,var(--family-day-width)); z-index:30; background:var(--surface); isolation:isolate; }
.family-week-body { width:max-content; grid-template-columns:44px repeat(var(--family-total-lanes),var(--family-lane-width)); z-index:0; isolation:isolate; contain:layout paint style; }
.family-week-day-head { min-width:0; border-left:6px solid color-mix(in srgb,var(--surface) 82%,var(--line)); box-shadow:inset 1px 0 var(--line); background:var(--surface); }
.family-week-day-head:first-of-type { border-left-width:1px; }
.family-week-day-head>button { width:100%; min-height:42px; padding:4px 8px; display:flex; align-items:center; justify-content:center; gap:6px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface) 94%,var(--blue)); font-size:11px; }
.family-week-day-head>button strong { font-size:13px; letter-spacing:-.01em; }
.family-week-day-head.family-day-odd>button { background:color-mix(in srgb,var(--surface) 97%,var(--muted)); }
.family-week-day-head.selected>button { background:var(--selection-bg); color:var(--blue); box-shadow:inset 0 -2px var(--blue); }
.family-week-day-head.saturday>button { background:color-mix(in srgb,var(--surface) 90%,var(--green)); }
.family-week-day-head.sunday>button { background:color-mix(in srgb,var(--surface) 90%,#e7888e); }
.family-week-member-heads { display:grid; grid-template-columns:repeat(var(--member-count),var(--family-lane-width)); height:55px; }
.family-week-member-heads .family-member-head { padding:5px 7px; gap:6px; }
.family-week-member-heads .family-member-head:first-child { border-left:0; }
.family-week-member-heads .avatar { width:28px; height:28px; }
.week-now-line,.family-now-line{position:absolute;z-index:2;top:calc(var(--now)*var(--hour));height:2px;background:var(--now-line,#e05252);pointer-events:none}.week-now-line{left:calc(48px + var(--day-index) * ((100% - 48px) / 7));width:calc((100% - 48px) / 7)}.family-now-line{left:calc(44px + var(--day-offset)*var(--family-lane-width));width:var(--family-day-width)}.week-now-line:before,.family-now-line:before{content:"";position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--now-line,#e05252)}.week-now-line span,.family-now-line span{position:absolute;left:5px;top:-18px;padding:1px 4px;border-radius:5px;background:var(--now-line,#e05252);color:white;font-size:9px;font-weight:800}.family-day-merge-layer{position:absolute;top:0;bottom:0;left:calc(44px + var(--family-day-index)*var(--family-day-width));width:var(--family-day-width);z-index:6;pointer-events:none;overflow:hidden;contain:layout paint style}.family-day-merge-layer .family-merged-event{left:calc(var(--merge-start)*var(--family-lane-width) + 3px)!important;right:auto!important;width:calc(var(--merge-span)*var(--family-lane-width) - 6px)!important;max-width:none!important;z-index:8!important;pointer-events:auto}.family-day-merge-layer .family-merged-event:hover{z-index:9!important}
.family-member-head { display:flex; align-items:center; justify-content:center; gap:9px; min-width:0; padding:7px 9px; border-left:1px solid var(--line); }
.family-member-head .avatar { width:34px; height:34px; flex:none; }
.family-member-head > span { min-width:0; }
.family-member-head strong,.family-member-head small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.family-member-head strong { font-size:12px; }
.family-member-head small { margin-top:2px; color:var(--muted); font-size:9px; }
.family-member-lane { background-color:color-mix(in srgb,var(--surface) 98%,var(--blue)); border-left-color:color-mix(in srgb,var(--line) 62%,var(--surface)); contain:layout paint style; }
.family-member-lane.family-day-odd { background-color:color-mix(in srgb,var(--surface) 96%,var(--muted)); }
.family-member-lane.family-day-start { border-left:6px solid color-mix(in srgb,var(--surface) 82%,var(--line)); box-shadow:inset 1px 0 var(--line); }
.family-member-lane.family-day-end { box-shadow:inset -1px 0 color-mix(in srgb,var(--line) 82%,var(--surface)); }
.family-member-lane .event-card { box-shadow:0 2px 7px #233b5d0c; }
.family-member-lane .family-shared-copy { border-top-width:2px; }
.family-shared-mark { position:absolute; top:4px; right:4px; z-index:2; display:flex; align-items:center; gap:2px; min-height:18px; padding:2px 4px; border-radius:7px; background:color-mix(in srgb,var(--wash) 84%,var(--card-foreground)); color:var(--card-foreground); pointer-events:none; }
.family-shared-mark .icon { width:11px; height:11px; }
.family-shared-mark b { font-size:8px; line-height:1; }
@container event (width < 92px) { .family-shared-mark { display:none; } }
@container event (height < 42px) { .family-shared-mark { display:none; } }
.calendar-sync-ticks { display:flex; align-items:center; gap:2px; flex:none; height:18px; padding:0 2px; }
.calendar-sync-ticks i { display:block; width:3px; height:8px; border-radius:4px; background:var(--line); transition:height .2s,background .2s,opacity .2s; }
.calendar-sync-ticks[data-calendar-sync="saved"] i { height:5px; background:#58a881; opacity:.72; }
.calendar-sync-ticks[data-calendar-sync="offline"] i,.calendar-sync-ticks[data-calendar-sync="conflict"] i { background:#d06b72; opacity:.7; }
.calendar-sync-ticks[data-calendar-sync="checking"] i,.calendar-sync-ticks[data-calendar-sync="saving"] i { background:var(--blue); animation:calendar-sync-tick .9s ease-in-out infinite alternate; }
.calendar-sync-ticks[data-calendar-sync="checking"] i:nth-of-type(2),.calendar-sync-ticks[data-calendar-sync="saving"] i:nth-of-type(2){animation-delay:.08s}.calendar-sync-ticks[data-calendar-sync="checking"] i:nth-of-type(3),.calendar-sync-ticks[data-calendar-sync="saving"] i:nth-of-type(3){animation-delay:.16s}.calendar-sync-ticks[data-calendar-sync="checking"] i:nth-of-type(4),.calendar-sync-ticks[data-calendar-sync="saving"] i:nth-of-type(4){animation-delay:.24s}.calendar-sync-ticks[data-calendar-sync="checking"] i:nth-of-type(5),.calendar-sync-ticks[data-calendar-sync="saving"] i:nth-of-type(5){animation-delay:.32s}.calendar-sync-ticks[data-calendar-sync="checking"] i:nth-of-type(6),.calendar-sync-ticks[data-calendar-sync="saving"] i:nth-of-type(6){animation-delay:.4s}
@keyframes calendar-sync-tick { from{height:5px;opacity:.35} to{height:14px;opacity:1} }
.calendar-zoom { display: flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 10px; padding: 2px 4px; background: white; }
.calendar-zoom button { min-width: 28px; height: 27px; border-radius: 6px; padding: 0 6px; font-size: 20px; line-height: 1; }
.calendar-zoom button:hover:not(:disabled) { background: var(--blue-bg); color: var(--blue); }
.calendar-zoom select { border: 0; color: var(--ink); background: white; font-size: 12px; max-width: 72px; height: 27px; cursor: pointer; }
.calendar-zoom button.zoom-detail, .calendar-zoom button.zoom-reset { font-size: 11px; padding-inline: 8px; }
.calendar-zoom .zoom-detail.active { background: var(--blue-bg); color: var(--blue); }
.zoom-divider { height: 17px; width: 1px; background: var(--line); margin: 0 3px; }
.week-scroll { height: calc(100dvh - var(--header) - 80px); }
.week-body { position:relative; }
.week-head > .corner { position:sticky; left:0; z-index:40; background:var(--surface); box-shadow:1px 0 0 var(--line); }
.week-body > .time-axis { position:sticky; left:0; z-index:12; background:var(--surface); box-shadow:1px 0 0 var(--line), 8px 0 14px color-mix(in srgb,var(--ink) 5%,transparent); }
.family-week-head > .corner { z-index:45; }
.family-week-body > .time-axis { z-index:12; background:var(--surface); }
.week-calendar .day-column {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) - 1px), var(--line) calc(var(--hour) - 1px), var(--line) var(--hour)), repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) / var(--time-divisions, 1) - 1px), #edf2f8 calc(var(--hour) / var(--time-divisions, 1) - 1px), #edf2f8 calc(var(--hour) / var(--time-divisions, 1)));
}
.time-axis .minute-label { font-size: 10px; color: #5d7290; }
.time-axis .hour-label { color: #577ba9; font-weight: 600; }
.time-axis .minute-label::after, .time-axis .hour-label::after { content: ''; position: absolute; width: 4px; height: 1px; top: 50%; right: -7px; background: #d4dfed; }
.time-axis .hour-label::after { width: 7px; background: #aebfd6; }
.time-axis[data-minute-ticks="true"]::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; pointer-events: none; background: repeating-linear-gradient(to bottom, #dce5f0 0, #dce5f0 1px, transparent 1px, transparent calc(var(--hour) / 60)); }
/* An insertion preview belongs above events, not behind a long task. */
.day-column .slot-hint { z-index: 10; background: #f1f7ff; box-shadow: 0 2px 6px #305b9210; height:var(--slot-height,calc(var(--hour) - 4px)); justify-content:flex-start; padding-top:var(--slot-label-top,8px); }
.day-column.has-compact-hover .slot-hint { flex-direction:row; align-items:center; justify-content:flex-start; gap:4px; padding:2px 5px; border-radius:6px; overflow:hidden; }
.day-column.has-compact-hover .slot-hint span { font-size:0; }
.day-column.has-compact-hover .slot-hint span::after { content:'+'; font-size:11px; font-weight:800; }
.day-column.has-compact-hover .slot-hint small { font-size:9px; line-height:1; white-space:nowrap; }
.day-column.has-tiny-hover .slot-hint { min-height:2px; padding:0; border-style:solid; border-radius:3px; background:#dcecff; box-shadow:none; }
.day-column.has-tiny-hover .slot-hint span,.day-column.has-tiny-hover .slot-hint small { display:none; }
.day-column .drop-preview { z-index: 9; background: #e9f3ffdf; }
.day-column .drop-preview.reflow-preview { left:calc(var(--lane) * 100% / var(--lanes) + 3px); right:auto; width:calc(100% / var(--lanes) - 6px); overflow:hidden; }
.day-column[data-drag-layout=ready] .drag-source { opacity:0; }
.event-preview {
  position: fixed; z-index: 80; width: 250px; max-width: calc(100vw - 24px);
  border: 1px solid var(--edge, var(--line)); border-radius: 13px;
  padding: 14px; background: var(--wash, white); color: var(--ink);
  box-shadow: 0 8px 26px #1c315824; pointer-events: auto;
  animation: preview-in .14s var(--ease);
}
.event-preview[hidden] { display: none; }
.event-preview-head { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 11px; min-height: 42px; }
.event-preview-head > .icon { color: var(--icon-tone); width: 42px; height: 42px; }
.event-preview-head > .event-preview-symbol { display:block; width:42px; height:42px; object-fit:contain; }
.event-preview-head strong { min-width:0; font-size: 15px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
.event-preview-time { display: block; font-size: 14px; font-weight: 700; margin: 10px 0 4px; }
.event-preview-date, .event-preview-owner { display: block; font-size: 12px; color: #526b91; line-height: 1.45; }
.event-preview-participants { display:flex; align-items:center; gap:8px; min-width:0; margin-top:9px; }
.event-preview-avatars { display:flex; flex:none; align-items:center; }
.event-preview-avatars .avatar { width:30px; height:30px; border:2px solid var(--wash,white); font-size:11px; }
.event-preview-avatars .avatar + .avatar { margin-left:-8px; }
.event-preview-avatars .avatar-more { display:grid; place-items:center; background:var(--surface,white); color:var(--ink); font-size:9px; font-weight:700; }
.event-preview-owner { min-width:0; overflow-wrap:anywhere; }
.event-inline-time { display: none; }
@container event (height < 38px) {
  .event-title .event-inline-time { display: inline; font-variant-numeric: tabular-nums; margin-right: 4px; font-weight: 700; }
}
@keyframes preview-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .event-preview { animation: none; } }
@media (max-width:960px) and (min-width:761px) {
  .calendar-tabs { max-width:34vw; }
  .calendar-tabs button[role=tab] { max-width:120px; }
  .calendar-family-tab-wrap { max-width:210px; }
  .calendar-family-tab-wrap .calendar-family-tab { max-width:145px; }
  .calendar-zoom .zoom-detail,.calendar-zoom .zoom-divider { display:none; }
  .family-calendar-toolbar { gap:8px; }
}
@media (max-width:760px) {
  .calendar-switcher-mobile { padding:7px 14px 4px; gap:7px; }
  .calendar-switcher-mobile .calendar-tabs { max-width:none; flex:1; }
  .calendar-tabs button[role=tab] { min-height:32px; max-width:145px; }
  .calendar-family-tab-wrap { gap:4px; padding-right:0; max-width:190px; }
  .calendar-family-tab-wrap .calendar-family-tab { max-width:124px; padding-right:8px; }
  .calendar-family-edit { position:static; transform:none; min-width:37px; height:31px; padding:0 6px; box-shadow:none; font-size:9px; }
  .calendar-family-edit:hover { transform:none; }
  .calendar-family-edit .icon { width:12px; height:12px; }
  .calendar-tabs .avatar { width:24px; height:24px; }
  .calendar-sync-ticks { padding-right:1px; }
}