/* Send Listy Core 0.954 — canonical bottom navigation on independent documents.
   SVG hierarchy is shared with the native Core navbar. The native app keeps
   its previously approved, much more extensive Core CSS and event handlers. */
.sl-canonical-bottom-nav,
.sl-canonical-bottom-nav * {box-sizing:border-box}
.sl-canonical-bottom-nav {
  --sl-canonical-green:#2f9e2f;
  --sl-canonical-orange:#ff8a00;
  position:fixed!important;left:50%!important;bottom:0!important;
  transform:translateX(-50%)!important;
  width:min(760px,100%)!important;
  height:calc(75px + env(safe-area-inset-bottom,0px))!important;
  padding:0 4px env(safe-area-inset-bottom,0px)!important;
  display:grid!important;grid-template-columns:1fr 1fr 1.2fr 1fr 1fr!important;
  align-items:start!important;overflow:visible!important;
  background:linear-gradient(to top,rgba(34,62,47,.15) 0%,rgba(34,62,47,0) 100%),#fff!important;
  border:1px solid #edf1f0!important;border-bottom:0!important;
  border-radius:20px 20px 0 0!important;
  box-shadow:none!important;
  isolation:isolate;
  font-family:Inter,Arial,sans-serif!important;
  z-index:2147482550;
}
.sl-canonical-bottom-nav > :is(button,a):not(.sl-floating-add) {
  position:relative;display:grid!important;grid-template-rows:24px 15px!important;
  align-content:start!important;align-self:start!important;justify-items:center!important;
  justify-content:center!important;row-gap:3px!important;
  min-width:0!important;width:100%!important;height:42px!important;
  min-height:0!important;margin:5px 0 0!important;padding:0 2px!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background:transparent!important;transform:none!important;
  text-decoration:none!important;text-align:center!important;
  color:#6d7673!important;cursor:pointer;font:inherit!important;line-height:1!important;
}
.sl-canonical-bottom-nav > :is(button,a):not(.sl-floating-add) > :is(.sl-nav-glyph,.sl-nav-icon) {
  display:inline-flex!important;width:24px!important;height:24px!important;
  align-items:center;justify-content:center;grid-row:1;font-size:0!important;
}
.sl-canonical-bottom-nav > :is(button,a):not(.sl-floating-add) svg {
  display:block!important;width:19.8px!important;height:19.8px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
.sl-canonical-bottom-nav > :is(button,a)[data-sl-nav-action="lists"] svg {width:18.9px!important;height:18.9px!important}
.sl-canonical-bottom-nav > :is(button,a):not(.sl-floating-add) > span:last-of-type {
  grid-row:2!important;display:block!important;font-size:9.9px!important;
  line-height:15px!important;font-weight:700!important;white-space:nowrap!important;
  margin:0!important;padding:0!important;text-align:center!important;
  color:inherit!important;
}
.sl-canonical-bottom-nav > :is(button,a)[data-sl-nav-action="lists"]::after,
.sl-canonical-bottom-nav > :is(button,a)[data-sl-nav-action="favorites"]::after {
  content:"";position:absolute;top:7px;bottom:7px;width:1px;
  background:rgba(49,186,103,.10);pointer-events:none;
}
.sl-canonical-bottom-nav > :is(button,a)[data-sl-nav-action="lists"]::after {inset-inline-start:0}
.sl-canonical-bottom-nav > :is(button,a)[data-sl-nav-action="favorites"]::after {inset-inline-end:0}
.sl-canonical-bottom-nav > .sl-floating-add {
  position:relative;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:flex-start!important;
  align-self:start!important;justify-self:center!important;
  height:53px!important;min-height:0!important;width:auto!important;
  margin:0!important;padding:0!important;gap:4px!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  color:#38443b!important;text-decoration:none!important;text-align:center;
  transform:translateY(-23px)!important;cursor:pointer;
}
.sl-canonical-bottom-nav > .sl-floating-add > i {
  display:grid!important;place-items:center!important;
  flex-shrink:0;width:56px!important;height:56px!important;
  aspect-ratio:1/1;border-radius:50%!important;border:4px solid #eef5f0!important;
  background:linear-gradient(180deg,#36b54a 0%,#1f8b36 100%)!important;
  box-shadow:0 12px 22px rgba(28,126,47,.28)!important;
  color:#fff!important;font:normal 32px/1 Inter,Arial,sans-serif!important;
  margin:0 0 2px!important;
}
/* Core 0.956: One snug ring, drawn as the Create circle's own border.
   0.955's offset outline plus dark border produced two concentric edges.
   Keep the button dimensions, clickable element, position, and interactions. */
.sl-canonical-bottom-nav > .sl-floating-add > i {
  outline:none!important;
  outline-offset:0!important;
}
.sl-canonical-bottom-nav > .sl-floating-add > span {
  color:#38443b!important;font-size:10px!important;font-weight:800!important;
  line-height:1.05!important;white-space:nowrap!important;
}
.sl-canonical-bottom-nav > :is(button,a):not(.sl-floating-add):is(:hover,:focus-visible) {color:var(--sl-canonical-green)!important}
.sl-canonical-bottom-nav > :is(button,a):focus-visible {outline:2px solid var(--sl-canonical-green);outline-offset:2px;border-radius:8px!important}
/* Reuse the Core standalone appearance state, including User Hub's early
   sluh-plans-dark marker for the plans page's first paint. */
html.sl-page-dark .sl-canonical-bottom-nav,
html.sl-dark-pref .sl-canonical-bottom-nav,
html.sluh-plans-dark .sl-canonical-bottom-nav,
.slch-public-theme-dark .sl-canonical-bottom-nav,
.slch-public-dark .sl-canonical-bottom-nav {
  background:linear-gradient(to top,rgba(48,68,55,.2),rgba(48,68,55,0)),#17232e!important;
  border-color:#35434b!important;
}
html.sl-page-dark .sl-canonical-bottom-nav > :is(button,a),
html.sl-dark-pref .sl-canonical-bottom-nav > :is(button,a),
html.sluh-plans-dark .sl-canonical-bottom-nav > :is(button,a),
.slch-public-theme-dark .sl-canonical-bottom-nav > :is(button,a),
.slch-public-dark .sl-canonical-bottom-nav > :is(button,a) {color:#bac5cd!important}
html.sl-page-dark .sl-canonical-bottom-nav > .sl-floating-add > i,
html.sl-dark-pref .sl-canonical-bottom-nav > .sl-floating-add > i,
html.sluh-plans-dark .sl-canonical-bottom-nav > .sl-floating-add > i,
.slch-public-theme-dark .sl-canonical-bottom-nav > .sl-floating-add > i,
.slch-public-dark .sl-canonical-bottom-nav > .sl-floating-add > i {border-color:rgba(245,250,247,.95)!important}
html.sl-page-dark .sl-canonical-bottom-nav > .sl-floating-add > span,
html.sl-dark-pref .sl-canonical-bottom-nav > .sl-floating-add > span,
html.sluh-plans-dark .sl-canonical-bottom-nav > .sl-floating-add > span,
.slch-public-theme-dark .sl-canonical-bottom-nav > .sl-floating-add > span,
.slch-public-dark .sl-canonical-bottom-nav > .sl-floating-add > span {color:#d5e3d9!important}
@media(min-width:651px){
  .sl-canonical-bottom-nav {height:calc(75px + env(safe-area-inset-bottom,0px))!important;border-radius:24px 24px 0 0!important;padding-inline:8px!important}
  .sl-canonical-bottom-nav > .sl-floating-add{transform:translateY(-25px)!important}
  .sl-canonical-bottom-nav > .sl-floating-add > i{width:60px!important;height:60px!important;font-size:34px!important}
  .sl-canonical-bottom-nav > .sl-floating-add > span{font-size:11px!important}
}
/* Standalone documents reserve space under interactive content and above the home indicator. */
body:has(> .sl-plans-app-shell) {padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))!important}
.slch-public-page:has(.sl-canonical-bottom-nav) {padding-bottom:calc(95px + env(safe-area-inset-bottom,0px))}