/* dw-paid.css — paid-tier UI (7-day ruler, stops, WWA alerts, 511 roads,
   summary card). Loaded on every page view but inert without the `dw-paid`
   class dw-paid.js puts on <html> once /api/me confirms an active
   entitlement — anonymous/free visitors render nothing from this file.
   Visual constants are ported from the iOS app (the design source of
   truth): BRAND_PURPLE #5C48BD, the MLSliderRuler ruler scheme, the
   Road511Style palette and the FlightPath summary card. */

/* ── Stops / waypoints in the search form ─────────────────────────────── */
#dw-stops { display: none; }
html.dw-paid #dw-stops { display: block; }
.dw-stop-row { position: relative; margin: 6px 0 2px; padding-left: 24px; }
.dw-stop-dot {            /* 16px appPurple dot with dotted connectors */
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%; background: #5C48BD;
}
.dw-stop-row::before, .dw-stop-row::after {   /* ic_dotted_line stand-in */
  content: ''; position: absolute; left: 7px; width: 0; height: 8px;
  border-left: 2px dotted #b4abdd;
}
.dw-stop-row::before { top: -5px; }
.dw-stop-row::after  { bottom: -5px; }
.dw-stop-wrap { display: flex; align-items: center; gap: 6px; }
.dw-stop-wrap .search-input { flex: 1; min-width: 0; }
.dw-stop-remove {
  flex: none; width: 28px; height: 28px; border: none; border-radius: 50%;
  background: transparent; color: #5C48BD; font-size: 17px; line-height: 1;
  cursor: pointer;
}
.dw-stop-remove:hover { background: rgba(92,72,189,.12); }
#dw-add-stop { display: none; }
html.dw-paid #dw-add-stop {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 8px 0 2px; padding: 9px 12px;
  background: #F6F6F6; border: 1px solid #E5E5E5; border-radius: 8px;
  color: #5C48BD; font: 600 13.5px 'Barlow', sans-serif; cursor: pointer;
}
#dw-add-stop:hover { border-color: #5C48BD; }
#dw-add-stop[hidden] { display: none; }    /* at the 20-stop cap */
.dw-stop-pin {                             /* stop marker on the route */
  width: 16px; height: 16px; border-radius: 50%;
  background: #5C48BD; border: 2.5px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4); box-sizing: border-box;
}

/* ── 7-day time ruler (iOS MLSliderRuler port) ────────────────────────── */
#dw-ruler {
  display: none;
  position: absolute;
  /* same band-centering as #time-bar: between the floating panel and the
     right edge on desktop */
  left: calc(14px + var(--panel-w) + 14px); right: 14px;
  bottom: 10px; height: 80px;
  max-width: 1200px; margin: 0 auto;
  z-index: 1000;
}
#dw-ruler.show { display: block; }
/* dw-ruler-on, not dw-paid: free gets the ruler too (capped at 24h), and
   it replaces the segment bar for both tiers. */
html.dw-ruler-on #time-bar.show { display: none; }
/* ...and so does temp mode's GFS forecast-hour pill, which shares this
   bottom band. One time control, driven by the ruler (see syncGfsToRuler).
   Needs .show AND !important to outrank the page's own
   `#gfs-slider-panel.show { display: flex !important }`, and keys off
   dw-ruler-LIVE rather than dw-ruler-on — the pill may only be suppressed
   while the ruler is actually on screen, or temp mode before the first
   search has no forecast-hour control at all. */
html.dw-ruler-live #gfs-slider-panel,
html.dw-ruler-live #gfs-slider-panel.show { display: none !important; }
#dw-ruler-scroll {
  position: absolute; left: 0; right: 0; bottom: 0; height: 65px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: 10px 10px 0 0;
  /* grab/grabbing signals the strip is draggable — a mouse user has no
     other hint, since there's no visible scrollbar (see bindRulerDrag) */
  cursor: grab;
  touch-action: pan-x;             /* keep native horizontal scroll on touch */
}
#dw-ruler.dragging #dw-ruler-scroll { cursor: grabbing; }
#dw-ruler-scroll:focus-visible { outline: 2px solid #2f7ff0; outline-offset: -2px; }
#dw-ruler-scroll::-webkit-scrollbar { display: none; }
#dw-ruler-track { position: relative; height: 65px; }
#dw-ruler-canvas { position: absolute; top: 0; left: 0; height: 65px; }
#dw-ruler-needle {                      /* 5×55, red @ 40% */
  position: absolute; left: 50%; bottom: -5px; width: 5px; height: 55px;
  margin-left: -2.5px; background: rgba(255, 0, 0, 0.4);
  pointer-events: none; z-index: 2;
}
#dw-ruler-tip {                         /* purple time bubble above the needle */
  position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%);
  background: #5C48BD; color: #fff; border: 2px solid #fff;
  border-radius: 10px; padding: 5px 12px;
  font: 400 17px 'Helvetica Neue', 'Barlow', sans-serif;
  white-space: nowrap; pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity 1s;
}
#dw-ruler-tip.show { opacity: 1; }
#dw-ruler-tip::after {                  /* 15×10 bottom arrow */
  content: ''; position: absolute; left: 50%; bottom: -10px;
  transform: translateX(-50%);
  border: 7.5px solid transparent; border-bottom: none;
  border-top: 10px solid #5C48BD;
}

/* ── WWA alert badge on station pins ──────────────────────────────────── */
.dw-wwa-badge {
  position: absolute; top: -10px; right: -8px; width: 20px; height: 20px;
  pointer-events: none; z-index: 3;
}
.dw-wwa-tornado .dw-annot { background: #000 !important; }
/* Header strip in the hover card. Colour and ink are set inline per alert
   (see alertStyle) — red warning, orange watch, yellow advisory; these are
   only the fallback for a strip rendered without them. */
.dw-wwa-strip {
  display: flex; align-items: center; gap: 8px;
  background: #FB0006; color: #fff; padding: 7px 10px; margin: -2px -2px 4px;
  border-radius: 6px 6px 0 0;
}
.dw-wwa-strip svg { flex: none; }
.dw-wwa-strip-text {
  font: 600 12px 'Barlow', sans-serif; letter-spacing: .3px;
  text-transform: uppercase; line-height: 1.35; text-align: left;
}

/* ── 511 roads ────────────────────────────────────────────────────────── */
/* Road Info sits in the top mode bar (markup in index.html). Its on-state
   mirrors .mode-btn.active, but under its own class because setMode()
   strips .active from every button that isn't the current map mode and
   this overlay survives mode switches. */
#mode-bar .road-btn.road-on {
  color: var(--accent); background: rgba(26,143,227,.08);
}
#mode-bar .road-btn.road-on::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--accent);
}
/* 511 source notice — replaces a blocking confirm(), so it must never sit
   over the ruler or the mode bar it was opened from. */
#dw-511-notice {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 104px; z-index: 1002; max-width: min(560px, 92%);
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(13, 17, 23, .92); color: #fff;
  border-radius: 10px; padding: 11px 13px;
  font: 400 13px/1.45 'Barlow', sans-serif;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
#dw-511-notice button {
  flex: none; align-self: center; border: 0; border-radius: 7px;
  background: #2f7ff0; color: #fff; cursor: pointer;
  font: 600 13px 'Barlow', sans-serif; padding: 7px 12px;
}
#dw-road-badge {                        /* count badge, #FA6405 */
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px;
  border-radius: 9px; background: #FA6405; color: #fff;
  font: 700 11px/18px 'Barlow', sans-serif; text-align: center;
  padding: 0 4px; display: none;
}
#dw-road-badge.show { display: block; }
#dw-road-badge.na { background: #b9bec4; }

.dw-511-pin {                           /* single-event flyout circle, 42px */
  width: 42px; height: 42px; border-radius: 50%;
  background: #F0F0F0; border: 1.5px solid #8E8E93;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.dw-511-pin img { max-width: 26px; max-height: 26px; }
.dw-511-cluster { background: #fff; width: 40px; height: 40px; }
.dw-511-count {                         /* cluster count, 20px #FA6405 */
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  border-radius: 10px; background: #FA6405; border: 2px solid #fff;
  color: #fff; font: 700 11px/16px 'Barlow', sans-serif; text-align: center;
  padding: 0 3px;
}
.dw-511-pop { font-family: 'Barlow', sans-serif; max-width: 240px; }
.dw-511-pop h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.dw-511-pop p  { font-size: 13px; margin: 0 0 4px; white-space: pre-line; }
.dw-511-pop .dw-511-src { font-size: 11px; color: #8c959f; }
.dw-511-pop img.dw-511-cam { width: 100%; border-radius: 6px; margin-top: 4px; }

/* ── Summary card (iOS FlightPath summary port) ───────────────────────── */
#dw-summary {
  display: none;
  position: absolute; z-index: 1200;
  left: calc(14px + var(--panel-w) + 14px); right: 14px; top: 10px;
  max-width: 740px; margin: 0 auto;
  background: #5C48BD; border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  max-height: 40vh; overflow-y: auto;
  color: #fff;
  font-family: 'Gill Sans', 'Gill Sans MT', 'Barlow', sans-serif;
  animation: dw-summary-in .2s ease-out;
}
#dw-summary.show { display: block; }
@keyframes dw-summary-in { from { opacity: 0; transform: translateY(-8px); } }
#dw-summary-seg {                       /* Totals / Leg segmented control */
  display: flex; height: 40px; background: #AAAAAA;
  border-radius: 12px 12px 0 0; overflow: hidden;
}
#dw-summary-seg button {
  flex: 1; border: none; background: transparent; cursor: pointer;
  font: 600 14px 'Barlow', sans-serif; color: #fff;
}
#dw-summary-seg button.sel { background: #5C48BD; }
.dw-sum-row {
  display: flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 2px 12px;
}
.dw-sum-title {
  flex: 0 0 64px; font-size: 12px; font-weight: 300;
  text-transform: uppercase; letter-spacing: .4px;
}
.dw-sum-addr {
  flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 300;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dw-sum-dist { flex: 0 0 auto; font-size: 18px; font-weight: 300; text-align: center; }
.dw-sum-time, .dw-sum-day { flex: 0 0 auto; font-size: 18px; font-weight: 300; text-align: right; }

@media (max-width: 768px) {
  #dw-ruler {
    left: 50%; right: auto; transform: translateX(-50%); margin: 0;
    width: 94%; bottom: calc(var(--sheet-peek) + 8px);
    transition: bottom .32s cubic-bezier(.32,.72,0,1);
  }
  #dw-summary { left: 8px; right: 8px; top: calc(8px + 58px); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #dw-ruler { transition: none !important; }
}