/* ==========================================================================
   EYOS Route Editor — drop-in, in-document map+route editor for brochures.
   Activates only with ?edit in the URL. Invisible to clients otherwise.
   All chrome is namespaced .re-* / #re-* so it never collides with a brochure.
   ========================================================================== */

:root{
  --re-navy:#0b1f3a;
  --re-navy-2:#0a1a33;
  --re-accent:#A2D8E8;
  --re-purple:#c98aff;
  --re-danger:#ff9a9a;
  --re-ok:#7ee0a8;
}

/* ---- launch button (only thing visible before the editor opens) ---- */
#re-launch{
  position:fixed; right:18px; bottom:18px; z-index:2147483000;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--re-accent); color:var(--re-navy);
  border:0; border-radius:999px; padding:12px 18px;
  font:700 13px/1 -apple-system,Segoe UI,Roboto,sans-serif; letter-spacing:.06em;
  box-shadow:0 6px 24px rgba(0,0,0,.35); cursor:pointer;
  transition:transform .15s ease, filter .15s ease;
}
#re-launch:hover{ filter:brightness(1.06); transform:translateY(-1px); }
#re-launch .re-dot{ width:8px;height:8px;border-radius:50%;background:var(--re-navy);opacity:.55 }

/* ---- v2: riding the Site Editor, the button sits ON the document's map and the
   editor opens IN the map section (its wrapper is the positioning parent) ---- */
#re-launch.re-inline{ position:absolute; top:14px; left:50%; right:auto; bottom:auto;
  transform:translateX(-50%); z-index:7; }
#re-launch.re-inline:hover{ transform:translateX(-50%) translateY(-1px); }
#re-overlay.re-inline{ position:absolute; inset:0; z-index:5000; min-height:560px; }
#re-overlay.re-inline .re-aside{ min-height:0; }
/* the Site Editor's toolbar is fixed top-right (≈430px wide, 16-64px down); when the section is
   scrolled to the top it would cover the tool row and the zoom control, so both step down/aside */
#re-overlay.re-inline .re-topbar{ top:70px; }
#re-overlay.re-inline .re-banner{ top:116px; }
#re-overlay.re-inline .mapboxgl-ctrl-top-right{ top:70px; }

/* ---- full-screen overlay ---- */
#re-overlay{
  position:fixed; inset:0; z-index:2147483600;
  display:none; grid-template-columns:340px 1fr;
  background:var(--re-navy); color:#fff;
  font-family:-apple-system,Segoe UI,Roboto,sans-serif;
}
#re-overlay.re-open{ display:grid; }

/* ---- sidebar ---- */
.re-aside{ background:var(--re-navy-2); border-right:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; min-height:0; }
.re-aside header{ padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.re-aside h1{ margin:0; font-size:15px; letter-spacing:.02em; display:flex; align-items:center; gap:8px; }
.re-badge{ font-size:9px; letter-spacing:.18em; color:var(--re-purple);
  border:1px solid rgba(201,138,255,.5); border-radius:3px; padding:2px 6px; text-transform:uppercase; }
.re-aside .re-sub{ font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-top:5px; }

.re-hint{ font-size:11px; color:rgba(255,255,255,.62); line-height:1.55;
  padding:10px 12px; background:rgba(162,216,232,.06); border-radius:8px; margin:12px 14px; }
.re-hint b{ color:var(--re-accent); }

.re-panel{ flex:1; overflow:auto; padding:4px 12px 16px; }

/* day groups */
.re-day{ border:1px solid rgba(255,255,255,.07); border-radius:10px; margin:10px 2px; overflow:hidden;
  background:rgba(255,255,255,.02); }
.re-day-head{ display:flex; align-items:center; gap:8px; padding:9px 11px;
  background:rgba(162,216,232,.07); border-bottom:1px solid rgba(255,255,255,.06); }
.re-day-label{ flex:1; font-weight:700; font-size:12px; color:var(--re-accent);
  letter-spacing:.06em; background:transparent; border:0; outline:none; padding:3px 4px; border-radius:4px; }
.re-day-label:focus{ background:rgba(162,216,232,.12); }
.re-day-add{ background:transparent; border:1px solid rgba(162,216,232,.4); color:var(--re-accent);
  border-radius:6px; font-size:11px; padding:4px 8px; cursor:pointer; white-space:nowrap; }
.re-day-add:hover{ background:rgba(162,216,232,.16); }

/* stop rows */
.re-stop{ display:flex; align-items:flex-start; gap:9px; padding:9px 11px;
  border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; }
.re-stop:last-child{ border-bottom:0; }
.re-stop.re-sel{ background:rgba(162,216,232,.10); }
.re-stop .re-num{ width:22px;height:22px;border-radius:50%;background:var(--re-accent);color:var(--re-navy);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0;margin-top:1px; }
.re-stop.re-port .re-num{ background:var(--re-purple); }
.re-stop .re-body{ flex:1; min-width:0; }
.re-stop .re-name{ font-weight:600; font-size:13px; color:#fff; background:transparent; border:0; outline:none;
  width:100%; padding:2px 3px; border-radius:4px; }
.re-stop .re-name:focus{ background:rgba(255,255,255,.08); }
.re-stop .re-meta{ display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.re-chip{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.62); cursor:pointer; background:transparent; }
.re-chip.re-on{ border-color:var(--re-accent); color:var(--re-accent); }
.re-stop .re-actions{ display:flex; flex-direction:column; gap:5px; align-items:center; }
.re-iconbtn{ width:24px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.14);
  background:transparent;color:rgba(255,255,255,.6);cursor:pointer;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center; }
.re-iconbtn:hover{ color:#fff;border-color:rgba(255,255,255,.4); }
.re-iconbtn.re-del:hover{ color:var(--re-danger);border-color:rgba(255,154,154,.5); }
.re-drag{ cursor:grab; }
.re-stop.re-dragging{ opacity:.4; }

/* detail drawer (desc / photo / headline) */
.re-detail{ padding:0 11px 11px; display:none; }
.re-detail.re-show{ display:block; }
.re-field{ margin-top:9px; }
.re-field label{ display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-bottom:4px; }
.re-field input, .re-field textarea{ width:100%; background:rgba(255,255,255,.05); color:#fff;
  border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:7px 9px; font:13px/1.45 inherit; outline:none; }
.re-field input:focus, .re-field textarea:focus{ border-color:var(--re-accent); }
.re-field textarea{ resize:vertical; min-height:60px; }

.re-addday{ width:calc(100% - 4px); margin:6px 2px 2px; background:transparent;
  border:1px dashed rgba(162,216,232,.4); color:var(--re-accent); border-radius:10px; padding:11px;
  font-size:12px; font-weight:700; letter-spacing:.06em; cursor:pointer; }
.re-addday:hover{ background:rgba(162,216,232,.08); }

/* sidebar action bar */
.re-actions-bar{ padding:12px 14px; border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.re-btn{ background:var(--re-accent); color:var(--re-navy); border:0; padding:11px 12px;
  font:700 12px/1 inherit; letter-spacing:.06em; text-transform:uppercase; border-radius:7px; cursor:pointer; }
.re-btn:hover{ filter:brightness(1.07); }
.re-btn.re-ghost{ background:transparent; color:var(--re-accent); border:1px solid rgba(162,216,232,.4); }
.re-btn.re-wide{ grid-column:1 / -1; }
.re-btn.re-ship{ background:var(--re-ok); color:var(--re-navy); }
.re-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ---- map side ---- */
.re-mapwrap{ position:relative; min-width:0; }
#re-map{ width:100%; height:100%; cursor:crosshair; }
.re-topbar{ position:absolute; top:12px; left:12px; right:12px; z-index:6;
  display:flex; align-items:center; gap:8px; pointer-events:none; }
.re-topbar > *{ pointer-events:auto; }
.re-toggle{ background:rgba(11,31,58,.92); border:1px solid rgba(162,216,232,.4); border-radius:6px;
  display:flex; overflow:hidden; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.re-toggle button{ background:transparent; color:rgba(162,216,232,.75); border:0; padding:7px 12px; cursor:pointer; font:inherit; }
.re-toggle button.re-on{ background:var(--re-accent); color:var(--re-navy); font-weight:700; }
.re-tool{ background:rgba(11,31,58,.92); border:1px solid rgba(162,216,232,.4); color:rgba(255,255,255,.85);
  padding:7px 12px; border-radius:6px; font:700 10px/1 inherit; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.re-tool:hover{ background:rgba(11,31,58,1); color:#fff; }
.re-tool.re-arm{ background:var(--re-purple); color:var(--re-navy); box-shadow:0 0 0 3px rgba(201,138,255,.28); }
.re-spacer{ flex:1; }
.re-close{ background:rgba(11,31,58,.92); border:1px solid rgba(255,255,255,.25); color:#fff;
  width:34px;height:34px;border-radius:8px;font-size:18px;cursor:pointer;line-height:1; }
.re-close:hover{ background:rgba(255,255,255,.12); }

.re-readout{ position:absolute; bottom:12px; left:12px; background:rgba(11,31,58,.9);
  color:rgba(255,255,255,.7); padding:6px 10px; border-radius:4px; font:11px/1 ui-monospace,monospace; z-index:5; }
.re-wpcount{ position:absolute; bottom:12px; right:12px; background:rgba(11,31,58,.9);
  color:var(--re-accent); padding:6px 10px; border-radius:4px; font:11px/1 ui-monospace,monospace; z-index:5; }
.re-banner{ position:absolute; top:58px; left:50%; transform:translateX(-50%);
  background:rgba(201,138,255,.96); color:var(--re-navy); padding:9px 16px; border-radius:6px;
  font:700 11px/1 inherit; letter-spacing:.1em; text-transform:uppercase; z-index:20; box-shadow:0 4px 16px rgba(0,0,0,.4); }

/* toast */
#re-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--re-navy); border:1px solid var(--re-accent); color:var(--re-accent);
  padding:12px 22px; border-radius:8px; font-size:13px; z-index:2147483647; opacity:0;
  transition:opacity .2s; pointer-events:none; max-width:80vw; text-align:center; }
#re-toast.re-show{ opacity:1; }

/* save dialog */
#re-dialog{ position:fixed; inset:0; z-index:2147483640; display:none;
  align-items:center; justify-content:center; background:rgba(5,12,26,.72); }
#re-dialog.re-open{ display:flex; }
.re-card{ width:min(440px,90vw); background:var(--re-navy-2); border:1px solid rgba(162,216,232,.25);
  border-radius:14px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.re-card h2{ margin:0 0 4px; font-size:16px; }
.re-card p{ margin:0 0 16px; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.65); }
.re-opt{ display:flex; gap:12px; align-items:flex-start; padding:13px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12); margin-bottom:10px; cursor:pointer; }
.re-opt:hover{ border-color:rgba(162,216,232,.5); background:rgba(162,216,232,.05); }
.re-opt .re-ic{ font-size:18px; }
.re-opt .re-ot{ font-weight:700; font-size:13.5px; }
.re-opt .re-od{ font-size:11.5px; color:rgba(255,255,255,.6); margin-top:3px; line-height:1.5; }
.re-card .re-cancel{ width:100%; margin-top:4px; background:transparent; border:0; color:rgba(255,255,255,.5);
  padding:8px; cursor:pointer; font:inherit; font-size:12px; }