/* activityworkshop.js: the Workshop meeting panel — a drawer over the page
 * (a full-screen sheet on phones), the meeting's head (kind, title, the
 * report link, the status line), then ventures → goals → nodes → items, the
 * picker (trackpicker.js's own track.css), and the Plan drawer's "Workshop
 * meetings" section (one button per meeting). Pills and dots reuse
 * plandetail.css's. */

.aw-drawer {
  inset: 0 0 0 auto;
  width: min(46rem, 100vw);
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-left: var(--sv-hairline-w) solid var(--sv-hairline);
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  box-shadow: var(--sv-shadow-lg);
  animation: aw-drawer-in var(--sv-dur-base) var(--sv-ease-out);
}
.aw-drawer:not([open]) { display: none; }
.aw-drawer::backdrop { background: rgb(0 0 0 / 0.28); }
@keyframes aw-drawer-in { from { opacity: 0; transform: translateX(32px); } }

.aw-head { display: grid; gap: var(--sv-space-3); padding: var(--sv-space-4) var(--sv-space-5); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.aw-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-2); margin-right: calc(-1 * var(--sv-space-2)); }
.aw-kind { display: inline-flex; align-items: center; gap: 6px; color: var(--sv-ink-tertiary); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; }
.aw-title { margin: 0; font-size: var(--sv-text-h4); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.aw-report { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.aw-report .icon { width: 12px; height: 12px; }
.aw-status { margin: 0; color: var(--sv-ink-secondary); font-size: var(--ui-meta); line-height: 1.45; }
.aw-status:empty { display: none; }

.aw-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sv-space-5) var(--sv-space-8); }
.aw-body > * { scroll-margin: var(--sv-space-4); }
.aw-none { margin: var(--sv-space-4) 0 0; color: var(--sv-ink-tertiary); font-size: var(--ui-text); }

/* ---- ventures → goals → nodes ---- */
.aw-venture { margin: var(--sv-space-5) 0 var(--sv-space-2); font-size: var(--ui-meta); font-weight: 600; color: var(--sv-ink-secondary); overflow-wrap: anywhere; }
.aw-body .aw-venture:first-of-type { margin-top: var(--sv-space-3); }
.aw-node { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sv-space-3); min-width: 0; padding: var(--sv-space-2) 0; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.aw-node-kind { flex: none; width: 4.75rem; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.aw-node-title { flex: 1 1 12rem; min-width: 0; color: var(--sv-ink); font-weight: 500; overflow-wrap: anywhere; }
.aw-node-title:hover { text-decoration: underline; }
.aw-node-meta { flex: none; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }

/* ---- one item ---- */
.aw-item { display: grid; gap: var(--sv-space-2); min-width: 0; margin: 0 0 var(--sv-space-2) var(--sv-space-2); padding: var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface); }
.aw-item[data-state="dismissed"] { opacity: 0.6; }
.aw-item-top { display: flex; align-items: center; gap: var(--sv-space-2); min-width: 0; }
.aw-verb { display: inline-flex; align-items: center; flex: none; padding: 1px 8px; border-radius: 999px; background: var(--sv-surface-sunken); color: var(--sv-ink-secondary); font-size: 0.75rem; font-weight: 500; line-height: 1.5; }
.aw-verb[data-verb="created"], .aw-verb[data-verb="completed"] { background: color-mix(in srgb, var(--ws-working) 14%, transparent); color: var(--ws-working-ink); }
.aw-verb[data-verb="changed"] { background: color-mix(in srgb, var(--sv-attention) 14%, transparent); color: var(--sv-attention); }
.aw-item-text { margin: 0; color: var(--sv-ink); font-size: var(--ui-text); line-height: 1.5; overflow-wrap: anywhere; }
.aw-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sv-space-3); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.aw-estimate { color: var(--sv-ink-secondary); cursor: help; }

.aw-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.aw-source { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.aw-source .icon { width: 12px; height: 12px; }
.aw-source a { color: inherit; text-decoration: underline; text-decoration-color: var(--sv-hairline-strong); }
.aw-source a:hover { color: var(--sv-ink-secondary); }

.aw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); }
.aw-actions .icon { width: 12px; height: 12px; }

/* ---- find the work ---- */
.aw-find { display: grid; gap: var(--sv-space-2); padding: var(--sv-space-3); border: var(--sv-hairline-w) dashed var(--sv-hairline-strong); border-radius: var(--sv-radius); background: var(--sv-surface-raised); font-size: var(--ui-meta); }
.aw-find-reading { margin: 0; color: var(--sv-ink-tertiary); }
.aw-find-why { margin: 0; color: var(--sv-ink-secondary); line-height: 1.45; }
.aw-find-none { margin: 0; color: var(--sv-ink-tertiary); }
.aw-find-done { margin: 0; color: var(--ws-working-ink); line-height: 1.45; }
.aw-find-open { justify-self: start; }
.aw-candidate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); min-width: 0; padding: var(--sv-space-2) var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface); }
.aw-candidate-name { flex: 1 1 10rem; min-width: 0; color: var(--sv-ink); font-weight: 500; overflow-wrap: anywhere; }
.aw-candidate-why { flex: 1 1 100%; color: var(--sv-ink-tertiary); line-height: 1.45; }

/* ---- the picker, under the items ---- */
.aw-body ~ * .track-picker, .aw-drawer .track-picker { margin: var(--sv-space-4) 0 0; padding: 0; }

/* ---- the Plan drawer's "Workshop meetings" ---- */
.aw-plan { margin: var(--sv-space-4) 0 0; }
.aw-plan-meeting { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0 var(--sv-space-2) var(--sv-space-2) 0; padding: 0 var(--sv-space-3); font-size: var(--ui-meta); }
.aw-plan-meeting .icon { width: 12px; height: 12px; }

/* ---- phones: a full-screen sheet ---- */
@media (max-width: 640px) {
  .aw-drawer { inset: 0; width: 100vw; height: 100dvh; border-left: 0; animation-name: aw-sheet-in; }
  .aw-head { padding: var(--sv-space-3) var(--sv-space-4); }
  .aw-body { padding: 0 var(--sv-space-4) var(--sv-space-8); }
  .aw-item { margin-left: 0; }
  .aw-node-kind { width: auto; }
}
@keyframes aw-sheet-in { from { opacity: 0; transform: translateY(24px); } }