/* workmodes.js: the Work page's Priorities grid and Hierarchy tree — after
 * the reference Work Graph's goals view (ref-workgraph styles.css
 * .prio-grid and .tree, read only): Priorities is a responsive grid of
 * workstream cards (two columns under 1100px, one under 640px), each
 * card's head the stream and its goal count, then one row per goal
 * (status dot, deep-linked title, owner, KPI, milestones). Hierarchy is
 * the tree: details/summary rows, the caret turning open, milestones
 * indented a level, task rows two levels down; 44px touch targets,
 * titles that wrap, nothing wider than the page. Tokens only. */

/* ---- Priorities: every workstream side by side ---- */
.work-prio { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sv-space-3); align-items: start; margin-top: var(--sv-space-3); }
.work-prio-col { border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-surface-raised); padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-2); }
.work-prio-head { display: flex; align-items: baseline; gap: var(--sv-space-2); padding-bottom: var(--sv-space-2); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.work-prio-head h3 { margin: 0; font-size: var(--sv-text-h4); font-weight: 600; }
.work-prio-count { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }
.work-prio-goal { min-height: 44px; padding: var(--sv-space-2) 0; cursor: pointer; }
.work-prio-goal + .work-prio-goal { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.work-prio-goal:hover .work-prio-name { text-decoration: underline; }
.work-prio-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--ui-text); }
.work-prio-name { flex: 1; min-width: 0; font-weight: 600; color: inherit; text-align: left; text-decoration: none; overflow-wrap: anywhere; }
.work-prio-meta { display: flex; flex-wrap: wrap; gap: 4px var(--sv-space-2); align-items: center; margin-top: 4px; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.work-prio-meta .track-kpi { gap: 2px; min-width: 7rem; }
.work-prio-meta .track-kpi-words b { font-size: var(--ui-meta); }
.work-prio-meta .track-kpi-period { font-size: 0.6875rem; }

/* ---- Hierarchy: the plan as a tree ---- */
.work-tree { margin-top: var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-surface-raised); font-size: var(--ui-text); }
.work-tree details { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.work-tree > details:first-child { border-top: 0; }
.work-tree summary { list-style: none; display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; gap: var(--sv-space-2); align-items: center; min-height: 44px; padding: var(--sv-space-2) var(--sv-space-3); cursor: pointer; }
.work-tree summary::-webkit-details-marker { display: none; }
.work-tree summary:hover { background: var(--ws-hover); }
.work-tree-caret { flex: none; width: 14px; height: 14px; color: var(--sv-ink-tertiary); transition: transform var(--sv-dur-fast) var(--sv-ease-out); }
.work-tree details[open] > summary .work-tree-caret { transform: rotate(90deg); }
.work-tree-kind { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 500; letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; }
.work-tree-title { min-width: 0; font-weight: 600; color: inherit; text-align: left; text-decoration: none; overflow-wrap: anywhere; }
.work-tree-title:hover { text-decoration: underline; }
.work-tree-right { display: flex; flex-wrap: wrap; gap: 4px var(--sv-space-2); align-items: center; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.work-tree-ms > summary { padding-left: calc(16px + var(--sv-space-4)); }
.work-tree-task { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; gap: var(--sv-space-2); align-items: center; min-height: 44px; padding: var(--sv-space-2) var(--sv-space-3); padding-left: calc(32px + var(--sv-space-4)); border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.work-tree-marker { width: 14px; height: 14px; }
.work-tree-task .track-agent .track-face-name { color: var(--sv-ink-secondary); }
.work-tree .work-owner { min-height: 32px; }

/* ---- phone ---- */
@media (max-width: 1100px) {
  .work-prio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .work-prio { grid-template-columns: minmax(0, 1fr); }
  .work-tree summary { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .work-tree summary .work-tree-kind { display: none; }
  .work-tree-task { padding-left: calc(16px + var(--sv-space-3)); }
}