/* Ordinary page flow: these discoveries follow the core weather story. */
.lens-discovery { padding: 100px max(24px, 7vw) 70px; overflow: hidden; }
.lens-intro { max-width: 740px; margin: 0 auto 65px; text-align: center; }
.lens-intro h2, .lens-copy h3 { font-family: Albert, system-ui, sans-serif; font-weight: 400; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.lens-intro h2 { font-size: clamp(34px, 4.2vw, 58px); margin: 20px 0; }
.lens-intro > p:not(.overline) { color: #b9c6bd; font-size: 17px; line-height: 1.65; max-width: 510px; margin: 0 auto; }
.lens-premium { display: block; color: #a1b0a6; font-size: 12px; margin-top: 22px; }
.lens-story { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 8vw, 120px); padding: 45px 0 80px; scroll-margin-top: 90px; }
.lens-copy { max-width: 440px; }
.lens-copy h3 { font-size: clamp(32px, 3.8vw, 50px); margin: 20px 0; }
.lens-copy > p:last-child { color: #b9c6bd; font-size: 17px; line-height: 1.7; }
.lens-visual { position: relative; margin: 0; width: min(100%, 320px); justify-self: center; }
.lens-visual::before { content: ''; position: absolute; inset: -6% -35%; background: radial-gradient(ellipse, #396d7830, transparent 67%); z-index: -1; }
.lens-astronomy .lens-visual::before { background: radial-gradient(ellipse, #4b655931, transparent 67%); }
.lens-device { width: 100%; filter: drop-shadow(0 26px 32px #0005); }
.lens-visual figcaption { display: flex; justify-content: space-between; align-items: center; margin: 20px 3px 0; font-size: 12px; color: #a6b5b0; }
.lens-motion { border: 0; padding: 10px 0 10px 12px; background: none; color: inherit; font-size: 12px; min-height: 44px; }
.lens-motion:hover { color: white; }
.lens-astronomy .lens-copy { grid-column: 2; grid-row: 1; }
.lens-astronomy .lens-visual { grid-column: 1; grid-row: 1; }
/* Sampled from the app's clear Astronomy night (simulator, Oct 21). */
.lens-screen { background: linear-gradient(#090e2d, #141c52 34%, #232d71 52%, #192361 62%, #0f1642 78%, #0b1137); }
.lens-screen--marine { background: radial-gradient(ellipse at 15% 25%, #34879745, transparent 65%), linear-gradient(145deg, #173a53, #21566b 50%, #0b293c); }
.lens-stars, .lens-water { position: absolute; left: 0; top: 0; width: 390px; height: 844px; }
/* The aurora returns additive light and covers only the band it can light. */
.lens-aurora { position: absolute; left: 0; mix-blend-mode: plus-lighter; }
/* ForecastAmbientSceneFade.broadLowerDissolve: opaque to 62%, smoothstep to clear at 96%. */
.lens-water { -webkit-mask-image: linear-gradient(#000 62%, rgb(0 0 0 / .9) 68.8%, rgb(0 0 0 / .5) 79%, rgb(0 0 0 / .1) 89.2%, transparent 96%); mask-image: linear-gradient(#000 62%, rgb(0 0 0 / .9) 68.8%, rgb(0 0 0 / .5) 79%, rgb(0 0 0 / .1) 89.2%, transparent 96%); }
.lens-screen .wl-header { position: relative; }
.lens-screen .wl-lens { display: flex; align-items: center; gap: 6px; }
/* ForecastOutcomeFullScreenHero and ForecastSceneShadow (darkness 1.25). */
.lens-screen { --scene-shadow-text: 0 1px 4px rgb(0 0 0 / .56), 0 2px 16px rgb(0 0 0 / .31); --scene-shadow-display: 0 1px 6px rgb(0 0 0 / .38), 0 4px 44px rgb(0 0 0 / .35); }
.lens-outcome { position: absolute; left: 24px; right: 24px; top: 363px; text-align: center; text-shadow: var(--scene-shadow-text); }
.lens-kicker { margin: 0 0 8px; font: 700 12px/16px Albert, system-ui, sans-serif; letter-spacing: 1.9px; text-transform: uppercase; color: #ffffffdb; }
.lens-grade { font: 500 54px/1.1 Albert, system-ui, sans-serif; letter-spacing: 0; color: #fff; text-shadow: var(--scene-shadow-display); }
.lens-tier { display: flex; justify-content: center; gap: 5px; margin-top: 12px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .56)) drop-shadow(0 2px 8px rgb(0 0 0 / .31)); }
.lens-tier i { width: 34px; height: 5px; border-radius: 3px; background: #ffffff2e; transition: background-color 350ms ease-in-out; }
.lens-outcome-title { font: 24px/1.25 Alegreya, Georgia, serif; color: #ffffffe0; margin: 16px 0 26px; }
.lens-outcome-note { font-size: 17px; color: #ffffffa8; line-height: 1.3; margin: 0 auto; max-width: 340px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lens-screen--astronomy .lens-outcome-title { margin-bottom: 13px; }
.lens-constellation { position: absolute; top: 190px; left: 50%; transform: translateX(-50%); text-align: center; width: 250px; color: #d2ddf1; text-shadow: var(--scene-shadow-text); }
.lens-constellation svg { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .56)) drop-shadow(0 2px 8px rgb(0 0 0 / .31)); }
.lens-constellation svg { width: 190px; height: 112px; overflow: visible; }
.lens-constellation-name { font-size: 16px; margin: 6px 0; }
.lens-constellation small { font-size: 10px; letter-spacing: 1.2px; color: #b1bfd6; }
.lens-activities { display: flex; justify-content: center; gap: 4px; position: absolute; top: 262px; left: 21px; right: 21px; background: #0000003d; border: 1px solid #ffffff2e; border-radius: 26px; padding: 4px; }
.lens-activities button { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; border: 0; background: none; padding: 9px 0; font: 500 11px/14px Albert, sans-serif; white-space: nowrap; cursor: pointer; color: #ffffffb8; border-radius: 22px; }
/* A shared highlight slides beneath the three equal-width activity buttons. */
.lens-activities::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 16px) / 3); border-radius: 22px; background: #ffffffeb; pointer-events: none; transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.lens-activities:has([data-activity="sailing"].selected)::before { transform: translateX(calc(100% + 4px)); }
.lens-activities:has([data-activity="surf"].selected)::before { transform: translateX(calc(200% + 8px)); }
.lens-activities button { position: relative; z-index: 1; min-width: 0; flex-basis: 0; transition: color 220ms ease; }
.lens-activities .selected { color: #000; }
.lens-screen--reduced .lens-activities::before, .lens-screen--reduced .lens-activities button { transition: none; }
@media (prefers-reduced-motion: reduce) { .lens-activities::before, .lens-activities button { transition: none; } }
.lens-screen--marine .lens-outcome { top: 378px; }
@media(max-width: 700px) {
  .lens-discovery { padding-top: 80px; padding-bottom: 25px; }
  .lens-intro { text-align: left; margin-bottom: 48px; }
  .lens-intro > p:not(.overline) { margin: 0; font-size: 16px; }
  .lens-intro .overline { font-size: 9px; letter-spacing: 1.5px; }
  .lens-story { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 20px 0 60px; }
  .lens-copy, .lens-astronomy .lens-copy { grid-column: 1; grid-row: 1; max-width: 480px; }
  .lens-astronomy .lens-visual { grid-column: 1; grid-row: 2; }
  .lens-copy h3 { margin-top: 14px; }
  .lens-copy > p:last-child { font-size: 16px; }
  .lens-visual { width: min(100%, 290px); }
}

/* The activity changes emphasis, never the underlying sea. */
.lens-activities button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lens-screen--reduced .lens-tier i { transition: none; }
@media (prefers-reduced-motion: reduce) { .lens-tier i { transition: none; } }
.lens-copy .lens-interaction-hint { margin-top: 24px; color: #d9e7df; font-size: 13px; }

/* Native SF Symbols, exported from AppKit; alpha masks inherit selection tint. */
.lens-sf-symbol { display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; background: currentColor; mask: var(--lens-symbol) center / contain no-repeat; -webkit-mask: var(--lens-symbol) center / contain no-repeat; }
.lens-activities .lens-sf-symbol { width: 12px; height: 12px; flex-basis: 12px; }
.lens-screen .wl-header > span:not(.wl-lens) .lens-sf-symbol { width: 18px; height: 18px; flex-basis: 18px; }
.lens-screen .wl-header > .wl-lens { height: 34px; }
.lens-sf-symbol[data-symbol="moon.stars.fill"] { --lens-symbol: url("./symbols/moon.stars.fill.png"); }
.lens-sf-symbol[data-symbol="sailboat.fill"] { --lens-symbol: url("./symbols/sailboat.fill.png"); }
.lens-sf-symbol[data-symbol="oar.2.crossed"] { --lens-symbol: url("./symbols/oar.2.crossed.png"); }
.lens-sf-symbol[data-symbol="surfboard"] { --lens-symbol: url("./symbols/surfboard.png"); }
.lens-sf-symbol[data-symbol="map"] { --lens-symbol: url("./symbols/map.png"); }
.lens-sf-symbol[data-symbol="slider.horizontal.3"] { --lens-symbol: url("./symbols/slider.horizontal.3.png"); }

/* Keep two Signals visible above the forecast tabs in both lens compositions. */
.lens-screen .lens-outcome { top: 363px; }
.lens-screen--marine .lens-outcome { top: 337px; }
.lens-screen .lens-constellation { top: 172px; }
.lens-signals { position: absolute; z-index: 2; left: 12px; right: 12px; top: 597px; background: #141b24f5; }
.lens-signals h3 { padding: 11px 12px 7px; }
.lens-signals .wl-signal-row { min-height: 57px; padding: 9px 0; font-size: 13px; line-height: 1.25; cursor: default; }
.lens-signals .lens-sf-symbol { width: 18px; height: 18px; flex-basis: 18px; color: #a8d8cf; }
.lens-signals .wl-signal-title small { display: block; margin-top: 4px; font-size: 10px; color: #adbdc8; }
.lens-signals .wl-signal-preview { color: #a8d8cf; }
.lens-signal-value { flex: 0 0 78px; text-align: center; font-size: 15px; font-weight: 600; color: #a8d8cf; }
.lens-signal-value small { font-size: 11px; font-weight: 400; }
.lens-sf-symbol[data-symbol="wind"] { --lens-symbol: url("./symbols/wind.png"); }
.lens-sf-symbol[data-symbol="lightspectrum.horizontal"] { --lens-symbol: url("./symbols/lightspectrum.horizontal.png"); }

/* LensSelectorListView: 58-point circles, 25-point palette SF Symbols. */
.lens-intro-icons { display: flex; justify-content: center; gap: 18px; margin: 0 0 28px; }
.lens-intro-orb { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid transparent; border-radius: 50%; background: radial-gradient(circle at bottom left, rgb(var(--orb-highlight) / .17), rgb(var(--orb-accent) / .19) 48%, transparent 82%) padding-box, linear-gradient(45deg, rgb(var(--orb-accent) / .72), rgb(var(--orb-highlight) / .30), #ffffff1a) border-box; box-shadow: inset 0 0 0 28px #00000047; }
.lens-intro-orb img { object-fit: contain; position: relative; }
.lens-intro-orb--weather { --orb-accent: 92 156 255; --orb-highlight: 255 199 77; }
.lens-intro-orb--astronomy { --orb-accent: 145 115 255; --orb-highlight: 77 237 173; }
.lens-intro-orb--marine { --orb-accent: 31 194 219; --orb-highlight: 46 224 235; }
@media(max-width: 700px) { .lens-intro-icons { justify-content: flex-start; } }

.lens-label-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lens-label-row .overline { margin: 0; }
.lens-access { display: inline-flex; align-items: center; border: 1px solid #ffffff24; border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 500; line-height: 1.2; color: #d6ded9; background: #ffffff06; white-space: nowrap; }
.lens-access--free { color: #c5dfc0; background: #b8d9ba0b; border-color: #b8d9ba30; }