/* Card hierarchy (hierarchy.js): Jira type colours, parent line, child progress, card panel. */
.polpo-type-glyph { width: 16px; height: 16px; flex: none; display: block; }
/* a feature's priority (priority-core.js prioritySign): signal bars on a ramp from red (1) to yellow (4), the
   bars it does not fill a quiet track, so the count says it without colour too; dark gets lighter tints */
.polpo-prio-bars { --prio-1: #e5484d; --prio-2: #ef6b1d; --prio-3: #d99208; --prio-4: #bfa21c; width: 16px; height: 16px; flex: none; display: block; }
.g-root_theme_dark .polpo-prio-bars { --prio-1: #ff6369; --prio-2: #ff8b3e; --prio-3: #ffb224; --prio-4: #ecd25a; }
.polpo-prio-bars[data-level="1"] { color: var(--prio-1); }
.polpo-prio-bars[data-level="2"] { color: var(--prio-2); }
.polpo-prio-bars[data-level="3"] { color: var(--prio-3); }
.polpo-prio-bars[data-level="4"] { color: var(--prio-4); }
.polpo-prio-bars .is-off { fill: color-mix(in srgb, var(--text) 18%, transparent); }

/* ---- board cards ---- */
#app .polpo-card-type { display: inline-flex; align-items: center; gap: 6px; flex: 1 0 100%; font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: .02em; color: var(--text-3); }
#app .polpo-card-type { min-width: 0; max-width: 100%; }
/* No parent: paintCard() marks the badge .is-inline (glyph only). It does not take its own row; the
   glyph sits on the title's first line, so the type never disappears and no blank row is left. */
#app .polpo-card-type.is-inline { flex: none; align-self: flex-start; margin-top: 1px; }
#app .polpo-card-type.is-inline + [class*="_name_i28lr"] { flex: 1 1 0; min-width: 0; }
#app .polpo-card-type > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the sprint chip ("S3", only under "Alle werk") closes the context line */
#app .polpo-card-type > .polpo-card-chip { flex: none; display: inline-flex; }
#app .polpo-card-type > .polpo-card-chip .polpo-sprint-chip { margin: 0; }
#app [class*="_wrapper_36a26"][data-polpo-type] { position: relative; }
/* No colour fields: every card shares one surface; the glyph carries the type and an epic only reads heavier. */
#app [class*="_wrapper_36a26"][data-polpo-type="epic"] [class*="_name_i28lr"] { font-size: 14px; font-weight: 700; }
#app .polpo-card-type .polpo-type-glyph { width: 18px; height: 18px; }
/* the parent path (Azure: "Epic › Feature" above a story): each step with its own smaller glyph, the
   whole path one line, cut short with an ellipsis */
#app .polpo-card-type > .polpo-card-path { display: block; }
#app .polpo-card-path .polpo-type-glyph { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 0; vertical-align: -2px; }
#app .polpo-card-path .polpo-path-sep { color: var(--text-faint, var(--text-3)); }
/* progress: a 2px bar along the card's bottom edge, no row of its own (the card is position: relative
   and clips nothing, so the bar takes the card's bottom radius itself) */
#app .polpo-card-kids { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; margin: 0; padding: 0; overflow: hidden; pointer-events: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: 11px; font-variant-numeric: tabular-nums; }
#app .polpo-card-kids .polpo-kids-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* progress only matters where work is moving: quiet in the parking phases */
#app [data-polpo-phase="backlog"] .polpo-card-kids, #app [data-polpo-phase="ideas"] .polpo-card-kids { display: none; }
.polpo-kids-bar { position: relative; display: block; flex: 0 0 64px; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
#app .polpo-card-kids > .polpo-kids-bar { position: absolute; inset: 0; height: auto; border-radius: 0; background: color-mix(in srgb, var(--text) 7%, transparent); }
/* on a dark surface 10% of the light text vanishes; the track needs a firmer mix to read as a bar */
.g-root_theme_dark .polpo-kids-bar, #app.g-root_theme_dark .polpo-card-kids > .polpo-kids-bar { background: color-mix(in srgb, var(--text) 16%, transparent); }
.polpo-kids-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ok, #15a05c); }

/* ---- the calm card: context, title, one foot line ----
   right end of the foot line: avatars first, then the priority mark; two avatars at most */
#app [class*="_attachmentsRight_"] { display: inline-flex; align-items: center; gap: 4px; }
#app [class*="_attachmentsRight_"] > .polpo-prio-icon { order: 2; }
#app [class*="_attachmentsRight_"] [class*="_wrapper_rbde9"]:nth-of-type(n+3) { display: none; }
#app [class*="_attachmentsRight_"][data-polpo-more]::after { content: attr(data-polpo-more); order: 1; font-size: 11px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---- fold: parts in the parent's column fold into the parent card ---- */
/* The draggable stays in the flow at zero height, so react-beautiful-dnd still measures it in place. */
#app [data-rbd-draggable-id][data-polpo-folded] { margin: 0 !important; padding: 0 !important; visibility: hidden; }
#app [data-rbd-draggable-id][data-polpo-folded] > * { display: none !important; }
/* A filtered card (polpo.js paintCardFilter) likewise: its draggable keeps no margin, so the first card
   a column shows starts at the same height in every column. */
#app [data-rbd-draggable-id][data-polpo-filtered] { margin: 0 !important; padding: 0 !important; }
/* ghost link: no fill or frame at rest, a 1px transparent border so nothing shifts on hover */
#app .polpo-card-fold { display: inline-flex; align-items: center; gap: 6px; flex: 1 0 100%; min-height: 28px; margin: 0; padding: 0 10px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text-3); font: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background-color var(--dur-fast, 120ms) ease, border-color var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease, transform var(--dur-press, 110ms) ease; }
#app .polpo-card-fold:hover { border-color: var(--border); color: var(--text); }
#app .polpo-card-fold:active { transform: scale(.98); }
#app .polpo-card-fold:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#app .polpo-card-fold svg { width: 14px; height: 14px; flex: none; transition: transform 180ms cubic-bezier(.23, 1, .32, 1); }
#app .polpo-card-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
/* a parent holding folded parts reads as a small stack of cards */
#app [class*="_wrapper_36a26"][data-polpo-stack] { box-shadow: 0 4px 0 -2px var(--surface), 0 4px 0 -1px var(--border-strong), 0 8px 0 -4px var(--surface), 0 8px 0 -3px var(--border); }
#app [data-rbd-draggable-id]:has([data-polpo-stack]) { margin-bottom: 24px; }
@media (prefers-reduced-motion: reduce) { #app .polpo-card-fold, #app .polpo-card-fold svg { transition: none; } #app .polpo-card-fold:active { transform: none; } }

/* ---- card panel ---- */
.polpo-native-hidden { display: none !important; }
.polpo-rel { margin: 4px 0 24px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md, 14px); background: var(--surface); color: var(--text); }
.polpo-rel * { box-sizing: border-box; }
.polpo-rel h3 { margin: 0 0 12px; font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.polpo-rel h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.polpo-rel-count { font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.polpo-rel .polpo-kids-bar { width: 100%; flex: none; margin: 0 0 10px; }
.polpo-rel button { font: inherit; font-size: 12.5px; font-weight: 600; min-height: 32px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--r-sm, 10px); background: var(--surface-2); color: var(--text-2); cursor: pointer;
  transition: background-color var(--dur-fast, 120ms) ease, border-color var(--dur-fast, 120ms) ease, transform var(--dur-press, 110ms) ease; }
.polpo-rel button:hover:not(:disabled) { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface-2) 70%, var(--text) 6%); }
.polpo-rel button:active:not(:disabled) { transform: scale(.97); }
.polpo-rel button:disabled { opacity: .55; cursor: default; }
.polpo-rel button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* the card's own type: one chip in its colour with its glyph and name (no row of every type: Flow says where it sits);
   for an editor the name is a native dropdown, its arrow drawn after it */
.polpo-rel-type { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; margin-bottom: 16px; padding: 0 11px; border: 1px solid var(--type-color);
  border-radius: var(--r-sm, 10px); background: color-mix(in srgb, var(--type-color) 14%, var(--surface)); box-shadow: inset 0 0 0 1px var(--type-color);
  font-size: 12.5px; font-weight: 600; color: var(--text); }
.polpo-rel-type .polpo-type-glyph { width: 16px; height: 16px; flex: none; }
.polpo-rel-type select { appearance: none; -webkit-appearance: none; height: 30px; margin: 0 -18px 0 0; padding: 0 18px 0 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.polpo-rel-type select:disabled { opacity: .55; cursor: default; }
.polpo-rel-type select:focus-visible { outline: none; }
.polpo-rel-type:has(select:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.polpo-rel-type.is-pick::after { content: ""; width: 6px; height: 6px; flex: none; margin: -3px 2px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); pointer-events: none; opacity: .7; }
.polpo-rel-block + .polpo-rel-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.polpo-rel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* "Toegewezen aan": who works on it (avatar and name, a remove button each), the other board members in a picker */
.polpo-rel-people-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.polpo-rel-person { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 4px 4px 5px; border: 1px solid var(--border);
  border-radius: var(--r-pill, 999px); background: var(--surface-2); font-size: 13px; font-weight: 550; color: var(--text); }
.polpo-rel-person > span:last-child { padding-right: 8px; }
.polpo-rel-person.is-nobody { border-style: dashed; background: transparent; color: var(--text-3); font-weight: 500; }
.polpo-rel .polpo-rel-person-x { display: inline-grid; place-items: center; width: 24px; min-height: 24px; height: 24px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--text-3); font-size: 15px; line-height: 1; }
.polpo-rel .polpo-rel-person-x:hover:not(:disabled) { background: var(--btn-hover, var(--surface)); color: var(--text); }
.polpo-rel .polpo-rel-person-x:focus-visible, .polpo-rel-assign:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.polpo-rel-assign { height: 32px; max-width: 100%; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm, 10px);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.polpo-rel-assign:disabled { opacity: .55; cursor: default; }
.polpo-rel-item { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 4px 6px 4px 8px; border-radius: 8px; }
.polpo-rel-item:hover { background: var(--surface-2); }
.polpo-rel .polpo-rel-item a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; font-weight: 550; text-decoration: none; }
.polpo-rel .polpo-rel-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.polpo-rel .polpo-rel-item.is-done a { color: var(--text-3); text-decoration: line-through; }
.polpo-rel-status { flex: none; font-size: 11.5px; color: var(--text-3); }
.polpo-rel-item.is-done .polpo-rel-status { color: var(--ok-ink, var(--ok)); }
.polpo-rel .polpo-rel-icon { min-height: 26px; width: 26px; padding: 0; border-color: transparent; background: transparent; font-size: 16px; line-height: 1; color: var(--text-3); }
.polpo-rel-empty { padding: 6px 8px; font-size: 12.5px; color: var(--text-faint); }
.polpo-rel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.polpo-rel-help { margin: 0; font-size: 12.5px; color: var(--text-3); }
/* Flow: one line per step (Sprint, Epic, Feature, Story/Bug), the step's name in a fixed column */
.polpo-rel-flow dl { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.polpo-rel-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 28px; }
.polpo-rel-step dt { font-size: 12px; font-weight: 600; color: var(--text-3); }
.polpo-rel-step dd { min-width: 0; margin: 0; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polpo-rel-step dd a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--text); font-weight: 550; text-decoration: none; }
.polpo-rel-step dd a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polpo-rel-step dd a:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.polpo-rel-step dd .polpo-type-glyph { width: 14px; height: 14px; flex: none; }
/* Taak: the task's own fields, side by side */
.polpo-rel-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.polpo-rel-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; font-size: 12px; font-weight: 600; color: var(--text-3); }
.polpo-rel-field select { height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm, 10px); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; }
.polpo-rel-field select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.polpo-rel-field strong { font-size: 13px; font-weight: 550; color: var(--text); }
@media (max-width: 560px) { .polpo-rel-fields { grid-template-columns: minmax(0, 1fr); } }
.polpo-rel-error { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--danger-ink); background: var(--danger-soft); }
.polpo-rel-picker .polpo-tl-suggestions button { display: grid; grid-template-columns: 16px 1fr; column-gap: 9px; align-items: center; text-align: left; }
.polpo-rel-picker .polpo-tl-suggestions button > span { grid-column: 2; }
@media (prefers-reduced-motion: reduce) { .polpo-rel button { transition: none; } .polpo-rel button:active:not(:disabled) { transform: none; } }

/* ---- roadmap: parts nested under their roadmap item ---- */
.polpo-tl-row[data-type="epic"] { --type: #ff7b00; } .polpo-tl-row[data-type="feature"] { --type: #773b93; } .polpo-tl-row[data-type="story"] { --type: #009ccc; }
.polpo-tl-row[data-type="task"] { --type: #f2cb1d; } .polpo-tl-row[data-type="bug"] { --type: #cc293d; }
.polpo-tl-row > .polpo-tl-title, .polpo-tl-row > .polpo-tl-tree { grid-column: 1; grid-row: 1; }
.polpo-tl-row > .polpo-tl-track { grid-column: 2; grid-row: 1; }
#polpo-view-panel button.polpo-tl-title { padding-left: calc(40px + var(--depth, 0) * 18px); }
#polpo-view-panel button.polpo-tl-tree { position: sticky; left: 0; z-index: 3; align-self: start; margin-top: 12px; justify-self: start; display: grid; place-items: center;
  width: 24px; min-height: 24px; height: 24px; margin-left: calc(10px + var(--depth, 0) * 18px); margin-bottom: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); }
#polpo-view-panel button.polpo-tl-tree:hover { background: var(--surface-2); color: var(--text); }
#polpo-view-panel button.polpo-tl-tree .polpo-tl-icon { width: 14px; height: 14px; }
.polpo-tl-title strong { display: flex; align-items: flex-start; gap: 7px; }
.polpo-tl-title strong .polpo-type-glyph { margin-top: 2px; }
.polpo-tl-row.polpo-tl-child { min-height: 54px; background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.polpo-tl-child .polpo-tl-title strong { font-size: 12.5px; font-weight: 550; }
.polpo-tl-child .polpo-tl-title strong .polpo-type-glyph { width: 14px; height: 14px; }
#polpo-view-panel .polpo-tl-child button.polpo-tl-bar:not(.polpo-tl-milestone) { top: 12px; height: 26px; min-height: 26px; border-color: color-mix(in srgb, var(--type) 55%, var(--border)); background: color-mix(in srgb, var(--type) 18%, var(--surface)); color: var(--text); }
#polpo-view-panel .polpo-tl-row button.polpo-tl-bar.polpo-tl-rollup { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--type, var(--brand)) 14%, transparent) 6px 7px); }
.polpo-tl-unplanned button > span { display: inline-flex; align-items: center; gap: 7px; }

.polpo-scope-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 280px; padding: 0 10px; height: 32px; border: 1px solid var(--type-color, var(--brand)); border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.polpo-scope-chip[hidden] { display: none; }
.polpo-scope-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polpo-scope-chip .polpo-type-glyph { width: 14px; height: 14px; flex: none; }
.polpo-scope-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Azure DevOps board card: a 4px band in the work item type colour on the left edge. */
#app [class*="_wrapper_36a26"][data-polpo-type]::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--type-color); border-top-left-radius: inherit; border-bottom-left-radius: inherit; pointer-events: none; }

/* ---- the shared task card (task-card.js renderTaskCard) ----
   One card, two variants: "full" is a card in a cell of the Pipeline's Stories taskboard (taskboard.js),
   "compact" a row in a task list (no surface uses it today). Every .polpo-st-* rule below serves both;
   the full variant only adds its own block further down.
   polpo-design: semantic tokens, Apple-light tinted shadows (--shadow-ink), dot markers with a soft
   halo, tabular numbers, flat ghost buttons with scale(.98) on press, one spring voice (--spring),
   motion on transform/opacity only. Radii are tokens: the mini-cards at var(--r-sm) like the Pipeline's
   own small surfaces, their pills and chips at calc(var(--r-sm) - 4px) (concentric with the 4px inset).
   Type sizes are 11/12/13 only; the task title (13) sits under the story title (14). */
/* a task: a mini-card. 1px inner border, no shadow at rest; the type glyph carries the type */
#app .polpo-st-row { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 6px 8px 5px 8px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--dur-fast, 120ms) var(--spring, ease-out), transform var(--dur-press, 110ms) var(--spring, ease-out); }
/* dark: the mini-card lifts off the card on --surface-2 with a firmer edge (>= 1.5:1 against the card) */
#app.g-root_theme_dark .polpo-st-row { background: var(--surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, var(--surface)); }
#app .polpo-st-row:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong), 0 1px 2px rgba(var(--shadow-ink), .05), 0 4px 10px -4px rgba(var(--shadow-ink), .08); }
#app.g-root_theme_dark .polpo-st-row:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, var(--surface)), 0 1px 2px rgba(var(--shadow-ink), .05), 0 4px 10px -4px rgba(var(--shadow-ink), .08); }
#app .polpo-st-row:active { transform: scale(.99); }
#app .polpo-st-row:has(.polpo-st-status:active):active { transform: none; }
#app .polpo-st-main { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
#app .polpo-st-main > .polpo-type-glyph { width: 14px; height: 14px; margin-top: 2px; }
#app .polpo-st-title { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 400; line-height: 18px;
  letter-spacing: -.006em; text-align: left; cursor: pointer; overflow-wrap: anywhere; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#app .polpo-st-row:hover .polpo-st-title { color: var(--text); }
#app .polpo-st-title:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); text-underline-offset: 3px; }
/* status: dot with a soft halo + the column name; a ghost pill that opens the column menu */
.polpo-st-status, .polpo-st-dot { --st: var(--text-faint); }
/* the Pipeline column head's phase colours (polpo.css [data-polpo-phase]): In progress is --info in both */
:is(.polpo-st-status, .polpo-st-dot)[data-state="inprogress"] { --st: var(--info); }
:is(.polpo-st-status, .polpo-st-dot)[data-state="resolved"] { --st: var(--warn); }
:is(.polpo-st-status, .polpo-st-dot)[data-state="completed"] { --st: var(--ok); }
.polpo-st-dot { display: block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 16%, transparent); }
#app .polpo-st-status { display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 120px; height: 24px; margin: 0 -3px 0 auto; padding: 0 7px 0 8px; border: 0; border-radius: calc(var(--r-sm) - 4px);
  background: transparent; color: var(--text-3); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-press, 110ms) var(--spring, ease-out); }
#app .polpo-st-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#app span.polpo-st-status { cursor: inherit; }
#app button.polpo-st-status:hover, #app .polpo-st-status[aria-expanded="true"] { background: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-strong), 0 1px 2px rgba(var(--shadow-ink), .06); }
#app button.polpo-st-status:active { transform: scale(.97); }
/* meta: only what is there; 12px, muted, tabular */
#app .polpo-st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; min-height: 24px; padding-left: 22px; color: var(--text-3); font-size: 12px; line-height: 18px; }
#app .polpo-st-meta > .polpo-st-status { margin-left: auto; }
#app .polpo-st-meta svg { width: 13px; height: 13px; flex: none; }
#app .polpo-st-people { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-2); }
#app .polpo-st-people.is-stack .polpo-st-avatar + .polpo-st-avatar { margin-left: -9px; }
#app .polpo-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
#app .polpo-st-person { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .polpo-st-avatar { position: relative; overflow: hidden; display: inline-grid; place-items: center; flex: none; width: var(--size, 18px); height: var(--size, 18px); border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0; line-height: 1; box-shadow: 0 0 0 2px var(--surface); }
/* nobody on it yet: a quiet grey avatar with a person's outline */
#app .polpo-st-avatar.is-nobody { background: var(--surface-2); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--border), 0 0 0 2px var(--surface); }
#app .polpo-st-meta .polpo-st-avatar.is-nobody svg, #app .polpo-st-avatar.is-nobody svg { width: 72%; height: 72%; }
#app .polpo-st-due { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px 0 5px; border-radius: calc(var(--r-sm) - 4px); background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-2); white-space: nowrap; }
#app .polpo-st-due.is-overdue { background: var(--danger-soft); color: var(--danger-ink); }
/* the Pipeline's priority marks and colours (polpo.css .polpo-prio-icon), own class so polpo.js leaves it alone */
#app .polpo-st-prio { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; }
#app .polpo-st-meta .polpo-st-prio svg { width: 14px; height: 14px; }
#app .polpo-st-prio[data-prio="hoog"] { color: var(--danger); }
#app .polpo-st-prio[data-prio="midden"] { color: var(--warn); }
#app .polpo-st-prio[data-prio="laag"] { color: var(--info); }
#app .polpo-st-label { max-width: 128px; height: 20px; padding: 0 7px; border-radius: calc(var(--r-sm) - 4px); background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-2); font-size: 11px; font-weight: 500; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .polpo-st-count { display: inline-flex; align-items: center; gap: 4px; }
/* finished: one signal besides the place it stands, never three. The title dims (no strike-through): on
   Taken the Done column already names the status; on the Pipeline the status pill says "Done". */
#app .polpo-st-row.is-done .polpo-st-title { color: var(--text-3); text-decoration: none; }
/* finished meta: one quieter colour step (--text-3 on the row), no opacity, so it keeps >= 4.5:1 */
#app .polpo-st-row.is-done .polpo-st-meta, #app .polpo-st-row.is-done .polpo-st-meta :is(.polpo-st-people, .polpo-st-due, .polpo-st-label) { color: var(--text-3); }
#app .polpo-st-row.is-done .polpo-type-glyph { opacity: .6; }
#app .polpo-st-row.is-done .polpo-st-due { background: transparent; padding-left: 0; }
#app :is(.polpo-st-title, .polpo-st-status):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* the full variant (a Taken cell): the Pipeline card's surface, edge and lift, a little more room; at
   most three lines (two of title, one of meta, which never wraps). No status at rest: the column head
   names it. The status menu's button (the keyboard way to move a task) is a quiet 24px "..." that shows
   on hover, on focus and while its menu is open (always on touch screens); the name stays for screen
   readers and in the tooltip. Without edit rights there is no button, only the name for screen readers. */
#app .polpo-st-row.is-full { gap: 6px; padding: 10px 10px 9px 11px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(var(--shadow-ink), .04); }
#app.g-root_theme_dark .polpo-st-row.is-full { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(var(--shadow-ink), .2); }
#app .polpo-st-row.is-full:hover, #app.g-root_theme_dark .polpo-st-row.is-full:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong), var(--e1); }
#app .polpo-st-row.is-full[draggable="true"] { cursor: grab; }
#app .polpo-st-row.is-full .polpo-st-meta { flex-wrap: nowrap; gap: 8px; overflow: hidden; }
#app .polpo-st-row.is-full .polpo-st-meta > * { flex: none; }
#app .polpo-st-row.is-full .polpo-st-meta > .polpo-st-label { flex: 0 1 auto; min-width: 28px; }
#app .polpo-st-row.is-full .polpo-st-meta > .polpo-st-people:not(.is-stack) { flex: 0 1 auto; min-width: 18px; }
#app .polpo-st-row.is-full .polpo-st-state { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app .polpo-st-row.is-full .polpo-st-status { position: absolute; top: 7px; right: 6px; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0; color: var(--text-3); }
/* the "..." sits in the top corner, so a card with nothing else to say has no empty meta line */
#app .polpo-st-row.is-full .polpo-st-main { padding-right: 20px; }
#app .polpo-st-row.is-full .polpo-st-meta:not(:has(> :not(.polpo-st-status))) { min-height: 0; height: 0; margin-top: -6px; }
#app .polpo-st-row.is-full .polpo-st-status svg { width: 16px; height: 16px; }
#app .polpo-st-row.is-full span.polpo-st-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (hover: hover) {
  #app .polpo-st-row.is-full button.polpo-st-status { opacity: 0; transition: opacity var(--dur-fast, 120ms) var(--spring, ease-out), transform var(--dur-press, 110ms) var(--spring, ease-out); }
  #app .polpo-st-row.is-full:is(:hover, :focus-within) button.polpo-st-status, #app .polpo-st-row.is-full button.polpo-st-status[aria-expanded="true"] { opacity: 1; }
}
/* B4 (.harness/kanban-menus/spec.md): the same spring voice as the Pipeline's card lift/settle (B1-B3).
   Native HTML5 drag paints its own, unstylable drag image under the cursor, so "lifted" here is the
   source cell itself: it dims and eases down a touch over 180ms (same timing as the Pipeline's lift),
   then a dropped task settles back in with a small spring overshoot (220ms, within the 200-260ms band). */
#app .polpo-st-row.is-full.is-dragging { opacity: .4; scale: .98; transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), scale 180ms cubic-bezier(.2, .8, .2, 1); }
@keyframes polpo-st-land { from { opacity: .5; scale: .97; } to { opacity: 1; scale: 1; } }
#app .polpo-st-row.is-full.is-landed { animation: polpo-st-land 220ms cubic-bezier(.34, 1.26, .64, 1) both; }
@media (prefers-reduced-motion: reduce) {
  #app .polpo-st-row.is-full.is-landed { animation: none; transition: opacity 120ms ease; }
  #app .polpo-st-row.is-full.is-dragging { scale: 1; transition: opacity 120ms ease; }
}

/* status menu: the .ado-menu surface; dot with halo, a check on the current column */
.polpo-st-menu { min-width: 200px; transform-origin: top right; animation: polpo-st-pop 160ms var(--spring, cubic-bezier(.22, 1, .36, 1)) both; }
@keyframes polpo-st-pop { from { opacity: 0; transform: scale(.97) translateY(-2px); } to { opacity: 1; transform: none; } }
.polpo-st-menu .polpo-prio-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.polpo-st-menu .polpo-st-dot { margin-left: 2px; }
.polpo-st-menu-name { flex: 1 1 auto; }
.polpo-st-check { width: 14px; height: 14px; flex: none; visibility: hidden; color: var(--brand-text); }
.polpo-st-menu [aria-checked="true"] .polpo-st-check { visibility: visible; }
/* an empty sprint on the Pipeline: one clear line instead of an empty board */
.polpo-sprint-empty { margin: 12px 16px 0; padding: 12px 16px; max-width: 560px; border-radius: var(--r-md, 14px); background: var(--surface); color: var(--text-3); font-size: 13px; line-height: 20px;
  box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(var(--shadow-ink), .04); }
html[data-polpo-view]:not([data-polpo-view="pipeline"]) .polpo-sprint-empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .polpo-st-menu { animation: none; }
  #app :is(.polpo-st-row, .polpo-st-status) { transition: none; }
  #app .polpo-st-row.is-full button.polpo-st-status { transition: none; }
  #app :is(.polpo-st-row, button.polpo-st-status):active { transform: none; }
}

/* "Mijn werk" (the menu's first row) in the Snelfilters menu (hierarchy.js paintPersonSection), and, only
   while a person chosen on Taken narrows the Pipeline too, one checked row "Persoon: <naam>" under it
   that lifts that filter; the same rows as the rest of the menu */
#polpo-quick-menu { max-height: min(560px, 72vh); overflow-y: auto; overscroll-behavior: contain; }
#polpo-quick-menu .polpo-person-section { margin: 0 0 4px; }
.polpo-person-section .polpo-prio-item { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.polpo-person-section .polpo-prio-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.polpo-person-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polpo-person-x { flex: none; font-weight: 500; color: var(--text-3); }

/* Story: the Pipeline's own picker in Snelfilters (hierarchy.js paintStorySection) - "Alle stories" plus
   one row per user story, the same row component as Persoon and "Tijd" */
#polpo-quick-menu .polpo-story-section { margin: 4px 0 0; padding: 4px 0 0; border-top: 1px solid var(--border); }
.polpo-story-section .polpo-prio-item { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; color: var(--text-2); }
.polpo-story-section .polpo-prio-item:hover { background: var(--surface-2); color: var(--text); }
.polpo-story-section .polpo-prio-item.active { background: var(--brand-soft); color: var(--brand-text); }
.polpo-story-section .polpo-prio-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.polpo-story-section .polpo-type-glyph { width: 14px; height: 14px; flex: none; }
.polpo-story-section .ado-dd-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polpo-story-section .polpo-prio-item .ado-check { width: 14px; height: 14px; flex: none; margin-left: auto; visibility: hidden; color: var(--brand-text); }
.polpo-story-section .polpo-prio-item.active .ado-check { visibility: visible; }

/* ---- the Stories level: the sprint taskboard (taskboard.js; formerly the Taken tab's taken.css) ----
   Planka's lists step aside; its filter row stays. Rows sit on the page like Pipeline columns do (no
   frame, no tray); one hairline between rows; the column heads are the Pipeline's (phase dot, name,
   .polpo-wip count); the cards are the shared task card (task-card.js, variant full). Polpo tokens only. */
html[data-polpo-taskboard] #app [class*="_lists_11uup"] { display: none; }
#polpo-taskboard[hidden] { display: none; }
#polpo-taskboard { --tk-story: 280px; --tk-min: 212px; width: calc(100vw - 40px); max-width: 100%; min-width: 0; padding: 4px 0 0; color: var(--text); }
#polpo-taskboard * { box-sizing: border-box; }
#polpo-taskboard button { font: inherit; letter-spacing: normal; }
/* the board scrolls inside itself (never the page) when the columns do not fit */
#polpo-taskboard .tk-scroll { position: relative; overflow: auto; max-width: 100%; max-height: calc(100dvh - var(--polpo-roadmap-chrome, 48px) - 120px);
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-faint) 45%, transparent) transparent; }
#polpo-taskboard .tk-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
#polpo-taskboard .tk-board { display: grid; grid-template-columns: var(--tk-story) repeat(var(--tk-cols), minmax(var(--tk-min), 1fr));
  width: 100%; min-width: calc(var(--tk-story) + var(--tk-cols) * var(--tk-min)); font-variant-numeric: tabular-nums; }
#polpo-taskboard .tk-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; transition: opacity 180ms cubic-bezier(.2, .8, .2, 1); }
#polpo-taskboard .tk-row > * { min-width: 0; }
/* column heads: the Pipeline's (12px/600, phase dot with halo, the count beside the name); sticky */
#polpo-taskboard .tk-head > * { position: sticky; top: 0; z-index: 2; background: var(--bg); }
#polpo-taskboard :is(.tk-corner, .tk-colhead) { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--text-2); }
#polpo-taskboard .tk-corner { left: 0; z-index: 3; padding-left: 36px; color: var(--text-3); }
#polpo-taskboard .tk-colhead::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--phase, var(--text-faint)); box-shadow: 0 0 0 3px var(--phase-soft, var(--surface-2)); }
#polpo-taskboard .tk-colname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#polpo-taskboard .tk-colhead .polpo-wip { flex: none; }
/* the story: a fixed row head (never dragged), sticky on the left with a 3px band in its type colour */
/* its card lines up with the row's tiles: flush on top, the same 4px gap below */
#polpo-taskboard .tk-story { position: sticky; left: 0; z-index: 1; display: flex; flex-direction: column; padding: 0 6px 4px 8px; background: var(--bg); }
#polpo-taskboard .tk-scroll.is-scrolled :is(.tk-story, .tk-corner) { box-shadow: 1px 0 0 var(--border), 8px 0 14px -12px rgba(var(--shadow-ink), .35); }
/* the story card: a squared frame (2px corners) with the type colour as its left edge, like an Azure DevOps story card;
   the title (two lines at most), what it hangs under, at its foot the sprint and who works on it. Every card has one
   size: a long title, a folded row or an open one full of tasks never changes it (the card stays on top of its row) */
#polpo-taskboard .tk-story-card { flex: none; display: flex; flex-direction: column; gap: 8px; height: 120px; min-width: 0; padding: 12px 12px 10px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--type-color, var(--border)); border-radius: 2px; }
#polpo-taskboard .tk-loose .tk-story-card { border-left-color: var(--border); }
#polpo-taskboard .tk-story-line { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
#polpo-taskboard .tk-story-line > .polpo-type-glyph { width: 16px; height: 16px; margin-top: 2px; }
#polpo-taskboard .tk-fold { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); cursor: pointer;
  transition: transform var(--dur-press, 110ms) var(--spring, ease-out); }
#polpo-taskboard .tk-fold svg { width: 12px; height: 12px; transition: transform 200ms var(--spring, cubic-bezier(.22, 1, .36, 1)); }
#polpo-taskboard .tk-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
#polpo-taskboard .tk-fold:hover { background: var(--btn, var(--surface-2)); color: var(--text); }
#polpo-taskboard .tk-fold:active { transform: scale(.94); }
/* open because a filter picks the tasks: the arrow stays open, quiet and not pressable */
#polpo-taskboard .tk-fold:disabled { opacity: .45; cursor: default; background: transparent; transform: none; }
#polpo-taskboard .tk-story-title { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 19px;
  letter-spacing: -.01em; text-align: left; cursor: pointer; }
/* two lines at most, then "…": on the span, because Safari does not clamp a button itself (a long title grew the card) */
#polpo-taskboard .tk-story-title > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 38px; overflow: hidden; overflow-wrap: anywhere; text-wrap: pretty; }
#polpo-taskboard .tk-story-title:hover > span { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); text-underline-offset: 3px; }
#polpo-taskboard .tk-story-foot { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: auto; padding-left: 22px; }
/* what the story hangs under (taskboard.js storyParent), above the sprint: a quiet chip tinted in its parent's type colour,
   the feature's priority sign first, the name cut short with "…" */
#polpo-taskboard .tk-parent { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; max-width: calc(100% - 22px); height: 22px; margin-left: 22px; padding: 0 8px 0 6px;
  border-radius: 6px; background: color-mix(in srgb, var(--parent-color, var(--text)) 12%, transparent); color: var(--text-2); font-size: 11.5px; font-weight: 600; line-height: 22px; }
#polpo-taskboard .tk-parent > .polpo-type-glyph { width: 12px; height: 12px; }
#polpo-taskboard .tk-parent > .polpo-prio-bars { width: 13px; height: 13px; }
#polpo-taskboard .tk-parent-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* who works on the story: their avatars at the foot's right end (names in the tooltip), or an empty one */
#polpo-taskboard .tk-story-who { display: inline-flex; flex: none; align-items: center; margin-left: auto; }
#polpo-taskboard .tk-story-who .polpo-st-avatar { font-size: 9.5px; }
#polpo-taskboard .tk-story-who.is-stack .polpo-st-avatar + .polpo-st-avatar { margin-left: -8px; }
#polpo-taskboard .tk-loose-title { padding-top: 2px; font-size: 13px; font-weight: 600; color: var(--text-2); }
/* "+ Nieuwe taak" at the foot of an open row's tile in the column its task lands in (Azure "+ New item"): always visible there,
   never only on hover (touch and the keyboard must find it too); it opens the task form (task-form.js) */
#polpo-taskboard .tk-add { display: flex; align-items: center; gap: 6px; width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 3px; background: transparent; color: var(--text-2);
  font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background var(--dur-fast, 120ms), transform var(--dur-press, 110ms) var(--spring, ease-out); }
#polpo-taskboard .tk-add:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
#polpo-taskboard .tk-add:active { transform: scale(.98); }
#polpo-taskboard .tk-add svg { width: 12px; height: 12px; flex: none; color: var(--brand-text); }
#polpo-taskboard .tk-cards + .tk-add { margin-top: 8px; }
#polpo-taskboard :is(.tk-fold, .tk-story-title, .tk-add, .tk-sprint):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* the story's sprint: a quiet chip in the foot that opens "Naar sprint…" (editors, boards with sprints); plain text for
   anyone else */
#polpo-taskboard .tk-sprint { display: inline-flex; flex: none; align-items: center; gap: 4px; max-width: 120px; height: 22px; padding: 0 7px 0 5px; border: 0; border-radius: 6px;
  background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-2); font-size: 11.5px; font-weight: 600; line-height: 22px; cursor: pointer;
  transition: background var(--dur-fast, 120ms), transform var(--dur-press, 110ms) var(--spring, ease-out); }
#polpo-taskboard .tk-sprint svg { width: 12px; height: 12px; flex: none; color: var(--text-3); }
#polpo-taskboard .tk-sprint > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#polpo-taskboard .tk-sprint.is-none { color: var(--text-3); font-weight: 500; }
#polpo-taskboard button.tk-sprint:hover, #polpo-taskboard .tk-sprint[aria-expanded="true"] { background: var(--btn, var(--surface-2)); color: var(--text); }
#polpo-taskboard button.tk-sprint:active { transform: scale(.98); }
#polpo-taskboard .tk-sprint.is-static { cursor: default; }
.tk-sprint-menu .polpo-prio-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
/* cells: every story x column its own tile (Azure: each story has its own lane per column), a flat tint of
   the page with 4px between tiles. The gap is a margin inside the grid track, so no column grows; the
   first column keeps 4px from the story column. The cards stack with the Pipeline's 8px rhythm; a folded
   row only says how many. */
#polpo-taskboard .tk-cell { margin: 0 0 4px 4px; padding: 8px; border-radius: 3px; background: color-mix(in srgb, var(--text) 4%, var(--bg)); transition: background 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms cubic-bezier(.2, .8, .2, 1); }
#polpo-taskboard .tk-cards { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
#polpo-taskboard .tk-row.is-closed > .tk-cell { padding-top: 6px; padding-bottom: 6px; }
#polpo-taskboard .tk-cell-count { display: inline-block; padding: 3px 4px; font-size: 12px; font-weight: 600; color: var(--text-3); }
/* the stories of one feature stand together (taken-core.js groupByParent): a little more room, 12px instead of
   4px, above the first row of the next group */
#polpo-taskboard .tk-row.is-group-start { margin-top: 8px; }
/* a task card in a cell: the full variant on a card surface; its column already says the status, so the
   status button is a quiet "..." that shows on hover and focus (the keyboard way to move a task) */
#polpo-taskboard .polpo-st-row.is-full { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(var(--shadow-ink), .04); padding: 8px 10px 7px; }
#polpo-taskboard .polpo-st-row.is-full[draggable="true"] { cursor: grab; }
#polpo-taskboard .polpo-st-row.is-full .polpo-st-status { opacity: 0; transition: opacity var(--dur-fast, 120ms); }
#polpo-taskboard .polpo-st-row.is-full:hover .polpo-st-status, #polpo-taskboard .polpo-st-row.is-full .polpo-st-status:focus-visible,
#polpo-taskboard .polpo-st-row.is-full .polpo-st-status[aria-expanded="true"] { opacity: 1; }
#polpo-taskboard .polpo-st-row.is-full .polpo-st-status svg { width: 16px; height: 16px; }
#polpo-taskboard .polpo-st-row.is-full .polpo-st-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#polpo-taskboard .polpo-st-row.is-full.is-done { opacity: .72; }
#polpo-taskboard .polpo-st-row.is-dragging { opacity: .4; }
/* dragging a task: its own row's cells take a soft brand tint (the one under the pointer a little more),
   every other row dims and refuses */
#polpo-taskboard .tk-board.is-dragging .tk-row:not(.tk-head):not(.is-source) { opacity: .4; cursor: not-allowed; }
#polpo-taskboard .tk-board.is-dragging .tk-row.is-source > .tk-cell { background: color-mix(in srgb, var(--brand) 5%, transparent); }
#polpo-taskboard .tk-board.is-dragging .tk-row.is-source > .tk-cell.is-over { background: color-mix(in srgb, var(--brand) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 38%, transparent); }
#polpo-taskboard .tk-empty { max-width: 560px; margin: 8px 0 0; padding: 16px 20px; border-radius: var(--r-md); background: var(--surface); color: var(--text-3); font-size: 13px; line-height: 20px; box-shadow: inset 0 0 0 1px var(--border); }
@media (prefers-reduced-motion: reduce) {
  #polpo-taskboard :is(.tk-row, .tk-cell, .tk-fold svg, .tk-fold, .tk-add, .tk-sprint) { transition: none; }
  #polpo-taskboard :is(.tk-fold, .tk-add, .tk-sprint):active { transform: none; }
}
/* 232px: room for a two-line title and the sprint */
/* the Pipeline keeps the board frame's 20px sides (the panel views drop them): 100vw - 24px made the page 16px wider than the screen */
@media (max-width: 760px) { #polpo-taskboard { --tk-story: 232px; --tk-min: 196px; } }

/* ---- "Nieuwe taak" (task-form.js): the workspace drawer of "Nieuw werkitem", with the task's fields ----
   Every field as the drawer's own (label above, 12px/600); two or three side by side where they belong
   together, one column on a phone. Labels are chips that turn brand when chosen; a field's error sits
   right under it, the save error above the buttons. */
.polpo-task-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.polpo-task-form legend { margin: 0 0 8px; padding: 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.polpo-task-form .tf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.polpo-task-form .tf-field > label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.polpo-task-form .tf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.polpo-task-form .tf-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.polpo-task-form :is(input, select):not([type="checkbox"]) { height: 40px; padding-block: 0; }
.polpo-task-form textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.polpo-task-form [aria-invalid="true"] { border-color: var(--danger) !important; }
.polpo-task-form .tf-field-error { margin: 0; font-size: 12px; line-height: 16px; color: var(--danger-ink); }
.polpo-task-form .tf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.polpo-task-form .tf-chip { position: relative; display: inline-flex; flex-direction: row; gap: 0; font-size: 12.5px; font-weight: 600; }
.polpo-task-form .tf-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.polpo-task-form .tf-chip span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill, 99px);
  background: var(--surface); color: var(--text-2); transition: background var(--dur-fast, 120ms), border-color var(--dur-fast, 120ms), color var(--dur-fast, 120ms); }
.polpo-task-form .tf-chip:hover span { border-color: var(--border-strong); color: var(--text); }
.polpo-task-form .tf-chip input:checked + span { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); background: var(--brand-soft); color: var(--brand-text); }
.polpo-task-form .tf-chip input:checked + span::before { content: "✓"; font-size: 11px; }
.polpo-task-form .tf-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.polpo-task-form button.tf-chip-add { min-height: 30px; height: 30px; padding: 0 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-pill, 99px); background: transparent;
  color: var(--text-2); font-size: 12.5px; }
.polpo-task-form button.tf-chip-add:hover { border-style: solid; color: var(--text); }
.polpo-task-form .tf-new-label { margin-top: 8px; }
.polpo-task-form .tf-new-label + .tf-field-error { margin-top: 6px; }
.polpo-task-form .tf-error { padding: 10px 12px; border-radius: var(--r-sm); background: var(--danger-soft); }
@media (max-width: 560px) { .polpo-task-form :is(.tf-row, .tf-row-3) { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .polpo-task-form .tf-chip span { transition: none; } }