/* Mobile first. The original Apollo palette and fonts live in the adjacent theme and font files. */
*{box-sizing:border-box}
html{color-scheme:light;max-height:100%;background:var(--bg,#f9f8f8);-webkit-tap-highlight-color:transparent; overflow:hidden;}
body.cam-app{overflow:hidden;max-height:100%;margin:44px auto 0px !important;background:var(--bg,#f9f8f8);color:var(--txt-heading,rgba(10,10,10,.8));font:400 var(--fs-p2)/1.5 var(--ff-main,"Geist",sans-serif);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
.cam-app :is(h1,h2,p,figure){margin:0}
.cam-app a{color:inherit;text-decoration:none}
.cam-app :is(a,button){touch-action:manipulation}
.cam-app :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--primary,#f38f1e);outline-offset:5px}
.cam-shell{width:min(100%);margin:auto;min-height:100svh;padding:33px 29px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center}
.cam-topbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:42px}
.cam-brand{font-family:var(--ff-heading,"Bricolage Grotesque",sans-serif);font-size:var(--fs-h5)!important;font-weight:500;line-height:1;letter-spacing:-.075em}
.cam-sep,.cam-title-dot{color:var(--primary,#f38f1e)}
.cam-sep{letter-spacing:-.13em;margin-inline:1px 3px}
.cam-edition{font-size:var(--fs-p2);letter-spacing:.03em;color:var(--muted,rgba(10,10,10,.4))}
.cam-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:27px}
.cam-head h1{font-family:var(--ff-heading,"Bricolage Grotesque",sans-serif);font-size:var(--fs-h1)!important;font-weight:400;letter-spacing:-.045em;line-height:1.2}
.cam-now{font-size:var(--fs-p2);color:var(--muted,rgba(10,10,10,.4));white-space:nowrap}
#cam-clock{font-family:var(--ff-em,"Instrument Serif",serif);font-style:italic;font-size:var(--fs-h5);margin-left:4px;color:var(--txt-heading,rgba(10,10,10,.8));font-variant-numeric:tabular-nums}
.cam-weather-lead{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:30px}
.cam-temperature{font-family:var(--ff-heading,"Bricolage Grotesque",sans-serif);font-size:100px;line-height:.9;letter-spacing:-.085em;font-weight:400;white-space:nowrap}
.cam-degree{font-size:.66em;line-height:1.3;vertical-align:top;margin-left:3px}
.cam-sky{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:9px;row-gap:7px;align-items:center;max-width:58%}
.cam-weather-icon{grid-column:1;grid-row:1;display:flex;align-items:center;color:var(--primary,#f38f1e)}
.cam-weather-icon svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;position: absolute;}
.cam-weather-icon svg *{fill:none!important;stroke:currentColor!important}
#cam-condition{grid-column:2;font-family:var(--ff-em,"Instrument Serif",serif);font-style:italic;font-size:var(--fs-h1)!important;line-height:1.05;letter-spacing:-.02em;font-weight:400;text-wrap:balance}
.cam-feels{grid-column:2;font-size:var(--fs-p2);color:var(--muted,rgba(10,10,10,.4));white-space:nowrap}
#cam-feels{color:var(--txt-color,rgba(10,10,10,.67))}
.cam-view{border:0;outline:0;box-shadow:none;padding:0;min-width:0}
.cam-caption{min-height:34px;display:flex;align-items:end;justify-content:space-between;gap:12px;padding-inline:2px;font-size:var(--fs-p2);color:var(--muted,rgba(10,10,10,.4))}
.cam-kicker{display:flex;align-items:center;gap:7px;white-space:nowrap}
.cam-dot{width:4px;height:4px;border-radius:50%;background:currentColor}
.cam-kicker[data-live-state=playing] .cam-dot{background:var(--primary,#f38f1e);box-shadow:0 0 0 3px rgba(127,127,127,.06)}
#cam-caption-state{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.cam-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:29px;padding-top:22px;border-top:1px solid rgba(10,10,10,.065)}
.cam-metric>span{display:block;font-size:var(--fs-p3);color:var(--muted,rgba(10,10,10,.4));margin-bottom:7px}
.cam-metric p{font-size:var(--fs-p2);white-space:nowrap;line-height:1.2}
.cam-metric strong{font-size:var(--fs-h1)!important;font-weight:400;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cam-metric p>span{font-size:var(--fs-p2);color:var(--muted,rgba(10,10,10,.4))}
.cam-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;font-size:var(--fs-p2);color:var(--muted,rgba(10,10,10,.4));margin-top:34px;min-height:14px}
.cam-foot>a::before{content:"·";margin-right:5px}
.cam-foot a{text-underline-offset:3px}.cam-foot a:hover{text-decoration:underline}
#cam-weather-retry{min-height:44px;min-width:64px;padding:7px 9px;border:1px solid var(--border,rgba(10,10,10,.1));border-radius:8px;background:none;color:inherit;font:inherit;cursor:pointer}
#cam-weather-retry[hidden]{display:none}
.cam-noscript{padding:20px;text-align:center;font-size:var(--fs-p2)}
@media(min-width:760px){.cam-shell{padding-block:48px;width:min(100%,640px);padding-inline:40px}.cam-topbar{padding-bottom:44px}.cam-weather-lead{margin-bottom:34px}.cam-temperature{font-size:110px}.cam-metrics{margin-top:32px;padding-top:24px}.cam-foot{margin-top:36px}}
@media(max-width:360px){.cam-shell{padding-inline:20px}.cam-topbar{padding-bottom:32px}.cam-head{margin-bottom:24px}.cam-temperature{font-size:86px}.cam-weather-lead{gap:14px;margin-bottom:26px}.cam-sky{grid-template-columns:18px minmax(0,1fr);column-gap:7px;max-width:62%}.cam-weather-icon svg{width:19px;height:19px}.cam-metrics{margin-top:23px;padding-top:18px}.cam-foot{margin-top:28px}}
@media(max-height:720px) and (max-width:759px){.cam-shell{padding-block:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-bottom))}.cam-topbar{padding-bottom:26px}.cam-head{margin-bottom:22px}.cam-weather-lead{margin-bottom:24px}.cam-metrics{margin-top:20px;padding-top:17px}.cam-foot{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.cam-app *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
#cam-edition .ri-apollo-fill {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 34px !important;
  line-height: 1;
  flex-shrink: 0;
}

/* ==========================================
   CAM::RIO ¡ª MOBILE VIEWPORT LOCK
   Full-screen / No scrolling / Dynamic height
   ========================================== */

@media (max-width: 759px) {

  html {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.cam-app {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* Entire layout constrained to viewport */
  .cam-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding:
      max(12px, env(safe-area-inset-top))
      24px
      max(12px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
  }

  /* Navigation */
  .cam-topbar {
    flex: 0 0 auto;
    padding-bottom: clamp(10px, 2dvh, 24px);
  }

  /* Main content fills remaining height */
  #cam-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .cam-head {
    flex: 0 0 auto;
    margin-bottom: clamp(8px, 1.8dvh, 22px);
  }

  /* Dashboard distributes available height */
  .cam-dashboard {

    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Weather */
  .cam-weather-lead {
    flex: 0 0 auto;
    margin-bottom: clamp(10px, 2dvh, 24px);
  }

  .cam-temperature {
    font-size: clamp(64px, 12dvh, 100px);
  }

  /* Camera dynamically occupies remaining space */
  .cam-view {
    height: auto;
    width: 100%;
    aspect-ratio: 16/9 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 55px auto !important;
  }

  #copacabana-player {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  }

  /* Metrics remain visible */
  .cam-metrics {
    flex: 0 0 auto;
    margin-top: clamp(8px, 1.6dvh, 20px);
    padding-top: clamp(8px, 1.4dvh, 17px);
  }

}

/* Extra-compact mobile screens */
@media (max-width: 759px) and (max-height: 600px) {
  .cam-shell {
    padding:
      max(8px, env(safe-area-inset-top))
      20px
      max(8px, env(safe-area-inset-bottom));
  }

  #apollo-sb-y,
  #apollo-sb-x,
  .apollo-sb-y,
  .apollo-sb-x,
  .apollo-sb-thumb {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
}