/* Sprints: the picker (Pipeline toolbar, Backlog command bar), the Planning panel beside
   the Backlog's Stories level, the sprint dialogs and the small "S3" chip. Polpo tokens and the
   Pipeline's own dropdown (.polpo-prio-ctl) only; no chrome of its own. */
.polpo-sprint-host { display: inline-flex; align-items: center; }
.polpo-sprint-ctl * { box-sizing: border-box; }
.polpo-sprint-ctl .polpo-prio-trigger { display: inline-flex; align-items: center; gap: 7px; max-width: 340px; letter-spacing: normal; line-height: 1.15; }
.polpo-sprint-ctl .polpo-prio-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polpo-sprint-ctl .polpo-prio-trigger[aria-expanded="true"] { background: var(--btn); }
.polpo-sprint-ctl.active .polpo-prio-trigger { color: var(--text); }
.polpo-sprint-ctl .polpo-prio-trigger { transition: transform var(--dur-press, 110ms) var(--spring, ease-out); }
.polpo-sprint-ctl .polpo-prio-trigger:active { transform: scale(.98); }
.polpo-sprint-ctl .polpo-prio-trigger > span { font-variant-numeric: tabular-nums; }
.polpo-sprint-prefix.is-redundant { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.polpo-sprint-icon { width: 14px; height: 14px; flex: none; color: var(--brand-text); }
.polpo-sprint-ctl .polpo-prio-menu { min-width: 280px; max-width: 360px; max-height: min(440px, 64vh); overflow-y: auto; }
.polpo-sprint-ctl button.polpo-prio-item { width: 100%; border: 0; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: normal; line-height: 1.15; text-align: left; cursor: pointer; }
.polpo-sprint-ctl button.polpo-prio-item:not(.active):not(:hover) { background: none; }
.polpo-sprint-ctl button.polpo-prio-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.polpo-sprint-ctl .ado-dd-label { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polpo-sprint-meta { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.polpo-prio-item.active .polpo-sprint-meta { color: inherit; opacity: .75; }
.polpo-sprint-ctl .ado-check { width: 14px; height: 14px; flex: none; margin-left: auto; visibility: hidden; color: var(--brand-text); }
.polpo-sprint-ctl .polpo-prio-item.active .ado-check { visibility: visible; }
.polpo-sprint-action { color: var(--text-2); }
.polpo-sprint-action-icon { width: 16px; height: 16px; flex: none; color: var(--brand-text); }
.polpo-sprint-badge { flex: none; height: 18px; padding: 0 7px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; line-height: 18px; color: var(--brand-text); background: var(--brand-soft); }
.polpo-sprint-badge.is-past { color: var(--text-3); background: var(--surface-2); }
.polpo-sprint-ctl .ado-menu-sep, .ado-plan .ado-menu-sep { height: 1px; margin: 4px 2px; background: var(--border); }
/* closed sprints: history, still choosable, under "Afgesloten" */
.polpo-sprint-group { display: flex; flex-direction: column; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.polpo-sprint-grouphead { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.polpo-sprint-group .polpo-prio-item:not(.active) .ado-dd-label { color: var(--text-2); }
/* "Afgesloten (n) ›": a button-as-heading so a long history folds away by default (A3) */
button.polpo-sprint-grouphead.polpo-sprint-collapse {
  display: flex; align-items: center; gap: 4px; width: 100%; height: auto; border: 0; border-radius: 6px;
  background: none; font: inherit; font-size: 11px; font-weight: 600; color: var(--text-3); text-align: left; cursor: pointer;
}
button.polpo-sprint-grouphead.polpo-sprint-collapse:hover { background: var(--surface-2); color: var(--text-2); }
.polpo-sprint-collapse-chevron { width: 13px; height: 13px; margin-left: auto; transform: rotate(90deg); transition: transform var(--dur-fast, 140ms) var(--spring, ease-out); }
.polpo-sprint-collapse[aria-expanded="true"] .polpo-sprint-collapse-chevron { transform: rotate(-90deg); }
.polpo-sprint-closed-list { display: flex; flex-direction: column; }
.polpo-sprint-closed-list[hidden] { display: none; } /* an author `display` rule otherwise beats the UA [hidden] default */

/* "S3": which sprint a card is in, only under "Alle werk" */
.polpo-sprint-chip { display: inline-block; height: 16px; margin-right: 6px; padding: 0 5px; border-radius: 5px; font-size: 10.5px; font-weight: 600; line-height: 16px; vertical-align: 1px; color: var(--text-2); background: color-mix(in srgb, var(--text) 6%, transparent); font-variant-numeric: tabular-nums; }
.ado-c-title .polpo-sprint-chip, .ado-card-head .polpo-sprint-chip { flex: none; margin: 0 0 0 6px; }
.ado-card-head .polpo-sprint-chip { margin-top: 2px; }

/* Planning panel: the Backlog grid on the left, the sprints to plan into on the right */
.ado-plan-layout.has-plan { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.ado-plan { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; max-height: calc(100dvh - var(--polpo-roadmap-chrome, 48px) - 170px); overflow-y: auto; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.ado-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.ado-plan h3 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
#polpo-view-panel .ado-page .ado-plan-new { height: 28px; padding: 0 8px 0 6px; font-size: 12px; }
.ado-plan-help, .ado-plan-empty { margin: 0 0 4px; font-size: 12px; line-height: 17px; color: var(--text-3); }
.ado-plan-help strong { font-weight: 600; color: var(--text-2); }
/* open work in a closed sprint: a small warn line, not an alarm */
.ado-plan-warn { margin: 0; padding: 6px 10px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; line-height: 17px; color: var(--warn-ink); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); font-variant-numeric: tabular-nums; }
/* "Sprint" in a new-work-item dialog: only for stories and bugs */
.polpo-rel-create [data-sprint-field][hidden] { display: none; }
.ado-plan-zone { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); transition: background var(--dur-fast), border-color var(--dur-fast); }
.ado-plan-zone.is-current { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.ado-plan-zone:hover { box-shadow: 0 1px 2px rgba(var(--shadow-ink), .05), 0 4px 10px -4px rgba(var(--shadow-ink), .08); }
.ado-plan-zone.is-chosen { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.ado-plan-zone.is-backlog { border-style: dashed; }
.ado-plan-zone.is-target { border-style: dashed; border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.ado-plan-zone.is-over { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border-color: var(--brand); }
.ado-plan-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
#polpo-view-panel .ado-page .ado-plan-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; }
#polpo-view-panel .ado-page .ado-plan-name:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; background: none; }
.ado-plan-name:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.ado-plan-dates { font-size: 12px; line-height: 16px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ado-plan-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; line-height: 16px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ado-plan-bar { display: block; flex: none; height: 3px; margin-top: 4px; }
.ado-row[draggable="true"] { cursor: grab; }
.ado-row.is-dragging { opacity: .5; }

/* dialogs: the roadmap workspace form; text and date fields share one 40px height (polpo-design .inp) */
.polpo-tl-dialog.polpo-sprint-dialog input:is([type="text"], [type="date"], :not([type])) { height: 40px; padding-block: 0; }
.polpo-sprint-dialog .polpo-sprint-summary { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.polpo-sprint-choice { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.polpo-sprint-choice legend { margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
.polpo-tl-dialog.polpo-sprint-dialog .polpo-sprint-choice label { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13px; font-weight: 550; color: var(--text); cursor: pointer; }
.polpo-tl-dialog.polpo-sprint-dialog .polpo-sprint-choice label:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.polpo-sprint-choice label span { margin-left: auto; color: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
/* A drawn radio (appearance: none): Chrome paints a native radio square for outline and border-radius,
   which made its focus ring a heavy square. Drawn, the control is round and so is its ring. */
.polpo-tl-dialog.polpo-sprint-dialog .polpo-sprint-choice input[type="radio"] { appearance: none; flex: none; width: 16px; height: 16px; min-width: 16px; margin: 0; padding: 0;
  border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.polpo-tl-dialog.polpo-sprint-dialog .polpo-sprint-choice input[type="radio"]:checked { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 0 3.5px, var(--surface) 4px); }
/* The Polpo ring: 2px brand, round. !important on the shadow because the shared dialog rule in roadmap.css
   reaches every focused input through :is(#polpo-view-panel, ...), an id no class selector here can beat. */
.polpo-tl-dialog.polpo-sprint-dialog .polpo-sprint-choice input[type="radio"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none !important; }

/* Three fields need no side panel: a centred modal of 440px (the workspace shell is a 720px drawer);
   on a phone it spans the full width as a bottom sheet. */
.polpo-tl-workspace.polpo-sprint-dialog { width: min(440px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px); margin: auto; border-radius: var(--r-lg); }
.polpo-tl-workspace.polpo-sprint-dialog .polpo-tl-workspace-frame { height: auto; max-height: calc(100dvh - 32px); }
.polpo-sprint-dialog .polpo-tl-workspace-header { padding: 24px 24px 16px; }
.polpo-sprint-dialog .polpo-tl-workspace-body { gap: 16px; padding: 20px 24px; }
.polpo-tl-workspace.polpo-sprint-dialog .polpo-tl-form-actions { padding: 16px 24px; }
@media (max-width: 760px) {
  .polpo-tl-workspace.polpo-sprint-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .polpo-sprint-dialog .polpo-tl-workspace-header { padding: 20px 16px 14px; }
  .polpo-sprint-dialog .polpo-tl-workspace-body { padding: 16px; }
  .polpo-tl-workspace.polpo-sprint-dialog .polpo-tl-form-actions { padding: 14px 16px; }
}

@media (max-width: 1100px) {
  .ado-plan-layout.has-plan { grid-template-columns: minmax(0, 1fr); }
  .ado-plan { position: static; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ado-plan-zone, .polpo-tl-dialog.polpo-sprint-dialog .polpo-sprint-choice input[type="radio"] { transition: none; }
  .polpo-sprint-ctl.open .polpo-prio-menu { animation: none; }
  .polpo-sprint-ctl .polpo-prio-trigger { transition: none; }
  .polpo-sprint-ctl .polpo-prio-trigger:active { transform: none; }
}

/* "Openstaand werk uit oude sprints toevoegen…" (sprint.js pullDialog): one checkbox row per group, its
   counts at the right end */
.polpo-tl-dialog.polpo-sprint-dialog .polpo-pull-choice label { align-items: center; }
.polpo-pull-choice .polpo-pull-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; color: var(--text); font-weight: 550; }
.polpo-pull-choice .polpo-pull-text small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.polpo-tl-dialog.polpo-sprint-dialog .polpo-pull-choice label:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.polpo-tl-dialog.polpo-sprint-dialog .polpo-pull-choice label[data-empty] { opacity: .6; cursor: default; }
.polpo-pull-choice input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.polpo-pull-choice .polpo-pull-count { flex: none; white-space: nowrap; }