/* Respyr field console.
   Design system lifted from rysflo.com: Poppins, the four-hue semantic palette
   (blue / sage / teal / amber), 15px cards, 33px pills, blue-tinted button shadows.
   Light and warm, because the product is, and because the map is too. */
:root{
  /* surfaces */
  --page:#f5f7fa;        /* working ground */
  --paper:#fbf8f1;       /* warm reading surface */
  --paper-2:#f5f2ec;
  --paper-3:#ece7dd;
  --card:#fff;
  --line:#e1e6ed;
  --line-soft:#0b132014;
  --line-firm:#0b13203d;
  /* ink */
  --ink:#252525;
  --ink-2:#535359;
  --ink-3:#738298;
  --dim:var(--ink-3);    /* secondary text: the website's name for this grey, used by the builder */
  --faint:var(--ink-4);  /* tertiary text */
  --ink-4:#b8bcc8;
  --deep:#1a1410;        /* warm near-black */
  /* brand hues, used semantically not decoratively */
  --blue:#308bf9;  --blue-hi:#1f7ce8; --blue-lt:#e9f3ff;
  --green:#3faf58; --green-lt:#eaffef;
  --sage:#4a6e54;  --sage-2:#5e8669;  --sage-lt:#e8f0ea; --sage-mid:#c9dbce;
  --tech:#1b4965;  --tech-2:#2d6586;
  --warm:#b8753a;  --warm-2:#d49457;  --warm-lt:#f4e8d8;
  --r-card:15px;   --r-pill:33px;
  --shadow-blue:0 4px 14px rgba(48,139,249,.28);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--page);color:var(--ink);
  font:400 15px/1.55 Poppins,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.tab{font-variant-numeric:tabular-nums}
#app{display:flex;height:100vh;overflow:hidden}

/* ---------- rail ---------- */
aside{width:214px;flex:0 0 214px;background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column}
.mark{padding:22px 20px 17px}
.mark b{display:block;font-size:23px;font-weight:600;letter-spacing:-.5px;color:var(--deep);line-height:1}
.mark i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:4px;font-weight:400}
nav{padding:6px 12px;flex:1;overflow-y:auto}
nav a{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 14px;margin:2px 0;border-radius:var(--r-pill);color:var(--ink-2);
  text-decoration:none;font-size:14.5px;cursor:pointer;transition:background .12s,color .12s}
nav a:hover{background:var(--paper-2);color:var(--ink)}
nav a.on{background:var(--blue);color:#fff;font-weight:500;box-shadow:var(--shadow-blue)}
nav a s{text-decoration:none;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
nav a.on s{color:rgba(255,255,255,.82)}
.rail-foot{padding:14px 20px 18px;font-size:12px;color:var(--ink-3);line-height:1.6;
  border-top:1px solid var(--line-soft)}

/* ---------- main ---------- */
main{flex:1;overflow-y:auto;padding:30px 36px 72px}
main.flush{padding:0;overflow:hidden;display:flex;flex-direction:column}
h1{font-size:30px;font-weight:600;letter-spacing:-.7px;margin:0 0 7px;line-height:1.12;color:var(--deep)}
h2{font-size:16.5px;font-weight:600;margin:0 0 12px;letter-spacing:-.2px}
.lede{color:var(--ink-2);margin:0 0 26px;max-width:68ch;font-size:15.5px;line-height:1.6}
a{color:var(--blue-hi)}
.dim{color:var(--ink-2)}.faint{color:var(--ink-3)}
.sm{font-size:13.5px}

/* ---------- panels: differentiated by what they hold ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:18px}
.panel>h2{padding:16px 18px 0}
.panel-b{padding:16px 18px}
/* dense tables live flush on paper, not in a card */
.sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}

/* ---------- readings: one joined instrument, not a row of identical boxes ---------- */
.readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;margin-bottom:24px}
.reading{padding:15px 18px 16px;border-right:1px solid var(--line-soft)}
.reading:last-child{border-right:0}
.reading b{display:block;font-size:32px;font-weight:600;line-height:1.05;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;color:var(--deep)}
.reading span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.35}
.reading.live b{color:var(--blue)}
.reading.hot b{color:var(--warm)}
.reading[onclick]{cursor:pointer;transition:background .12s}
.reading[onclick]:hover{background:var(--blue-lt)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{font-size:12px;font-weight:600;text-align:left;color:var(--ink-3);letter-spacing:.2px;
  padding:10px 13px;border-bottom:1px solid var(--line);background:var(--card);
  position:sticky;top:0;white-space:nowrap;cursor:pointer;z-index:2}
thead th.fixed{cursor:default}
thead th:hover:not(.fixed){color:var(--blue-hi)}
td{padding:9px 13px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--paper)}
.n{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{font-weight:600;border-top:1px solid var(--line);border-bottom:0;background:var(--paper-2)}

/* ---------- priority: a ramp in the brand hues, not a traffic light ---------- */
.pri{display:inline-block;min-width:28px;text-align:center;padding:2px 9px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;letter-spacing:.2px}
.pri.P0{background:var(--blue);color:#fff}
.pri.P1{background:var(--blue-lt);color:var(--blue-hi)}
.pri.P2{background:var(--sage-lt);color:var(--sage)}
.pri.P3{background:var(--page);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.own{font-size:13px;color:var(--ink-2)}
.own.beach{color:var(--warm);font-weight:500}
.own.corp{color:var(--ink-4)}
.own.ind{color:var(--sage);font-weight:500}
.own.reg{color:var(--tech);font-weight:500}

/* verification */
.vf{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap}
.vf.open{color:var(--sage);background:var(--sage-lt)}
.vf.shut{color:var(--warm);background:var(--warm-lt)}
.vf.miss{color:var(--ink-3);background:var(--page)}

/* ---------- controls ---------- */
.bar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:18px}
input[type=search],select,button{font:400 14px Poppins,sans-serif;padding:8px 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--ink)}
input[type=search]{min-width:250px}
input[type=search]::placeholder{color:var(--ink-4)}
select{cursor:pointer;padding-right:11px}
select:hover,input:hover{border-color:var(--ink-4)}
button{cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s}
button:hover{border-color:var(--blue);color:var(--blue-hi)}
button.go{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500;box-shadow:var(--shadow-blue)}
button.go:hover{background:var(--blue-hi);color:#fff}
button.on{background:var(--deep);border-color:var(--deep);color:#fff;font-weight:500}
button.on:hover{color:#fff}
button:disabled{opacity:.42;cursor:default}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* filter chips */
.chip-f{display:inline-flex;gap:8px;align-items:center;background:var(--blue-lt);
  border:1px solid #cfe4ff;border-radius:var(--r-pill);padding:4px 8px 4px 14px;
  font-size:13px;color:var(--blue-hi)}
.chip-f b{cursor:pointer;font-weight:500;font-size:15px;line-height:1;padding:0 3px;color:var(--blue)}
.chip-f b:hover{color:var(--warm)}

/* ---------- notes: hue carries the meaning ---------- */
.note{border-left:3px solid var(--blue);background:var(--blue-lt);padding:12px 16px;
  border-radius:0 10px 10px 0;margin:14px 0;font-size:14.5px;color:var(--ink-2)}
.note b{color:var(--ink)}
.note.warn{border-color:var(--warm-2);background:var(--warm-lt)}
.note.bad{border-color:var(--warm);background:var(--warm-lt)}
.note.good{border-color:var(--green);background:var(--green-lt)}

/* ---------- routes ---------- */
.rt{display:flex;flex:1;min-height:0}
.rt-list{width:436px;flex:0 0 436px;border-right:1px solid var(--line);overflow-y:auto;background:var(--paper)}
.rt-map{flex:1;position:relative;min-width:0;background:var(--page)}
#rmap{position:absolute;inset:0}
.rt-head{padding:20px 22px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--paper);z-index:3}
.days{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}
.days button{padding:5px 13px;font-size:13.5px}
.stop{display:flex;gap:13px;padding:15px 22px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.stop:hover{background:var(--card)}
.stop.sel{background:var(--card);box-shadow:inset 3px 0 0 var(--blue)}
.seq{flex:0 0 28px;height:28px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  color:var(--ink-2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.stop.sel .seq{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.stop-b{flex:1;min-width:0}
.stop-b h3{margin:0 0 3px;font-size:15.5px;font-weight:600;line-height:1.3}
.biz{display:flex;gap:9px;align-items:baseline;padding:5px 0 0}
.biz-n{flex:1;font-size:14px}
.bundle{display:inline-block;margin-top:7px;font-size:12px;font-weight:500;color:var(--sage);
  background:var(--sage-lt);padding:2px 11px;border-radius:var(--r-pill)}

/* ---------- planner ---------- */
.wk{display:grid;grid-template-columns:48px 112px 82px 60px 1fr 108px;gap:13px;
  padding:13px 16px;border-bottom:1px solid var(--line-soft);align-items:start;font-size:14px}
.wk.hd{color:var(--ink-3);font-size:12px;font-weight:600;background:var(--paper-2)}
.ph{font-size:12px;font-weight:600;padding:2px 11px;border-radius:var(--r-pill);white-space:nowrap}
.ph.LAUNCH{color:var(--warm);background:var(--warm-lt)}
.ph.Field{color:var(--blue-hi);background:var(--blue-lt)}
.ph.Prep{color:var(--ink-3);background:var(--page)}
.ph.Review{color:var(--sage);background:var(--sage-lt)}
.ph.Expo{color:var(--tech);background:#e4edf3}
.short{color:var(--warm);font-weight:600}
.pgr{display:flex;gap:11px;align-items:center;margin-top:15px;font-size:14px;color:var(--ink-2)}

/* drill-down affordance */
.panel td a,.sheet td a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.panel td a:hover,.sheet td a:hover{color:var(--blue-hi);border-bottom-color:var(--blue)}

.leaflet-container{background:var(--page);font-family:Poppins,sans-serif}
.leaflet-popup-content{font:400 13.5px Poppins,sans-serif}

@media (max-width:960px){
  aside{width:64px;flex:0 0 64px}.mark i,nav a s{display:none}
  .mark{padding:16px 10px}.mark b{font-size:16px;text-align:center}
  nav{padding:6px}nav a{justify-content:center;padding:10px 4px;font-size:11.5px;border-radius:10px}
  main{padding:22px 18px 56px}
  .rt{flex-direction:column}
  .rt-list{width:auto;flex:0 0 auto;max-height:54%;border-right:0;border-bottom:1px solid var(--line)}
  .rt-map{flex:1 0 250px}
  .wk{grid-template-columns:40px 1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Hover card on the route map, modelled on Google's own place card:
   photo, name, rating with stars, category, live open state. The photo is
   fetched lazily per hover and never stored. */
.gcard{width:296px;font-family:Poppins,sans-serif;color:var(--ink)}
.gcard-img{height:150px;margin:-9px -13px 0;overflow:hidden;background:var(--paper-3)}
.gcard-img img{width:100%;height:150px;object-fit:cover;display:block}
.gcard-b{padding:11px 1px 2px}
.gcard-t{font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.2px}
.gcard-r{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:13.5px}
.gcard-r b{font-weight:600}
.gstars{position:relative;display:inline-block;line-height:1;letter-spacing:1.5px;
  font-size:14px;color:#dadce0;white-space:nowrap}
.gstars-on{position:absolute;left:0;top:0;overflow:hidden;color:#f5a623;white-space:nowrap}
.gcard-n{color:var(--ink-3)}
.gcard-c{margin-top:3px;font-size:13.5px;color:var(--ink-2)}
.gcard-h{margin-top:4px;font-size:13.5px;color:var(--ink-2)}
.gcard-p{display:inline-block;margin-top:7px;font-size:13.5px}
.gcard-a{display:flex;gap:8px;margin-top:11px}
.gcard-a a{flex:1;text-align:center;padding:7px 10px;border-radius:var(--r-pill);
  background:var(--blue-lt);color:var(--blue-hi);font-size:13.5px;font-weight:500;text-decoration:none}
.gcard-a a:hover{background:var(--blue);color:#fff}
.gm-style .gm-style-iw-c{padding:9px 13px!important;border-radius:14px!important}
.gm-style .gm-style-iw-d{overflow:hidden!important}

/* Card frame. Type scale, spacing and control sizes measured off a real Google
   place card: 300px wide, 18px/500 title, 14px body rows, 40px round buttons,
   15px padding. Colours stay Rysflo's; the proportions are Google's. */
.gcard-wrap{position:absolute;transform:translate(-50%,-100%) translateY(-18px);
  z-index:400;filter:drop-shadow(0 4px 18px rgba(11,19,32,.20))}
.gcard{width:300px;background:#fff;border-radius:12px;overflow:hidden;
  font-family:Poppins,sans-serif;color:#202124;cursor:default}
.gcard-b{padding:15px 15px 16px}
.gcard-t{font-size:18px;font-weight:500;line-height:1.22;letter-spacing:-.2px;color:#202124}
.gcard-r{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:14px;line-height:1.4}
.gcard-r b{font-weight:400;color:#202124}
.gcard-n{color:#5f6368}
.gcard-c{margin-top:2px;font-size:14px;line-height:1.45;color:#3c4043}
.gcard-h{margin-top:2px;font-size:14px;line-height:1.45;color:#3c4043}
.gcard-h .op{color:#188038;font-weight:500}
.gcard-h .cl{color:#b06000;font-weight:500}
.gcard-w{margin-top:5px;font-size:14px;font-weight:500;color:#b06000}
.gcard-p{display:inline-block;margin-top:9px;font-size:14px;color:#1f7ce8;text-decoration:none}
.gcard-p:hover{text-decoration:underline}
/* Cover photo on top, the way Google's place card does it. Measured at 104px
   against a 300px card. */
.gcard-img{height:104px;background:#eef1f4;overflow:hidden}
.gcard-img img{width:100%;height:104px;object-fit:cover;display:block}
.gcard-head{display:flex;gap:11px;align-items:flex-start}
.gcard-head .gcard-t{flex:1;min-width:0;padding-top:1px}

/* Local time where the selling happens. Open/closed on the cards is computed
   against these, not against the viewer's clock. */
.rail-clock{padding:12px 18px 13px;border-top:1px solid var(--line-soft)}
.ck-h{font-size:10.5px;font-weight:600;color:var(--ink-4);letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:5px}
.ck-t{font-size:20px;font-weight:600;letter-spacing:-.4px;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.15}
.ck-d{font-size:11.5px;color:var(--ink-3);line-height:1.5;margin-top:3px}
.gbtn-x{background:#f1f3f4;color:#5f6368}
.gbtn-x:hover{background:#5f6368;color:#fff}

/* ---- Route builder ---- */
.build{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.build summary{padding:10px 13px;font-size:13.5px;font-weight:500;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.build summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(-45deg);transition:transform .15s}
.build[open] summary::before{transform:rotate(45deg)}
.build summary::-webkit-details-marker{display:none}
.build[open] summary{border-bottom:1px solid var(--line)}
.b-sel{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px;padding:0 13px;margin-top:10px}
.b-sel span{font-size:12.5px;color:var(--dim)}
.b-sel select{width:100%;font-size:13px;padding:6px 28px 6px 10px}
.build > input{display:block;width:calc(100% - 26px);margin:8px 13px 0;font-size:13px}
.fr-h{padding:14px 13px 5px;font-size:12.5px;color:var(--dim)}
.fr-h b{color:var(--ink);font-weight:500}
.frs{padding:0 8px}
/* a filter row: an on/off mark, the name, the count, and a bar behind sized to the count */
.fr{display:flex;align-items:center;gap:9px;width:100%;padding:5px 8px 5px 7px;border:0;border-radius:6px;
  background:linear-gradient(90deg,rgba(48,139,249,.16) var(--w),transparent var(--w));
  font:inherit;font-size:13px;color:var(--ink);text-align:left;cursor:pointer;line-height:1.25}
.fr+.fr{margin-top:2px}
.fr:hover{background:linear-gradient(90deg,rgba(48,139,249,.24) var(--w),rgba(0,0,0,.03) var(--w))}
.fr:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.fr-m{flex:0 0 14px;width:14px;height:14px;border-radius:4px;background:var(--blue);border:1.5px solid var(--blue);position:relative}
.fr-m::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fr-n{flex:1}
.fr-c{font-variant-numeric:tabular-nums;color:var(--dim);font-size:12.5px}
.fr.off{color:var(--faint);background:linear-gradient(90deg,rgba(0,0,0,.045) var(--w),transparent var(--w))}
.fr.off .fr-m{background:transparent;border-color:var(--line)}
.fr.off .fr-m::after{display:none}
.fr.off .fr-c{color:var(--faint)}
.fr-x{padding:6px 15px 0;font-size:12px;color:var(--faint)}
.build-row{display:flex;align-items:center;gap:8px;padding:14px 13px 4px;border-top:1px solid var(--line);margin-top:12px}
.build-row label{font-size:12.5px;color:var(--dim);display:flex;align-items:center;gap:6px;margin-right:auto}
.build-row input{width:46px;padding:5px 7px;font-size:13px;text-align:center}
.build-row button{padding:7px 14px;font-size:13.5px}
.b-note{padding:8px 13px 12px;font-size:13px;color:var(--dim);line-height:1.5;min-height:1em}
.b-note b{display:block;color:var(--ink);font-weight:500}
.b-note:empty{padding:0 0 6px}
/* stop list */
.biz{position:relative}
.biz.mute,.stop.mute{opacity:.55}
.stop.mute .seq{background:transparent;color:var(--dim);border:1px dashed var(--line)}
.extra{border-top:2px solid var(--line);margin-top:8px}
.extra-h{padding:12px 20px 4px;font-size:12.5px;color:var(--dim)}
.pinbtn{margin-left:auto;flex:0 0 auto;width:26px;height:26px;padding:0;border-radius:50%;font-size:15px;line-height:1;
  color:var(--dim);background:transparent;border:1px solid var(--line)}
.pinbtn:hover{color:var(--ink);border-color:var(--ink);background:var(--paper)}
.biz.mute .pinbtn{opacity:1}
/* the header is sticky for the day buttons; with the builder open it is taller than
   the viewport and would pin over the list, so let it scroll then */
.rt-head:has(.build[open]){position:static}
.days button{display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:5px 12px 4px;line-height:1.15}
.days button i{font-style:normal;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.days button.on i{color:inherit;opacity:.8}
.days-t{flex:0 0 100%;margin-top:4px;font-size:12.5px;color:var(--dim)}
.days-t b{color:var(--ink);font-weight:500}
.gdiff{display:inline-block;margin-top:3px;font-size:11.5px;color:#9a6b1e;background:rgba(212,148,87,.14);border-radius:4px;padding:1px 6px}
.gtag{color:var(--dim)}
.gtag::before{content:"Google: ";color:var(--faint)}
.ck-t2{font-size:15px;opacity:.75}
.gcard-thin{margin-top:8px;padding:6px 8px;font-size:12px;line-height:1.4;color:#9a6b1e;background:rgba(212,148,87,.14);border-radius:6px}
.b-qual{display:flex;gap:14px;padding:12px 13px 0;flex-wrap:wrap}
.b-qual label{font-size:12.5px;color:var(--dim);display:flex;align-items:center;gap:5px}
.b-qual input{width:56px;padding:5px 6px;font-size:13px;text-align:center}