@import url('../care-current.css');

#watch-complications {
  width: min(100%, 1312px);
  margin-top: 48px;
  scroll-margin-top: 76px;
}

#watch-mvp-curve, #watch-mvp-care { scroll-margin-top: 76px; }

.ec-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  gap: 32px;
  margin-top: 24px;
}

.ec-study {
  --ec-face-bg: black;
  --ec-line: var(--c-surface);
  --ec-text: var(--c-surface);
  --ec-note: var(--c-neutral-300);
  min-width: 0;
  scroll-snap-align: start;
}

.ec-study[data-rendering="color"] {
  --ec-note: var(--c-surface);
}

.ec-study[data-backdrop="purple"] {
  --ec-strip-bg: url('../three-preview/purple-grain.svg?v=4') repeat,
    linear-gradient(110deg, var(--a14-purple-sky-start), var(--a14-purple-sky-middle) 56%, var(--a14-purple-sky-end));
}

.ec-mode-title, .ec-detail-title {
  margin: 0;
  color: var(--c-muted);
  text-align: center;
  font-size: 13px;
  line-height: 18px;
}

.ec-mode-title { font-weight: 600; }
.ec-detail-title { margin-bottom: 8px; }

.watch-screen.ec-face {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  background: var(--ec-face-bg);
  color: var(--ec-text);
}

.ec-face-clock {
  justify-self: end;
  margin-inline-end: 20px;
  font-size: 34px;
  line-height: 41px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ec-enlargement {
  width: min(100%, 416px);
  margin: 8px auto 0;
}

.ec-zoom {
  container: ec-zoom / inline-size;
  display: grid;
  place-items: center;
  padding-block: 24px;
  border-radius: var(--zoomie-glass-radius);
  background: var(--ec-face-bg);
}

.ec-zoom > .ec-slot { zoom: 1.25; }
@container ec-zoom (min-width: 308px) {
  .ec-zoom > .ec-slot { zoom: 1.375; }
}
@container ec-zoom (min-width: 400px) {
  .ec-zoom > .ec-slot { zoom: 1.75; }
}

.energy-complication {
  display: grid;
  width: 216px;
  padding-block: 8px 4px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ec-strip-bg, transparent);
  background-blend-mode: soft-light, normal;
  min-height: 44px;
  color: var(--ec-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

.energy-complication:focus-visible {
  outline: 2px solid var(--ec-text);
  outline-offset: 4px;
}

.energy-complication:active { opacity: .8; }

.ec-heading, .ec-status {
  display: flex;
  align-items: center;
}

.ec-heading { justify-content: space-between; gap: 8px; padding-inline: 8px; }
.ec-status { gap: 4px; }
.ec-status strong { font-size: 17px; line-height: 22px; font-weight: 600; }

.ec-cat {
  display: block;
  flex: none;
  width: 32px;
  height: 26px;
}

.ec-cat svg { display: block; width: 100%; height: 100%; }
.ec-study[data-rendering="mono"] .ec-cat {
  mask: url('./assets/cat-head-reversed.png') center / contain no-repeat;
  background-color: var(--ec-text);
}

.ec-until { font-size: 13px; line-height: 18px; color: var(--ec-note); }

.ec-next-heading { margin-top: 48px; scroll-margin-top: 76px; }

.status-complication {
  grid-template-columns: max-content max-content;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 12px;
}

.status-complication .ec-cat { width: 60px; height: 50px; }
.sc-copy { display: grid; justify-items: center; gap: 4px; }
.sc-title-row { display: flex; align-items: center; gap: 4px; }
.sc-title { font-size: 22px; line-height: 28px; font-weight: 600; }
.sc-until { font-size: 12px; line-height: 16px; color: var(--c-neutral-400); }
/* App steady-state ornaments: flower and cloud in the second atlas row. */
.sc-plush {
  width: 14px;
  height: 14px;
  background: url('../assets/a12-decor-atlas-v312.png') center / 300% 300% no-repeat;
}
.sc-plush-flower { background-position: left center; transform: translateY(2px); }
.sc-plush-cloud { transform: translateY(-2px); }
.ec-study[data-backdrop="purple"] .sc-until {
  color: color-mix(in srgb, var(--ec-text) 86%, transparent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  @media (forced-colors: none) {
    .ec-study[data-rendering="color"]:not([data-backdrop]) .sc-title {
      background-image: linear-gradient(90deg, var(--c-yellow-accent), var(--c-pink-accent), var(--c-purple-accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
}
.shared-complication {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 88px;
  padding: 0;
}
.shared-person {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 8px 4px;
}
.shared-identity { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; }
.shared-person strong { font-size: 17px; line-height: 22px; font-weight: 600; }
.shared-person time { color: var(--c-neutral-400); font-size: 12px; line-height: 16px; }
.ec-study[data-backdrop="split"] .shared-person {
  background-color: var(--a09-sky-start);
  text-shadow: 0 1px 2px var(--c-neutral-800);
}
.ec-study[data-backdrop="split"] .shared-person time { color: var(--ec-text); }
.ec-study[data-rendering="color"]:not([data-backdrop]) .shared-person strong { color: var(--shared-accent); }
.ec-study:not([data-backdrop]) .shared-complication::after {
  content: "";
  position: absolute;
  inset: 18% auto 18% 50%;
  width: 1px;
  background-color: color-mix(in srgb, var(--ec-text) 24%, transparent);
  pointer-events: none;
}
.connection-gallery { grid-template-columns: repeat(2, minmax(280px, 416px)); justify-content: center; }
@media (max-width: 623px) {
  .connection-gallery { grid-template-columns: minmax(0, 416px); row-gap: 32px; }
}
.connection-complication {
  --portrait-size: 60px;
  --perch-height: 24px;
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}
.connection-person {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-top: var(--perch-height);
  padding-bottom: 4px;
}
.ec-study[data-backdrop="split"] .connection-person {
  background-color: var(--a09-sky-start);
}
.ec-study[data-backdrop="split"] .connection-caption {
  color: var(--ec-text);
  text-shadow: 0 1px 2px var(--c-neutral-800);
}
.connection-portrait {
  position: relative;
  width: var(--portrait-size);
  height: var(--portrait-size);
  border-radius: 50%;
  padding: 2px;
  background: var(--zoomie-glass-reading);
  box-shadow: inset 0 1px 1px var(--c-surface), inset 0 -1px 1px var(--zoomie-glass-background);
}
.connection-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.connection-cat {
  position: absolute;
  bottom: calc(100% - 3px);
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 22px;
}
.connection-current {
  position: absolute;
  left: calc(25% + var(--portrait-size) / 2);
  width: calc(50% - var(--portrait-size));
  top: calc(var(--perch-height) + var(--portrait-size) / 2);
  transform: translateY(-50%);
  --care-wire: var(--ec-text);
  --care-outline-stroke: .55px;
  --care-surge-stroke: 2.65;
}
.connection-caption {
  color: var(--shared-accent);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
.connection-until {
  color: color-mix(in srgb, var(--c-surface) 48%, transparent);
  font-size: 11px;
  line-height: 13px;
  text-shadow: none;
}
.square-study {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 416px);
  gap: 32px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.square-device .ec-face {
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
}
.square-device .ec-face-clock { grid-area: 1 / 2; margin: 0; }
.square-device .ec-slot { grid-area: 1 / 1; }
.square-cat {
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--a09-sky-start) 32%, var(--ec-face-bg));
}
.square-cat svg { display: block; width: 100%; height: auto; }
.square-pair-gallery { display: block; overflow: visible; }
.square-pair-gallery .square-study { margin: 0; }
.square-pair {
  grid-template-columns: repeat(2, 1fr);
  place-items: stretch;
  background: var(--ec-face-bg);
}
.square-pair-person {
  position: relative;
  background: color-mix(in srgb, var(--a09-sky-start) 32%, var(--ec-face-bg));
}
.square-pair-person svg { position: absolute; z-index: 1; width: 118%; }
.square-pair-person:first-child svg { top: 4px; left: 0; }
.square-pair-person:last-child svg { bottom: 4px; right: 0; }
[data-crop="half"] .square-pair-person { overflow: hidden; }
[data-crop="half"] .square-pair-person svg {
  inset: 50% auto auto 0;
  width: 200%;
  transform: translateY(-50%);
}
/* Each pane is half a head wide. Show my right half and RIK's left half. */
[data-crop="half"] .square-pair-person:first-child svg { left: -100%; }
.square-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding: 24px 16px;
  border-radius: var(--zoomie-glass-radius);
  background: var(--ec-face-bg);
}
.square-options button {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--c-neutral-300);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}
.square-options .square-cat { width: 100%; max-width: 72px; }
.square-options button[aria-pressed="true"] { color: var(--ec-text); font-weight: 600; }
.square-options button[aria-pressed="true"] .square-cat { outline: 1px solid var(--ec-text); outline-offset: 2px; }
.square-options button:focus-visible { outline: 2px solid var(--ec-text); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 700px) {
  .square-study { grid-template-columns: minmax(0, 416px); gap: 8px; }
}
.ec-curve { display: block; width: 100%; height: auto; color: var(--ec-line); }
.ec-area-start, .ec-area-end { stop-color: var(--ec-line); }
.ec-area-start { stop-opacity: .24; }
.ec-area-end { stop-opacity: .02; }
.ec-axis, .ec-tick, .ec-tick-major { stroke: var(--ec-note); stroke-width: 1; }
.ec-axis { stroke-opacity: .12; }
.ec-tick { stroke-opacity: .20; }
.ec-tick-major { stroke-opacity: .36; }
.ec-tick-label { fill: var(--ec-note); fill-opacity: .92; font-size: 12px; font-weight: 400; }
.ec-past, .ec-future {
  fill: none;
  stroke: var(--ec-line);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ec-future { stroke-dasharray: 4 3; }
.ec-base-line { stroke-opacity: .70; }
.ec-past.ec-base-line { stroke-opacity: .80; }
.ec-predicted { opacity: .65; }
.ec-study[data-rendering="color"] .ec-phase-line { stroke: var(--ec-state-accent); stroke-width: 1.2px; }
.ec-study[data-rendering="mono"] .ec-phase-line { stroke-width: 3px; }
.ec-study[data-rendering="mono"] .ec-phase-edge { stroke: var(--ec-face-bg); stroke-opacity: .5; stroke-width: 4.5px; }
.ec-study[data-rendering="mono"] .ec-future:is(.ec-phase-line, .ec-phase-edge) { stroke-dasharray: 4 6; }
.ec-now-dot { stroke: var(--c-purple-300); stroke-width: 1.2px; }
.ec-study[data-rendering="mono"] .ec-now-dot { stroke: var(--ec-face-bg); }

@media (max-width: 623px) {
  .ec-gallery { gap: 16px; }
}

@media (forced-colors: active) {
  .ec-study[data-rendering] {
    --ec-face-bg: Canvas;
    --ec-text: CanvasText;
    --ec-note: CanvasText;
    --ec-line: LinkText;
    --ec-strip-bg: Canvas;
  }
  .ec-now-halo { display: none; }
  .ec-study[data-rendering="mono"] .ec-cat { forced-color-adjust: none; }
  .ec-base-line, .ec-past.ec-base-line { stroke-opacity: 1; }
  .ec-predicted { opacity: 1; }
  .ec-study[data-rendering="color"] .ec-phase-line { stroke: LinkText; }
  .ec-now-dot { stroke: Canvas; }
  .ec-axis, .ec-tick, .ec-tick-major { stroke-opacity: 1; }
  .ec-tick-label { fill-opacity: 1; }
}