/* The choices over a box (project, model, mode, thinking) are one clear-glass strip wherever they stand (Chris, 25 Oct: the start screen's strip
   is the one he likes, and the More bar, the continue form and the box after a finished work had separate pots). Equal parts, hairlines between,
   words centred and cut with an ellipsis. The start screen's own rules (medallion-rain.css) say the same; these hold the rest. */
.detail .work-opts {
  display: flex; flex-wrap: wrap; justify-content: stretch; gap: 0; width: 100%; padding: 2px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.4); backdrop-filter: blur(1.5px) saturate(1.4);
}
.detail .work-opts .work-chip { flex: 1 1 0; min-width: 0; position: relative; }
.detail .work-opts .work-chip:not([hidden]) ~ .work-chip:not([hidden])::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line);
}
.detail .work-opts .work-chip select {
  width: 100%; min-width: 0; min-height: 32px; padding: 2px 16px 2px 6px; border: 0; border-radius: 999px; box-shadow: none;
  background-color: transparent; background-image: var(--pot-chevron); background-repeat: no-repeat;
  background-position: calc(100% - 9px) 52%, calc(100% - 5px) 52%; background-size: 4px 4px, 4px 4px;
  font-size: 12.5px; text-align: center; text-align-last: center; text-overflow: ellipsis; color: var(--text);
}
.detail .work-opts .work-chip select:focus-visible { outline: 1px solid var(--pot-gold); outline-offset: -2px; }
.detail .work-opts .work-carry { flex: 1 0 100%; justify-content: center; border: 0; background: none; }
/* In the running session's bar the strip takes a line of its own (it shows only behind More). */
.detail .work-bar > .work-opts { flex: 1 1 100%; }
.detail .work-bar > .work-opts[hidden], .work-bar:not(.show-more) > .work-opts.work-occasional { display: none; }