/* Trail finder (/trails/), collection pages and My trails (5 Nov 2026; explore layout and compact cards, 5 Nov 2026).
   Site tokens and the shared .filter-chip / .tag-closed / .btn / .map-pop styles only. */

.tf-empty a:not(.btn){color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.tf-n{opacity:.75;}
.tf-note{font-size:12.5px; color:var(--text-softer); margin:0;}

/* ---------- Finder without JavaScript: the plain card list ---------- */
.tfx{max-width:var(--max-width); margin:0 auto; padding:28px 40px 48px;}
.tfx-top h1{font-size:40px; line-height:1.15; margin:0 0 18px;}
.tfx-map[hidden], .tfx-panel[hidden], .tfx-bar[hidden], .tfx-handle[hidden], .tfx-area[hidden], .tfx-chip[hidden], .tf-clear[hidden], .tfx-badge[hidden]{display:none;}
.tfx-meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0 0 12px;}
.tf-count{font-size:13.5px; font-weight:600; color:var(--ink); margin:0 auto 0 0;}
.tf-clear{background:none; border:0; padding:8px 2px; min-height:44px; font-size:13.5px; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
/* Recently viewed (/trails/): one scrolling row of small route chips. */
.tf-recent{margin:0 0 14px;}
.tf-recent[hidden]{display:none;}
.tf-recent-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 6px;}
.tf-recent-head h2{margin:0; font:600 13px 'Inter', sans-serif; color:var(--text-soft);}
.tf-recent-clear{min-height:44px; padding:0 4px; border:0; background:none; color:var(--ink); font:500 13px 'Inter', sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.tf-recent ul{list-style:none; margin:0; padding:2px 2px 6px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin;}
.tf-recent li{flex:none;}
.tf-recent a{display:inline-flex; align-items:center; gap:8px; min-height:44px; max-width:240px; padding:4px 14px 4px 4px; border:1px solid var(--line); border-radius:100px; background:var(--white); color:var(--ink); font-size:13px; text-decoration:none; transition:border-color .15s;}
.tf-recent a:hover, .tf-recent a:focus-visible{border-color:var(--ink);}
.tf-recent a:focus-visible, .tf-recent-clear:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.tf-recent .tf-thumb{width:36px; height:36px; flex:none;}
.tf-recent span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tf-collections{margin:0 0 14px;}
.tf-collections ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.tf-collections a{display:inline-flex; gap:6px; align-items:center; min-height:36px; font-size:13px; padding:6px 14px; border:1px solid var(--line); border-radius:100px; background:var(--white); color:var(--ink); text-decoration:none; white-space:nowrap; transition:border-color .15s;}
.tf-collections a:hover, .tf-collections a:focus-visible{border-color:var(--ink);}
@media (max-width:620px){ .tfx{padding:20px 16px 40px;} .tfx-top h1{font-size:32px;} }

/* ---------- Finder app (JavaScript on): search bar, filters button, map ---------- */
.tfx-bar{display:flex; align-items:center; gap:8px;}
.tf-search{position:relative; flex:1 1 auto; min-width:0;}
.tf-search svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:17px; height:17px; fill:none; stroke:var(--text-softer); stroke-width:2;}
.tf-search input{width:100%; height:46px; padding:0 16px 0 42px; border:1px solid var(--line); border-radius:100px; background:var(--white); font-size:16px; color:var(--ink);}
.tf-search input:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.tf-suggest{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:1100; list-style:none; margin:0; padding:6px; background:var(--white); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(11,42,71,.14);}
.tf-suggest[hidden]{display:none;}
.tf-suggest a{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; padding:9px 10px; border-radius:6px; color:var(--ink); text-decoration:none;}
.tf-suggest strong{font-weight:600; font-size:14px;}
.tf-suggest span{font-size:12px; color:var(--text-softer);}
.tf-suggest .tag-closed{font-size:11px; padding:1px 8px; border-radius:100px; background:var(--ink); color:var(--white); font-weight:600;}
.tf-suggest a:hover, .tf-suggest [aria-selected="true"] a{background:var(--accent-soft);}
@media (max-width:380px){ .tfx-filters-btn{padding:0 12px; gap:4px;} .tf-search input{padding-right:10px;} }
.tfx-filters-btn{display:inline-flex; align-items:center; gap:6px; flex:none; height:46px; padding:0 16px; border:1px solid var(--line); border-radius:100px; background:var(--white); color:var(--ink); font:500 14px 'Inter', sans-serif; cursor:pointer; transition:border-color .15s;}
.tfx-filters-btn:hover{border-color:var(--ink);}
.tfx-filters-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
.tfx-badge{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--ink); color:var(--white); font-size:11.5px; font-weight:600;}
.tfx-chip{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:4px 12px; border:1px solid var(--ink); border-radius:100px; background:var(--accent-soft); color:var(--ink); font:500 12.5px 'Inter', sans-serif; cursor:pointer;}
.tfx button:focus-visible, .tfx .filter-chip:focus-visible, .tf-collections a:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.tfx-map{position:relative; overflow:hidden; background:var(--accent-soft);}
.tfx-leaflet{position:absolute; inset:0; z-index:0;}
.tfx-skel{position:absolute; inset:0; z-index:1; pointer-events:none; transition:opacity .3s ease;
  background:linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 65%) var(--accent-soft);
  background-size:220% 100%; animation:tfx-shimmer 1.3s linear infinite;}
.tfx-skel::before{content:""; position:absolute; inset:0; opacity:.5;
  background:linear-gradient(var(--line) 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/48px 48px;}
.tfx-skel.is-done{opacity:0; animation:none;}
@keyframes tfx-shimmer{from{background-position:120% 0;} to{background-position:-120% 0;}}
.tfx-map-msg{position:absolute; inset:auto 16px 16px; z-index:2; margin:0; padding:10px 14px; border-radius:10px; background:var(--white); font-size:13.5px; color:var(--text-soft); box-shadow:0 4px 14px rgba(11,42,71,.12);}
.tfx-area{position:absolute; top:14px; left:50%; z-index:900; transform:translateX(-50%); display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border:0; border-radius:100px; background:var(--white); color:var(--ink); font:600 13.5px 'Inter', sans-serif; box-shadow:0 4px 16px rgba(11,42,71,.22); cursor:pointer;
  animation:tfx-pop .2s ease;}
@keyframes tfx-pop{from{opacity:0; transform:translate(-50%,-6px);} to{opacity:1; transform:translate(-50%,0);}}
/* Pins: navy trails, blue guides, closed walks hollow so a closure reads on the map too. */
.tf-pin-icon{background:none; border:0;}
.tf-pin{display:block; position:relative; width:18px; height:18px; border-radius:50%; background:var(--ink); border:2px solid var(--white); box-shadow:0 2px 6px rgba(11,42,71,.4); transition:transform .15s ease, box-shadow .15s ease;}
.tf-pin--guide{background:var(--accent);}
.tf-pin--closed{background:var(--white); border:3px solid var(--ink);}
.tf-pin--closed::after{content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:2px; margin-left:-1px; background:var(--ink); transform:rotate(45deg);}
.leaflet-marker-icon:hover .tf-pin, .leaflet-marker-icon:focus-visible .tf-pin, .tf-pin-icon.is-hot .tf-pin{transform:scale(1.45); box-shadow:0 0 0 5px rgba(62,102,144,.35), 0 2px 6px rgba(11,42,71,.4);}
/* Route lines (zoomed in): the trail's own line in the brand colour on a white casing; closed = hollow (ink casing, white core). */
.tf-line-casing{stroke:var(--white); stroke-opacity:.95; transition:stroke-width .15s ease;}
.tf-line{stroke:var(--accent); stroke-opacity:1;}
.tf-line-casing.tf-line--closed{stroke:var(--ink);}
.tf-line.tf-line--closed{stroke:var(--white); stroke-dasharray:6 5;}
.tf-line-casing.is-hot{stroke-width:11px;}
.tf-line.is-hot{stroke:var(--ink); stroke-width:6px;}
.tf-line.tf-line--closed.is-hot{stroke:var(--white);}
.tf-cluster{background:none; border:0;}
.tf-cluster span{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--paper); border:2px solid var(--white); box-shadow:0 2px 6px rgba(11,42,71,.4); font:600 12px 'Inter', sans-serif; transition:transform .15s ease, background-color .15s ease;}
.tf-cluster.is-hot span{background:var(--accent); transform:scale(1.15);}
.map-pop .tag-closed{display:inline-block; margin-top:6px; font-size:11px; padding:1px 9px; border-radius:100px; background:var(--ink); color:var(--white); font-weight:600;}

/* ---------- Filters sheet (phones) / dialog (desktop) ---------- */
.tfx-panel{position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-end; justify-content:center; background:rgba(11,42,71,.38); opacity:0; transition:opacity .2s ease;}
.tfx-panel.is-open{opacity:1;}
.tfx-panel-card{display:flex; flex-direction:column; width:100%; max-height:88vh; max-height:88dvh; background:var(--paper); border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(11,42,71,.2); transform:translateY(30px); transition:transform .25s cubic-bezier(.2,.8,.2,1);}
.tfx-panel.is-open .tfx-panel-card{transform:none;}
.tfx-panel-head{display:flex; align-items:center; justify-content:space-between; padding:14px 12px 8px 20px; border-bottom:1px solid var(--line);}
.tfx-panel-head h2{font-size:22px; margin:0;}
.tfx-x{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:50%; background:none; color:var(--ink); cursor:pointer;}
.tfx-x:hover{background:var(--accent-soft);}
.tfx-x svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.tfx-panel-body{display:grid; gap:20px; padding:16px 20px 20px; overflow-y:auto; overscroll-behavior:contain;}
.tf-group{border:0; margin:0; padding:0; min-width:0;}
.tf-group legend{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-softer); font-weight:600; margin-bottom:10px; padding:0;}
.tf-chips{display:flex; flex-wrap:wrap; gap:8px;}
.tfx-panel .filter-chip{min-height:44px; padding:10px 16px; font-size:14px;}
.filter-chip.tf-zero{opacity:.5;}
.tf-hint, .tf-geo{font-size:12.5px; color:var(--text-softer); margin:8px 0 0;}
.tf-geo[hidden], .tf-hint[hidden]{display:none;}
.tfx-panel-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--white); border-radius:0;}
.tfx-show{min-height:50px; padding:0 28px; border:0; font-size:15px; font-weight:600; cursor:pointer;}
.tfx-show:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
@media (min-width:900px){
  .tfx-panel{align-items:center;}
  .tfx-panel-card{width:min(600px, 92vw); max-height:82vh; border-radius:18px; overflow:hidden; transform:translateY(12px) scale(.98);}
}

/* ---------- App layout: phones (map full screen, draggable sheet of cards) ---------- */
.tfx--app{max-width:none; margin:0; padding:0; position:relative; height:calc(100vh - var(--tfx-nav, 65px)); height:calc(100svh - var(--tfx-nav, 65px)); overflow:hidden;}
.tfx--app .tfx-top{position:absolute; top:0; left:0; right:0; z-index:3; padding:10px 12px; background:var(--paper); border-bottom:1px solid var(--line);}
.tfx--app .tfx-top h1{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.tfx--app .tfx-map{position:absolute; z-index:0; top:var(--tfx-top-h, 67px); left:0; right:0; bottom:0;}
.tfx--app .tfx-pane{position:absolute; top:0; left:0; right:0; z-index:2; height:calc(100% - var(--tfx-top-h, 67px)); display:flex; flex-direction:column;
  background:var(--paper); border-radius:18px 18px 0 0; box-shadow:0 -6px 24px rgba(11,42,71,.16);
  transform:translateY(var(--tfx-y, calc(var(--tfx-top-h, 67px) + (100vh - var(--tfx-nav, 65px) - var(--tfx-top-h, 67px)) * .45))); transform:translateY(var(--tfx-y, calc(var(--tfx-top-h, 67px) + (100svh - var(--tfx-nav, 65px) - var(--tfx-top-h, 67px)) * .45))); transition:transform .28s cubic-bezier(.2,.8,.2,1); will-change:transform;}
.tfx--app .tfx-pane.is-dragging{transition:none;}
.tfx--app .tfx-grip{touch-action:none; cursor:grab; padding:0 16px;}
.tfx--app .tfx-handle{display:block; width:100%; height:44px; margin-bottom:-8px; padding:0; border:0; background:none; cursor:grab;}
.tfx--app .tfx-handle span{display:block; width:42px; height:5px; margin:11px auto 0; border-radius:3px; background:rgba(11,42,71,.28);}
.tfx--app .tfx-meta{margin:0; padding:0 0 6px; min-height:44px;}
.tfx--app .tfx-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; padding:2px 16px 16px;}
.tfx--app .tf-collections ul{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:4px; margin:-4px;}
.tfx--app .tf-collections ul::-webkit-scrollbar{display:none;}
.tfx--app .tf-grid{grid-template-columns:minmax(0,1fr); gap:10px;}

/* ---------- App layout: desktop (list left, map right) ---------- */
@media (min-width:900px){
  .tfx--app{display:grid; grid-template-columns:minmax(400px, 36%) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); grid-template-areas:"top map" "pane map"; height:calc(100vh - var(--tfx-nav, 73px));}
  .tfx--app .tfx-top{grid-area:top; position:static; padding:18px 24px 6px; border-bottom:0; border-right:1px solid var(--line);}
  .tfx--app .tfx-top h1{position:static; width:auto; height:auto; overflow:visible; clip:auto; font-size:28px; margin:0 0 12px;}
  .tfx--app .tfx-pane{grid-area:pane; position:static; height:auto; min-height:0; transform:none; transition:none; border-radius:0; box-shadow:none; border-right:1px solid var(--line);}
  .tfx--app .tfx-grip{padding:0 24px; cursor:auto; touch-action:auto;}
  .tfx--app .tfx-handle{display:none;}
  .tfx--app .tfx-scroll{padding:2px 24px 24px;}
  .tfx--app .tfx-map{grid-area:map; position:relative; top:auto;}
}
@media (min-width:1500px){ .tfx--app .tf-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .tfx--app{grid-template-columns:minmax(400px, 46%) minmax(0,1fr);} }

/* ---------- No jumps while the script starts (5 Nov 2026) ----------
   With JavaScript the explorer class is set before first paint, so the search bar's space and the map's skeleton show
   from the start instead of popping in when /trails/index.json arrives. */
.tfx--app .tfx-bar[hidden]{display:flex; visibility:hidden;}
.tfx--app .tfx-map[hidden]{display:block;}

/* Until Inter arrives, text on these pages uses Arial scaled to Inter's width, so lines don't rewrap (and push the
   list down) when the web font swaps in. */
@font-face{font-family:'Inter Fallback'; src:local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'); size-adjust:107%; ascent-override:90%; descent-override:22.5%; line-gap-override:0%;}
.tfx, .mt-page{font-family:'Inter', 'Inter Fallback', sans-serif;}
.tfx button, .tfx input, .mt-page button{font-family:'Inter', 'Inter Fallback', sans-serif;}

/* ---------- Shared pieces: kicker, intro, empty states, touch targets ---------- */
.tfx-kicker{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-softer); margin:0 0 6px;}
.tfx-kicker a{color:inherit; text-decoration:underline; text-underline-offset:3px;}
.tfx-intro{font-size:14.5px; line-height:1.55; color:var(--text-soft); margin:0 0 14px; max-width:62ch;}
.tf-empty{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; color:var(--text-soft); padding:40px 16px; font-size:14.5px;}
.tf-empty p{margin:0; max-width:44ch;}
.tf-empty .btn, .mt-page .btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border:1px solid var(--ink); font:500 13.5px 'Inter', sans-serif; text-decoration:none; cursor:pointer;}
.tf-empty .btn.outline{border-color:var(--line); background:var(--white);}
.tf-empty .btn.outline:hover{border-color:var(--ink);}
.tf-empty .btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.tf-clear, .tfx-chip, .tf-collections a, .tf-hide-closed{min-height:44px;}
.tfx .leaflet-bar a, .tfx .leaflet-touch .leaflet-bar a, .tfx .leaflet-control-zoom.leaflet-bar a{width:44px; height:44px; line-height:44px; font-size:20px;} /* beats Leaflet's 30px touch size, loaded later */
.tfx .leaflet-control-attribution{font-size:11px;}

/* ---------- Trail collections (/trails/collections/<slug>/): the finder's explorer with a compact header ---------- */
.tc-h{font-size:20px; margin:24px 0 12px;}
.tc-h[hidden]{display:none;}
.tc-foot{margin-top:20px;}
.tc-foot a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.tfx--coll{--tfx-top-h:64px;}
.tfx--app.tfx--coll .tfx-top{height:64px; padding:8px 16px 10px;}
.tfx--app.tfx--coll .tfx-top h1{position:static; width:auto; height:auto; clip:auto; font-size:21px; line-height:1.25; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tfx--app.tfx--coll .tfx-kicker{font-size:11px; margin:0 0 1px;}
@media (min-width:900px){
  .tfx--app.tfx--coll .tfx-top{height:auto; padding:18px 24px 8px;}
  .tfx--app.tfx--coll .tfx-top h1{font-size:28px; white-space:normal; margin:0 0 4px;}
  .tfx--app.tfx--coll .tfx-kicker{font-size:12px; margin:0 0 6px;}
}

/* ---------- My trails (/offline/) ---------- */
.mt-page{padding-top:28px; padding-bottom:56px;}
.mt-head{margin:0 0 18px;}
/* With JavaScript the tabs hold their place from the first paint and the page keeps a screen's height while the lists fill. */
.mt--js{min-height:calc(100vh - 80px);}
.mt--js [data-mt-nojs]{display:none;}
.mt--js .mt-tabs[hidden]{display:flex;}
.mt-head h1{font-size:40px; line-height:1.15; margin:0 0 6px;}
.mt-head .tfx-intro{margin:0;}
.mt-page [data-mt-nojs] a, .mt-page .tf-empty a:not(.btn){color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.mt-tabs [role="tab"]{display:inline-flex; align-items:center; gap:8px;}
.mt-tabs .mt-ico{width:19px; height:19px;}
.mt-tabs [role="tab"][aria-selected="true"] .mt-ico{color:var(--ink);}
.mt-tabs [role="tab"]:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px 6px 0 0;}
.mt-n{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:var(--accent-soft); color:var(--ink); font-size:12px; font-weight:600;}
.mt-n[hidden]{display:none;}
[aria-selected="true"] > .mt-n{background:var(--ink); color:var(--white);}
.mt-storage{margin:0 0 12px;}
/* Share list (Want to go, Done) and a shared list opened from a link */
.mt-panel-tools{display:flex; justify-content:flex-end; margin:0 0 10px;}
.mt-panel-tools[hidden], .mt-shared[hidden]{display:none;}
.mt-share-list{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:100px; background:var(--white); color:var(--ink); font:500 14px 'Inter', sans-serif; cursor:pointer;}
.mt-share-list .mt-ico{width:19px; height:19px;}
.mt-share-list:hover{border-color:var(--ink);}
.mt-share-list:focus-visible, .mt-shared-x:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.mt-shared{margin:0 0 28px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--accent-soft);}
.mt-shared-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px;}
.mt-shared-head h2{display:flex; align-items:center; gap:10px; margin:0; font-size:22px;}
.mt-shared-head .mt-n{background:var(--white); font-family:"Inter", sans-serif;}
.mt-shared-x{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:50%; background:none; color:var(--ink); cursor:pointer;}
.mt-shared-x svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.mt-shared-x:hover{background:rgba(11,42,71,.08);}
.mt-shared [data-mt-import]{display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;}
.mt-shared [data-mt-import] .mt-ico{width:19px; height:19px;}
.mt-shared [data-mt-import][disabled]{opacity:1; cursor:default;}
.mt-shared [data-mt-import][disabled] .mt-ico{fill:currentColor;}
.mt-storage[hidden], .mt-swipe-hint[hidden]{display:none;}
.mt-swipe-hint{margin:12px 0 0; text-align:center;}
.mt-page .tf-item.has-mt .tf-card{padding-right:100px;}
/* Swipe to remove: the card slides left over a "Remove" strip. */
.mt-panel .tf-grid{overflow-x:clip; overflow-clip-margin:6px;}
.mt-panel .tf-item{touch-action:pan-y; transition:transform .2s ease, opacity .2s ease;}
.mt-panel .tf-item.is-swiping::after, .mt-panel .tf-item.is-gone::after{content:"Remove"; position:absolute; top:0; bottom:0; left:calc(100% + 10px); width:100vw; display:flex; align-items:center; padding-left:18px; border-radius:12px; background:var(--ink); color:var(--white); font-size:14px; font-weight:600; pointer-events:none;}
.mt-panel .tf-item.is-swiping{transition:none;}
.mt-panel .tf-item.is-gone{opacity:0;}
/* Undo toast: always in the page (so screen readers hear it), off screen until something is removed. */
.mt-toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:60; display:flex; align-items:center; gap:14px; width:max-content; max-width:calc(100vw - 32px); padding:6px 6px 6px 18px; border-radius:12px; background:var(--ink); color:var(--white); font-size:14px; box-shadow:0 10px 30px rgba(11,42,71,.3);
  transform:translate(-50%, calc(100% + 40px)); visibility:hidden; transition:transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s;}
.mt-toast.is-on{transform:translate(-50%, 0); visibility:visible; transition:transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s;}
.mt-undo{flex:none; min-height:44px; min-width:64px; padding:0 14px; border:0; border-radius:8px; background:none; color:var(--white); font:600 14px 'Inter', sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.mt-undo:hover{background:rgba(255,255,255,.12);}
.mt-undo:focus-visible{outline:2px solid var(--white); outline-offset:-2px;}
.mt-undo[hidden]{display:none;}

@media (prefers-reduced-motion: reduce){
  .tf-card, .tfx-pane, .tfx-panel, .tfx-panel-card, .tfx-skel, .tfx-area, .tf-pin, .tf-cluster span, .tf-line-casing, .tf-collections a, .tf-recent a, .tfx-filters-btn, .mt-panel .tf-item, .mt-toast{transition:none !important; animation:none !important;}
}
/* My trails at phone width: heart over tick, so the card keeps its width; tabs share the width, icon over label. */
@media (max-width:620px){
  .mt-page.wrap{padding-left:16px; padding-right:16px; padding-top:20px;}
  .mt-head h1{font-size:32px;}
  .mt-page .tf-item .mt-btns{flex-direction:column;}
  .mt-page .tf-item.has-mt .tf-card{padding-right:56px;}
  .mt-tabs [role="tab"]{flex:1 1 0; flex-direction:column; gap:2px; min-height:56px; padding:8px 2px 6px; font-size:12.5px; position:relative;}
  .mt-tabs .mt-n{position:absolute; top:4px; left:calc(50% + 8px); min-width:18px; height:18px; padding:0 5px; font-size:11px;}
}

/* Hide closed chip and the map's locate button (5 Nov 2026) */
.tf-hide-closed{min-height:44px; padding:6px 14px;}
.tf-hide-closed[hidden]{display:none;}
.tf-hide-closed:focus-visible, .tfx-locate button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.tfx-locate button{display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:4px; background:var(--white); color:var(--ink); cursor:pointer;}
.tfx-locate button[aria-pressed="true"]{color:var(--accent);}
.tf-me-icon{background:none; border:0;}
.tfx-me-msg{inset:10px 10px auto 62px; z-index:900;}
.tfx-me-msg[hidden]{display:none;}