/*
 * "Done means", compressed (shared/expectations.js): the bar's makeup as one
 * strip and a legend that filters, the few checks worth a look, then one
 * drill-down row per workstream. Flat rows on hairlines, never a card inside
 * a card. Each source has a glyph and a colour; the glyph's name is its label,
 * so colour is never the only thing that says it.
 */
:root {
  --xp-rule: #4d7c0f; --xp-type: #0b7a6b; --xp-learned: #7c3aed; --xp-suggested: #2563eb; --xp-drafted: #6b7280;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --xp-rule: #bfff00; --xp-type: #00c9a7; --xp-learned: #a78bfa; --xp-suggested: #60a5fa; --xp-drafted: #9aa190; }
}
:root[data-theme="dark"] { --xp-rule: #bfff00; --xp-type: #00c9a7; --xp-learned: #a78bfa; --xp-suggested: #60a5fa; --xp-drafted: #9aa190; }

.xp { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.xp [data-src="rule"], .xp-pips [data-src="rule"] { --xp-c: var(--xp-rule); }
.xp [data-src="artifact_type"], .xp-pips [data-src="artifact_type"] { --xp-c: var(--xp-type); }
.xp [data-src="learned"], .xp-pips [data-src="learned"] { --xp-c: var(--xp-learned); }
.xp [data-src="suggested"], .xp-pips [data-src="suggested"] { --xp-c: var(--xp-suggested); }
.xp [data-src="drafted"], .xp-pips [data-src="drafted"] { --xp-c: var(--xp-drafted); }
.xp-ic { display: block; flex: none; }
.xp-g { display: inline-grid; place-items: center; color: var(--xp-c, var(--ox-text-muted)); }
.xp-v { display: inline-grid; place-items: center; color: var(--ox-text-muted); }

/* Makeup: the strip is the bar at a glance; the legend names and filters it. */
.xp-mix { display: flex; flex-direction: column; gap: 8px; }
.xp-strip { display: flex; gap: 3px; height: 4px; margin-top: 2px; }
.xp-strip > span { border-radius: 999px; }
.xp-strip > span { background: var(--xp-c); min-width: 6px; }
.xp-legend { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 -8px; }
.xp-lg {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 9px 0 8px; border: 0; border-radius: 9px;
  background: none; color: var(--ox-text-2, var(--ox-text)); font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer;
}
.xp-lg b { font-weight: 650; color: var(--ox-text); font-variant-numeric: tabular-nums; }
.xp-lg span { color: var(--ox-text-muted); }
.xp-lg:hover { background: var(--ox-hover, rgba(127, 127, 127, 0.1)); }
.xp-lg[aria-pressed="true"] { background: var(--ox-hover, rgba(127, 127, 127, 0.12)); box-shadow: inset 0 0 0 1px var(--ox-border-strong, var(--ox-border)); }
.xp-lg[aria-pressed="true"] span { color: var(--ox-text-2, var(--ox-text)); }

/* Worth a look: the only part open by default. */
.xp-look { display: flex; flex-direction: column; min-width: 0; }
.xp-look[hidden] { display: none; }
.xp-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 2px; font-size: 12.5px; font-weight: 650; color: var(--ox-text); }
.xp-hn { font-weight: 400; color: var(--ox-text-muted); }
.xp-look:not([data-xp-view=""]) .xp-h { font-weight: 400; color: var(--ox-text-2, var(--ox-text)); }
.xp-look.is-calm .xp-h { font-weight: 600; }
.xp-h.is-filter { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.xp-edit { list-style: none; padding: 2px 0 0; }
.xp-edit .xp-clear { margin-left: -8px; }
.xp-clear {
  margin-left: auto; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--ox-text-2, var(--ox-text)); font: inherit; font-size: 12.5px; font-weight: 650;
}
.xp-clear:hover { background: var(--ox-hover, rgba(127, 127, 127, 0.1)); }

.xp-rows { list-style: none; margin: 0; padding: 0; }
.xp-rows[hidden] { display: none; }
.xp-r { display: grid; grid-template-columns: 16px minmax(0, 1fr) 16px; align-items: start; column-gap: 10px; padding: 8px 0; border-top: 1px solid var(--ox-border); }
.xp-rows > .xp-r:first-child { border-top: 0; }
.xp-r > .xp-g, .xp-r > .xp-v { height: 19px; }
.xp-rt { min-width: 0; font-size: 13px; line-height: 1.45; color: var(--ox-text); overflow-wrap: anywhere; }
.xp-rs { display: block; margin-top: 1px; font-size: 12px; color: var(--ox-text-muted); }
.xp-r.is-short { grid-template-columns: 16px minmax(0, 1fr) auto 16px; padding: 7px 0; }
.xp-who { font-size: 12px; color: var(--ox-text-muted); white-space: nowrap; line-height: 19px; }
/* New since the last bar: a dot on the source glyph, named for screen readers. */
.xp-r > .xp-g { position: relative; }
.xp-r[data-new] > .xp-g::after {
  content: ""; position: absolute; top: 1px; right: -4px; width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--ox-action-rgb, 191, 255, 0)); box-shadow: 0 0 0 2px var(--ox-panel-solid, var(--ox-panel, var(--ox-bg)));
}
.xp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xp-more { margin: 4px 0 0; font-size: 12px; color: var(--ox-text-muted); }

/* One row per workstream, like the initiative tree: who, the makeup in pips, the count. */
.xp-groups { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ox-border); }
.xp-grp { border-bottom: 1px solid var(--ox-border); }
.xp-grp:last-child { border-bottom: 0; }
.xp-gh {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto 16px; grid-template-areas: "f t p c v";
  align-items: center; column-gap: 10px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.xp-gh:hover .xp-gn { color: var(--ox-text); text-decoration: underline; text-decoration-color: var(--ox-border-strong, currentColor); text-underline-offset: 3px; }
.xp-face { grid-area: f; display: grid; place-items: center; }
.xp-all { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--ox-text-muted); box-shadow: inset 0 0 0 1px var(--ox-border-strong, var(--ox-border)); }
.xp-gt { grid-area: t; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.xp-gn { font-size: 13.5px; font-weight: 650; color: var(--ox-text-2, var(--ox-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.xp-gs { font-size: 12px; color: var(--ox-text-muted); white-space: nowrap; }
.xp-pips { grid-area: p; display: inline-flex; align-items: center; gap: 2px; vertical-align: 1px; }
.xp-pips i { width: 6px; height: 6px; border-radius: 2px; background: var(--xp-c); opacity: 0.45; }
.xp-pips i[data-look] { opacity: 1; }
.xp-pips b { margin-left: 3px; font-size: 11px; font-weight: 600; color: var(--ox-text-muted); }
.xp-gc { grid-area: c; font-size: 12.5px; color: var(--ox-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xp-gl { color: var(--ox-text-2, var(--ox-text)); font-weight: 600; }
.xp-chev { grid-area: v; display: grid; place-items: center; color: var(--ox-text-muted); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.xp-gh[aria-expanded="true"] .xp-chev { transform: rotate(180deg); }
.xp-grp > .xp-rows { padding: 0 0 8px 34px; }
.xp-inline .xp-pips, .xp-pips.is-inline { display: inline-flex; }

.xp-lg:focus-visible, .xp-gh:focus-visible, .xp-clear:focus-visible { outline: 2px solid var(--ox-focus, currentColor); outline-offset: 2px; border-radius: 8px; }

@media (max-width: 480px) {
  .xp-gh { grid-template-columns: 24px minmax(0, 1fr) auto 16px; grid-template-areas: "f t c v" ". p p ."; row-gap: 4px; }
  .xp-pips { justify-self: start; }
  .xp-grp > .xp-rows { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .xp-chev { transition: none; } }

/* The source as a word, where one line of text carries it (receipts). */
.xp-src {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  color: var(--ox-text-2, var(--ox-text)); background: rgba(127, 127, 127, 0.1);
}
.xp-src::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--xp-dot, var(--xp-drafted)); }
.xp-src[data-src="rule"] { --xp-dot: var(--xp-rule); }
.xp-src[data-src="artifact_type"] { --xp-dot: var(--xp-type); }
.xp-src[data-src="learned"] { --xp-dot: var(--xp-learned); }
.xp-src[data-src="suggested"] { --xp-dot: var(--xp-suggested); }
.xp-src[data-src="drafted"] { --xp-dot: var(--xp-drafted); }