/* The one trail (js/trail.js): ‹ and the map glyph, the same solid pair on every inner page, and the trail sheet. */

/* gesture-following back (js/trail.js tlgWire): the destination sitting underneath a page as it's dragged away --
   the map's own last frame when there is one, a calm surface otherwise. #app has z-index:1 (app.css), so this
   plain fixed layer needs no z-index of its own to stay behind it. */
.tlg-floor{position:fixed;inset:0;background:var(--ground);pointer-events:none}
.tlg-floor-img{background-size:cover;background-position:center}

/* "Back to <last page>" (David, 2026-10-09): the pill offered on the map right after an explicit Close stashed a
   trail (js/trail.js tlRecentPill). position:absolute, not fixed -- .screen.hm has no positioned ancestor of its
   own, so this resolves against the initial containing block exactly like js/honey.js's own .cs-hl-pill, and
   sidesteps the containing-block trap a position:fixed child of an animating .screen can fall into (core.js
   show()'s own comment on that, by the corner buttons). Directly above the left (Rooms) corner, same offset the
   rooms-stem capsules use above it (css/menus2.css --corner-b/--corner), so neither ever overlaps the other. */
.tl-recent-pill{position:absolute;z-index:4;left:16px;bottom:calc(var(--corner-b) + var(--corner) + 12px);
  display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px - 64px);height:44px;padding:0 14px 0 10px;
  border-radius:999px;background:var(--surface-2);color:var(--ink);border:1px solid rgba(236,232,223,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.5);font:500 15px/1.2 var(--sans);text-align:left;
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .22s ease,transform .22s var(--spring,ease)}
.tl-recent-pill.in{opacity:1;transform:none}
.tl-recent-pill svg{flex:none;width:18px;height:18px;color:var(--soft)}
.tl-recent-pill .tl-th{width:26px;height:26px;border-radius:7px}
.tl-recent-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-recent-txt b{font-weight:600}
.tl-recent-pill:active{transform:scale(.97)}
@media (orientation:landscape){.tl-recent-pill{left:calc(16px + var(--left))}}
@media (prefers-reduced-motion:reduce){.tl-recent-pill{transition:opacity .16s ease}}

/* "Your last trail" in the long-press sheet: its own clearly separate section, under the live trail */
.tl-recent-h{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}

/* the floating ‹ over a full-bleed color hero is solid now, like every other control (DESIGN-SYSTEM §1.2) */
.cp-close{background:var(--surface-2);color:var(--ink);border:1px solid rgba(236,232,223,.14);border-radius:50%;width:40px;height:40px}
.cp-close svg{width:22px;height:22px}
/* The one top bar (PLAN §3.5): ‹ <previous page> ... ⋯ ... the place pill. The place pill is the old Close,
   renamed and relabeled for the place it closes to -- same solid pill, same spot, same tlExit() underneath. */
.tl-exit{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 15px 0 11px;border-radius:999px;background:var(--surface-2);color:var(--ink);border:1px solid rgba(236,232,223,.14);font:500 15px/1 var(--sans);letter-spacing:0;white-space:nowrap;transition:transform .2s var(--spring)}
.tl-exit:active{transform:scale(.94)}
.tl-exit svg{width:18px;height:18px}
.tl-exit-float{position:absolute;top:calc(var(--top) + 14px);right:20px;z-index:2}
.ar-hubband .tl-exit-float{right:var(--g)}
.rp-bar .tl-exit-bar{align-self:center;height:36px}
/* ⋯ (this page's own ⋯ sheet, js/places.js moreOpen): a solid 40px circle, the same level as the place pill */
.tl-more{flex:none;width:40px;height:40px;border-radius:50%;background:var(--surface-2);color:var(--ink);
  border:1px solid rgba(236,232,223,.14);display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s var(--spring)}
.tl-more:active{transform:scale(.9)}
.tl-more svg{width:20px;height:20px}
.tl-more-float{position:absolute;top:calc(var(--top) + 14px);right:72px;z-index:2}
.rp-bar .tl-more-bar{align-self:center;width:34px;height:34px}
/* the named ‹: a small label beside the chevron (PLAN §3.5, "‹ Periwinkle") -- turns the plain icon circle into
   a pill wherever there's room (tlDecorate only adds it there; a cramped header keeps the icon alone) */
[data-back]:has(.tl-back-label){width:auto;padding:0 14px 0 10px;border-radius:999px;display:inline-flex;
  align-items:center;gap:6px;justify-content:flex-start}
.tl-back-label{font:500 15px/1 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}

/* a header row: ‹ on the left; whatever the page puts on the right, then ⋯ and the place pill at the very end */
.tl-x{justify-content:flex-start;gap:8px}
.tl-x>:nth-child(2):not(.eyebrow){margin-left:auto}
.tl-x>.tl-more{margin-left:auto;margin-right:0}
.tl-x>.tl-exit{margin-left:0;margin-right:0}
.tl-x>.tl-more+.tl-exit,.tl-x>.tl-exit:nth-child(2){margin-left:0}
.tl-x>.eyebrow+.tl-more{margin-left:auto}
.nav-r .tl-exit,.nav-r .tl-more{margin-right:0}
/* a full-screen tool's header (the color explorer) keeps the new controls opposite ‹ */
.cx-top.tl-x>.tl-more{margin-left:auto}
.pr-top.tl-x>.tl-more{margin-left:auto;margin-right:0}

/* ---------- the trail sheet (long-press ‹) ---------- */
.tl-sheet .title-2{margin:0}
.tl-sheet .note{margin:4px 0 14px}
.tl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.tl-row{width:100%;display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 6px 8px 0;text-align:left;color:var(--ink);border-radius:var(--r-2,14px);transition:background var(--dur-1,.2s)}
.tl-row:active{background:var(--surface-2)}
.tl-row.here{cursor:default}
.tl-row.here .tl-th{box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--ink)}
.tl-row>svg{flex:none;color:var(--soft);width:16px;height:16px}
.tl-th{width:48px;height:48px;flex:none;border-radius:10px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center}
.tl-th img{width:100%;height:100%;object-fit:cover;display:block}
.tl-th-sw{display:flex}
.tl-th-sw i{flex:1;height:100%}
.tl-th-map{border-radius:50%;color:var(--ink)}
.tl-th-map svg{width:24px;height:24px}
.tl-th-room{border-radius:50%;background:none}
.tl-th-room .rm-art{width:48px;height:48px;box-shadow:none}
.tl-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tl-txt b{font:400 19px/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-txt em{font:italic 400 17px/1.3 var(--serif);color:var(--soft)}
.tl-foot{margin-top:4px}
.tl-list li+li .tl-foot{border-top:1px solid var(--rule);border-radius:0;padding-top:12px}
.tl-list li:has(.tl-foot)+li .tl-foot{border-top:0;padding-top:8px}