/* Own D-Book asset-library V1; no third-party source assets are referenced. */
.dbook-task-asset {
  --dbook-task-asset-fill: #dbeafe;
  --dbook-task-asset-line: #172554;
  --dbook-task-asset-accent: #7c3aed;
  --dbook-task-asset-cutout: #ffffff;
  display: inline-grid;
  inline-size: min(100%, 7rem);
  aspect-ratio: 1;
  position: relative;
  place-items: center;
  border-radius: .5rem;
  outline-offset: .25rem;
}

.dbook-task-asset__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.dbook-task-asset__fill { fill: var(--dbook-task-asset-fill); stroke: var(--dbook-task-asset-line); stroke-linejoin: round; stroke-width: 5; }
.dbook-task-asset__line { fill: none; stroke: var(--dbook-task-asset-line); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.dbook-task-asset__accent { fill: var(--dbook-task-asset-accent); stroke: var(--dbook-task-asset-line); stroke-linejoin: round; stroke-width: 4; }
.dbook-task-asset__cutout { fill: var(--dbook-task-asset-cutout); stroke: var(--dbook-task-asset-line); stroke-width: 4; }
.dbook-task-asset__state-glyph { fill: none; stroke: var(--dbook-task-asset-line); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }

.dbook-task-asset[data-label]::after {
  background: #111827;
  border-radius: .25rem;
  color: #ffffff;
  content: attr(data-label);
  font-size: .75rem;
  inset-block-start: calc(100% + .35rem);
  inset-inline-start: 50%;
  line-height: 1.25;
  opacity: 0;
  padding: .3rem .45rem;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity .15s ease;
  white-space: nowrap;
  z-index: 2;
}

.dbook-task-asset:is(:hover, :focus-visible)::after { opacity: 1; }
.dbook-task-asset:focus-visible { outline: 3px solid currentColor; }
.dbook-task-asset[data-state="active"] { --dbook-task-asset-fill: #dcfce7; }
.dbook-task-asset[data-state="target"] { --dbook-task-asset-fill: #fef3c7; }
.dbook-task-asset[data-state="blocked"] { --dbook-task-asset-fill: #fee2e2; }
.dbook-task-asset[data-state="inactive"] { filter: grayscale(1); opacity: .72; }

@media (prefers-reduced-motion: reduce) {
  .dbook-task-asset[data-label]::after { transition: none; }
}