/* Sub-items and dependencies (ext/subitems.js): progress, the Blocked badge, indenting, linking timeline bars */

.sub-progress { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; vertical-align: middle; }
.sub-progress.all { color: var(--c-green, #448361); }
.sub-bar { display: inline-block; width: 34px; height: 5px; border-radius: 3px; background: var(--bg-active); overflow: hidden; }
.sub-bar i { display: block; height: 100%; background: var(--c-green, #448361); border-radius: 3px; }
.sub-blocked { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 4px;
  color: var(--c-red, #d44c47); background: color-mix(in srgb, var(--c-red, #d44c47) 12%, transparent); white-space: nowrap; vertical-align: middle; cursor: help; }
.sub-blocked::before { content: '⛔'; font-size: 10px; }
.card-title .sub-progress, .card-title .sub-blocked, .dblist-title .sub-progress, .dblist-title .sub-blocked { margin-left: 4px; }

/* indenting by drag: the row it would go under */
.tbl .tr.sub-drop-into { box-shadow: inset 0 0 0 2px var(--accent); background: var(--bg-hover); }
.mi-hint { margin-left: auto; padding-left: 12px; }

/* the timeline */
.dbx-tl-item.sub-is-blocked { box-shadow: inset 3px 0 0 var(--c-red, #d44c47), 0 0 0 1px var(--border); }
.dbx-tl-label .sub-blocked { padding: 2px 3px; font-size: 0; gap: 0; background: none; } /* just the sign: bars are narrow */
.dbx-tl-label .sub-blocked::before { font-size: 10px; }
.sub-link { position: absolute; right: -14px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%; background: var(--bg-elev);
  box-shadow: 0 0 0 1.5px var(--accent); cursor: crosshair; opacity: 0; z-index: 4; }
.dbx-tl-item:hover .sub-link, .sub-link:hover, .sub-linking .sub-link { opacity: 1; }
.sub-link:hover { background: var(--accent); }
.sub-link-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 5; }
.sub-link-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.sub-linking { cursor: crosshair; user-select: none; }
.dbx-tl-lane.sub-link-target { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* a row's page */
.sub-rp { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; font-size: 14px; }
.sub-rp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sub-rp-label { color: var(--fg-muted); min-width: 120px; }
.sub-rp-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px; border-radius: 4px; background: var(--bg-hover); font-size: 13px; }
.sub-rp-chip a { color: inherit; text-decoration: none; }
.sub-rp-chip a:hover { text-decoration: underline; }
.sub-rp-x { border: 0; background: none; color: var(--fg-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 3px; }
.sub-rp-x:hover { background: var(--bg-active); color: var(--fg); }

/* the Today page */
.today-item.sub-is-blocked .today-title { opacity: .7; }
.today-meta .sub-blocked, .today-meta .sub-progress { margin-right: 6px; }