/* observe.js: the Observe page (#/observe, #/observe/<venture>) and its
 * office-TV mode (?tv=1, body.observe-tv). Faces are plandetail.css, the
 * status chip work.css. Tiles, cards, lanes and feed items are fill steps
 * off the page, no border or edge bar; a state is a coloured word. Tokens
 * only; the TV mode scales the type and hides the app's chrome. */

.transcript:has(> .observe-page) { --reading: 96rem; }
.observe-page { display: grid; gap: var(--sv-space-3); }

/* ---- the head ---- */
.observe-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sv-space-2) var(--sv-space-4); }
.observe-titles { display: grid; gap: 4px; min-width: 0; }
.observe-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--sv-space-2); margin-left: calc(-1 * var(--sv-space-2)); color: var(--sv-ink-secondary); text-decoration: none; }
.observe-name { margin: 0; font-size: var(--sv-text-h3); font-weight: 600; line-height: 1.2; }
.observe-sub { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.observe-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.observe-tools > a, .observe-tools > button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--sv-space-3); text-decoration: none; }
.observe-clock { color: var(--sv-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.observe-stale { margin: 0; padding: var(--sv-space-2) var(--sv-space-3); border-radius: var(--sv-radius); background: color-mix(in srgb, var(--sv-attention) 14%, transparent); color: var(--sv-ink); font-size: var(--ui-meta); }

/* ---- the count tiles ---- */
.observe-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sv-space-2); }
.observe-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--sv-space-2) var(--sv-space-3); border-radius: var(--sv-radius); background: var(--sv-fill-2); }
.observe-tile[data-tone="good"] .observe-tile-value { color: var(--ws-working-ink); }
.observe-tile[data-tone="review"] .observe-tile-value { color: var(--sv-attention); }
.observe-tile-label { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 500; letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; }
.observe-tile-value { font-size: var(--sv-text-h4); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.observe-tile-sub { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow-wrap: anywhere; }

/* ---- the portfolio grid ---- */
.observe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--sv-space-3); }
.observe-card { display: flex; flex-direction: column; gap: var(--sv-space-2); min-width: 0; padding: var(--sv-space-3); border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-fill-2); color: inherit; text-decoration: none; transition: background var(--sv-dur-instant) var(--sv-ease-out); }
a.observe-card:hover { background: var(--sv-fill-3); }
.observe-card.is-reading { opacity: 0.7; }
.observe-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-2); }
.observe-card-name { margin: 0; font-size: var(--sv-text-h4); font-weight: 600; overflow-wrap: anywhere; }
.observe-card-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sv-space-2); }
.observe-num { display: grid; gap: 0; min-width: 0; }
.observe-num > b { font-size: var(--sv-text-h3); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.observe-num > span { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); line-height: 1.25; }
.observe-num[data-tone="good"] > b { color: var(--ws-working-ink); }
.observe-num[data-tone="review"] > b { color: var(--sv-attention); }
.observe-card-lines { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px var(--sv-space-2); color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.observe-card-lines > span:first-child, .observe-card-lines > .observe-wait { grid-column: 1 / -1; }
.observe-bar { height: 6px; border-radius: 999px; background: var(--sv-fill-3); overflow: hidden; }
.observe-bar-fill { display: block; height: 100%; background: var(--sv-ink-secondary); }
.observe-wait { color: var(--sv-attention); font-size: var(--ui-meta); }
.observe-card-foot { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.observe-card-err { color: var(--sv-danger); }

/* ---- agents and people ---- */
.observe-agents, .observe-faces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.observe-agent { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ws-working) 12%, transparent); color: var(--ws-working-ink); font-size: var(--ui-meta); }
.observe-agent > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.observe-agent .icon { width: 12px; height: 12px; flex: none; }
.observe-agent.small { padding: 0 6px; }
.observe-more { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }

/* ---- the activity feed ---- */
.observe-feed { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.observe-feed-item { display: grid; gap: 2px; padding: 6px var(--sv-space-2); background: var(--sv-fill-2); border-radius: var(--sv-radius); font-size: var(--ui-meta); }
.observe-feed-head { display: flex; justify-content: space-between; gap: var(--sv-space-2); color: var(--sv-ink-tertiary); }
.observe-feed-kind { font-weight: 600; color: var(--sv-ink-secondary); }
.observe-feed-item[data-kind="running"] .observe-feed-kind { color: var(--sv-ink); }
.observe-feed-item[data-kind="done"] .observe-feed-kind { color: var(--ws-working-ink); }
.observe-feed-item:is([data-kind="review"], [data-kind="blocked"]) .observe-feed-kind { color: var(--sv-attention); }
.observe-feed-task { color: var(--sv-ink); overflow-wrap: anywhere; }
.observe-feed-q { color: var(--sv-ink-secondary); font-style: italic; overflow-wrap: anywhere; }
.observe-feed-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.observe-feed-for { color: var(--sv-ink-tertiary); }
.observe-feed-goal { color: var(--sv-ink-tertiary); overflow-wrap: anywhere; }

/* ---- the company: workstream lanes ---- */
.observe-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--sv-space-3); align-items: start; }
.observe-lane { display: grid; gap: var(--sv-space-2); min-width: 0; padding: var(--sv-space-2); border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-fill-1); }
/* A work stream's own hue: a small dot before its name, not a stripe. */
.observe-lane-head { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--ui-meta); font-weight: 600; letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; color: var(--sv-ink-secondary); }
.observe-lane-head::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--hue, 210) 55% 45%); }
.observe-goal { display: grid; gap: 6px; min-width: 0; padding: var(--sv-space-2); border-radius: var(--sv-radius); background: var(--sv-fill-2); color: inherit; text-decoration: none; transition: background var(--sv-dur-instant) var(--sv-ease-out); }
a.observe-goal:hover { background: var(--sv-fill-3); }
.observe-goal-top { display: flex; justify-content: space-between; gap: var(--sv-space-2); }
.observe-goal-title { font-weight: 500; overflow-wrap: anywhere; }
.observe-goal-pct { flex: none; color: var(--sv-ink-secondary); font-variant-numeric: tabular-nums; }
.observe-goal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--ui-meta); }
.observe-goal-status { padding: 0 6px; border-radius: 999px; background: var(--sv-fill-2); color: var(--sv-ink-secondary); }
.observe-goal-status[data-tone="done"] { color: var(--ws-working-ink); }
.observe-strip { display: flex; gap: 2px; min-height: 8px; }
.observe-cell { flex: 1 1 0; min-width: 4px; height: 8px; border-radius: 2px; border: 1px solid transparent; background: var(--sv-fill-3); }
.observe-cell[data-tone="done"] { background: var(--sv-ink-secondary); border-color: var(--sv-ink-secondary); }
.observe-cell[data-tone="running"] { background: var(--ws-working); border-color: var(--ws-working); }
.observe-cell[data-tone="review"] { background: var(--sv-attention); border-color: var(--sv-attention); }
.observe-cell[data-tone="bad"] { background: var(--sv-danger); border-color: var(--sv-danger); }
.observe-recent { display: grid; gap: var(--sv-space-2); }

.observe-legend { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.observe-legend > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.observe-legend > p { margin: 4px 0; max-width: 80ch; }

/* ---- the office TV (?tv=1): no chrome, the page fills the screen ---- */
body.observe-tv .rail, body.observe-tv .topbar { display: none !important; }
body.observe-tv .app { grid-template-columns: 1fr; }
body.observe-tv .transcript:has(> .observe-page) { --reading: none; max-width: none; padding: clamp(16px, 2vw, 40px); }
.observe-page.tv { font-size: clamp(16px, 1.15vw, 28px); --ui-meta: 0.8em; --sv-text-h4: 1.25em; --sv-text-h3: 1.8em; }
.observe-page.tv .observe-name { font-size: 2.2em; }
.observe-page.tv .observe-grid { grid-template-columns: repeat(auto-fill, minmax(22em, 1fr)); }
.observe-page.tv .observe-legend { display: none; }
.observe-page.tv .observe-exit { opacity: 0; transition: opacity var(--sv-dur-fast) var(--sv-ease-out); }
.observe-page.tv:hover .observe-exit, .observe-page.tv .observe-exit:focus-visible { opacity: 1; }
.observe-rotate { position: fixed; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--ws-working); transform-origin: left; animation: observe-rotate linear forwards; }
@keyframes observe-rotate { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .observe-rotate { animation: none; transform: scaleX(1); opacity: 0.4; } }

@media (max-width: 640px) {
  .observe-card-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .observe-num > b { font-size: var(--sv-text-h4); }
}