/* The buttons over the text box as clear glass (Chris, 25 Oct: "premium transparent"; the first try was yellow and foggy because it mixed the
   cream panel colour and a heavy white wash into the pane). Now nearly nothing is painted: a whisper of white, a bright rim that catches the light
   along the top edge, a faint cool shade along the bottom, and the thread shows straight through. Real blur on a mouse screen; a touch screen blurs
   nothing while a window is open (panel.css), so there the glass is the same few percent of white and no more. Loaded after fill.css, whose veil it replaces. */
.detail .work-bar .work-pill, .detail .work-bar .work-pill.go, .detail .work-bar .work-chip select, .detail .work-bar .work-status, .detail .work-bar .work-context {
  color: var(--text); border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  -webkit-backdrop-filter: blur(1.5px) saturate(1.4); backdrop-filter: blur(1.5px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.detail .work-bar .work-chip select {
  background-image: var(--pot-chevron);
  background-color: transparent;
}
.detail .work-bar .work-pill:hover, .detail .work-bar .work-chip select:hover { border-color: rgba(255, 255, 255, 0.7); }
/* The main action is told apart by a slightly brighter rim, not by colour (the gold edge read as yellow). */
.detail .work-bar .work-pill.go { border-color: rgba(255, 255, 255, 0.4); }
@media (pointer: coarse) {
  .detail .work-bar .work-pill, .detail .work-bar .work-pill.go, .detail .work-bar .work-chip select, .detail .work-bar .work-status, .detail .work-bar .work-context {
    background: transparent;
  }
  /* `background: transparent` above resets the chevron's size, and a chevron at full size fills the whole pill orange (Chris, 25 Oct, phone). */
  .detail .work-bar .work-chip select {
    background-image: var(--pot-chevron);
    background-color: transparent;
    background-repeat: no-repeat; background-size: 4px 4px, 4px 4px;
    background-position: calc(100% - 16px) 52%, calc(100% - 12px) 52%;
  }
}

/* The page behind an open window stays put (panel-lock.js moves nothing; this is the lock the browser itself honours). */
html:has(body.panel-open) { overflow: hidden; overscroll-behavior: none; }
body.panel-open { overscroll-behavior: none; }

/* The words on the glass keep a shade of the page colour just around the characters (Chris, 26 Oct: "unreadable when over a session's chat"),
   so the thread's own lines never run through them; the glass itself stays clear. */
.detail .work-bar .work-pill, .detail .work-bar .work-chip select, .detail .work-bar .work-status, .detail .work-bar .work-context,
.detail .work-opts .work-chip select, .detail .work-opts .work-carry {
  text-shadow: 0 0 2px var(--panel, #ffffff), 0 0 4px var(--panel, #ffffff), 0 0 7px var(--panel, #ffffff), 0 0 11px var(--panel, #ffffff);
}