/* SKYMAP — the estate weather map's chrome (labs 511). Reads the page's own tokens (--ink, --paper, --muted,
   --line, --accent) and declares none of them; the imagery is dark by nature, the glass follows the skin.
   Desk: rail on the left of the map, legend top-right, timeline along the bottom, all glass.
   Phone (<=700px): the rail is a chip strip above the map, the timeline a full-width row below it. */
.sky { --sky-r: 20px; --sky-glass: color-mix(in srgb, var(--paper, #fff) 86%, transparent);
  /* secondary text ON the glass: the skin's --muted is tuned for the page ground and falls to ~3:1 over imagery
     (paper glass over a black ocean, dark glass over white cloud); this one is >= 5.4:1 there in both skins */
  --sky-mute: color-mix(in srgb, var(--ink, #1E262B) 78%, var(--paper, #fff));
  --sky-glass-2: color-mix(in srgb, var(--paper, #fff) 62%, transparent);
  --sky-edge: color-mix(in srgb, var(--ink, #1E262B) 14%, transparent);
  --sky-on: var(--accent, #C2410C);
  color: var(--ink, #1E262B); font: inherit; position: relative; }
.sky *, .sky *::before, .sky *::after { box-sizing: border-box; }
:where(.sky) button { font: inherit; color: inherit; }
.sky svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sky__frame { position: relative; }
.sky__stage { position: relative; height: clamp(520px, 74vh, 780px); border-radius: var(--sky-r); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #1b2636 0%, #0a0f16 70%); isolation: isolate;
  box-shadow: 0 1px 0 var(--sky-edge), 0 24px 60px -30px rgba(10, 15, 22, .55); }
.sky .sky__map { position: absolute; inset: 0; overflow: hidden; }   /* beats .maplibregl-map's position: relative */
.sky__fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sky__msg { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; justify-items: center; z-index: 4;
  color: #dbe4ee; font-size: 14px; text-align: center; padding: 24px; }
.sky__msg[hidden] { display: none; }
.sky--off .sky__msg { background: var(--tint, #FAFAFA); color: var(--ink, #1E262B); }
.sky--off .sky__rail, .sky--off .sky__time { display: none; }
.sky__spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(219, 228, 238, .25); border-top-color: #dbe4ee; animation: sky-spin 1s linear infinite; }
@keyframes sky-spin { to { transform: rotate(360deg); } }

/* glass */
.sky__rail, .sky__time, .sky__legend { background: var(--sky-glass); border: 1px solid var(--sky-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 10px 30px -14px rgba(8, 12, 18, .45); }

/* the rail */
.sky__rail { position: absolute; z-index: 3; left: 14px; top: 14px; bottom: 14px; width: 196px; border-radius: 16px;
  padding: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: 2px; }
.sky__rh { margin: 6px 8px 3px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-mute); font-weight: 600; }
.sky__rh:first-child { margin-top: 2px; }
.sky__chip { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 31px; padding: 5px 10px; border: 1px solid transparent;
  border-radius: 10px; background: transparent; cursor: pointer; text-align: left; font-size: 13.5px; line-height: 1.2; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.sky__chip:hover { background: color-mix(in srgb, var(--ink, #1E262B) 7%, transparent); }
.sky__chip:focus-visible, .sky__seg:focus-visible, .sky__tb:focus-visible, .sky__range:focus-visible, .sky__link:focus-visible { outline: 2px solid var(--sky-on); outline-offset: 2px; }
.sky__chip[aria-pressed="true"] { background: color-mix(in srgb, var(--sky-on) 13%, transparent); border-color: color-mix(in srgb, var(--sky-on) 45%, transparent); color: var(--ink, #1E262B); font-weight: 600; }
.sky__chip[aria-pressed="true"] svg { color: var(--sky-on); }
.sky__cs { display: none; }
.sky__cl { overflow: hidden; text-overflow: ellipsis; }
.sky__chip--ov { font-size: 13px; }
.sky__sat { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 8px 2px 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--ink, #1E262B) 6%, transparent); }
.sky__sat[hidden] { display: none; }
.sky__sat .sky__seg { min-width: 0; padding: 4px 4px; font-size: 12px; }   /* both labels fit the 196px rail */

/* segmented buttons (satellite view, clock, model) */
.sky__seg { min-height: 30px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 12.5px; white-space: nowrap; color: var(--sky-mute); }
.sky__seg[aria-pressed="true"] { background: var(--paper, #fff); color: var(--ink, #1E262B); font-weight: 600; box-shadow: 0 1px 3px rgba(8, 12, 18, .18); }
.sky__seg:disabled { opacity: .4; cursor: default; }

/* the legend */
.sky__legend { position: absolute; z-index: 3; top: 14px; right: 56px; width: 250px; max-height: calc(100% - 120px); overflow: auto;
  border-radius: 14px; padding: 10px 12px; display: grid; gap: 10px; font-size: 12px; }
.sky__legend[hidden] { display: none; }
.sky__lg { display: grid; gap: 5px; }
.sky__lt { margin: 0; font-weight: 600; font-size: 12.5px; }
.sky__lt span { font-weight: 400; color: var(--sky-mute); margin-left: 4px; }
.sky__lx { margin: 0; color: var(--sky-mute); line-height: 1.4; }
.sky__bar { height: 9px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--sky-edge); }
.sky__tk { position: relative; height: 14px; font-size: 10.5px; color: var(--sky-mute); font-variant-numeric: tabular-nums; }
.sky__tk span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.sky__tk span:first-child { transform: none; }
.sky__tk span:last-child:not(:first-child) { transform: translateX(-100%); }
.sky__key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 6px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); }
.sky__key i:first-child { margin-left: 0; }
.sky__lgt { display: none; }   /* the fold toggle: phones only */

/* the timeline */
.sky__time { position: absolute; z-index: 3; left: calc(14px + 196px + 12px); right: 14px; bottom: 14px; border-radius: 16px;
  display: grid; grid-template-columns: auto auto minmax(160px, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 14px; }
.sky__clock, .sky__models { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--ink, #1E262B) 6%, transparent); }
.sky__models[hidden] { display: none; }
.sky__ctl { display: flex; gap: 4px; }
.sky__tb { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sky-edge); background: var(--paper, #fff); cursor: pointer; }
.sky__tb:hover { border-color: var(--sky-on); }
.sky__tb--play { width: 40px; height: 40px; background: var(--ink, #1E262B); color: var(--paper, #fff); border-color: var(--ink, #1E262B); }
.sky__tb--play svg { fill: currentColor; stroke: none; }
.sky__scrub { position: relative; padding-bottom: 12px; }
.sky__range { width: 100%; margin: 0; accent-color: var(--sky-on); height: 24px; cursor: pointer; background: transparent; }
.sky__ticks { position: absolute; left: 8px; right: 8px; bottom: 0; height: 12px; font-size: 10px; color: var(--sky-mute); overflow: hidden; }
.sky__ticks span { position: absolute; transform: translateX(-50%); }
.sky__stamp { margin: 0; display: grid; font-variant-numeric: tabular-nums; line-height: 1.25; min-width: 158px; }
.sky__utc { font-size: 13.5px; }
.sky__loc { font-size: 12px; color: var(--sky-mute); }

/* under the map: per-layer frame times, coverage, credits */
.sky__foot { padding: 12px 4px 0; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted, #717171); }
.sky__foot p { margin: 0; }
.sky__frames { display: flex; flex-wrap: wrap; gap: 6px; }
.sky__frames:empty { display: none; }
.sky__fb { display: inline-flex; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line, rgba(30, 38, 43, .12)); color: var(--ink, #1E262B); font-variant-numeric: tabular-nums; }
.sky__fb b { font-weight: 600; }
.sky__fb--held { border-color: color-mix(in srgb, var(--unsure, #B45309) 60%, transparent); color: var(--unsure, #B45309); }
/* partial: some of this step's tiles failed to load in the view (labs 513) */
.sky__fb--part { border-style: dashed; border-color: color-mix(in srgb, var(--unsure, #B45309) 60%, transparent); }
.sky__note b { color: var(--ink, #1E262B); font-weight: 600; }
.sky__warn { color: var(--unsure, #B45309); font-weight: 600; }
.sky__link { border: 0; background: none; padding: 0; color: var(--accent, #C2410C); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: inherit; }
.sky__credit { font-size: 11.5px; }
.sky__credit a { color: inherit; }

.sky--busy .sky__stage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5;
  background: linear-gradient(90deg, transparent, var(--sky-on), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: sky-bar 1.1s linear infinite; }
@keyframes sky-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* MapLibre's own bits, in the same glass */
.sky .maplibregl-ctrl-group { background: var(--sky-glass); border: 1px solid var(--sky-edge); box-shadow: none; border-radius: 12px; overflow: hidden;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sky .maplibregl-ctrl-group button { width: 34px; height: 34px; }
.sky .maplibregl-ctrl-group button + button { border-top: 1px solid var(--sky-edge); }
html[data-dark] .sky .maplibregl-ctrl-icon { filter: invert(1); }
.sky .maplibregl-cooperative-gesture-screen { font-size: 15px; z-index: 6; }

@media (max-width: 1100px) and (min-width: 701px) {
  .sky__time { grid-template-columns: auto auto 1fr auto; }
  .sky__models { grid-column: 1 / -1; justify-self: start; }
}

/* phones: chip strip, map, full-width timeline */
@media (max-width: 700px) {
  .sky { --sky-r: 0px; }
  .sky__frame { display: flex; flex-direction: column; }
  .sky__rail { position: static; order: 0; width: auto; flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden;
    border-radius: 0; border-width: 1px 0; padding: 8px 16px; background: var(--paper, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; scrollbar-width: none; }
  .sky__rail::-webkit-scrollbar { display: none; }
  .sky__rh { display: none; }
  .sky__chip { width: auto; flex: none; min-height: 44px; padding: 8px 14px; border-radius: 999px; border-color: var(--sky-edge); font-size: 14px; gap: 8px; }
  .sky__cl { display: none; }
  .sky__cs { display: inline; }
  .sky__sat { flex: none; margin: 0; }
  .sky__seg, .sky__sat .sky__seg { min-height: 44px; padding: 6px 12px; font-size: 13.5px; }
  .sky__stage { order: 1; height: 65vh; min-height: 360px; }
  /* the legend folds to one title + bar beside a 44 x 44 toggle; open, it shows every layer's scale */
  .sky__legend { top: 10px; left: 10px; right: auto; width: min(236px, calc(100% - 76px)); max-height: calc(100% - 20px); padding: 6px 48px 8px 10px; gap: 6px; min-height: 46px; align-content: center; }
  .sky__legend .sky__lx { display: none; }
  .sky__legend:not(.sky__legend--open) .sky__lg ~ .sky__lg, .sky__legend:not(.sky__legend--open) .sky__tk { display: none; }
  .sky__legend:not(.sky__legend--open) .sky__lg { gap: 4px; }
  .sky__legend:not(.sky__legend--open) .sky__lt { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sky__lgt { display: grid; place-items: center; position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; color: var(--ink, #1E262B); }
  .sky__lgt:focus-visible { outline: 2px solid var(--sky-on); outline-offset: -4px; }
  /* the timeline wraps rather than widening the page: controls + scrubber, the stamp, then clock and model
     (the model picker drops to its own line when the two do not fit) */
  .sky__time { position: static; order: 2; border-radius: 0; border-width: 0 0 1px; background: var(--paper, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; }
  .sky__time > * { min-width: 0; }
  .sky__ctl { order: 1; flex: none; }
  .sky__scrub { order: 2; flex: 1 1 120px; }
  .sky__stamp { order: 3; flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; column-gap: 10px; align-items: baseline; }
  .sky__clock { order: 4; flex: none; }
  .sky__models { order: 5; flex: none; margin-left: auto; }
  .sky__seg { padding: 6px 10px; }
  .sky__tb { width: 44px; height: 44px; }
  .sky__tb--play { width: 48px; height: 48px; }
  .sky__range { height: 44px; }
  .sky__scrub { padding-bottom: 0; }
  .sky__ticks { display: none; }
  .sky__foot { order: 3; padding: 10px 16px 0; }
  .sky .maplibregl-ctrl-group button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .sky__spin, .sky--busy .sky__stage::after { animation: none; } }