@import url("/edit.css");
:where([data-calendar-surface=agenda])#main { width:min(var(--app-measure),calc(100% - 2 * var(--app-edge))); margin:0 auto; }
@keyframes agenda-reveal { from { opacity: .7; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

:where([data-calendar-surface=agenda]) {
.agenda-range { --month-line-height:36px; --sticky-day-top:calc(24px + var(--month-line-height)); position:relative; display:flow-root; }
.month-placeholder { visibility:hidden; }
.month-rail { position:absolute; inset:0; z-index:10; pointer-events:none; }
.month-slot { position:absolute; width:100%; }
.month-heading { position:sticky; top:8px; width:max-content; max-width:100%; padding-bottom:8px; background:var(--page); }
.month-heading, .month-placeholder { font-size:30px; font-weight:400; letter-spacing:-.025em; line-height:1.2; }
.month-break { height:calc(var(--month-line-height) + 28px); }
.projection-status { color: var(--muted); font-size: 12px; padding-top: 10px; }
.agenda { --date-width: 32px; --clock-left: 40px; --day-gutter:calc(var(--clock-left) + 96px); --day-gap:clamp(8px,1cqi,16px); position:relative; container-type:inline-size; }
.pending-day { display:grid; grid-template-columns:var(--day-gutter) 1fr; gap:var(--day-gap); align-items:start; min-height:64px; padding:12px 0; border-bottom:1px solid var(--line); }
.pending-day:first-child { min-height:clamp(120px,50svh,480px); }
.pending-day strong { font-size:24px; font-weight:400; }
.pending-day > span { color:var(--muted); font-size:12px; padding-top:8px; }
.date-rail { position: absolute; top: 0; left: 0; width: var(--date-width); z-index: 9; pointer-events: none; }
.date-slot { padding: 8px 0 9px; scroll-margin-top:var(--sticky-day-top); }
.agenda-scroll { overflow-x: auto; position: relative; }
.agenda-days { width: var(--agenda-width, 100%); min-width: 100%; isolation: isolate; }
.day-comparison { grid-column: 2; grid-row: 1; min-width: 0; position: relative; }
/* One atomic layer above the sibling Now marker. Nested event/overlap stacking
   contexts cannot put any part of an event back below the line. */
.agenda-timeline { display: grid; grid-template-columns: var(--projection-width, 360px); padding: 0 12px; position: relative; z-index:var(--layer-agenda-events); width: max-content; }
/* Lift the whole context so disclosures can cover following days too. */
.agenda-timeline:has(.event[open]) { z-index:var(--layer-disclosure); }
.agenda-timeline > .day-content { padding: 0; }
/* Empty portions of later daily layers must not intercept a card that extends
   across midnight from an earlier date. Disclosures remain native targets. */
.agenda-timeline { pointer-events: none; }
.agenda-timeline .event { pointer-events: auto; }
.unified-timeline { --surface: var(--tint); }
.timeline-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.unified-timeline .event summary { background: var(--event-fill); }
.agenda-timeline .event summary:hover, .agenda-timeline .event[open] summary { background: var(--event-fill); }
.day-content .timeline-event:not(.is-compact) summary { grid-template-columns: minmax(0, 1fr) 14px; gap: 4px 8px; align-content: start; }
.day-content .timeline-event:not(.is-compact) .event-time { grid-column: 1; }
.day-content .timeline-event:not(.is-compact) summary > span:nth-child(2) { grid-column: 1; }
.day-content .timeline-event:not(.is-compact) .event-chevron { grid-column: 2; grid-row: 1; }
.day-comparison > .now-marker { left: 12px; right: 0; }
.day-header { position: sticky; top: var(--sticky-day-top); background: var(--page); }
.day-gutter { position: sticky; left: 0; z-index: var(--layer-gutter); grid-column: 1; grid-row: 1; min-width: 0; background: var(--page); }
.day-gutter::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--day-gap)) 0 0; background: var(--page); }
.hour-mark { position: absolute; right: 0; transform: translateY(-50%); color: var(--muted); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.time-rules { position: absolute; left: 12px; right: 0; z-index: -1; pointer-events: none; }
.gutter-rules { position: absolute; left: calc(100% + 4px); width: calc(var(--day-gap) + 8px); pointer-events: none; }
.time-rule, .gutter-rule { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--line) 55%, transparent); }
.time-rule.is-hour, .gutter-rule.is-hour, .time-rule.is-boundary, .gutter-rule.is-boundary { background: var(--line); }
:is(.day:first-child, .month-break + .day) :is(.time-rules, .gutter-rules)::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); }
.now-label { position: absolute; left: var(--clock-left); right: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; transform: translateY(-50%); line-height: 18px; color: var(--accent); font-size: 12px; font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.now-prefix { font-size: 11px; }
.now-label time { display: block; }
.now-label::after { content: ''; position: absolute; left: 100%; top: calc(50% + var(--now-line-offset, 0px)); transform: translateY(-50%); width: calc(var(--day-gap) + 12px); height: 1px; background: var(--sure-now-rule); pointer-events: none; }
.day-point { position: absolute; left: var(--clock-left); right: 0; transform: translateY(-50%); line-height: 18px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.day-point > span { position: absolute; bottom: 100%; left: 0; white-space: nowrap; font-size: 11px; }
.day-point time { display: block; }
.day-point::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: calc(var(--day-gap) + 12px); height: 1px; background: var(--line); pointer-events: none; }
.copy-count { white-space: nowrap; }
.copy-count::before { content: '·'; margin-right: 4px; }
.selection-note { margin-top: 6px; color: var(--muted); }
&:is(main) { outline: none; min-height: calc(100svh - 195px); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 30px; font-weight: 400; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
h2 { font-size: 20px; line-height: 1.35; font-weight: 400; letter-spacing: -.015em; }
h3 { font-size: 15px; font-weight: 700; }
.muted, .subtitle { color: var(--muted); }
.subtitle { margin-top: 7px; }
.week-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 16px 0; }
.week-nav { display: flex; gap: 6px; align-items: center; }
.icon-button { padding: 0; width: 40px; }
.week-nav #today { margin-right: 7px; }
.day { display: grid; grid-template-columns: var(--day-gutter) minmax(0, 1fr); column-gap: var(--day-gap); border-bottom: 1px solid var(--line); }
.day-heading { display: flex; flex-direction: column; align-items: flex-start; font-size: 11px; line-height: 14px; font-weight: 400; color: var(--muted); text-decoration: none; pointer-events: auto; }
.day-heading:hover { text-decoration: underline; }
.day-heading:active { background: var(--pressed); }
.day-number { order: -1; font-size: 25px; line-height: 1.25; color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.date-slot.is-today .day-heading, .date-slot.is-today .day-number { color: var(--accent); }
.empty-day { color: var(--muted); font-size: 14px; padding-top: 6px; }
.event summary { display: grid; grid-template-columns: 111px minmax(0, 1fr) 18px; align-items: start; gap: 14px; padding: 9px 10px; margin: 0 -10px; min-height: 64px; border-bottom: 1px solid var(--line); border-radius: var(--sure-radius); cursor: pointer; list-style: none; }
.event summary::-webkit-details-marker { display: none; }
.event summary:hover { background: var(--hover); }
.event[open] summary { background: var(--hover); }
.event-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px; }
.event-start, .event-duration, .event-continuation { display: block; }
.event-start { color: var(--ink); font-weight: 400; }
.event-duration, .event-continuation { font-size: 12px; }
.event-continuation { margin-top: 3px; }
.event.is-past .event-start { color: var(--muted); }
.event-title { display: block; font-weight: 400; overflow-wrap: anywhere; }
.event.is-past .event-title { color: var(--muted); }
.now-marker { position: absolute; left: 0; right: 0; z-index: var(--layer-now); transform: translateY(-50%); pointer-events: none; display: flex; align-items: center; gap: 14px; color: var(--accent); font-size: 12px; font-weight: 400; padding: 0; font-variant-numeric: tabular-nums; }
.now-rule { height: 1px; flex: 1; background: var(--sure-now-rule); position: relative; }
.now-rule::before { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); left: 0; top: -2px; }
.event-calendar { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin-top: 3px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--icloud); display: inline-block; flex-shrink: 0; }
.dot.google { background: var(--google); }
.event-chevron { color: var(--muted); margin-top: 2px; width: 14px; height: 14px; }
.event[open] .event-chevron { transform: rotate(90deg); }
.event-detail { padding: 18px 0 14px 125px; font-size: 14px; overflow-wrap: anywhere; }
.event-detail dl { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 10px 12px; margin: 0; }
dt { color: var(--muted); } dd { margin: 0; }
.description { white-space: pre-wrap; margin-top: 18px; color: var(--muted); }
.day-content { min-width: 0; position: relative; }
.all-day-band { position: relative; }
.all-day-band .event { height: 44px; position: relative; width: var(--agenda-lane-width, 100%); padding: 0 3px; }
.all-day-band .event summary { grid-template-columns: max-content minmax(0, 1fr) 14px; gap: 8px; height: 44px; min-height: 44px; margin: 0; overflow: hidden; padding-top: 6px; padding-bottom: 6px; }
.all-day-band .event-time { padding-top: 0; line-height: 16px; }
.all-day-band .event-continuation { margin-top: 0; font-size: 11px; line-height: 14px; }
.all-day-band .event:not([open]) .event-calendar { display: none; }

.all-day-band .event[open] summary { height: auto; min-height: 64px; }
.all-day-band .event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.all-day-band .event[open] .event-title { white-space: normal; }

.timeline-viewport { padding: 0 6px; margin: 0 -6px; }
.overlap-region { position: absolute; left: 0; right: 0; }
.overlap-track { position: relative; }
.timeline-event.overlapping summary { background: var(--event-fill); }
.timeline-event.overlapping summary:hover, .timeline-event.overlapping[open] summary { background: var(--event-fill); }
.day-timeline { position: relative; }
.day-end { position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; }
.timeline-event, .gap { position: absolute; height: var(--span-height); }
.timeline-event { padding: 0 3px; }
.timeline-event summary { height: 100%; min-height: 0; margin: 0; overflow: hidden; }
.timeline-event .event-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.timeline-event .event-calendar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.timeline-event .dot { margin-right: 6px; }
.timeline-event.overlapping summary { grid-template-columns: minmax(0, 1fr) 14px; gap: 4px 8px; align-content: start; }
.timeline-event.overlapping .event-time { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0 8px; }
.timeline-event.overlapping .event-start { width: 100%; }
.timeline-event.overlapping summary > span:nth-child(2) { grid-column: 1; }
.timeline-event.overlapping .event-chevron { grid-column: 2; grid-row: 1; }
.timeline-event.is-compact:not([open]) summary { grid-template-columns: minmax(0, 1fr) 14px; gap: 2px 8px; padding: 3px 8px; align-content: start; font-size: 13px; line-height: 18px; }
.timeline-event.is-compact:not([open]) .event-time { grid-column: 1; display: flex; flex-wrap: nowrap; gap: 6px; padding: 0; font-size: 12px; line-height: 16px; }
.timeline-event.is-compact:not([open]) .event-start { width: auto; }
.timeline-event.is-compact:not([open]) summary > span:nth-child(2) { grid-column: 1; min-width: 0; }
.timeline-event.is-compact:not([open]) .event-title { display: block; white-space: nowrap; text-overflow: ellipsis; }
.timeline-event.is-compact:not([open]) .event-chevron { grid-column: 2; grid-row: 1 / 3; }
.timeline-event.is-compact:not([open]) :is(.event-calendar, .event-continuation) { display: none; }
.timeline-event.is-short:not([open]) summary { grid-template-columns: max-content minmax(0, 1fr) 12px; align-items: center; align-content: center; gap: 6px; padding: 0 4px; font-size: 12px; line-height: 14px; }
.timeline-event.is-short:not([open]) summary > span:nth-child(2) { grid-column: 2; grid-row: 1; }
.timeline-event.is-short:not([open]) .event-time { font-size: 12px; }
.timeline-event.is-short:not([open]) .event-duration { display: none; }
.timeline-event.is-short:not([open]) .event-chevron { grid-column: 3; grid-row: 1; margin: 0; }
.day-content .timeline-event.is-brief:not([open]) summary { grid-template-columns: minmax(0, 1fr) 14px; align-items: center; align-content: center; gap: 8px; padding: 3px 8px; font-size: 13px; line-height: 18px; }
.timeline-event.is-brief:not([open]) :is(.event-time, .event-calendar) { display: none; }
.timeline-event.is-brief:not([open]) summary > span:nth-child(2) { grid-column: 1; grid-row: 1; min-width: 0; }
.timeline-event.is-brief:not([open]) .event-title { display: block; white-space: nowrap; text-overflow: ellipsis; }
.timeline-event.is-brief:not([open]) .event-chevron { grid-column: 2; grid-row: 1; margin: 0; }
.event.detail-open {
  height: auto; max-height: var(--detail-height, 560px); padding: 0; z-index: var(--layer-disclosure);
  border: 1px solid color-mix(in srgb, var(--event-ink) 40%, transparent);
  border-radius: var(--sure-radius); background: var(--surface); overflow: clip;
  --timeline-label-fill: transparent;
}
.event.detail-open summary {
  grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 12px; align-content: start;
  height: auto; min-height: 0; margin: 0; padding: 14px 16px 16px;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--event-ink) 20%, transparent);
  border-radius: 0; background: var(--event-fill);
}
.event.detail-open .event-time { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0 10px; padding: 0; font-size: 13px; }
.event.detail-open .event-start { width: auto; }
.event.detail-open summary > span:nth-child(2) { grid-column: 1; min-width: 0; }
.event.detail-open .event-title { display: block; font-size: 20px; line-height: 1.35; letter-spacing: -.015em; white-space: normal; overflow-wrap: anywhere; }
.event.detail-open .event-calendar { display: block; white-space: normal; margin-top: 6px; }
.event.detail-open .event-chevron { grid-column: 2; grid-row: 1 / 3; align-self: start; justify-self: center; margin-top: 2px; }
.event.detail-open :is(.event-time, .event-title, .event-calendar, .event-chevron) { transform-origin: top left; }
.event.detail-open .event-detail {
  position: relative; padding: 18px 16px 20px; max-height: calc(var(--detail-height, 560px) - var(--detail-summary-height, 120px) - 2px);
  overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; container-type: inline-size;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--event-ink) 45%, transparent) transparent;
  scroll-padding-block: 18px; line-height: 1.6; background: var(--surface);
}
.event.detail-open .event-detail dl { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.event.detail-open .description { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--event-ink) 20%, transparent); max-width: 70ch; }
.event.detail-open .event-detail a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.event.detail-open .event-detail a:hover { text-decoration-thickness: 2px; }
.event.detail-open ::selection { color: var(--surface); background: var(--event-ink); }
.event.detail-open summary:focus-visible { outline: 2px solid var(--event-ink); outline-offset: -4px; }
.event.detail-open .event-detail:focus-visible { outline: 2px solid var(--event-ink); outline-offset: -4px; }
.event.detail-open::after {
  content: ''; position: absolute; inset: auto 0 0; height: 22px; pointer-events: none; opacity: 0;
  background: linear-gradient(transparent, var(--surface)); transition: opacity 120ms ease-out;
}
.event.detail-more::after { opacity: 1; }
.event.detail-scrolled summary { border-bottom-color: color-mix(in srgb, var(--event-ink) 45%, transparent); }
@container (max-width: 320px) {
  .event.detail-open .event-detail dl { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .event.detail-open .event-detail dt:not(:first-child) { margin-top: 12px; }
  .event.detail-open .event-detail dt { font-size: 12px; }
}
.event.detail-moving { overflow: clip; max-height: none; }
.event.detail-moving .event-detail { overflow: hidden; }
.event.detail-moving::after { opacity: 0; }
.gap { left: 3px; width: calc(var(--agenda-lane-width, 100%) - 6px); pointer-events: none; }
.gap-surface { --gap-rule: color-mix(in srgb, var(--muted) 65%, transparent); position: absolute; inset: 0 auto auto 0; width: min(64px, 100%); border-radius:var(--sure-gap-radius); height: 100%; display: flex; align-items: center; justify-content: center; padding: 1px 6px; color: var(--muted); overflow: hidden; }
.gap-surface::before, .gap-surface::after { content: ''; position: absolute; inset-block: 0; left: 50%; transform: translateX(-50%); }
.gap-surface::before { border-left: 2px dotted var(--gap-rule); }
.gap-surface::after { width: 18px; border-block: 1px solid var(--gap-rule); }
.gap-time { position:relative; z-index:var(--layer-event-label); --timeline-label-fill:var(--page); white-space: nowrap; font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }
.empty-state { padding: 76px 0 92px; max-width: 470px; }
.empty-state p { margin: 12px 0 24px; color: var(--muted); line-height: 1.65; }
.welcome { padding-top: 100px; }
.welcome h1 { font-size: 36px; }
.welcome-note { font-size: 13px; margin-top: 18px !important; }
.notice { color: var(--danger); font-size: 14px; padding: 14px 0; line-height: 1.6; }
.notice p + p { margin-top: 6px; }
@media (max-width: 600px) {
  h1 { font-size: 26px; }
  .agenda-range { --month-line-height:31.2px; }
  .month-heading, .month-placeholder { font-size:26px; }
  .week-header { align-items: flex-start; flex-direction: column; gap: 12px; margin: 12px 0; }
  .week-nav { width: 100%; }
  .week-nav #today { margin-right: auto; }
  button, .button { min-height: 44px; }
  .icon-button { width: 44px; }
  .agenda { --date-width: 24px; --clock-left: 30px;  }
  .day-number { font-size: 18px; order: -1; }
  .event:not([open]) summary { grid-template-columns: 93px minmax(0,1fr) 12px; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .event-time { font-size: 12px; }
  .event-detail { padding-left: 0; padding-bottom: 16px; }
  .empty-day { padding-top: 0; }
  .welcome { padding-top: 70px; }
  .welcome h1 { font-size: 32px; }
  .empty-state { padding-top: 45px; }
}

.projection-status:empty { display:none; }
.gap-time .timeline-label { border-radius:var(--sure-label-radius); margin-inline:0; }
}