/* The team at work, now (kept by incident.observability@web-summit.dinis, 11 November 2026). Tokens only (design/README.md):
   no warning colours; agents are greys and --focus; works in light and dark from the tokens. */
#team-at-work, .team-at-work { min-width: 0; max-width: 100%; }
.taw { font-family: var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius, 8px); padding: 14px 16px; margin: 16px 0; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.taw a { color: var(--link, var(--ink)); }
.taw a:focus-visible, .taw-ticker:focus-visible { outline: 2px solid var(--link-2, var(--focus)); outline-offset: 2px; }
.taw-h { font-size: 17px; margin: 0 0 4px; }
.taw-sub { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 10px 0 6px; text-transform: none; }
.taw-lede, .taw-note, .taw-key, .taw-links, .taw-foot { font-size: 13px; color: var(--ink-2); margin: 4px 0; }
.taw time, .taw-ago, .taw-chip time { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.taw-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px 24px; }
@media (max-width: 760px) { .taw-grid { grid-template-columns: minmax(0, 1fr); } }
.taw-who, .taw-side { min-width: 0; }

/* the ring */
.taw-ring { display: block; width: 100%; height: auto; max-height: 220px; overflow: visible; }
.taw-edge { fill: none; stroke: var(--line-2); stroke-width: 1; }
.taw-edge.hot { stroke: var(--focus); stroke-width: 1.4; }
.taw-dot { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.2; }
.taw-dot.on { fill: var(--ink); stroke: var(--surface); }
.taw-lab { font: 9.5px var(--sans); fill: var(--ink-2); }
.taw-lab.on { fill: var(--ink); font-weight: 600; }
.taw-ring a:hover .taw-lab, .taw-ring a:focus .taw-lab { text-decoration: underline; }
.taw-pulse { fill: none; stroke: var(--focus); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: taw-pulse 2.4s ease-out infinite; }
@keyframes taw-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .taw-pulse { animation: none; opacity: .6; } }
.taw-still .taw-pulse, html.ag-frozen .taw-pulse { animation: none; opacity: .6; }
.taw-key { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; }
.taw-k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.2px solid var(--ink-2); background: var(--surface); margin-right: 4px; vertical-align: -1px; }
.taw-k.on { background: var(--ink); border-color: var(--ink); }
.taw-k.pulse { border: 1.5px solid var(--focus); background: transparent; }

/* the list of pushes */
.taw-list, .taw-feeds { list-style: none; margin: 6px 0; padding: 0; }
.taw-list li, .taw-feeds li { font-size: 13px; padding: 4px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.taw-who-n a, .taw-who-n { font-weight: 600; font-family: var(--mono); font-size: 12px; }
.taw-ago { color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.taw-feeds code { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

/* the ticker of sources read: scrolls sideways inside itself, never the page */
.taw-ticker { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; }
.taw-ticker ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; width: max-content; }
.taw-chip { display: inline-block; white-space: nowrap; font-size: 12px; padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); color: var(--ink); text-decoration: none; }
.taw-chip:hover { border-color: var(--ink-2); }
.taw-x { color: var(--ink-2); }
.taw-links { margin-top: 10px; }
.taw-foot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px; font-size: 12px; }

/* phones (design round 59, note 1): four pushes, then a link to /agents/ */
.taw-more { display: none; font-size: 13px; margin: 4px 0; }
@media (max-width: 600px) { .taw-list li:nth-child(n+5) { display: none; } .taw-more { display: block; } }