/* workstory.js: the detail a Work page row or card opens in place — the
 * story hero after the reference Work Graph: the ladder (workstream › goal
 * › milestone › task, nodes joined by flowing connector edges, the item's
 * own node ringed "you are here"), prev/next through the siblings, one
 * plain-English line, the lifecycle strip (planned › being built › finished
 * › accepted, the reached stages filled, only the item's own status word
 * under its stage), and the facts of the item's kind, the chats wide. Under
 * the goal's story: its milestone rows, each with its status strip and its
 * weight or share of the goal, opening in place to its task rows (the
 * agent, the share, the deliverables) and to its own detail. Tokens only;
 * motion respects reduced-motion. */

.work-detail { margin: 0 0 var(--sv-space-3); padding: var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface); }

.work-story { display: grid; gap: var(--sv-space-3); }
.work-story-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-space-2); }
.work-story-kind { color: var(--sv-ink-tertiary); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; }
.work-sibs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1); }
.work-sibs a { min-height: 44px; }
.work-sibs-where { padding: 0 var(--sv-space-1); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }

/* ---- the status strip: done, running, planned ---- */
.work-strip { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--sv-surface-sunken); }
.work-strip > span { display: block; height: 100%; }
.work-strip-done { background: var(--ws-working); }
.work-strip-running { background: var(--sv-attention); }
.work-strip-planned { background: var(--sv-hairline); }

/* A row's chevron, turning with its aria-expanded. */
.work-chev { flex: none; width: 14px; height: 14px; color: var(--sv-ink-tertiary); transition: transform var(--sv-dur-fast) var(--sv-ease-out); }
[aria-expanded="true"] > .work-chev { transform: rotate(90deg); }

/* ---- the ladder ---- */
.work-ladder { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 2px 0 4px; }
.work-node {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 3px;
  min-width: 8.5rem;
  max-width: 18rem;
  padding: 10px 12px;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-raised);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--sv-dur-fast) var(--sv-ease-out);
}
a.work-node:hover { border-color: var(--sv-hairline-strong); background: var(--ws-hover); }
.work-node.here { border-color: var(--ws-working); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-working) 20%, transparent); background: var(--sv-surface); }
.work-node.ghost { border-style: dashed; opacity: 0.85; }
.work-node-kind { color: var(--sv-ink-tertiary); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; }
.work-node-name { font-weight: 600; font-size: 0.875rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work-node-meta { overflow: hidden; color: var(--sv-ink-tertiary); font-size: 0.75rem; white-space: nowrap; text-overflow: ellipsis; }
.work-node-bar { height: 4px; margin-top: 2px; overflow: hidden; border-radius: 999px; background: var(--sv-surface-sunken); }
.work-node-bar > span { display: block; height: 100%; width: var(--w, 0%); background: var(--ws-working); }
.work-edge { position: relative; flex: 0 0 2rem; align-self: center; height: 2px; background: var(--sv-hairline-strong); }
.work-edge::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 6px solid var(--sv-hairline-strong); }
.work-edge i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 999px; background: var(--ws-working); animation: work-flow 1.6s linear infinite; animation-delay: calc(var(--i, 0) * -400ms); }
@keyframes work-flow { from { left: -4px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(2rem - 4px); opacity: 0; } }

/* ---- the lifecycle strip ---- */
.work-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.work-stage { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 14px; }
.work-stage-dot { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--sv-hairline-strong); border-radius: 999px; background: var(--sv-surface-raised); color: var(--sv-surface); }
.work-stage-dot .icon { width: 12px; height: 12px; }
.work-stage.past .work-stage-dot { border-color: var(--ws-working); background: var(--ws-working); color: var(--sv-surface); }
.work-stage.now .work-stage-dot { border-color: var(--ws-working); }
.work-stage.now .work-stage-dot i { width: 10px; height: 10px; border-radius: 999px; background: var(--ws-working); }
.work-stage-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.work-stage-text b { font-size: var(--ui-text); }
.work-stage-sub { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow-wrap: anywhere; }
.work-stage.now .work-stage-sub { color: var(--ws-working-ink); font-weight: 500; }
.work-stage.todo .work-stage-text b { color: var(--sv-ink-tertiary); font-weight: 500; }
.work-stage-line { position: absolute; left: 28px; right: 6px; top: 10px; height: 2px; background: var(--sv-hairline); }
.work-stage.past .work-stage-line { background: var(--ws-working); }

/* ---- the line and the facts ---- */
.work-line { margin: 0; max-width: 75ch; color: var(--sv-ink-secondary); font-size: var(--ui-text); line-height: 1.55; overflow-wrap: anywhere; }
.work-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--sv-space-2); }
.work-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface-raised); }
.work-fact.wide { grid-column: 1 / -1; }
.work-fact-label { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.work-fact-value { font-size: 1.25rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.work-fact-value .track-face { font-size: var(--ui-text); }
.work-fact-sub { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow-wrap: anywhere; }
.work-fact-value .track-kpi { min-width: 12rem; }
.work-fact-value .track-kpi-words b { font-size: 1rem; }
.work-fact-value .work-owner { min-height: 44px; }
.work-fact-bar { height: 5px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: var(--sv-surface-sunken); }
.work-fact-bar > span { display: block; height: 100%; width: var(--w, 0%); background: var(--ws-working); }
.work-deliverables { display: flex; flex-wrap: wrap; gap: 4px var(--sv-space-2); font-size: var(--ui-text); }
.work-none { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }

/* ---- the goal's milestone rows, and their task rows ---- */
.work-milestones, .work-tasks { margin: var(--sv-space-3) 0 0; padding: 0; list-style: none; }
.work-tasks { padding: 0 0 var(--sv-space-2) var(--sv-space-4); border-left: 2px solid var(--sv-surface-dim); margin-left: var(--sv-space-4); }
.work-ms, .work-task { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.work-ms:first-child { border-top: 0; }
.work-row { display: flex; align-items: baseline; gap: var(--sv-space-2); width: 100%; min-height: 44px; padding: var(--sv-space-2) 0; border: 0; background: none; color: var(--sv-ink); text-align: left; font: inherit; }
.work-row:hover { background: var(--ws-hover); }
.work-row-main { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sv-space-2); min-width: 0; }
.work-row-kind { flex: none; width: 4.75rem; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 400; }
.work-row-title { min-width: 0; font-size: var(--ui-text); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.work-row-meta { display: flex; flex: 1 1 12rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px var(--sv-space-3); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.work-row-meta .work-strip { width: 100%; max-width: 9rem; }
.work-row-meta .track-agent .track-face-name { color: var(--sv-ink-secondary); }
.work-count { font-variant-numeric: tabular-nums; }
.work-row-deliverables { display: inline-flex; flex-wrap: wrap; gap: 4px var(--sv-space-2); justify-content: flex-end; }
.work-ms[data-tone="done"] .work-row-title, .work-task[data-tone="done"] .work-row-title { color: var(--sv-ink-tertiary); }
.work-task[data-tone="off"] .work-row-title { color: var(--sv-ink-tertiary); text-decoration: line-through; }
.work-ms.open > .work-row, .work-task.open > .work-row { background: var(--sv-surface-sunken); }
.work-ms > .work-story, .work-task > .work-story { margin: var(--sv-space-2) 0 var(--sv-space-2) calc(4.75rem + var(--sv-space-2)); }
.work-ms > .work-tasks, .work-task > .work-tasks { margin-top: var(--sv-space-2); }
.work-none { padding: var(--sv-space-2) 0; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .work-facts { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  .work-node { min-width: 8rem; }
  .work-detail { padding: var(--sv-space-2); }
  .work-row-meta { flex-basis: 100%; justify-content: flex-start; padding-left: calc(4.75rem + var(--sv-space-2)); }
  .work-row-deliverables { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .work-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .work-stage:nth-child(2) .work-stage-line, .work-stage:nth-child(4) .work-stage-line { display: none; }
  .work-tasks { margin-left: var(--sv-space-2); padding-left: var(--sv-space-2); }
  .work-row { flex-wrap: wrap; align-items: flex-start; }
  .work-row-meta { padding-left: 0; }
  .work-row-meta .work-strip { max-width: none; }
  .work-ms > .work-story, .work-task > .work-story { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .work-edge i, .work-page.busy .work-reload .icon { animation: none; }
}