/* ---------- 11 · polar ---------- */
/* A soft scrim so the copy stays legible under the aurora. */
#ch11 .ch-copy::before {
  content: ''; position: absolute; z-index: -1; inset: -18% -22% -18% -10%; border-radius: 40%;
  background: radial-gradient(ellipse at 40% 50%, rgba(5, 7, 14, 0.55), rgba(5, 7, 14, 0) 70%);
  pointer-events: none;
}
#ch11 .ch-copy h2 { text-shadow: 0 2px 18px rgba(5, 7, 14, 0.6); }

/* The floes: home-screen widgets in three sizes, glass over the aurora. */
#ch11 .floes { position: absolute; inset: 0; --fu: clamp(6.6px, 0.66vw, 9.8px); pointer-events: none; }
#ch11 .floe {
  --fx: 120vw; --fy: 70vh; --fr: 0deg; --fo: 0;
  position: absolute; left: 0; top: 0; pointer-events: auto;
  width: calc(var(--fw) * var(--fu)); height: calc(var(--fh) * var(--fu));
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%)) rotate(var(--fr));
  opacity: var(--fo);
  border-radius: calc(var(--fu) * var(--frad, 2.6));
  padding: calc(var(--fu) * 1.5) calc(var(--fu) * 1.7);
  color: #EEF6FF; font-size: calc(var(--fu) * 1.22); line-height: 1.25; font-variant-numeric: tabular-nums;
  background:
    linear-gradient(160deg, rgba(220, 245, 255, 0.20), rgba(140, 220, 205, 0.09) 42%, rgba(24, 44, 66, 0.30) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(210, 240, 255, 0.28), 0 26px 44px -20px rgba(0, 0, 0, 0.75),
    0 0 40px -6px rgba(120, 255, 190, 0.10);
  will-change: transform, opacity;
  -webkit-box-reflect: below 3px linear-gradient(transparent 62%, rgba(0, 0, 0, 0.24));
  user-select: none; -webkit-user-select: none;
}
/* the ice shelf: a soft, slightly off-centre pale rim under the glass */
#ch11 .floe::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -5px -8px -3px -6px; border-radius: calc(var(--fu) * var(--frad, 2.6) + 6px);
  background: linear-gradient(170deg, rgba(235, 250, 255, 0.55), rgba(170, 220, 235, 0.18) 55%, rgba(160, 210, 230, 0.35));
  filter: blur(2.5px);
}
#ch11 .floe img { width: 2.3em; height: 2.3em; }
#ch11 .floe-chip {
  position: absolute; top: calc(var(--fu) * -0.9); right: calc(var(--fu) * 1.4);
  font-size: 0.62em; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800;
  padding: 0.22em 0.75em; border-radius: 999px; background: rgba(8, 14, 24, 0.75); color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
#ch11 .fw-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
#ch11 .fw-city { font-weight: 800; font-size: 1.02em; letter-spacing: 0.01em; }
#ch11 .fw-now { font-size: 0.88em; opacity: 0.85; }
#ch11 .fw-temp { font-family: 'Righteous', 'Manrope', sans-serif; font-size: 3.1em; line-height: 1; margin-top: 0.12em; }
#ch11 .fw-temp small { font-size: 0.45em; vertical-align: top; opacity: 0.8; }
#ch11 .fw-meta { display: flex; justify-content: space-between; gap: 0.6em; margin-top: auto; font-size: 0.86em; font-weight: 600; opacity: 0.9; }
#ch11 .floe-small { display: flex; flex-direction: column; }
#ch11 .floe-small .fw-temp { font-size: 3.4em; }
#ch11 .fw-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.3em; margin-top: 0.75em; text-align: center; }
#ch11 .fw-day { display: grid; justify-items: center; gap: 0.15em; }
#ch11 .fw-day b { font-size: 0.78em; font-weight: 700; opacity: 0.8; }
#ch11 .fw-day img { width: 2em; height: 2em; }
#ch11 .fw-day span { font-weight: 800; }
#ch11 .fw-day small { font-size: 0.82em; opacity: 0.6; }
#ch11 .fw-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6em; margin-top: 0.1em; }
#ch11 .fw-cond { text-align: right; font-size: 0.9em; }
#ch11 .fw-cond b { display: block; font-weight: 800; }
#ch11 .fw-cond span { opacity: 0.75; }
#ch11 .fw-fields { display: flex; justify-content: space-between; gap: 0.5em; margin-top: 0.7em; font-size: 0.86em; font-weight: 700; }
#ch11 .fw-fields i { display: block; font-style: normal; font-size: 0.74em; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; font-weight: 700; }
#ch11 .fw-saved { margin-top: 0.7em; padding-top: 0.5em; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.74em; letter-spacing: 0.06em; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The small one is a real object. */
#ch11 .floe.is-grabbable { cursor: grab; touch-action: none; }
#ch11 .floe.is-lifted {
  cursor: grabbing; z-index: 3;
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%)) rotate(var(--fr)) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(210, 240, 255, 0.4),
    0 40px 60px -22px rgba(0, 0, 0, 0.85), 0 0 50px -4px rgba(120, 255, 190, 0.22);
}

@media (max-width: 900px) {
  #ch11 .floes { --fu: clamp(6px, 1.6vw, 7.2px); }
  #ch11 .ch-copy::before { inset: -14% -10%; }
  #ch11 .fw-fields span:last-child { display: none; }
}
/* "Widgets in three sizes," is a forced line; it must fit a 390px phone. */
@media (max-width: 480px) {
  #ch11 .ch-copy h2 { font-size: clamp(1.4rem, 6vw, 2.6rem); }
}

/* Real widget captures fill the floe edge to edge. */
#ch11 .floe .floe-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }

/* A floe without a real widget capture is not shown at all — no glass, no
   rim, no reflection; until its capture has decoded it is not shown either. */
#ch11 .floe.is-missing { display: none !important; }
#ch11 .floe:not(.is-ready) { visibility: hidden; }

/* Sections overlap by 100svh (site.css: .ch margin-bottom) and the next one
   sits higher in the stack, so its invisible box swallowed every pointer
   event over the floes and the small one could not be picked up. While this
   chapter is active, inactive sections let pointer events through. */
html[data-chapter="ch11"] .ch:not(.is-active) { pointer-events: none; }

/* The frosted glass is the look of this chapter, so it stays on full-tier
   GPUs only; phones get the same tint without the per-frame blur. */
html[data-tier="full"] #ch11 .floe { backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); }
html:not([data-tier="full"]) #ch11 .floe { background: linear-gradient(160deg, rgba(60, 96, 120, 0.62), rgba(30, 60, 76, 0.55) 42%, rgba(16, 30, 46, 0.7) 100%); }