:root{
  --dock-pad:6px;
  --dock-inset:22px;
  --dock-bottom:calc(env(safe-area-inset-bottom) + 21px);
  --dock-h:calc(var(--fab) + (var(--dock-pad) * 2) + 2px);
  --dock-gap:12px;
}

#controls{
  position:fixed;z-index:600;
  inset-inline:var(--dock-inset);
  bottom:var(--dock-bottom);
  display:flex;flex-direction:column;align-items:stretch;gap:12px
}

@media (max-width:899px),(pointer:coarse){

#controls{flex-direction:row;align-items:center;gap:0}

.ctl-card{flex:1 1 auto;min-width:0;padding:var(--dock-pad)}
}


.ctl-main{order:1;flex:1 1 auto;min-width:0;display:flex;align-items:center;
  gap:var(--dock-pad);padding-inline-end:var(--dock-pad);pointer-events:auto}

.ctl-fabs{order:2;flex:0 0 auto;gap:var(--dock-pad);
  padding-inline-start:var(--dock-pad);padding-inline-end:0;
  border-inline-start:1px solid var(--edge)}

.ctl-fabs .fab{
  background:transparent;
  background-image:none;
  border-color:color-mix(in srgb,var(--edge) 50%,transparent);
  box-shadow:var(--depth-in);
  color:color-mix(in srgb,var(--ink) 78%,transparent)
}
.ctl-fabs .fab:active{background:var(--float-press);box-shadow:var(--depth-in);
  color:var(--ink)}
.ctl-main .fab-inset{border-color:color-mix(in srgb,var(--edge) 50%,transparent)}

.ctl-fabs{display:flex;align-items:center;justify-content:flex-end}

.ctl-card{
  display:flex;align-items:center;
  border-radius:var(--r-lg);
  background:var(--float);
  border:1px solid var(--edge);
  background-image:var(--face);
  box-shadow:var(--depth-2)
}

#controls::before{
  content:"";position:absolute;z-index:-1;
  inset-inline:calc(var(--dock-inset) * -1);
  bottom:calc(var(--dock-bottom) * -1);
  height:calc(var(--fab) + env(safe-area-inset-bottom) + 120px);
  background:linear-gradient(0deg,var(--veil-a),var(--veil-b));
  pointer-events:none
}

.fab span,.cta span{line-height:1}

.fab,.cta{
  height:var(--fab);
  border-radius:var(--r-ctl);
  display:flex;align-items:center;justify-content:center;
  transition:transform .16s var(--spring),background-color .16s ease,
             box-shadow .16s ease
}
.fab:active,.cta:active{transform:scale(.955)}

.fab{
  width:var(--fab);flex:0 0 var(--fab);
  background:var(--float);
  border:1px solid var(--edge);
  color:var(--ink);
  background-image:var(--face);
  box-shadow:var(--depth-1)
}
.fab:active{background:var(--float-press);background-image:none;
  box-shadow:var(--depth-in)}

.fab .nv-icon{width:20px;height:20px}

.fab-inset{
  background:transparent;
  background-image:none;
  box-shadow:var(--depth-in);
  border-color:var(--edge);
  color:color-mix(in srgb,var(--ink) 78%,transparent)
}
.fab-inset:active{background:var(--press);color:var(--ink)}


@media (max-width:390px){
  :root{--fab:40px;--dock-inset:16px;--dock-pad:5px}
  .ctl-card{padding:var(--dock-pad)}
  .fab .nv-icon{width:18px;height:18px}
  .cta{font-size:13px;letter-spacing:.02em;padding-inline:14px}
}

.cta{
  flex:1;
  font-family:var(--f-head);font-weight:600;
  letter-spacing:.01em;font-size:15px;
  padding-inline:14px;
  color:var(--void);background:var(--sodium);
  border:1px solid var(--accent-soft);
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb,#ffffff 22%,transparent),transparent 52%),
    linear-gradient(180deg,
      rgba(0,0,0,.16),rgba(0,0,0,0) 46%,
      color-mix(in srgb,#ffffff 9%,transparent));

  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#ffffff 34%,transparent),
    inset 0 -1px 0 rgba(0,0,0,.30),
    inset 0 0 0 2px rgba(0,0,0,.13),
    inset 0 3px 5px -2px rgba(0,0,0,.34),
    var(--depth-1),var(--depth-glow);

  text-shadow:0 1px 1px rgba(0,0,0,.22)
}
.cta span{
  line-height:1.25;
  transform:translateY(.03em);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%
}
.cta:not(:has(span)){
  line-height:1.25;
  box-sizing:border-box;
  padding-block:.06em 0
}

.cta:active{
  background:color-mix(in srgb,var(--sodium) 82%,#000);
  background-image:
    linear-gradient(180deg,
      rgba(0,0,0,.20),rgba(0,0,0,0) 52%,
      color-mix(in srgb,#ffffff 7%,transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#ffffff 12%,transparent),
    inset 0 0 0 2px rgba(0,0,0,.16),
    inset 0 4px 7px -2px rgba(0,0,0,.42),
    var(--depth-glow);
  text-shadow:none
}
.cta:focus-visible{outline-offset:3px}
.cta[hidden]{display:none}

.toast{position:fixed;z-index:800;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 124px);
  background:var(--raise);border:1px solid var(--edge);border-radius:var(--r-ctl);
  box-shadow:inset 0 1px 0 var(--sheen), 0 10px 30px rgba(0,0,0,.3);
  padding:11px 16px;font-size:13px;line-height:1.4;max-width:88vw;
  text-align:center}
.toast[hidden]{display:none}


#search .head-row{display:flex;align-items:center;justify-content:space-between;width:100%}

#search{max-height:min(62dvh,520px)}
#search .sheet-head h2{margin-bottom:8px}
#search .sheet-body{padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}

#closeSearch{display:none}

.search-form{margin:0 0 10px}

.search-box{
  display:flex;align-items:center;gap:10px;
  height:44px;border-radius:var(--r-ctl);
  padding-inline:13px;
  background:var(--asphalt);border:1px solid var(--edge);
  transition:border-color .16s ease
}
.search-box:focus-within{border-color:var(--sodium)}

#searchInput{
  flex:1;min-width:0;height:100%;
  background:none;border:none;color:var(--ink);font-size:15px;
  -webkit-appearance:none;appearance:none
}
#searchInput:focus{outline:none}
#searchInput::placeholder{color:var(--mute)}
#searchInput::-webkit-search-cancel-button{-webkit-appearance:none}

.search-clear{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--mute);background:var(--press);
  transition:background-color .16s ease,color .16s ease,transform .16s var(--spring)
}
.search-clear .nv-icon{width:12px;height:12px}
.search-clear:active{transform:scale(.9);background:var(--asphalt);color:var(--ink)}
.search-clear[hidden]{display:none}

.search-results .row{gap:12px}
.search-results .row-pin,
.hist-row .row-pin{
  flex:0 0 34px;width:34px;height:34px;
  display:grid;place-items:center;
  background:none;border:0;color:var(--mute)
}
.search-results .row-pin .nv-icon,
.hist-row .row-pin .nv-icon{width:17px;height:17px}
.search-results .kind{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);
  padding:2px 6px;border-radius:5px;background:var(--raise);
  flex:0 0 auto;align-self:center
}

.search-state{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 18px 26px;text-align:center;color:var(--mute);font-size:13px;line-height:1.5
}
.search-state .nv-icon{width:22px;height:22px;opacity:.55}
.search-state.is-error .nv-icon{color:var(--heavy);opacity:.8}


@media (max-width:899px),(pointer:coarse){
  #controls::before{
    height:calc(var(--fab) + env(safe-area-inset-bottom) + 104px);
    inset-inline:calc(var(--dock-inset) * -1);
    bottom:calc(var(--dock-bottom) * -1)
  }
  #search{max-height:min(62dvh,520px,var(--sheet-ceiling))}
}