/* The hide-the-bars icon is not in the header: a long press on the full-screen button brings it out on the left, and a slide onto it with a
   release does it (bars.js). It is a child of the dialog, so fill.css's rule hiding the header's other children never reaches it. */
#detail-bars { display: none; position: fixed; z-index: 60; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 999px; color: var(--text);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.55); background: color-mix(in srgb, var(--panel) 58%, transparent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  touch-action: none; transform: translateX(14px) scale(0.8); opacity: 0; transition: transform 0.16s ease-out, opacity 0.16s ease-out, background-color 0.12s; }
#detail-bars svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#detail-bars.pop:not([hidden]) { display: inline-grid; transform: none; opacity: 1; }
#detail-bars.pop.hot, #detail-bars[aria-pressed="true"].pop { color: var(--gold); }
#detail-bars.pop.hot { background: rgba(212, 130, 74, 0.34); transform: scale(1.12); }
#detail-full.holding { touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
html .detail.fill #detail-full {
  width: 44px; height: 44px; top: max(6px, env(safe-area-inset-top)); right: 6px; opacity: 1; color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); background: color-mix(in srgb, var(--panel) 58%, transparent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
html .detail.fill #detail-full svg { width: 22px; height: 22px; }
html .detail.fill #detail-full:active { background: rgba(212, 130, 74, 0.34); }
html .detail.fill .work-sum, html .detail.fill .work-sum-handle, html .detail.fill .work-strip { margin-right: 54px; }
html .detail.tabbed.fill .work-strip, html .detail.tabbed.fill .work-strip.pinned { margin-right: -8px; }

/* Over the Yacht, the header's full-screen button is the same glass, dark. */
html.yacht3d body.in-room .yacht-full {
  min-height: 40px; border-radius: 999px; color: rgba(239, 227, 205, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(20, 18, 16, 0.42); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
html.yacht3d body.in-room .yacht-full:hover, html.yacht3d body.in-room .yacht-full:focus-visible { color: var(--pot-papyrus, #efe3cd); }

/* The Desk and Yacht pill is centred by margins, not by left: 50% and a transform, so a page nudged sideways by a swipe cannot make it jump. */
@media (max-width: 999px) {
  .tabs { left: 0; right: 0; margin-inline: auto; transform: none; width: max-content; max-width: calc(100vw - 24px); }
}

#detail-full { touch-action: pan-y; } /* a leftward slide from the button stays ours; up and down still scroll */
/* Never give the root a background in full screen (html:fullscreen). The root then stands in the top layer above the open session window, and its
   background was painted over the session at each redraw: the screen went black going into full screen and each time the keyboard came or went
   (Chris, 26 Oct; seen on an Android emulator, where it never cleared). */
/* The full-screen root's ::backdrop is another thing: it sits under the page, and its default is black. That black showed as a strip between the app and the
   keyboard, and as a blackout when a popup or the keyboard changed the page's height for a frame (Chris, 31 Oct). It is the page colour, and the session's own
   colour while a full-screen session is open. */
html:fullscreen::backdrop, html:-webkit-full-screen::backdrop { background: var(--bg); }
html:has(#detail.fill[open]):fullscreen::backdrop, html:has(#detail.fill[open]):-webkit-full-screen::backdrop { background: var(--panel); }