/* Forecast mode. Purple marks everything that is a forecast, so it can never be
   mistaken for the satellite chart, which keeps the app's blue. */
:root {
  --fc: #b79cff; --fc-ink: #170a33; --fc-deep: #2c2152;
  --go: #3ddc97; --sporty: #ffb454; --stay: #ff5a6a;
}

/* --- mode switch --------------------------------------------------------- */
.mode-switch {
  display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line-strong);
}
.mode-switch button {
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
  padding: 6px 11px; border-radius: 7px; border: 0; background: transparent; color: var(--ink-dim);
}
.mode-switch button.on { background: var(--accent); color: var(--accent-ink); }
.mode-switch button[data-mode="fc"].on { background: var(--fc); color: var(--fc-ink); }
.mode-switch button:focus-visible, .fc-chip:focus-visible, .fc-bar button:focus-visible,
.fc-trip button:focus-visible, .fc-cells i:focus-visible { outline: 2px solid var(--fc); outline-offset: 2px; }
/* Phones: its own full-width row under the top bar (the top stack lives in the
   Controls panel there), and the day strip steps down to make room. */
.mode-switch.row {
  position: absolute; z-index: 29; left: 8px; right: 8px; top: calc(50px + var(--safe-t));
  display: grid; grid-template-columns: 1fr 1fr;
}
body.has-fc-row #timebar { top: calc(100px + var(--safe-t)); }
body.has-fc-row .sim-badge { top: calc(88px + var(--safe-t)); }

/* --- what Forecast mode hides ------------------------------------------- */
body.fc-mode #productTabs, body.fc-mode #layerTabs, body.fc-mode #blendMenu,
body.fc-mode #layerMenu, body.fc-mode #timebar, body.fc-mode #legend,
body.fc-mode .peek-btn, body.fc-mode #qualityBadge { display: none !important; }

/* --- layer chips --------------------------------------------------------- */
.fc-chips {
  position: absolute; z-index: 22; top: calc(52px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; max-width: min(94vw, 760px); overflow-x: auto; scrollbar-width: none; padding: 0 10px;
}
.fc-chips::-webkit-scrollbar { display: none; }
.fc-chips[hidden], .fc-banner[hidden], .fc-bar[hidden], .fc-legend[hidden], .fc-trip[hidden], .fc-prov[hidden] { display: none; }
.fc-chip {
  font: inherit; flex: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink-dim);
}
.fc-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.fc-chip[aria-pressed="true"] { border-color: var(--fc); color: #fff; background: var(--fc-deep); }
.fc-chip[aria-pressed="true"] .dot { background: var(--fc); }
.fc-chip:disabled { opacity: 0.4; cursor: not-allowed; }
body.has-fc-row .fc-chips { top: calc(98px + var(--safe-t)); left: 0; transform: none; max-width: 100%; }

/* --- banner -------------------------------------------------------------- */
.fc-banner {
  position: absolute; z-index: 21; left: 12px; top: calc(96px + var(--safe-t));
  max-width: 340px; display: grid; gap: 2px; padding: 8px 11px; border-radius: 10px;
  background: rgba(23, 10, 51, 0.88); border: 1px solid rgba(183, 156, 255, 0.45);
  color: #d9ccff; font-size: 11.5px; backdrop-filter: blur(10px);
}
.fc-banner b { color: #fff; font-size: 12.5px; }
.fc-link { font: inherit; font-size: 11px; font-weight: 600; color: var(--fc); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; }
body.has-fc-row .fc-banner { top: calc(142px + var(--safe-t)); left: 8px; right: 8px; max-width: none; }

/* --- timeline: the slim bar ---------------------------------------------
   Fixed slots -- play | when | rail | verdict + Details -- so the rail never
   moves as the time or verdict text changes length. */
.fc-bar {
  position: absolute; z-index: 20; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b));
  display: grid; grid-template-columns: 48px 184px minmax(0, 1fr) 286px; gap: 14px; align-items: center;
  height: 64px; padding: 0 12px; border-radius: 14px;
  background: rgba(13, 19, 28, 0.95); border: 1px solid rgba(183, 156, 255, 0.45); backdrop-filter: blur(12px);
}
body.fc-trip-open .fc-bar { right: 352px; }
.fc-play {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--fc); color: var(--fc-ink); font-size: 16px; font-weight: 900;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.fc-when { display: grid; line-height: 1.2; min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-when b { font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.fc-when span { font-size: 11.5px; color: #d9ccff; }
.fc-track { display: grid; gap: 5px; min-width: 0; }
.fc-rail { position: relative; display: flex; gap: 1px; height: 16px; border-radius: 8px; overflow: visible; cursor: pointer; touch-action: none; }
.fc-rail > i { flex: 1; }
.fc-rail > i:first-child { border-radius: 8px 0 0 8px; } .fc-rail > i:last-of-type { border-radius: 0 8px 8px 0; }
.fc-rail > i.go { background: var(--go); } .fc-rail > i.sporty { background: var(--sporty); } .fc-rail > i.stay { background: var(--stay); }
.fc-night { position: absolute; top: 0; bottom: 0; background: rgba(5, 8, 14, 0.42); pointer-events: none; }
.fc-thumb { position: absolute; top: -6px; width: 6px; height: 28px; border-radius: 3px; background: #fff; transform: translateX(-3px);
  box-shadow: 0 0 0 2px var(--fc-ink), 0 2px 8px rgba(0, 0, 0, 0.6); pointer-events: none; }
.fc-rail:focus-visible { outline: 2px solid var(--fc); outline-offset: 4px; }
.fc-ticks2 { position: relative; height: 13px; font-size: 10.5px; font-weight: 600; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.fc-ticks2 span { position: absolute; white-space: nowrap; padding-left: 3px; border-left: 1px solid rgba(255, 255, 255, 0.25); }
.fc-end { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; justify-items: end; }
.fc-vpill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.fc-vpill.go { background: rgba(61, 220, 151, 0.16); color: var(--go); }
.fc-vpill.sporty { background: rgba(255, 180, 84, 0.16); color: var(--sporty); }
.fc-vpill.stay { background: rgba(255, 90, 106, 0.16); color: var(--stay); }
.fc-details { font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(183, 156, 255, 0.6); background: var(--fc-deep); color: #fff; }
.fc-details:hover { background: #3a2b6b; }
.fc-v { font-weight: 700; }
.fc-v.go { color: var(--go); } .fc-v.sporty { color: var(--sporty); } .fc-v.stay { color: var(--stay); }
@media (max-width: 1100px) { .fc-bar { grid-template-columns: 48px 168px minmax(0, 1fr) 210px; } .fc-vpill { font-size: 11.5px; } }

/* lift the readout and map controls above the bar */
body.fc-mode .readout { bottom: calc(88px + var(--safe-b)); }
body.fc-mode .maplibregl-ctrl-bottom-right { bottom: 80px; }

/* --- forecast legend ----------------------------------------------------- */
.fc-legend {
  position: absolute; z-index: 19; right: 64px; bottom: calc(88px + var(--safe-b));
  display: flex; gap: 14px; align-items: flex-end; padding: 7px 10px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); font-size: 10.5px; color: var(--ink-dim);
}
body.fc-trip-open .fc-legend { right: 400px; }
.fc-legend .lg { display: grid; gap: 3px; }
.fc-legend i { display: block; width: 140px; height: 7px; border-radius: 3px; }
.fc-legend em { display: flex; justify-content: space-between; font-style: normal; }

/* --- readout additions --------------------------------------------------- */
.rd-fc { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--ink); font-variant-numeric: tabular-nums; }
.rd-fc .t { color: #d9ccff; font-weight: 600; }
.rd-fc[hidden] { display: none; }
body.fc-mode .readout { height: auto; }

/* --- Details panel ---------------------------------------------------- */
.fc-trip {
  position: absolute; z-index: 24; top: 0; right: 0; bottom: 0; width: 340px; overflow-y: auto;
  padding: calc(58px + var(--safe-t)) 15px 18px; display: grid; align-content: start; gap: 12px;
  background: var(--panel-solid, #0d131c); border-left: 1px solid rgba(183, 156, 255, 0.35);
}
body.fc-trip-open #topbar { padding-right: 352px; }
body.fc-trip-open .topstack { left: calc(50% - 170px); }
body.fc-trip-open #compareBtn { display: none; }
.fc-grip { display: none; }
.fc-trip-head { display: flex; justify-content: space-between; align-items: center; }
.fc-trip h2 { margin: 0; font-size: 16px; }
.fc-x { width: 32px; height: 32px; color: var(--ink); font-size: 14px; }
.fc-spotsel { width: 100%; background: var(--bg, #070b11); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px; font: inherit; font-size: 13px; font-weight: 600; }
.fc-hero { border-radius: 12px; padding: 12px; display: grid; gap: 3px;
  background: linear-gradient(180deg, rgba(61, 220, 151, 0.14), rgba(61, 220, 151, 0.05)); border: 1px solid rgba(61, 220, 151, 0.4); }
.fc-hero small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--go); }
.fc-hero b { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.fc-hero span { color: var(--ink-dim); font-size: 12.5px; }
.fc-hero .fc-details { justify-self: start; margin-top: 5px; }
.fc-hero.none { background: rgba(255, 90, 106, 0.08); border-color: rgba(255, 90, 106, 0.4); }
.fc-hero.none small { color: var(--stay); }
.fc-limits { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-dim); }
.fc-days { display: grid; gap: 6px; }
.fc-drow { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; cursor: pointer; background: rgba(255, 255, 255, 0.015); }
.fc-drow:hover, .fc-drow.open { border-color: var(--line-strong); }
.fc-drow:focus-visible { outline: 2px solid var(--fc); outline-offset: 2px; }
.fc-drow .l1 { display: grid; grid-template-columns: 70px minmax(0, 1fr) 62px; gap: 8px; align-items: center; }
.fc-drow .dn { font-size: 13px; font-weight: 700; } .fc-drow .dn span { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-faint); }
.fc-drow .l1 b { text-align: right; font-size: 12.5px; }
.fc-mini { display: flex; gap: 1px; height: 10px; border-radius: 3px; overflow: hidden; }
.fc-mini i { flex: 1; } .fc-mini i.go { background: var(--go); } .fc-mini i.sporty { background: var(--sporty); } .fc-mini i.stay { background: var(--stay); }
.fc-mini i.cur { box-shadow: inset 0 0 0 2px #fff; }
.fc-drow .l2 { font-size: 11.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.fc-hours { display: grid; grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 2px 10px; font-size: 11.5px;
  border-top: 1px solid var(--line); padding-top: 6px; font-variant-numeric: tabular-nums; }
.fc-hours .h { font-size: 10px; color: var(--ink-faint); }
.fc-hours .row { display: contents; cursor: pointer; }
.fc-hours .row > div { padding: 2px 0; }
.fc-hours .row:hover > div, .fc-hours .row.cur > div { color: #fff; }
.fc-hours .row.cur > div:first-child { color: var(--fc); font-weight: 700; }
.fc-hint { margin: 0; font-size: 11px; color: var(--ink-faint); }
.rd-fc .sstfc em, .fc-chip em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--sporty); }

/* --- sources popover ----------------------------------------------------- */
.fc-prov { position: absolute; z-index: 45; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); }
.fc-prov-card { width: min(380px, calc(100vw - 32px)); padding: 15px 16px; border-radius: 14px; background: var(--panel-solid, #0d131c); border: 1px solid var(--line-strong); display: grid; gap: 7px; font-size: 12.5px; }
.fc-prov-card h3 { margin: 0 0 3px; font-size: 14px; }
.fc-prov-card p { margin: 0; color: var(--ink-dim); }
.fc-prov-card b { color: var(--ink); margin-right: 4px; }
.fc-close { justify-self: end; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; background: var(--fc); color: var(--fc-ink); border: 0; }

/* --- Controls panel: go/no-go limits ------------------------------------ */
.fc-limit { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; align-items: center; font-size: 12px; margin: 6px 0; }
.fc-limit input { accent-color: var(--fc); width: 100%; }
.fc-limit b { text-align: right; font-variant-numeric: tabular-nums; }

/* --- phone --------------------------------------------------------------- */
@media (max-width: 720px) {
  .fc-bar {
    left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); height: auto; padding: 8px 10px; gap: 8px 10px;
    grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "play when end" "track track track";
  }
  .fc-play { grid-area: play; width: 44px; height: 44px; }
  .fc-when { grid-area: when; } .fc-when b { font-size: 14px; }
  .fc-track { grid-area: track; }
  .fc-end { grid-area: end; grid-template-columns: auto; } .fc-end .fc-vpill { display: none; }
  body.fc-mode .readout { bottom: calc(112px + var(--safe-b)); }
  .fc-legend { right: 8px; bottom: calc(112px + var(--safe-b)); }
  body.fc-mode .readout ~ .fc-legend { display: none; }
  .fc-trip {
    top: auto; left: 0; width: auto; max-height: 64vh; border-left: 0; border-top: 1px solid rgba(183, 156, 255, 0.45);
    border-radius: 16px 16px 0 0; padding: 4px 15px calc(18px + var(--safe-b));
  }
  .fc-grip { display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 6px auto 0; }
  body.fc-trip-open .fc-bar { display: none; }
  body.fc-trip-open #topbar { padding-right: 12px; }
}
@media (max-width: 720px) {
  /* The Satellite/Forecast row floated over the Settings sheet and hid the
     first controls in it. The sheet is its own screen; the switch waits. */
  body.panel-open .mode-switch.row { display: none; }
  /* Forecast readout as one wrapped line under the strip. The time is
     already in the bar, so its line goes. */
  .rd-fc { grid-area: fc; margin-top: 5px; padding-top: 5px; font-size: 11.5px; line-height: 1.4; }
  .rd-fc > div { display: inline; }
  .rd-fc > div + div::before { content: " · "; color: var(--ink-faint); }
  .rd-fc > .t { display: none; }
  .rd-fc > .t + div::before { content: none; }
}
@media (prefers-reduced-motion: reduce) { .fc-gngbtn .fc-gng { transition: none; } }