/*
 * One feature (Kiln/UI/FeatureView.swift and PipelineBar.swift): its header, the stages from Describe to Live across
 * the top, a line on what's happening and what to do now, and who else is working on it.
 */
.feature-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.feature-head-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 320px; max-width: 820px; }
.feature-summary { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* The stages (PipelineBar): five nodes joined by lines that fill as the work goes on. */
.stages { list-style: none; display: flex; align-items: center; min-width: 0; }
.stages-item { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.stages-item:last-child { flex: 0 0 auto; }
.stage-node { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; flex: none; }
.stage-node--current { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.stage-dot {
  --tint: var(--ink-faint);
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--rule); color: var(--ink-faint);
}
.stage-dot svg { width: 13px; height: 13px; }
.stage-node--done .stage-dot { --tint: var(--pass); background: var(--pass); border-color: var(--pass); color: #FFFFFF; }
.stage-node--active .stage-dot { --tint: var(--info); }
.stage-node--yours .stage-dot { --tint: var(--wait); }
.stage-node--yours.stage-node--describe .stage-dot { --tint: var(--accent); }
.stage-node--active .stage-dot, .stage-node--yours .stage-dot { border: 1.8px solid var(--tint); background: color-mix(in srgb, var(--tint) 13%, transparent); color: var(--tint); }
.stage-name { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.stage-node--upcoming .stage-name { color: var(--ink-soft); }
.stage-node--current .stage-name { font-weight: 650; }
.stage-line { flex: 1 1 auto; min-width: 12px; height: 3px; margin: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.stage-line--done { background: var(--pass); }

@media (max-width: 899px) {
  .stage-node:not(.stage-node--current) .stage-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .stage-node:not(.stage-node--current) { padding-right: 4px; }
}

/* Someone else is working on this (the lock), with Take Over, which asks first. */
.presence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 28px; font-size: 14px; background: color-mix(in srgb, var(--info) 8%, transparent); border-top: 1px solid color-mix(in srgb, var(--info) 18%, transparent); }
.presence svg { width: 16px; height: 16px; color: var(--info); flex: none; }
.presence-text { flex: 1 1 240px; min-width: 0; }
.presence:empty { display: none; }
@media (max-width: 599px) {
  .presence { padding: 9px 16px; }
}

/* The feature page's panes under the board's tabs. */
.feature-pane { min-height: 100%; }