/* A fork of a session (web/src/components/fork/ForkPop.tsx): a small window grown out of the
   button or the card it was asked from, on the board's thick material. */
.fork-pop {
  position: fixed;
  z-index: 76;
  width: min(380px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow: auto;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: var(--material-thick);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--shadow-lift), inset 0 0.5px 0 var(--edge);
  font-size: 13px;
  outline: none;
  opacity: 0;
  will-change: transform, opacity;
}
.fork-pop[hidden] { display: none; }
.fork-head { display: flex; align-items: flex-start; gap: 10px; }
.fork-glyph { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); }
.fork-glyph svg { width: 17px; height: 17px; }
.fork-titles { min-width: 0; }
.fork-titles h3 { margin: 0; font: 600 15px/1.25 var(--font-display); letter-spacing: -0.012em; overflow-wrap: anywhere; }
.fork-titles p { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: var(--label-2); }
.fork-where { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 8px 0 0 38px; font-size: 11.5px; color: var(--label-3); }
.fork-where > span { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fork-lane::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--lane, var(--gray)); vertical-align: 0.5px; }
.fork-folder { font-family: var(--mono); }
.fork-group { margin-top: 10px; }
.fork-note { align-items: flex-start; }
.fork-note .row-label { padding-top: 1px; }
.fork-note textarea { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; resize: none; background: none; color: inherit; font: inherit; font-size: 13.5px; line-height: 1.4; }
.fork-note textarea::placeholder { color: var(--label-3); }
.fork-group .row.bad .row-label { color: var(--red); }
.fork-error { margin: 8px 2px 0; font-size: 12px; line-height: 1.35; color: var(--red); overflow-wrap: anywhere; }
.fork-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.fork-stays { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--label-3); }
.fork-foot .button:active { transform: scale(0.97); }
.fork-foot .button:disabled { opacity: 0.55; }

@media (prefers-reduced-transparency: reduce) {
  .fork-pop { background: var(--panel-float); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .fork-pop { background: var(--panel-float); box-shadow: 0 0 0 1px var(--label-2), var(--shadow-lift); }
}