/* Sprintinzicht (insight.js): the "Inzicht" ghost button beside the sprint picker and the calm side
   panel with the burndown (open tasks per day) and the velocity (finished stories per sprint). Inline
   SVG on Polpo tokens only: actual = --brand with a soft brand area, ideal = --text-3 dashed, weekends a
   faint band, axis labels 11px tabular; no chart chrome of its own (no frame, no heavy grid). */
#polpo-view-panel .polpo-ins-btn { min-height: 0; letter-spacing: normal; }
.polpo-ins-btn .ado-icon { width: 16px; height: 16px; flex: none; }

/* One Inzicht entry per screen: the chart icon in the board header stays only where the command bar has
   no "Inzicht" button of its own (Sprint, Roadmap, Archief, Backlog above the Stories level). On the Sprint
   tab the view panel is only hidden, the Backlog's button still inside it: that one does not count. */
html[data-polpo-view]:has(#polpo-view-panel:not([hidden]) [data-insight-open]) #polpo-insight-hdr { display: none; }

/* the panel starts under the board header (roadmap.js measures it: --polpo-roadmap-chrome), so nothing of
   the header (the avatar at the top right) peeks out above it */
dialog.polpo-insight { position: fixed; inset: calc(var(--polpo-roadmap-chrome, 48px) + 8px) 12px 12px auto; width: min(600px, calc(100vw - 24px));
  height: calc(100dvh - var(--polpo-roadmap-chrome, 48px) - 20px); max-width: none; max-height: none;
  margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg, 20px); background: var(--surface); color: var(--text);
  box-shadow: var(--e3); overflow: hidden; font-family: var(--font, inherit); }
dialog.polpo-insight::backdrop { background: color-mix(in srgb, var(--scrim, rgba(16, 16, 22, .38)) 60%, transparent); }
dialog.polpo-insight[open] { animation: polpo-ins-in var(--dur-enter, 230ms) var(--spring, ease-out); }
@keyframes polpo-ins-in { from { opacity: 0; transform: translateX(12px); } }
.polpo-insight * { box-sizing: border-box; }
.polpo-ins-frame { display: flex; flex-direction: column; height: 100%; }
.polpo-ins-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.polpo-ins-titles { min-width: 0; }
.polpo-insight h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; color: var(--text); }
.polpo-ins-sub { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.polpo-ins-close { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: var(--r-sm, 10px);
  background: transparent; color: var(--text-2); cursor: pointer; transition: transform var(--dur-press, 110ms) var(--spring, ease-out); }
.polpo-ins-close:hover { background: var(--btn); color: var(--text); }
.polpo-ins-close:active { transform: scale(.96); }
.polpo-ins-close .ado-icon { width: 18px; height: 18px; }
.polpo-insight :is(button, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.polpo-ins-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 24px; overscroll-behavior: contain; }

.polpo-ins-lead { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.polpo-ins-muted { margin: 4px 0 0; font-size: 12px; font-weight: 500; line-height: 17px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.polpo-ins-loading { padding: 32px 0; font-size: 13px; color: var(--text-3); }
.polpo-ins-block { margin-top: 22px; }
.polpo-ins-blockhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.polpo-ins-blockhead h3 { margin: 0; font-size: 13px; font-weight: 650; color: var(--text); }
.polpo-ins-blockhead .polpo-ins-muted { margin: 0; text-align: right; }
.polpo-ins-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--text-3); }
.polpo-ins-key { display: inline-block; width: 16px; height: 0; margin-left: 8px; border-top: 2px solid var(--brand); }
.polpo-ins-key.is-actual { margin-left: 0; }
.polpo-ins-key.is-ideal { border-top: 2px dashed var(--text-3); }

.polpo-ins-chart { position: relative; }
.polpo-ins-svg { display: block; width: 100%; height: auto; overflow: visible; font-variant-numeric: tabular-nums; }
.polpo-ins-axis { font-size: 11px; font-weight: 500; fill: var(--text-3); }
.polpo-ins-base { stroke: var(--border-strong); stroke-width: 1; }
.polpo-ins-guide { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.polpo-ins-weekend { fill: color-mix(in srgb, var(--text) 4%, transparent); }
.polpo-ins-ideal { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linecap: round; }
.polpo-ins-area { fill: color-mix(in srgb, var(--brand) 12%, transparent); }
.polpo-ins-actual { fill: none; stroke: var(--brand); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.polpo-ins-dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.polpo-ins-today { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 2 3; }
.polpo-ins-today-label { font-weight: 600; }
.polpo-ins-hit { fill: transparent; }
.polpo-ins-hit.is-on { fill: color-mix(in srgb, var(--brand) 6%, transparent); }
.polpo-ins-tip { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; min-width: 112px; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px); background: var(--surface); box-shadow: var(--e2); font-size: 12px; line-height: 16px; color: var(--text-2); pointer-events: none;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.polpo-ins-tip[hidden] { display: none; }
.polpo-ins-tip strong { font-weight: 650; color: var(--text); }
.polpo-ins-tip .polpo-ins-muted { margin: 0; }

.polpo-ins-barfill { fill: color-mix(in srgb, var(--brand) 78%, var(--surface)); }
.polpo-ins-bar.is-current .polpo-ins-barfill { fill: url(#polpo-ins-hatch); stroke: var(--brand); stroke-width: 1; }
.polpo-ins-hatch-bg { fill: var(--brand-soft); }
.polpo-ins-hatch-line { stroke: color-mix(in srgb, var(--brand) 55%, transparent); stroke-width: 2.5; }
.polpo-ins-count { font-size: 12px; font-weight: 650; fill: var(--text-2); }
.polpo-ins-bar.is-current .polpo-ins-axis { fill: var(--brand-text); font-weight: 650; }

.polpo-ins-note { margin: 20px 0 0; padding: 9px 12px; border-radius: var(--r-sm, 10px); background: var(--surface-2); font-size: 12px; line-height: 17px; color: var(--text-2); }
.polpo-ins-note.is-error { background: var(--warn-soft); color: var(--warn-ink); }
.polpo-ins-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.polpo-ins-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 6px 0; }
.polpo-ins-empty p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.polpo-ins-primary { height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-sm, 10px); background: var(--brand); color: var(--on-brand, #fff); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: transform var(--dur-press, 110ms) var(--spring, ease-out); }
.polpo-ins-primary:hover { background: var(--brand-strong); }
.polpo-ins-primary:active { transform: scale(.98); }
/* the data as a table, for screen readers (and the e2e test) */
.polpo-ins-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* a short draw of the actual line (and the area and today's dot fading in); not with reduced motion */
.polpo-ins-draw.is-animated { stroke-dasharray: 1; animation: polpo-ins-draw 360ms var(--spring, ease-out) both; }
.polpo-ins-fade.is-animated { animation: polpo-ins-fade 280ms var(--spring, ease-out) 80ms both; }
@keyframes polpo-ins-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes polpo-ins-fade { from { opacity: 0; } }

@media (max-width: 640px) {
  dialog.polpo-insight { inset: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.polpo-insight[open], .polpo-ins-draw.is-animated, .polpo-ins-fade.is-animated { animation: none; }
  .polpo-ins-close, .polpo-ins-primary { transition: none; }
  .polpo-ins-close:active, .polpo-ins-primary:active { transform: none; }
}