/* Backlog: Azure DevOps Boards content (level picker, tree grid with rollup) in the Polpo board's
   own form. Tasks live in their story's Pipeline card (hierarchy.css). Every control, card, header and count uses the Pipeline's
   tokens and components (polpo.css): ghost 32px controls (.polpo-prio-ctl), --r-sm/--r-md radii,
   --e1 cards with the 4px type band, the phase-dot column head with its .polpo-wip count, var(--font).
   Azure supplies the structure: 40px rows, 16px tree indent, 9x12 cell padding. */
#polpo-view-panel .ado-page {
  --ado-text: var(--text); --ado-text-2: var(--text-3);
  --ado-line: var(--border); --ado-line-strong: var(--border-strong);
  --ado-hover: color-mix(in srgb, var(--text) 6%, var(--surface));
  /* selected row: the brand wash Polpo uses for an active item (light ~#deecf9-like, dark a deep tint) */
  --ado-selected: color-mix(in srgb, var(--brand) 12%, var(--surface));
  --ado-col-prio: 48px;
  font-family: var(--font); font-size: 13px; line-height: 20px; color: var(--ado-text);
  display: flex; flex-direction: column; gap: 0; min-height: 0;
}
.g-root_theme_dark #polpo-view-panel .ado-page { --ado-selected: color-mix(in srgb, var(--brand) 18%, var(--surface)); }
/* dark: three text tones instead of two. Titles bright, status mid, numbers (order, percentage, count) and
   the nobody-dash faint; each stays at 4.5:1 or more on a row, a hovered row and a selected row. */
.g-root_theme_dark #polpo-view-panel .ado-page :is(.ado-progress, .ado-unassigned, .ado-summary) { color: var(--text-faint); }
.g-root_theme_dark #polpo-view-panel .ado-page .ado-state > .ado-ellipsis { color: var(--text-2); }
.ado-page *, .ado-menu * { box-sizing: border-box; }
/* roadmap.css gives every #polpo-view-panel button a 40px floor and a filled look (:where(...) button);
   the backlog sizes its own buttons (32/28/24px) to keep 40px rows, so reset that floor here. */
#polpo-view-panel .ado-page button { min-height: 0; }
.ado-icon { width: 16px; height: 16px; flex: none; }
.ado-page .polpo-type-glyph, .ado-menu .polpo-type-glyph { width: 16px; height: 16px; flex: none; }
.ado-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ado-muted { color: var(--ado-text-2); }
.ado-spacer { flex: 1 1 auto; }

/* page header: one 32px line in every view and theme, so the title sits at the same height on
   Backlog with its level picker, light or dark */
.ado-pagehead { display: flex; align-items: center; gap: 16px; min-height: 32px; padding: 0; margin: 0 0 12px; }
.ado-pagehead h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 650; letter-spacing: -.025em; color: var(--text); }
.ado-picker { margin-left: auto; }

/* toolbar: the Pipeline filter row, no frame of its own. Plain text (hint, count) has no inline padding of
   its own, so it sits on the page edge in line with the title and the grid; the 8px column gap spaces it. */
.ado-commandbar { display: flex; align-items: center; gap: 2px; column-gap: 8px; min-height: 32px; margin: 0 0 12px; flex-wrap: wrap; }
.ado-commandbar .polpo-prio-ctl { margin-left: 0; }
.ado-summary { font-size: 12px; color: var(--text-3); padding: 0; font-variant-numeric: tabular-nums; }
/* Epics and Features: no sprint picker (sprints belong to stories and tasks), one quiet line in its place */
.ado-hint { display: inline-flex; align-items: center; height: 32px; padding: 0; font-size: 13px; color: var(--text-3); }

/* Polpo dropdown (.polpo-prio-ctl) inside the panel: the trigger keeps the Pipeline's ghost look; a
   glyph or long label is clipped, and the menu shows a check on the active item. */
/* roadmap.css's panel button reset adds letter-spacing and the panel's 20px line box; undo both so the
   trigger computes exactly like the Pipeline's (13px/600, normal tracking, 1.15 line height) */
#polpo-view-panel .ado-page .polpo-prio-trigger { max-width: 360px; letter-spacing: normal; line-height: 1.15; border-radius: 6px; }
#polpo-view-panel .ado-page .polpo-prio-item { letter-spacing: normal; line-height: 1.15; }
.ado-page .polpo-prio-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ado-page .polpo-prio-trigger .polpo-type-glyph { width: 14px; height: 14px; }
.ado-page .polpo-prio-trigger[aria-expanded="true"] { background: var(--btn); }
.ado-page .polpo-prio-menu { min-width: 220px; max-width: 360px; max-height: min(420px, 60vh); overflow-y: auto; }
.ado-picker .polpo-prio-menu { left: auto; right: 0; }
/* the dropdowns speak the row menu's sharp language (8px surface, 4px items), in place and once
   floated to <body> (floating-menu.js mirrors .ado-dd and data-dd onto the menu; data-dd is the
   Backlog's own). The phone bottom sheet keeps its own top-only radius, as the row menu's sheet does. */
:is(.ado-page .polpo-prio-menu, .polpo-prio-menu.ado-dd[data-dd][data-polpo-float]:not(.polpo-float-sheet)) { border-radius: 8px; }
:is(.ado-page .polpo-prio-menu, .polpo-prio-menu.ado-dd[data-dd][data-polpo-float]) .polpo-prio-item { border-radius: 4px; }
.ado-page .polpo-prio-item > .ado-dd-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ado-page .polpo-prio-item .ado-check { visibility: hidden; width: 14px; height: 14px; color: var(--brand-text); }
.ado-page .polpo-prio-item.active .ado-check { visibility: visible; }
/* a menu that floats lives in <body>, outside .ado-page: the check mark keeps its size there too */
[data-polpo-float] .polpo-prio-item .ado-check { visibility: hidden; width: 14px; height: 14px; flex: none; margin-left: auto; color: var(--brand-text); }
[data-polpo-float] .polpo-prio-item.active .ado-check { visibility: visible; }
.ado-page .polpo-prio-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ghost actions: same look as the filter triggers and Planka's "Voeg kaart toe" */
.ado-cmd { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform var(--dur-press) var(--spring); }
.ado-cmd .ado-icon { color: var(--brand-text); }
.ado-cmd:hover { background: var(--btn); color: var(--text); }
.ado-cmd:active { transform: scale(.98); }
/* "Bovenliggende werkitems": the same switch component (.polpo-switch) as the Pipeline filters */
.ado-page .ado-parents { cursor: pointer; }
.ado-page .ado-parents .polpo-switch { display: inline-block; }

/* breadcrumb (focus on one branch) */
.ado-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: -4px 0 12px; font-size: 13px; }
.ado-breadcrumb > .ado-icon { width: 12px; height: 12px; color: var(--text-faint); }
.ado-breadcrumb button, .ado-breadcrumb span { display: inline-flex; align-items: center; gap: 6px; height: 28px; border: 0; background: none; padding: 0 6px; border-radius: 6px; font: inherit; font-weight: 600; color: var(--text-3); cursor: pointer; }
.ado-breadcrumb button:hover { background: var(--btn); color: var(--text); }
.ado-breadcrumb span[aria-current] { color: var(--text); cursor: default; }

/* backlog grid: a Polpo surface (Timeline's frame) holding an Azure tree grid. Each row is a real
   element (subgrid), so it can carry focus, selection and the focus ring. */
.ado-grid-scroll { overflow: auto; max-height: calc(100dvh - var(--polpo-roadmap-chrome, 48px) - 170px); border: 1px solid var(--ado-line); background: var(--surface); border-radius: 8px; position: relative; }
/* Titel (takes the room; with Prio after it on a board with the Prioriteit field: --ado-lead), Status, an
   avatar column, Labels (at most 180px), Voortgang. No order column: the rows stand in the plan's order.
   Sum of the fixed minimums: 260(+48)+132+44+120(+124) = 728px, so the grid fits beside the 280px Planning
   panel at 1280px (about 940px of room) without a horizontal scrollbar. */
.ado-grid { --ado-lead: minmax(260px, 1fr); --ado-cols: var(--ado-lead) 132px minmax(44px, max-content) minmax(120px, 180px);
  display: grid; grid-template-columns: var(--ado-cols); min-width: 100%; }
.ado-grid.has-progress { --ado-cols: var(--ado-lead) 132px minmax(44px, max-content) minmax(120px, 180px) 124px; }
.ado-grid.has-prio { --ado-lead: minmax(260px, 1fr) var(--ado-col-prio); }
.ado-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; outline: none; }
/* every row 40px (border included): the cell centres its content and has no block padding, so a 24px
   avatar does not stretch its row to 43px beside 40px parent rows */
.ado-cell { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--ado-line); background: var(--row-bg, var(--surface)); }
.ado-grid > .ado-row:last-child > .ado-cell { border-bottom-color: transparent; }
.ado-row:not(.ado-head):hover { --row-bg: var(--ado-hover); }
.ado-grid .ado-row[aria-selected="true"] { --row-bg: var(--ado-selected); }
.ado-row[aria-selected="true"] .ado-tag { background: transparent; }
#polpo-view-panel .ado-row:focus-visible { position: relative; z-index: 1; outline: none; }
#polpo-view-panel .ado-row:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 2px solid var(--brand); pointer-events: none; }
.ado-head { position: sticky; top: 0; z-index: 2; }
.ado-head > .ado-cell { min-height: 36px; padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--ado-line); }
.ado-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the title cell keeps room for its own row actions (+ and ..., 2x28px + gap + 6px inset), so they
   never cover the title; the title ellipsizes before that space */
.ado-c-title { position: relative; padding-left: calc(8px + var(--depth, 0) * 16px); padding-right: 68px; gap: 4px; }
.ado-type { display: inline-flex; flex: none; margin: 0 4px 0 2px; }
/* avatar column: centred initials, a quiet dash for nobody */
.ado-c-assigned { justify-content: center; gap: 2px; padding-inline: 4px; }
.ado-head > .ado-c-assigned { justify-content: center; padding-inline: 4px; }
.ado-unassigned { color: var(--text-3); }
/* everyone on the card: overlapping 24px avatars, each ringed in the row's own background so they stay apart */
.ado-stack { display: inline-flex; align-items: center; flex: none; }
.ado-stack > .ado-avatar { box-shadow: 0 0 0 2px var(--row-bg, var(--surface)); }
.ado-stack > .ado-avatar + .ado-avatar { margin-left: -5px; }
.ado-twisty, .ado-twisty-gap { width: 20px; height: 20px; flex: none; }
#polpo-view-panel .ado-twisty { display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-3); cursor: pointer; }
.ado-twisty .ado-icon { width: 14px; height: 14px; transition: transform 200ms var(--spring, cubic-bezier(.22, 1, .36, 1)); }
.ado-twisty[aria-expanded="true"] .ado-icon { transform: rotate(90deg); }
#polpo-view-panel .ado-twisty:hover { background: var(--btn); color: var(--text); }
#polpo-view-panel .ado-page .ado-title { flex: 0 1 auto; min-width: 0; height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
/* underline only under the pointer on the title itself, never for a focused or selected row */
#polpo-view-panel .ado-page .ado-title:hover { background: none; color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.ado-row.is-parent .ado-title { color: var(--text-3); }
#polpo-view-panel .ado-page .ado-row.is-parent .ado-title { color: var(--text-3); }
/* row actions sit in the title cell's reserved right padding (Azure's "..." on hover): they never
   cover the title and never stretch the 40px row. */
/* always there and clickable, quietly: hover-only hid "add a task" from anyone who did not know, and from touch screens */
.ado-row-actions { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; gap: 2px; opacity: .42; }
/* the row whose menu is open keeps its "...": the menu hangs from it */
.ado-row:hover .ado-row-actions, .ado-row:focus-within .ado-row-actions, .ado-row[aria-selected="true"] .ado-row-actions, .ado-row-actions:has([aria-expanded="true"]) { opacity: 1; }
#polpo-view-panel .ado-icon-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
#polpo-view-panel .ado-icon-btn:hover, #polpo-view-panel .ado-icon-btn[aria-expanded="true"] { background: var(--btn); color: var(--text); }
/* "Prio" (backlog.js prioCell): a feature's priority sign, centred. For an editor a 32x28 button like the row
   actions; on a feature without a priority it holds an empty spot that shows a quiet dashed ring on hover and focus */
.ado-c-prio, .ado-head > .ado-c-prio { justify-content: center; padding-inline: 4px; }
#polpo-view-panel .ado-prio { display: grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer;
  transition: transform var(--dur-press, 110ms) var(--spring, ease-out); }
#polpo-view-panel .ado-prio:hover, #polpo-view-panel .ado-prio[aria-expanded="true"] { background: var(--btn); }
#polpo-view-panel .ado-prio:active { transform: scale(.94); }
#polpo-view-panel .ado-prio.is-static { cursor: default; }
.ado-prio-empty { display: block; width: 12px; height: 12px; border: 1.5px dashed color-mix(in srgb, var(--text) 32%, transparent); border-radius: 50%; opacity: 0; transition: opacity var(--dur-fast, 120ms); }
.ado-row:hover .ado-prio-empty, .ado-prio:is(:focus-visible, [aria-expanded="true"]) .ado-prio-empty, .ado-menu .ado-prio-empty { opacity: 1; }
@media (hover: none) { .ado-prio-empty { opacity: .6; } }
/* the priority menu: each sign stays beside its label, the check of the current one before it */
.ado-menu-lead { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.ado-state { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* the state dot carries a soft halo of its own colour (polpo-design dot marker) */
.ado-state i { width: 7px; height: 7px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, transparent) 16%, transparent); }
/* every click target answers a press (polpo-design: scale .98 on active) */
#polpo-view-panel :is(.ado-twisty, .ado-icon-btn):active { transform: scale(.94); }
#polpo-view-panel :is(.ado-twisty, .ado-icon-btn) { transition: transform var(--dur-press, 110ms) var(--spring, ease-out); }
.ado-progress, .polpo-wip { font-variant-numeric: tabular-nums; }
.ado-avatar { position: relative; overflow: hidden; display: inline-grid; place-items: center; width: var(--size, 24px); height: var(--size, 24px); flex: none; border-radius: 50%; color: #fff; font-size: calc(var(--size, 24px) * .42); font-weight: 600; letter-spacing: .02em; }
.ado-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ado-more { font-size: 11px; font-weight: 600; color: var(--text-3); flex: none; }
/* tags: Planka's label chip (6px radius, 11px). A tag shrinks to an ellipsis instead of breaking out
   of the cell; the cell clips and keeps its own 12px right padding. */
.ado-c-tags { gap: 4px; flex-wrap: nowrap; overflow: hidden; padding-right: 12px; }
.ado-tag { flex: 0 1 auto; min-width: 32px; max-width: 156px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 7px; height: 20px; line-height: 20px; border-radius: 4px; font-size: 11px; font-weight: 500; color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent); }
.ado-progress { display: inline-flex; align-items: center; gap: 8px; width: 100%; font-size: 11px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* a fixed-width percentage, so every bar ends on the same x (9% and 100% alike) */
.ado-progress > span:last-child { flex: none; min-width: 29px; text-align: right; }
/* the Pipeline's progress bar: same track, same green; dark needs a firmer track to read */
.ado-bar { flex: 1 1 auto; height: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: var(--r-pill); overflow: hidden; }
.g-root_theme_dark .ado-bar { background: color-mix(in srgb, var(--text) 18%, transparent); }
.ado-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ok, #15a05c); }
.ado-unparented .ado-group strong { font-weight: 600; color: var(--text); }
/* the "<Niveau> zonder ouder" group row is one full-width cell; its indent lines the twisty up under
   the Titel column's own twisty. */
.ado-group { grid-column: 1 / -1; padding-left: 8px; }
.ado-group .polpo-wip { margin-left: 4px; background: var(--surface-2); }
.ado-empty { grid-column: 1 / -1; padding: 32px 12px; color: var(--text-3); text-align: center; }

/* loading: six skeleton rows in the real grid columns */
.ado-skel { display: block; height: 10px; width: var(--w, 70%); border-radius: var(--r-pill); background: color-mix(in srgb, var(--text) 8%, transparent); }
.ado-skeleton .ado-skel { background: linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 0 40%, color-mix(in srgb, var(--text) 13%, transparent) 50%, color-mix(in srgb, var(--text) 7%, transparent) 60% 100%) 0 0 / 300% 100%; animation: ado-shimmer 1.4s ease-in-out infinite; }
@keyframes ado-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* contextual menu (row and task actions): the Polpo floating surface with .polpo-prio-item rows */
.ado-menu { position: fixed; z-index: 1950; min-width: 220px; max-width: 360px; padding: 6px; font-family: var(--font); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--e3); }
.ado-menu .polpo-prio-item { white-space: nowrap; border-radius: 4px; }
.ado-menu .polpo-prio-item:focus-visible { background: var(--surface-2); color: var(--text); outline: 2px solid var(--brand); outline-offset: -2px; }
/* hover and keyboard focus on a menu item: a wash that reads in light and dark alike */
:is(.ado-menu, .ado-page .polpo-prio-menu, .polpo-prio-menu.ado-dd[data-dd][data-polpo-float]) .polpo-prio-item:not(.active):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--text) 7%, var(--surface)); }
.ado-menu-icon { display: grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--brand-text); }
.ado-menu-sep { height: 1px; margin: 4px 2px; background: var(--border); }

:is(.ado-cmd, .ado-twisty, .ado-title, .ado-icon-btn, .ado-prio, .ado-breadcrumb button):focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .ado-twisty .ado-icon, .ado-cmd, #polpo-view-panel :is(.ado-twisty, .ado-icon-btn, .ado-prio), .ado-prio-empty { transition: none; }
  #polpo-view-panel :is(.ado-twisty, .ado-icon-btn, .ado-prio):active { transform: none; }
  .ado-skeleton .ado-skel { animation: none; }
}
/* tablet: Labels and Voortgang give up 44px (104+96 instead of 120+124), so the grid fits 768px
   without a sideways scroll (260+132+44+104+96 = 636px, 684px with Prio; with five people in Wie, 108px: 748px) */
@media (max-width: 900px) {
  .ado-grid.has-progress { --ado-cols: var(--ado-lead) 132px minmax(44px, max-content) 104px 96px; }
}
/* phone: every touch target 32px (twisty, title, row actions) inside the same 40px row. The Titel column
   stays put while the other columns scroll under it (head cell too); the cell keeps the row's own opaque
   background (--row-bg: surface, hover, selected), so nothing shows through it. */
@media (max-width: 760px) {
  .ado-row-actions { opacity: 1; }
  .ado-pagehead { flex-wrap: wrap; }
  #polpo-view-panel :is(.ado-icon-btn, .ado-prio) { width: 32px; height: 32px; }
  #polpo-view-panel .ado-twisty, #polpo-view-panel .ado-twisty-gap { width: 32px; height: 32px; }
  #polpo-view-panel .ado-page .ado-title { padding-block: 6px; }
  #polpo-view-panel .ado-c-title { position: sticky; left: 0; z-index: 1; padding-right: 76px; box-shadow: inset -1px 0 0 var(--ado-line); }
}
.ado-state.is-derived { cursor: help; }

/* "Hangt onder" in "Nieuw werkitem" (backlog.js addDialog): hidden for an epic; an author display rule otherwise beats the UA [hidden] default */
.polpo-rel-create :is([data-bl-parent], [data-bl-parent-none])[hidden] { display: none; }