/* Feed model (landing/feed.js): a week in the visitor's own calendar app, with
   the subscribed Kalender calendar in Kalender red and theirs in neutral grey. */
.fd { overflow: hidden; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-sheet); }
.fd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); }
.fd-bar p { margin: 0; }
.fd-app { font-weight: 600; }
.fd-range { font: 400 .9375rem/1.3 var(--display); color: var(--pencil); font-variant-numeric: tabular-nums; }
.fd-toggles { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-left: auto; }
.fd-toggle { position: relative; display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }
.fd-toggle input { position: absolute; opacity: 0; width: 1.125rem; height: 1.125rem; margin: 0; }
.fd-swatch { flex: none; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--fd-c); }
.fd-toggle input:checked + .fd-swatch { background: var(--fd-c); }
.fd-toggle input:checked + .fd-swatch::after { content: ""; width: .375rem; height: .625rem; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fd-toggle input:focus-visible + .fd-swatch { outline: 3px solid var(--focus); outline-offset: 2px; }
.fd-toggle b { font-weight: 600; }
.fd-toggle small { margin-left: .375rem; font-size: .75rem; color: var(--pencil); }
.fd-own { --fd-c: #6b7380; }
.fd-kalender { --fd-c: var(--red); }

.fd-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 15rem; }
.fd-day { min-width: 0; padding: .75rem .5rem 1rem; border-left: 1px solid var(--rule); }
.fd-day:first-child { border-left: 0; }
.fd-date { display: flex; align-items: baseline; gap: .375rem; margin: 0 0 .625rem .25rem; font-family: var(--display); }
.fd-date span { font-size: .8125rem; color: var(--pencil); }
.fd-date b { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-today .fd-date b { display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--red); color: var(--on-red); font-size: 1rem; }
.fd-day ul { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.fd-event { display: grid; padding: .3125rem .5rem; border-left: 3px solid; border-radius: 4px; font-size: .8125rem; line-height: 1.3; }
.fd-time { font: 400 .75rem/1.3 var(--display); font-variant-numeric: tabular-nums; color: var(--pencil); }
.fd-title { overflow: hidden; text-overflow: ellipsis; }
.fd-from-own { border-color: #6b7380; background: color-mix(in srgb, #6b7380 13%, var(--surface)); }
.fd-from-kalender { border-color: var(--red); background: color-mix(in srgb, var(--red) 13%, var(--surface)); font-weight: 600; }
.fd-foot { margin: 0; padding: .875rem 1.25rem; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--pencil); }
.fd-sync { display: inline-flex; align-items: center; gap: .375rem; font: 600 .8125rem/1.3 var(--display); color: var(--pencil); }
.fd-sync::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--red); }

/* Arrival: the Kalender events wait until the week scrolls into view, then slide in one by one. */
@media screen { .fd-wait .fd-from-kalender, .fd-wait .fd-sync { opacity: 0; } }
.fd-live .fd-from-kalender { animation: fd-arrive .55s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0s) + .2s) both; }
.fd-live .fd-sync { animation: fd-synced .45s ease-out 2.6s both; }
@keyframes fd-arrive { from { opacity: 0; transform: translateY(-.75rem) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fd-synced { from { opacity: 0; transform: translateX(-.25rem); } to { opacity: 1; transform: none; } }

@media (max-width: 56rem) {
  .fd-week { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fd-day { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; padding: .625rem 1rem; border-left: 0; border-top: 1px solid var(--rule); }
  .fd-day:first-child { border-top: 0; }
  .fd-date { margin: .25rem 0 0; }
  .fd-toggles { margin-left: 0; width: 100%; }
}
@media (forced-colors: active) {
  .fd-event { border: 1px solid CanvasText; border-left-width: 3px; }
  .fd-swatch { border: 1px solid CanvasText; }
}