/* The Widgets section of the start page: two full-width rows of the app's widgets sliding across
   the screen (assets/widgets.js doubles each row so the loop is seamless). HTML replicas of the
   WidgetKit views in the app's StarriseContactsWidget/: the Moments widget (MomentsWidgetViews.swift,
   medium, in light and dark), the Lock Screen's Moments and Contact widgets (ContactWidget.swift),
   the action widgets (ActionWidget.swift) and the controls (AppControlWidget.swift). Sizes are in
   points of an iPhone (--u, one point), so a medium widget is 338 × 158. Strings are the app's
   own; the German page gets them through tools/i18n/de.json. */

#widgets { overflow: hidden; }
.wg-marquee { --u: 1px; --gap: calc(20 * var(--u)); display: flex; flex-direction: column; gap: var(--gap); width: 100vw; margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', Inter, system-ui, sans-serif; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
@media (max-width: 600px) { .wg-marquee { --u: 0.82px; } }
.wg-track { display: flex; gap: var(--gap); width: max-content; padding: calc(12 * var(--u)) 0 calc(18 * var(--u)); }
.wg-track > * { flex: none; }
/* Moves only once the script has doubled the row: then -50% is exactly one copy. */
.wg-ready .wg-track { animation: wg-slide var(--wg-duration, 60s) linear infinite; }
/* The rows run in opposite directions; hovering one holds it, to read a widget. */
.wg-ready .wg-track.reverse { --wg-duration: 70s; animation-direction: reverse; }
@media (hover: hover) { .wg-ready .wg-track:hover { animation-play-state: paused; } }
@keyframes wg-slide { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
/* Reduce Motion: the script leaves the rows single and still; they scroll by hand, unfaded. */
@media (prefers-reduced-motion: reduce) {
  .wg-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* A widget tile: the medium widget's size and corner radius */
.wg-w { position: relative; width: calc(338 * var(--u)); height: calc(158 * var(--u)); border-radius: calc(24 * var(--u)); overflow: hidden; text-align: left;
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(40, 20, 10, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.wg-w.small { width: calc(158 * var(--u)); }

/* Moments, medium (.fill.tertiary): up to 3 moments */
.wg-moments { display: flex; flex-direction: column; justify-content: center; gap: calc(8 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); background: #f4f4f6; color: #000; }
.wg-moments.dark { background: #2c2c2e; color: #fff; }
.wg-row { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.wg-av { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; object-fit: cover; }
.wg-row-text { min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.wg-name { font-size: calc(14 * var(--u)); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-tag { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.25; color: rgba(60, 60, 67, 0.6); white-space: nowrap; }
.wg-moments.dark .wg-tag { color: rgba(235, 235, 245, 0.6); }
.wg-tag i { font-size: calc(10 * var(--u)); }
/* Moment types (WidgetStyles.swift) */
.wg-birthday { color: #EB4259; }
.wg-anniversary { color: #2D95E1; }
.wg-note { color: #4FB353; }
.wg-nameday { color: #F29B1B; }

/* Lock Screen widgets, on a plain wallpaper: graphite, or the site's orange */
.wg-lock { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); padding: calc(22 * var(--u)) calc(20 * var(--u)) 0; color: #fff;
  background: #1d1d1f; }
.wg-lock.warm { background: #EC911C; }
.wg-lock-time { position: absolute; top: calc(12 * var(--u)); left: 0; right: 0; text-align: center; font-size: calc(13 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.8); }
/* accessoryRectangular: the next moment */
.wg-rect { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.wg-rect-day { font-size: calc(13 * var(--u)); line-height: 1.2; color: rgba(255, 255, 255, 0.72); }
.wg-rect-name { font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1.2; }
.wg-rect-sub { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.2; color: rgba(255, 255, 255, 0.72); }
.wg-rect-sub i { font-size: calc(11 * var(--u)); }
/* accessoryCircular: a contact's photo with its action badge, or an action. Lock Screen widgets sit in
   a row under the clock, 64 pt each with 14 pt gaps; AccessoryWidgetBackground is a frosted circle,
   the symbol 22 pt medium, everything monochrome. */
.wg-circ { position: relative; flex: none; display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.95); font-size: calc(22 * var(--u)); }
.wg-w.small.wg-lock { padding: 0; }
.wg-w.small .wg-circ { width: calc(92 * var(--u)); height: calc(92 * var(--u)); }
.wg-circ img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(1) brightness(1.12) contrast(0.9); opacity: 0.92; }
/* "Open App": the app's logo at 24 pt, accentable, so drawn in the Lock Screen's monochrome */
.wg-circ img.logo { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 22%; filter: grayscale(1) brightness(1.15); opacity: 0.95; }
.wg-badge { position: absolute; left: 50%; bottom: calc(-6 * var(--u)); display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u));
  transform: translateX(-50%); border-radius: 50%; background: #3a3a3c; color: #fff; font-size: calc(13 * var(--u)); }
.wg-lock.warm .wg-badge { background: #1d1d1f; }

/* Controls (Control Center and the Lock Screen) */
.wg-controls { display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: calc(12 * var(--u)); background: #2c2c2e; }
.wg-controls span { display: grid; place-items: center; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.16);
  color: #fff; font-size: calc(21 * var(--u)); }
.wg-controls span.on { background: #fff; color: #fc4d02; }