/* ---------- tokens ---------- */
:root{
  --bg:#ffffff; --bg-sunk:#f3f4f6; --bg-raise:#ffffff;
  --ink:#1f2328; --ink-soft:#5b6471; --ink-faint:#8b949e;
  --line:#e3e6ea; --line-soft:#eef0f3;
  --accent:#1a73e8; --accent-ink:#ffffff; --accent-soft:#e8f0fe;
  --good:#188038; --warn:#e37400; --bad:#d93025;
  --shadow:0 1px 2px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.10);
  --radius:10px;
  --panel-w:392px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1f2124; --bg-sunk:#17191c; --bg-raise:#26292d;
    --ink:#e6e8ea; --ink-soft:#a7adb6; --ink-faint:#7b828c;
    --line:#34383d; --line-soft:#2b2f33;
    --accent:#8ab4f8; --accent-ink:#17191c; --accent-soft:#25344c;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); font-size:14px; color:var(--ink);
  background:var(--bg-sunk); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
code{background:var(--bg-sunk);padding:1px 5px;border-radius:4px;font-size:12px}

#app{display:flex;height:100dvh;width:100%}

/* ---------- panel ---------- */
#panel{
  width:var(--panel-w); flex:0 0 var(--panel-w); min-width:0;
  background:var(--bg); border-right:1px solid var(--line);
  display:flex; flex-direction:column; z-index:1200;
  transition:margin-left .22s ease;
}
#app.panel-hidden #panel{margin-left:calc(-1 * var(--panel-w))}

.panel-head{padding:12px 14px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.brand-pin{display:block;width:26px;height:26px;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(26,115,232,.25))}
.brand-name{
  font-weight:800;letter-spacing:.2px;
  background:linear-gradient(90deg,#4f8dff,#1a73e8 45%,#0b8043);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.account{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px}
.account .who{color:var(--ink-soft);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:11px;flex:0 0 auto}

.searchbar{
  display:flex;align-items:center;gap:6px;background:var(--bg-sunk);
  border:1px solid var(--line);border-radius:24px;padding:6px 8px 6px 12px;
}
.searchbar:focus-within{border-color:var(--accent);background:var(--bg)}
.search-icon{color:var(--ink-faint);font-size:16px}
#search{flex:1;min-width:0;border:0;background:none;outline:none;padding:4px 2px}
.icon-btn{
  border:0;background:none;cursor:pointer;color:var(--ink-soft);
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
}
.icon-btn:hover{background:var(--line-soft);color:var(--ink)}
.icon-btn.accent{color:var(--accent)}
.icon-btn.accent:hover{background:var(--accent-soft)}

.tabs{display:flex;gap:2px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  border:0;background:none;cursor:pointer;padding:9px 10px;
  color:var(--ink-soft);border-bottom:3px solid transparent;white-space:nowrap;font-size:13px;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

.panel-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.pane{display:none;padding:12px 14px 24px}
.pane.is-active{display:block}

.panel-foot{
  border-top:1px solid var(--line);padding:6px 14px;min-height:28px;
  font-size:11.5px;color:var(--ink-faint);display:flex;align-items:center
}
.status.busy::before{content:"";width:9px;height:9px;margin-right:7px;border-radius:50%;
  border:2px solid var(--accent);border-right-color:transparent;display:inline-block;
  animation:spin .7s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}

.hint{color:var(--ink-soft);line-height:1.55;margin:6px 0 14px;font-size:13px}
.menu-title{font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--ink-faint);margin:16px 0 7px;font-weight:600}

/* ---------- lists ---------- */
.list{list-style:none;margin:0;padding:0}
.list li{
  display:flex;gap:10px;align-items:flex-start;padding:10px 8px;border-radius:8px;
  cursor:pointer;border-bottom:1px solid var(--line-soft);
}
.list li:hover{background:var(--bg-sunk)}
.list li .ic{font-size:17px;line-height:1.3;flex:0 0 auto;width:20px;text-align:center}
.list li .txt{min-width:0;flex:1}
.list li .t{font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list li .s{color:var(--ink-soft);font-size:12.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list li .meta{color:var(--ink-faint);font-size:11.5px;margin-top:3px}
.list li.is-active{background:var(--accent-soft)}
.row-btn{border:0;background:none;cursor:pointer;color:var(--ink-faint);
  padding:4px 6px;border-radius:6px;font-size:14px}
.row-btn:hover{background:var(--line);color:var(--ink)}
.row-btn.on{color:var(--warn)}

/* ---------- place card ---------- */
#place-card{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:13px;margin-bottom:14px;background:var(--bg-raise)
}
#place-card h2{margin:0 0 3px;font-size:17px;line-height:1.25}
#place-card .cat{color:var(--ink-soft);font-size:12.5px;text-transform:capitalize}
#place-card .addr{color:var(--ink-soft);margin:9px 0;line-height:1.5;font-size:13px}
#place-card .ll{font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.card-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.btn{
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  padding:7px 12px;border-radius:20px;cursor:pointer;font-size:12.5px;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none
}
.btn:hover{background:var(--bg-sunk)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.btn.primary:hover{filter:brightness(1.07)}
.btn.block{display:flex;justify-content:center;width:100%}
.link-btn{border:0;background:none;color:var(--accent);cursor:pointer;
  padding:6px 2px;font-size:12.5px}
.link-btn:hover{text-decoration:underline}
.link-btn.danger{color:var(--bad);margin-left:auto}

/* ---------- directions ---------- */
.modes{display:flex;gap:6px;margin-bottom:12px}
.mode{
  flex:1;border:1px solid var(--line);background:var(--bg);border-radius:8px;
  padding:8px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:16px
}
.mode span{font-size:11px;color:var(--ink-soft)}
.mode.is-active{border-color:var(--accent);background:var(--accent-soft)}
.mode.is-active span{color:var(--accent);font-weight:600}

.waypoints{display:flex;flex-direction:column;gap:7px}
.wp{display:flex;align-items:center;gap:8px}
.wp .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;border:2px solid var(--ink-faint)}
.wp.start .dot{background:var(--ink-faint)}
.wp.end .dot{border-radius:2px;background:var(--bad);border-color:var(--bad)}
.wp input{
  flex:1;min-width:0;border:1px solid var(--line);background:var(--bg-sunk);
  border-radius:7px;padding:9px 10px;outline:none
}
.wp input:focus{border-color:var(--accent);background:var(--bg)}
.wp .rm{border:0;background:none;color:var(--ink-faint);cursor:pointer;padding:4px;border-radius:5px}
.wp .rm:hover{color:var(--bad);background:var(--line-soft)}
.wp-actions{display:flex;align-items:center;gap:12px;margin:9px 0 4px}

#route-summary:not(:empty){
  border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:8px;padding:11px 13px;margin:12px 0
}
.route-alt{display:flex;justify-content:space-between;align-items:baseline;
  padding:7px 0;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.route-alt:last-child{border-bottom:0}
.route-alt.is-active .dur{color:var(--accent)}
.dur{font-size:17px;font-weight:650}
.dist{color:var(--ink-soft);font-size:12.5px}

.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line-soft);font-size:13px}
.steps li .arrow{color:var(--accent);flex:0 0 20px;text-align:center;font-size:15px}
.steps li .sd{color:var(--ink-faint);font-size:11.5px;margin-top:2px}

/* ---------- chips / nearby ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{
  border:1px solid var(--line);background:var(--bg);border-radius:18px;
  padding:6px 11px;cursor:pointer;font-size:12.5px;display:inline-flex;gap:5px;align-items:center
}
.chip:hover{background:var(--bg-sunk)}
.chip.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.row{display:flex;align-items:center;gap:10px;margin:10px 0}
.row.tight{margin:8px 0}
.row input[type=range]{flex:1;accent-color:var(--accent)}
.radius-label{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.radius-label output{font-weight:600;color:var(--ink)}
select{border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:6px 8px;flex:1}

/* ---------- live ---------- */
.gate{padding:6px 0}
.live-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px}
.live-toggle .sub{display:block;color:var(--ink-soft);font-size:12px;margin-top:2px}
.switch{width:44px;height:25px;border-radius:14px;border:0;background:var(--line);
  cursor:pointer;position:relative;padding:0;flex:0 0 auto;transition:background .18s}
.switch span{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .18s}
.switch[aria-checked=true]{background:var(--good)}
.switch[aria-checked=true] span{transform:translateX(19px)}
.live-me{margin-top:11px;font-size:12.5px;color:var(--ink-soft);line-height:1.6;
  font-variant-numeric:tabular-nums}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);
  margin-right:6px;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(24,128,56,.55)}70%{box-shadow:0 0 0 8px rgba(24,128,56,0)}100%{box-shadow:0 0 0 0 rgba(24,128,56,0)}}

/* ---------- map ---------- */
#map-wrap{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0;background:var(--bg-sunk)}
.leaflet-container{font-family:var(--font)}
.map-ui{position:absolute;z-index:1000;display:flex;flex-direction:column;gap:8px}
.map-ui.top-right{top:12px;right:12px}
.map-ui.bottom-right{bottom:26px;right:12px}
.map-ui.bottom-left{left:12px;bottom:26px;align-items:flex-start}
.ctl{
  width:38px;height:38px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);cursor:pointer;box-shadow:var(--shadow);
  display:grid;place-items:center;font-size:15px
}
.ctl:hover{background:var(--bg-sunk)}
.ctl.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.ctl.wide{width:auto;height:32px;padding:0 12px;font-size:12.5px;gap:6px;display:flex;align-items:center}
.zoom-pair{display:flex;flex-direction:column;box-shadow:var(--shadow);border-radius:8px;overflow:hidden}
.zoom-pair .ctl{border-radius:0;box-shadow:none;border-bottom:0}
.zoom-pair .ctl:last-child{border-bottom:1px solid var(--line)}
.coords{background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:3px 8px;font-size:11px;color:var(--ink-soft);box-shadow:var(--shadow);
  font-variant-numeric:tabular-nums}
.measure-box{position:absolute;top:12px;left:12px;z-index:1000;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:10px 13px;box-shadow:var(--shadow);font-size:13px}
.measure-box b{font-size:16px}
.panel-toggle{
  position:absolute;top:50%;left:0;transform:translateY(-50%);z-index:1000;
  width:18px;height:52px;border:1px solid var(--line);border-left:0;
  border-radius:0 7px 7px 0;background:var(--bg);color:var(--ink-soft);cursor:pointer;
  box-shadow:var(--shadow);padding:0
}
#app.panel-hidden .panel-toggle{transform:translateY(-50%) rotate(180deg);border-radius:7px 0 0 7px}

/* leaflet skin */
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:var(--shadow);
  background:var(--bg);color:var(--ink)}
.leaflet-popup-tip{background:var(--bg)}
.leaflet-popup-content{margin:11px 13px;line-height:1.5}
.leaflet-bar a{background:var(--bg);color:var(--ink);border-color:var(--line)}
.leaflet-control-attribution{background:rgba(255,255,255,.82)!important;font-size:10px}
@media (prefers-color-scheme:dark){
  .leaflet-control-attribution{background:rgba(20,22,25,.82)!important}
  .leaflet-control-attribution a{color:var(--accent)}
}

/* markers */
.dot-marker{border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.live-marker .ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--good);
  animation:pulse 1.8s ease-out infinite}
.live-label{background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:2px 8px;font-size:11px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow);
  transform:translateY(-2px)}
.num-marker{display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;
  border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.4)}

/* ---------- context menu / toast ---------- */
.ctxmenu{
  position:fixed;z-index:3000;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;box-shadow:var(--shadow);padding:5px;min-width:214px
}
.ctx-head{font-size:11px;color:var(--ink-faint);padding:5px 10px 7px;
  border-bottom:1px solid var(--line-soft);margin-bottom:4px;font-variant-numeric:tabular-nums}
.ctxmenu button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px}
.ctxmenu button:hover{background:var(--bg-sunk)}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:4000;
  background:#202124;color:#fff;padding:10px 17px;border-radius:8px;font-size:13px;
  box-shadow:var(--shadow);max-width:82vw
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  :root{--panel-w:100%}
  #app{flex-direction:column-reverse}
  #panel{
    flex:0 0 48dvh;height:48dvh;border-right:0;border-top:1px solid var(--line);
    border-radius:14px 14px 0 0;margin-top:-14px;box-shadow:var(--shadow)
  }
  #app.panel-hidden #panel{margin-left:0;margin-bottom:calc(-48dvh + 58px)}
  #map-wrap{flex:1}
  /* the sheet sits below the map, so the grab handle belongs at the
     bottom edge of the map pane, not above it */
  .panel-toggle{top:auto;bottom:4px;left:50%;transform:translateX(-50%);
    width:52px;height:18px;border:1px solid var(--line);border-radius:7px;
    display:grid;place-items:center;line-height:1}
  #app.panel-hidden .panel-toggle{transform:translateX(-50%) rotate(180deg)}
  .map-ui.bottom-right{bottom:14px}
  .map-ui.bottom-left{bottom:14px}
}

/* ---------- quick category pills over the map ---------- */
.quickcats{
  position:absolute;z-index:1000;top:12px;left:12px;right:62px;
  display:flex;gap:7px;overflow-x:auto;padding:2px;scrollbar-width:none
}
.quickcats::-webkit-scrollbar{display:none}
.quickcats .chip{
  background:var(--bg);box-shadow:var(--shadow);white-space:nowrap;flex:0 0 auto;
  border-radius:20px;padding:7px 13px
}

/* ---------- layer menu ---------- */
.layer-menu{
  position:absolute;top:44px;right:0;width:250px;background:var(--bg);
  border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:11px 13px 13px
}
.layer-menu .menu-title:first-child{margin-top:0}
.layer-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.layer-tile{
  border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:9px 6px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px
}
.layer-tile .lt-emoji{font-size:17px}
.layer-tile:hover{background:var(--bg-sunk)}
.layer-tile.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.layer-list{display:flex;flex-direction:column;gap:8px}
.layer-row{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.layer-row input{accent-color:var(--accent)}
.layer-menu .note{
  font-size:11px;color:var(--ink-faint);line-height:1.5;margin:12px 0 0;
  border-top:1px solid var(--line-soft);padding-top:9px
}

@media (max-width:820px){
  .quickcats{right:12px;top:10px}
  .layer-menu{right:0;width:min(250px,72vw)}
}

/* [hidden] must win over the display rules above */
[hidden]{display:none!important}

/* keep the scale bar clear of the round controls stacked in the corner */
.leaflet-control-scale{margin-right:58px!important}

/* ---------- opening splash ---------- */
#splash{
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:var(--bg);transition:opacity .5s ease,visibility .5s ease
}
#splash.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.splash-inner{text-align:center;padding:24px;animation:splash-rise .6s cubic-bezier(.2,.7,.3,1) both}
@keyframes splash-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the pin drops in, then bobs gently like it has just landed on the map */
.splash-globe{
  display:block;width:96px;height:96px;margin:0 auto;
  filter:drop-shadow(0 10px 18px rgba(26,115,232,.28));
  animation:pin-drop .75s cubic-bezier(.2,.9,.3,1.25) both, pin-bob 2.6s ease-in-out .9s infinite
}
@keyframes pin-drop{0%{opacity:0;transform:translateY(-46px) scale(.8)}100%{opacity:1;transform:none}}
@keyframes pin-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.splash-name{
  margin:16px 0 4px;font-size:34px;font-weight:800;letter-spacing:-.5px;
  /* the wordmark picks up the logo's ocean-to-land colours */
  background:linear-gradient(90deg,#4f8dff,#1a73e8 45%,#0b8043);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.splash-tag{margin:0;color:var(--ink-soft);font-size:14px}
.splash-by{
  margin:26px 0 0;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-faint)
}
.splash-by strong{color:var(--accent);font-weight:700;letter-spacing:2px}
.splash-bar{
  width:170px;height:3px;border-radius:3px;background:var(--line);
  margin:22px auto 0;overflow:hidden
}
.splash-bar i{
  display:block;height:100%;width:40%;border-radius:3px;background:var(--accent);
  animation:splash-slide 1.1s ease-in-out infinite
}
@keyframes splash-slide{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}

.panel-foot .credit{
  margin-left:auto;font-size:10.5px;letter-spacing:.6px;color:var(--ink-faint);
  text-transform:uppercase;white-space:nowrap
}
@media (prefers-reduced-motion:reduce){
  .splash-globe,.splash-bar i,.splash-inner{animation:none}
}

/* ---------- MAP-THE-WORLD wordmark ---------- */
/* The name is long, so let it scale with the viewport instead of
   overflowing a phone screen or crowding the account chip. */
.splash-name{
  font-size:clamp(22px,7.2vw,38px);
  letter-spacing:.5px;
  white-space:nowrap
}
.brand-name{
  font-size:13.5px;letter-spacing:.8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0
}
.auth-brand .brand-name{font-size:17px;letter-spacing:1px}

/* ---------- install on a phone ---------- */
.install-cta{
  background:var(--accent);color:var(--accent-ink);border-color:transparent;
  font-weight:600;letter-spacing:.2px
}
.install-cta:hover{background:var(--accent);filter:brightness(1.08)}

.modal{
  position:fixed;inset:0;z-index:5000;display:grid;place-items:center;
  background:rgba(15,17,20,.55);padding:20px;backdrop-filter:blur(2px)
}
.modal-card{
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:22px 22px 18px;max-width:380px;width:100%
}
.modal-card h2{margin:0 0 14px;font-size:17px}
.steps-help{margin:0 0 14px;padding-left:20px;line-height:1.75;font-size:13.5px}
.steps-help li{margin-bottom:6px}
.steps-help strong{color:var(--ink)}
.ios-share{
  display:inline-grid;place-items:center;width:19px;height:19px;border-radius:5px;
  border:1.5px solid var(--accent);color:var(--accent);font-size:11px;vertical-align:-4px
}

/* the house glows once a home is actually set */
#btn-home.is-active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

/* ---------- friends ---------- */
.friend-code{
  display:flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;margin-bottom:9px;font-size:12.5px;color:var(--ink-soft)
}
.friend-code strong{
  font-size:16px;letter-spacing:3px;color:var(--accent);font-variant-numeric:tabular-nums;
  margin-left:auto
}
#friend-code-input{
  flex:1;min-width:0;border:1px solid var(--line);background:var(--bg-sunk);
  border-radius:7px;padding:9px 10px;outline:none;letter-spacing:2px;text-transform:uppercase
}
#friend-code-input:focus{border-color:var(--accent);background:var(--bg)}
.req-actions{display:flex;gap:5px;flex:0 0 auto}
.btn.tiny{padding:4px 10px;font-size:11.5px;border-radius:14px}

/* ---------- recovery code panel ---------- */
#code-panel{margin-top:4px}
.code-title{font-size:17px;margin:0 0 8px}
.code-why{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 14px}
.code-box{
  border:1px dashed var(--accent);background:var(--accent-soft);border-radius:10px;
  padding:16px;text-align:center;margin-bottom:12px
}
.code-box code{
  font-size:21px;letter-spacing:3px;font-weight:700;color:var(--ink);background:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
.code-ack{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);
  margin:12px 0;cursor:pointer
}
.code-ack input{accent-color:var(--accent)}
#code-continue[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- set-home-from-live control ---------- */
.home-row{
  display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 13px
}
.home-text{min-width:0;flex:1}
.home-text strong{display:block;font-size:13.5px;line-height:1.35}
.home-text .sub{
  display:block;color:var(--ink-soft);font-size:12px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.home-row .btn{flex:0 0 auto;white-space:nowrap}
#btn-goto-home{margin-top:2px}
@media (max-width:420px){
  .home-row{flex-direction:column;align-items:stretch}
  .home-row .btn{justify-content:center}
}

/* ---------- "where is home?" dialog ---------- */
.setup-card{text-align:center;padding:26px 22px 18px}
.setup-icon{
  width:62px;height:62px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;font-size:30px;
  background:var(--accent-soft);box-shadow:0 0 0 6px color-mix(in srgb, var(--accent-soft) 45%, transparent)
}
.setup-card h2{margin:0 0 8px;font-size:19px}
.setup-card .hint{margin:0 0 18px}
.setup-btn{padding:12px;font-size:14px;margin-bottom:9px}
.setup-btn[disabled]{opacity:.65;cursor:progress}
.setup-later{display:block;margin:6px auto 0;color:var(--ink-soft)}
.setup-error{
  text-align:left;font-size:12.5px;line-height:1.5;color:var(--bad);
  background:color-mix(in srgb, var(--bad) 10%, transparent);
  border-radius:8px;padding:9px 11px;margin:4px 0 8px
}

/* ---------- tap-the-map banner ---------- */
.pick-banner{
  position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:4500;
  display:flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--bg);padding:10px 12px 10px 16px;border-radius:26px;
  box-shadow:var(--shadow);font-size:13.5px;font-weight:600;max-width:calc(100vw - 32px)
}
.pick-banner .btn{background:transparent;color:var(--bg);border-color:color-mix(in srgb, var(--bg) 45%, transparent)}

/* ---------- import question ---------- */
.import-sheet{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:4400;
  width:min(420px, calc(100vw - 32px));background:var(--bg);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:14px 16px
}
.import-sheet p{margin:0 0 11px;font-size:13px;line-height:1.5;color:var(--ink)}
.import-actions{display:flex;gap:8px;justify-content:flex-end}

/* ---------- directions: Done ---------- */
.route-done{margin:12px 0 4px;padding:12px;font-size:14.5px}
.route-done[disabled]{opacity:.7;cursor:progress}
.route-error{
  margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--bad);
  background:color-mix(in srgb, var(--bad) 9%, transparent);border-radius:8px;padding:9px 11px
}

/* ---------- turn-by-turn bar ---------- */
.nav-bar{
  position:fixed;z-index:4200;top:12px;left:50%;transform:translateX(-50%);
  width:min(460px, calc(100vw - 24px));border-radius:16px;overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.28)
}
.nav-next{display:flex;align-items:center;gap:14px;background:#0b8043;color:#fff;padding:14px 16px}
.nav-arrow{font-size:30px;line-height:1;flex:0 0 auto}
.nav-text{min-width:0}
.nav-text strong{display:block;font-size:17px;line-height:1.3}
.nav-text span{display:block;font-size:13px;opacity:.9;margin-top:2px}
.nav-foot{
  display:flex;align-items:center;gap:8px;background:var(--bg);color:var(--ink-soft);
  padding:9px 12px 9px 16px;font-size:12.5px
}
.nav-foot #nav-remaining{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-end{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 35%, transparent)}
/* the category pills sit where the bar goes while navigating */
body.is-navigating .quickcats{display:none}

/* ---------- admin link, announcement, privacy note ---------- */
.admin-link{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;
  color:#b0126b;background:#fde7f3;border-radius:12px;padding:3px 9px;text-decoration:none;white-space:nowrap
}
.admin-link:hover{filter:brightness(.96)}
.announce{
  position:fixed;z-index:4100;top:62px;left:50%;transform:translateX(-50%);
  width:min(560px, calc(100vw - 24px));display:flex;align-items:center;gap:10px;
  background:#1a73e8;color:#fff;border-radius:14px;padding:11px 12px 11px 14px;
  box-shadow:0 6px 22px rgba(26,115,232,.4);font-size:14.5px;line-height:1.4;font-weight:600
}
.announce-ic{font-size:20px;flex:0 0 auto}
.announce-text{flex:1;min-width:0;overflow-wrap:anywhere}
.announce-x{flex:0 0 auto;border:0;background:rgba(255,255,255,.18);color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer}
.announce-x:hover{background:rgba(255,255,255,.3)}
body.is-navigating .announce{display:none}
.admin-note{margin:2px 0 10px;font-size:12px}

/* ---------- "turn on location" guide: one easy step at a time ---------- */
.loc-guide{z-index:5200;overflow-y:auto;padding:20px 16px}
.guide-card{
  position:relative;max-width:420px;width:100%;margin:auto;
  padding:22px 20px 14px;text-align:center
}
.guide-close{
  position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  border:0;background:none;color:var(--ink-faint);cursor:pointer;font-size:17px
}
.guide-close:hover{background:var(--bg-sunk);color:var(--ink)}

/* step dots: where you are */
.guide-dots{display:flex;justify-content:center;gap:7px;margin:2px 0 16px;min-height:10px}
.guide-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);transition:all .2s}
.guide-dots i.on{background:var(--accent);width:26px;border-radius:5px}
.guide-dots i.done{background:color-mix(in srgb, var(--accent) 45%, transparent)}

/* the big picture */
.guide-pic{
  background:var(--bg-sunk);border-radius:16px;padding:22px 14px;margin:0 0 16px;
  min-height:130px;display:grid;place-items:center
}
.guide-say{margin:0 0 6px;font-size:23px;line-height:1.25;font-weight:800;color:var(--ink)}
.guide-small{margin:0 0 18px;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.guide-big{
  display:flex;justify-content:center;width:100%;padding:15px;font-size:17px;
  border-radius:14px;font-weight:700
}
.guide-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:10px}
.guide-links .link-btn{font-size:13.5px;padding:8px 4px}
.guide-ok{
  font-size:19px;font-weight:800;color:#0b8043;
  background:color-mix(in srgb, #0b8043 12%, transparent);
  border-radius:14px;padding:16px;margin:0 0 14px
}

/* a big, simple drawing of the top of a browser */
.mock-bar{
  display:flex;align-items:center;gap:8px;background:#dfe3e8;border-radius:14px;
  padding:10px;width:100%;max-width:340px;color:#3c4043;user-select:none
}
.mock-omni{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:#fff;border-radius:24px;
  padding:6px 14px 6px 6px;font-size:15px
}
.mock-omni .url{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5f6368}
.mock-ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#5f6368
}
.mock-ico svg{width:24px;height:24px}
.mock-aa{font-weight:800;font-size:19px;color:#202124;width:auto;padding:0 12px;border-radius:20px}

/* THE thing to press: thick ring, pulsing */
.hl{
  background:#e8f0fe;color:#1a73e8 !important;
  box-shadow:0 0 0 3px #1a73e8;animation:hl-pulse 1.4s ease-in-out infinite
}
@keyframes hl-pulse{
  0%,100%{box-shadow:0 0 0 3px #1a73e8,0 0 0 0 rgba(26,115,232,.5)}
  50%{box-shadow:0 0 0 3px #1a73e8,0 0 0 12px rgba(26,115,232,0)}
}
/* a hand pointing at it */
.tap-hand{display:block;font-size:34px;line-height:1;margin-top:10px;animation:tap-bob 1.1s ease-in-out infinite}
@keyframes tap-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* one big row from the browser's menu, e.g.  📍 Location  [switch] */
.mock-row{
  display:flex;align-items:center;gap:12px;background:#fff;color:#202124;
  border-radius:14px;padding:14px 16px;width:100%;max-width:300px;font-size:18px;font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.08)
}
.mock-row .lbl{flex:1;text-align:left}
.mock-row .mock-ico{width:30px;height:30px;color:#1a73e8}
.mock-row.hl{box-shadow:0 0 0 3px #1a73e8,0 2px 10px rgba(0,0,0,.08)}
.mock-choice{
  border:2px solid #1a73e8;color:#1a73e8;border-radius:10px;padding:4px 12px;
  font-size:15px;font-weight:800;background:#e8f0fe
}
/* the switch flips from off to on, over and over, so it is obvious what to do */
.mock-toggle{
  width:58px;height:32px;border-radius:16px;background:#bdc1c6;position:relative;flex:0 0 auto;
  animation:switch-bg 2.4s ease-in-out infinite
}
.mock-toggle::after{
  content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);animation:switch-knob 2.4s ease-in-out infinite
}
@keyframes switch-bg{0%,35%{background:#bdc1c6}50%,100%{background:#1a73e8}}
@keyframes switch-knob{0%,35%{left:3px}50%,100%{left:29px}}
.flip-note{display:block;margin-top:10px;font-size:14px;font-weight:700;color:#1a73e8}

/* a big app-style tile, for "open Settings" / "tap Chrome" steps */
.mock-tile{
  display:inline-flex;align-items:center;gap:12px;background:#fff;color:#202124;
  border-radius:16px;padding:14px 20px;font-size:19px;font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.08)
}
.mock-tile .emo{font-size:30px}

/* the arrow on the real page, pointing at the real browser button */
.guide-pointer{
  position:fixed;z-index:5300;display:flex;align-items:center;gap:8px;pointer-events:none;
  background:#1a73e8;color:#fff;border-radius:24px;padding:8px 16px 8px 12px;
  box-shadow:0 6px 22px rgba(26,115,232,.45);font-weight:800;font-size:15px
}
.guide-pointer.top{top:10px;left:14px;animation:ptr-up 1s ease-in-out infinite}
.guide-pointer.bottom{bottom:14px;left:50%;transform:translateX(-50%);animation:ptr-down 1s ease-in-out infinite}
.gp-arrow{font-size:22px;line-height:1}
@keyframes ptr-up{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes ptr-down{0%,100%{translate:0 0}50%{translate:0 7px}}

@media (prefers-color-scheme:dark){
  .mock-bar{background:#35363a}
  .mock-omni{background:#202124}
  .mock-omni .url{color:#bdc1c6}
  .mock-ico{color:#9aa0a6}
  .mock-aa{color:#e8eaed}
  .mock-row,.mock-tile{background:#2d2e31;color:#e8eaed}
  .hl,.mock-choice{background:#1f3a60}
}
@media (prefers-reduced-motion:reduce){
  .hl,.tap-hand,.guide-pointer,.mock-toggle,.mock-toggle::after{animation:none}
  .mock-toggle{background:#1a73e8}
  .mock-toggle::after{left:29px}
}