.daily-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; width: min(100%, 592px); margin: 24px auto 0; }
#watch-daily { scroll-margin-top: 76px; }
@media (max-width: 623px) { .daily-comparison { grid-template-columns: 1fr; gap: 24px; } }

.daily-flat-section { width: min(100%, 1192px); margin-top: 48px; scroll-margin-top: 76px; }
.daily-flat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.watch-screen[data-standalone] .watch-page-dots { display: none; }
.watch-screen[data-standalone] .watch-pages { overflow-y: hidden; cursor: default; }
@media (max-width: 1223px) { .daily-flat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 623px) { .daily-flat-grid { grid-template-columns: 1fr; } }

.sleep-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; width: min(100%, 592px); margin: 24px auto 0; }
#watch-sleep-comparison { scroll-margin-top: 76px; }
.watch-screen[data-sleep-background="illustration"] .watch-health-page[data-page-key="sleep"]:not([data-detail-open="true"]) {
  background: var(--c-purple-100) url('./assets/sleep-pillow-illustration.png') center / cover no-repeat;
}
.watch-screen[data-sleep-background="illustration"] .watch-health-page[data-page-key="sleep"]::before { display: none; }
.watch-screen[data-sleep-background="illustration"] .watch-health-artwork { display: none; }
.watch-screen[data-sleep-background="illustration"] .watch-health-page[data-page-key="sleep"] .watch-health-hero { top: 64px; align-items: center; }
.watch-screen[data-sleep-background="illustration"] .watch-health-page[data-page-key="sleep"] .watch-sleep-times { bottom: 52px; justify-content: center; gap: 24px; }
@media (max-width: 623px) { .sleep-comparison { grid-template-columns: 1fr; gap: 24px; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .watch-screen[data-sleep-background="illustration"] .watch-health-page[data-page-key="sleep"]:not([data-detail-open="true"]) { background: var(--c-surface); }
}
#watch-mvp { width: min(100%, 1040px); margin-top: 32px; scroll-margin-top: 76px; }
#watch-care-draft { margin-top: 48px; scroll-margin-top: 76px; }
.care-draft-preview { margin-top: 24px; }
#watch-mvp-care-connection { scroll-margin-top: 76px; }
.watch-mvp-daily .watch-daily-page > .watch-daily-score { top: 28px; left: 36px; }
.watch-mvp-daily .watch-score-ring { width: 156px; height: 156px; }
.watch-mvp-daily .watch-daily-page > .watch-daily-score .watch-ring-reading { position: static; }
.watch-mvp-scores { position: absolute; top: 192px; left: 24px; right: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; text-align: center; }
.watch-mvp-scores > div { display: grid; gap: 4px; }
.watch-mvp-scores dt { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; line-height: 13px; font-weight: 400; color: var(--c-muted); }
.watch-mvp-scores dd { margin: 0; font-size: 13px; line-height: 18px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--c-ink); white-space: nowrap; }

/* The confirmed watch uses one continuous scroller for all three pages. */
.watch-mvp-interactive > .watch-pages,
.watch-mvp-interactive .watch-scroll { touch-action: pan-x pan-y; }
.watch-mvp-interactive .watch-chart text { font-size: 11px; fill-opacity: .58; }
.watch-mvp-interactive .watch-hour-mark { stroke: var(--watch-text); stroke-opacity: .38; stroke-width: 1; }
.watch-inset-curve .watch-track-edge { stroke: var(--c-surface); stroke-width: 5.5px; stroke-opacity: .8; }
.watch-inset-curve .watch-track-color { stroke: var(--watch-accent); stroke-width: 3.3px; }
.watch-inset-curve.predicted { opacity: .65; stroke-dasharray: 8 9; }
.watch-mvp-care { isolation: isolate; background: transparent; }

.watch-mvp-care { height: auto; }
#watch-mvp-curve {
  --watch-base: var(--c-purple-600);
  background: url('../three-preview/purple-grain.svg?v=4') repeat,
    linear-gradient(110deg, var(--a09-sky-start), var(--a09-sky-middle) 56%, var(--a09-sky-end));
  background-blend-mode: soft-light, normal;
}
#watch-care-draft .watch-person { background: var(--a09-sky-start); }
:is(#watch-mvp, #watch-care-draft) :is(#watch-mvp-curve, .watch-mvp-care-preview)::before,
:is(#watch-mvp, #watch-care-draft) :is(#watch-mvp-curve, .watch-mvp-care-preview)::after,
#watch-care-draft .watch-person::before { content: none; }
/* Keep the glass rim while letting the App artwork show at its original color. */
#watch-mvp-curve:not([data-watch-page="daily"]) > .thin-glass-cover,
.watch-mvp-care-preview > .thin-glass-cover { background: none; }
.watch-care-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior-y: contain; touch-action: pan-y; cursor: grab; user-select: none; }
.watch-care-scroll::-webkit-scrollbar { display: none; }
.watch-care-scroll:focus-visible { outline: 2px solid var(--watch-text); outline-offset: -4px; border-radius: inherit; }
.watch-care-scroll > .watch-shared-people { position: relative; isolation: isolate; min-height: 512px; }
.watch-care-scores { width: 100%; margin-top: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.watch-care-scores > p { margin: 0 0 4px; font-size: 11px; line-height: 13px; opacity: .8; }
.watch-care-scores > strong { display: block; font-size: 34px; line-height: 41px; font-weight: 600; }
.watch-care-rating { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; font-weight: 400; }
.watch-care-scores dl { display: grid; gap: 12px; margin: 24px 0 0; }
.watch-care-scores dl > div { display: grid; gap: 4px; }
.watch-care-scores dt { font-size: 11px; line-height: 13px; opacity: .8; }
.watch-care-scores dd { margin: 0; font-size: 13px; line-height: 18px; font-weight: 400; }
.watch-mvp-care-preview .watch-clock { z-index: 3; pointer-events: none; }
.watch-care-connected { --ec-text: var(--c-surface); color: var(--ec-text); }
.watch-care-connected .watch-connection-hero {
  display: grid;
  height: calc(var(--watch-screen-height) - 64px);
  --clock-space: 32px;
  --caption-gap: 8px;
  --caption-line: 16px;
  --portrait-size: 68px;
}
.watch-care-connected .connection-person {
  align-content: center;
  gap: var(--caption-gap);
  /* Center the portraits below the clock; cats and captions balance above and below. */
  padding: calc(var(--clock-space) + var(--caption-gap) + var(--caption-line)) 0 0;
}
.watch-care-connected .connection-current { top: calc(50% + var(--clock-space) / 2); }
.watch-connection-content { position: relative; isolation: isolate; }
/* Each person's state color spans the entire scroll, including the space between readings. */
.watch-connection-details > section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-start: 0;
  width: 50%;
  background: var(--a09-sky-start);
  pointer-events: none;
}
.watch-connection-details > section + section::before { inset-inline-start: 50%; }
.watch-care-connected .connection-caption { line-height: var(--caption-line); color: var(--ec-text); text-shadow: 0 1px 2px var(--c-neutral-800); }
.watch-care-connected .connection-until { font: inherit; color: inherit; text-shadow: inherit; }
.watch-care-connected .connection-cat { width: 32px; height: 26px; }
.watch-connection-details { --care-glass-opacity: .8; display: grid; grid-template-columns: 1fr 1fr; }
.watch-connection-details > section { padding: 20px 24px 32px; }
.watch-connection-details .watch-care-scores {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  text-shadow: 0 1px 2px var(--c-neutral-800);
}
.watch-connection-details .watch-care-scores > :is(p, strong) {
  margin: 0;
  font-size: 11px;
  line-height: 13px;
  font-weight: 400;
  opacity: .9;
}
.watch-connection-details :is(.watch-total-track, dl) { grid-column: 1 / -1; }
.watch-total-track {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-ink) 24%, transparent);
}
.watch-total-track > span { display: block; height: 100%; border-radius: inherit; background: var(--c-surface); opacity: var(--care-glass-opacity); }
.watch-connection-details .watch-care-scores dl { margin-top: 28px; }
.watch-connection-details .watch-care-scores dt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 1;
}
.watch-mvp-scores dt svg { flex: none; width: 12px; height: 12px; }
.watch-mvp-scores dt linearGradient stop { stop-color: var(--c-surface); stop-opacity: .9; }
.watch-mvp-scores dt linearGradient stop:last-child { stop-color: var(--c-purple-500); stop-opacity: .95; }
.watch-mvp-scores dt [fill$="-color)"] { stroke: var(--c-purple-400); stroke-opacity: .78; stroke-width: 1; }
.watch-connection-details dt svg { width: 16px; height: 16px; opacity: var(--care-glass-opacity); }
.watch-connection-details dt linearGradient stop { stop-color: var(--c-surface); stop-opacity: .45; }
.watch-connection-details dt linearGradient stop:last-child { stop-opacity: .85; }