/* The Matrix code on a new session's own background (medallion-rain.js): the sheet holds the canvas behind everything in it, header and tabs too, with no
   ground of its own, and shows it only while the start screen (the welcome) of the New tab is up. The header's own ground goes clear then, so the code
   shows behind its words. */
.detail { isolation: isolate; }
.detail > .mine-rain { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.welcoming .work-welcome:not([hidden])) > .mine-rain { display: block; }
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.welcoming .work-welcome:not([hidden])) .sheet-head { background: transparent; }
.work-welcome > .work-hero { position: relative; }
/* The box of a new session lets the code show through, a little: its own colour at about half, over a soft blur so its words stay clear. */
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.welcoming .work-welcome:not([hidden])) .work-bubble {
  background: color-mix(in srgb, var(--panel-2) 52%, transparent);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}

/* The start screen's choices (project, model, mode, thinking) are one glass strip just over the box, not four pots wrapping on their own
   lines (Chris, 25 Oct): equal parts, hairlines between, words centred and cut with an ellipsis rather than wrapped. */
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.welcoming .work-welcome:not([hidden])) .work-form .work-opts {
  display: flex; flex-wrap: nowrap; justify-content: stretch; gap: 0; width: 100%; padding: 2px; border-radius: 999px;
  /* Clear glass, as the bar over every session's box (work-glass-bar.css): a whisper of white, a bright rim, no cream. */
  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:has(.panel-pane.pane-work:not([hidden]) .work-scroll.welcoming .work-welcome:not([hidden])) .work-form .work-opts .work-chip {
  flex: 1 1 0; min-width: 0; position: relative;
}
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.welcoming .work-welcome:not([hidden])) .work-form .work-opts .work-chip + .work-chip::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line);
}
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.welcoming .work-welcome:not([hidden])) .work-form .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:has(.panel-pane.pane-work:not([hidden]) .work-scroll.welcoming .work-welcome:not([hidden])) .work-form .work-opts .work-chip select:focus-visible {
  outline: 1px solid var(--pot-gold); outline-offset: -2px;
}
/* The carry-over tick, when it shows, keeps its own line rather than squeezing the strip. */
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.welcoming .work-welcome:not([hidden])) .work-form .work-opts { flex-wrap: wrap; border-radius: 22px; }
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.welcoming .work-welcome:not([hidden])) .work-form .work-opts .work-carry { flex: 1 0 100%; justify-content: center; border: 0; background: none; }

/* A session just started keeps the code until it really works, then the code lets go (work.js cover): .starting holds it, .unveiling fades it. */
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.starting) > .mine-rain { display: block; }
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.starting) .sheet-head { background: transparent; }
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.unveiling) > .mine-rain { display: block; animation: rain-unveil 0.9s ease-out forwards; }
.detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.unveiling) .sheet-head { transition: background-color 0.9s ease-out; }
@keyframes rain-unveil { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .detail:has(.panel-pane.pane-work:not([hidden]) .work-scroll.unveiling) > .mine-rain { animation-duration: 0.01s; }
}

/* Touch and hold on the start screen selects nothing (Chris, 26 Oct): the greeting is a picture of words, not text to copy. */
.work-welcome .work-hero, .work-welcome .work-hero * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }