/* A continuous single-day schedule, not a compressed list of appointments. */
.clock-format-hint { color:var(--muted); font-size:11px; line-height:1.4; }
.picker-input input[aria-invalid=true] { border-color:var(--coral-edge,#ee8092); }
.mobile-timeline-help { display:flex; align-items:center; justify-content:flex-start; gap:10px; margin:12px 18px 0; color:var(--muted); font-size:12px; line-height:1.5; }
.mobile-timeline-help span { min-width:0; }
.mobile-timeline-help a { flex:none; min-height:34px; display:inline-flex; align-items:center; padding:0 10px; border:1px solid var(--line); border-radius:10px; color:var(--blue); background:var(--surface); font-weight:700; text-decoration:none; }
.agenda.mobile-timeline { --mobile-hour:120px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:8px; padding-top:18px; padding-bottom:calc(160px + env(safe-area-inset-bottom)); min-height:0; touch-action:pan-x pan-y; overscroll-behavior:contain; }
.mobile-time-axis { position:relative; height:calc(var(--day-hours,17) * var(--mobile-hour)); }
.mobile-time-axis time { position:absolute; top:calc(var(--tick) * var(--mobile-hour)); left:0; transform:translateY(-50%); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mobile-timeline-track { position:relative; height:calc(var(--day-hours,17) * var(--mobile-hour)); border-inline:1px solid var(--line); border-bottom:1px solid var(--line); }
.mobile-time-slot { position:relative; display:block; width:100%; height:calc(var(--mobile-hour) / 2); border-top:1px solid var(--line); padding:0; text-align:right; touch-action:pan-x pan-y; }
.mobile-time-slot > span { display:inline-block; color:var(--muted); font-size:10px; margin:6px; opacity:0; }
.mobile-time-slot:focus-visible { outline-offset:-3px; }
.mobile-time-slot:active { background:transparent; }
.mobile-time-slot:active::before,.mobile-time-slot:focus-visible::before { content:''; position:absolute; left:3px; right:3px; top:2px; height:calc(var(--slot-preview-duration,1) * var(--mobile-hour) - 4px); border-radius:6px; background:color-mix(in srgb,var(--blue) 12%,transparent); box-shadow:inset 3px 0 color-mix(in srgb,var(--blue) 72%,transparent); pointer-events:none; }
.mobile-now-line { position:absolute; z-index:20; left:0; right:0; top:calc(var(--now) * var(--mobile-hour)); height:2px; background:var(--now-line,#e05252); pointer-events:none; }
.mobile-now-line::before { content:""; position:absolute; left:-4px; top:-4px; width:9px; height:9px; border-radius:50%; background:var(--now-line,#e05252); }
.mobile-now-line span { position:absolute; left:5px; top:-18px; padding:1px 5px; border-radius:6px; background:var(--now-line,#e05252); color:#fff; font-size:9px; font-weight:850; }
.mobile-now-line.no-label span { display:none; }
.agenda.mobile-timeline .event-card { position:absolute; top:calc(var(--start) * var(--mobile-hour) + 2px); height:max(8px,calc(var(--duration) * var(--mobile-hour) - 4px)); min-height:0; left:calc(var(--lane,0) * 100% / var(--lanes,1) + 3px); width:calc(100% / var(--lanes,1) - 6px); border-radius:6px; }
.mobile-timeline .event-card { touch-action:pan-x pan-y; }
.mobile-timeline .event-layout { grid-template-rows:minmax(0,1fr); grid-template-columns:28px minmax(0,1fr); padding:6px; gap:7px; align-items:start; }
.mobile-timeline .event-copy { min-width:0; gap:2px; justify-content:start; }
.mobile-timeline .event-title { font-size:13px; line-height:1.15; -webkit-line-clamp:1; flex:0 1 auto; }
.mobile-timeline .event-time { display:flex; font-size:11px; line-height:1.1; flex:none; }
.mobile-timeline .event-time .time-end { display:inline; }
.mobile-timeline .event-owner { display:none; }
.mobile-timeline .event-inline-time { display:none; }
.mobile-timeline .event-icon { width:28px; height:28px; }
.mobile-timeline .drop-preview { min-height:44px; z-index:7; }
.mobile-timeline .drag-split-fragment { top:calc(var(--start) * var(--mobile-hour) + 2px); height:calc(var(--duration) * var(--mobile-hour) - 4px); }
.mobile-family-timeline { align-items:start; padding-top:26px; padding-bottom:calc(160px + env(safe-area-inset-bottom)); scroll-padding-block:96px 120px; }
.mobile-family-time-axis { margin-top:54px; }
.mobile-family-pane{position:relative;min-width:0;padding-top:2px}.mobile-family-sticky{position:sticky;top:calc(var(--mobile-family-sticky-top,220px) + 1px);z-index:30;height:55px;margin-bottom:-1px;overflow:hidden;border-block:1px solid var(--line);background:var(--surface);box-shadow:0 -22px 0 var(--surface),0 5px 12px color-mix(in srgb,var(--ink) 8%,transparent);pointer-events:none}.mobile-family-sticky-inner{display:grid;grid-template-columns:repeat(var(--member-count),minmax(148px,1fr));min-width:calc(var(--member-count)*148px);height:53px;will-change:transform;transform:translateZ(0)}.mobile-family-sticky-head{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 8px;border-left:1px solid var(--line);background:var(--surface)}.mobile-family-sticky-head .avatar{width:30px;height:30px;flex:none}.mobile-family-sticky-head>span{min-width:0}.mobile-family-sticky-head strong,.mobile-family-sticky-head small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-family-sticky-head strong{font-size:12px}.mobile-family-sticky-head small{margin-top:2px;color:var(--muted);font-size:9px}
.mobile-family-scroll { min-width:0; overflow-x:auto; overflow-y:visible; overscroll-behavior-x:contain; overscroll-behavior-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; scrollbar-width:none; contain:paint; }
.mobile-family-scroll::-webkit-scrollbar { display:none; }
.mobile-family-columns { position:relative; display:grid; grid-template-columns:repeat(var(--member-count),minmax(148px,1fr)); min-width:calc(var(--member-count) * 148px); contain:layout paint style; }
.mobile-family-now-line { left:0; right:0; z-index:20; }
.mobile-family-member { min-width:0; border-left:1px solid var(--line); contain:layout paint style; }
.mobile-family-member:last-child { border-right:1px solid var(--line); }
.mobile-family-member > header { position:sticky; top:0; z-index:9; display:flex; align-items:center; gap:7px; height:54px; padding:7px 8px; border-block:1px solid var(--line); background:var(--surface); }
.mobile-family-member > header .avatar { width:30px; height:30px; flex:none; }
.mobile-family-member > header span { min-width:0; }
.mobile-family-member > header strong,.mobile-family-member > header small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-family-member > header strong { font-size:12px; }
.mobile-family-member > header small { margin-top:2px; color:var(--muted); font-size:9px; }
.mobile-family-member .mobile-timeline-track { border-inline:0; background:color-mix(in srgb,var(--surface) 98%,var(--blue)); contain:layout paint style; }
.mobile-family-member:nth-child(even) .mobile-timeline-track { background:color-mix(in srgb,var(--surface) 98%,var(--green)); }
.mobile-family-member .event-card { box-shadow:0 2px 7px #233b5d0d; }
@container event (height < 68px) {
  .mobile-timeline .event-title { -webkit-line-clamp:1; }
  .mobile-timeline .event-reminder-badge { display:none; }
}
@container event (height < 58px) {
  .mobile-timeline .event-layout { grid-template-columns:22px minmax(0,1fr); padding:4px 5px; gap:5px; }
  .mobile-timeline .event-icon { width:22px; height:22px; }
  .mobile-timeline .event-title { font-size:12px; line-height:1.1; }
  .mobile-timeline .event-time { font-size:10px; }
}
@container event (height < 36px) {
  .mobile-timeline .event-layout { grid-template-columns:minmax(0,1fr); align-items:center; }
  .mobile-timeline .event-icon { display:none; }
  .mobile-timeline .event-time { display:none; }
}
@container event (height >= 88px) and (width > 150px) {
  .mobile-timeline .event-layout { grid-template-rows:minmax(0,1fr) 28px; }
  .mobile-timeline .event-owner { display:flex; grid-column:1/-1; grid-row:2; align-self:end; }
  .mobile-timeline .event-avatars { display:flex; }
  .mobile-timeline .event-owner-name { display:block; }
}
@container event (height >= 44px) and (height < 88px) and (width > 180px) {
  .mobile-timeline .event-layout { grid-template-columns:28px minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr) 20px; row-gap:1px; }
  .mobile-timeline .event-layout > .event-icon { grid-column:1; grid-row:1 / 3; align-self:center; }
  .mobile-timeline .event-copy { display:contents; }
  .mobile-timeline .event-title { grid-column:2 / 4; grid-row:1; align-self:end; -webkit-line-clamp:2; line-height:1.15; }
  .mobile-timeline .event-time { grid-column:2; grid-row:2; align-self:center; }
  .mobile-timeline .event-owner { display:flex; grid-column:3; grid-row:2; align-self:center; max-width:52px; gap:0; }
  .mobile-timeline .event-avatars { display:flex; }
  .mobile-timeline .event-avatars .avatar { width:20px; height:20px; }
  .mobile-timeline .event-avatars .avatar + .avatar { margin-left:-7px; }
  .mobile-timeline .event-owner-name { display:none; }
}
@container event (width < 105px) {
  .mobile-timeline .event-layout { grid-template-columns:minmax(0,1fr); }
  .mobile-timeline .event-icon { display:none; }
  .mobile-timeline .event-time { font-size:10px; }
}
@container event (width < 72px) {
  .mobile-timeline .event-time .time-end { display:none; }
}