/* Control Room: only what lib/ui doesn't have yet (a data table). A table component is a lib/ui
   candidate once a second tool needs one. Accent: the Platform Engineer's clay (Art Director STYLE.md
   #cc7a66), darkened for light grounds:
   #a65a45 is 5.04:1 on white, #cc7a66 5.53:1 on #16181d. Confirmed by the Art Director 2026-09-28
   (STYLE.md "App accent", 181c54c), on one condition: the clay is close to --ui-bad red, so a filled
   clay button and a filled red one never share a row. Start (filled) and Stop (outlined) never do. */
:root { --ui-accent: #a65a45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ui-accent: #cc7a66; } }
:root[data-theme="dark"] { --ui-accent: #cc7a66; }

.cr-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
#notices:empty { display: none; }
/* .ui-main already spaces its children 16px apart; the title's own 20px top margin doubled it. */
.ui-main > section > .ui-section-title:first-child { margin-top: 0; }
.cr-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-summary-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-updated { white-space: nowrap; }

.cr-problems { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.cr-problems li { margin: 0; }

.cr-table-wrap { overflow-x: auto; }
.cr-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cr-table th { text-align: left; font-weight: 600; color: var(--ui-dim); padding: 6px 8px; border-bottom: 1px solid var(--ui-border); white-space: nowrap; }
.cr-table td { padding: 8px; border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
.cr-table tr.is-stopped td { color: var(--ui-dim); }
.cr-table .ui-chip, .cr-table td[data-label="Up for"] { white-space: nowrap; }
.cr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-project { font-weight: 600; }
.cr-project small { display: block; font-weight: 400; color: var(--ui-dim); }
.cr-actions { display: flex; gap: 6px; justify-content: flex-end; }
.cr-extra { display: block; color: var(--ui-dim); font-size: 0.85em; }
.cr-legend { margin-top: 8px; }
.cr-pace { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.cr-commit { max-width: 28ch; }
.cr-commit .cr-extra { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-findings summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cr-findings summary::-webkit-details-marker { display: none; }
.cr-findings summary::after { content: "▸ details"; color: var(--ui-dim); font-size: 0.85em; }
.cr-findings[open] summary::after { content: "▾ hide"; }
.cr-findings ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.9em; }

/* Phone width: each row becomes a small card, no sideways scroll (UI.md "Every screen"). */
@media (max-width: 720px) {
  .cr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cr-table, .cr-table tbody, .cr-table tr, .cr-table td { display: block; width: 100%; }
  .cr-table tr { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 8px; margin-bottom: 10px; }
  .cr-table td { border: 0; padding: 3px 0; text-align: left; }
  .cr-table td[data-label]::before { content: attr(data-label) ": "; color: var(--ui-dim); }
  .cr-num { text-align: left; }
  .cr-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 6px; }
}

/* ---- Agents grid (0.3.0). Owner, 2026-09-28: "more visually legible", "each agent in a grid view
   with light up parts that are online or offline". Every light also says its state in words. ---- */
.cr-tabs { margin-top: 4px; }
.cr-legend-lights { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 8px; }
.cr-legend-lights span { display: inline-flex; align-items: center; gap: 6px; }

.cr-light { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--ui-dim); background: transparent; box-sizing: border-box; }
.cr-light.is-on   { background: var(--ui-ok);   border-color: var(--ui-ok);   box-shadow: 0 0 0 3px var(--ui-ok-soft), 0 0 10px var(--ui-ok); }
.cr-light.is-warn { background: var(--ui-warn); border-color: var(--ui-warn); box-shadow: 0 0 0 3px var(--ui-warn-soft), 0 0 10px var(--ui-warn); }
.cr-light.is-bad  { background: var(--ui-bad);  border-color: var(--ui-bad);  box-shadow: 0 0 0 3px var(--ui-bad-soft), 0 0 10px var(--ui-bad); }
.cr-light.is-busy { background: var(--ui-ok);   border-color: var(--ui-ok);   box-shadow: 0 0 0 3px var(--ui-ok-soft), 0 0 14px var(--ui-ok);
  animation: cr-pulse 1.4s ease-in-out infinite; }
@keyframes cr-pulse { 50% { box-shadow: 0 0 0 6px var(--ui-ok-soft), 0 0 22px var(--ui-ok); } }
@media (prefers-reduced-motion: reduce) { .cr-light.is-busy { animation: none; } }

.cr-group { margin-bottom: 8px; }
.cr-agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cr-agent { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; margin: 0;
  border-left: 4px solid var(--ui-border); }
.cr-agent.is-working { border-left-color: var(--ui-ok); }
.cr-agent.is-bad { border-left-color: var(--ui-bad); }
.cr-agent-head { display: flex; align-items: center; gap: 12px; }
.cr-agent-icon { width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: contain; }
.cr-agent-icon.is-initials { display: grid; place-items: center; background: var(--ui-sunken);
  color: var(--ui-dim); font-weight: 700; font-size: 16px; }
.cr-agent-name { margin: 0; font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; }

.cr-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cr-part { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; column-gap: 10px;
  row-gap: 6px; font-size: 0.95rem; }
.cr-part-name { font-weight: 600; white-space: nowrap; }
.cr-part-name small { font-weight: 400; color: var(--ui-dim); }
.cr-part-state { color: var(--ui-dim); text-align: right; overflow-wrap: anywhere; }
.cr-part-actions { grid-column: 2 / -1; display: flex; gap: 6px; justify-content: flex-end; }

.cr-usage { display: grid; gap: 4px; margin-top: auto; }
.cr-usage-bar { height: 8px; border-radius: 4px; background: var(--ui-sunken); overflow: hidden; }
.cr-usage-bar span { display: block; height: 100%; background: var(--ui-accent); border-radius: 4px; }
.cr-usage-text { font-size: 0.9rem; color: var(--ui-dim); }
.cr-usage-text strong { color: var(--ui-text); }

/* ---- 0.4.0: one usage/pace figure, collapse and hide, waiting on the Owner ---- */
.cr-figure { display: inline-flex; flex-direction: column; gap: 2px; padding: 6px 14px; border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border); background: var(--ui-surface); }
.cr-figure strong { font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cr-figure small { color: var(--ui-dim); font-size: 0.8rem; }
.cr-figure.is-ok { border-color: var(--ui-ok); }
.cr-figure.is-warn { border-color: var(--ui-warn); }
.cr-figure.is-bad { border-color: var(--ui-bad); }

.cr-group-head { display: flex; align-items: center; gap: 10px; }
.cr-group-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; }
.cr-group-toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.cr-chevron { display: inline-block; width: 1em; }
.cr-link-btn { font: inherit; font-size: 0.85em; text-transform: none; letter-spacing: 0; color: var(--ui-accent);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.cr-agent-grid[hidden] { display: none; }

.cr-agent-head { position: relative; }
.cr-card-tools { margin-left: auto; display: inline-flex; gap: 2px; align-self: flex-start; }
.cr-icon-btn { font: inherit; font-size: 16px; line-height: 1; width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  color: var(--ui-dim); background: transparent; border: 1px solid transparent; }
.cr-icon-btn:hover { border-color: var(--ui-border); color: var(--ui-text); }
.cr-agent.is-min { padding-top: 10px; padding-bottom: 10px; }
.cr-dots { display: inline-flex; gap: 5px; margin-left: 4px; }
.cr-light.is-small { width: 9px; height: 9px; border-width: 2px; box-shadow: none; animation: none; }

.cr-badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; display: inline-grid; place-items: center;
  background: var(--ui-accent); color: var(--ui-accent-text, #fff); font-weight: 700; font-size: 0.85rem; }
.cr-agent.is-waiting { border-left-color: var(--ui-accent); }
.cr-light.is-attn { background: var(--ui-accent); border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-bg-tinted, transparent), 0 0 12px var(--ui-accent); }
.cr-waiting .cr-part-state { color: var(--ui-text); font-weight: 700; }
.cr-waiting-links { grid-column: 2 / -1; display: grid; gap: 4px; font-size: 0.9rem; }
.cr-waiting-links a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-waiting-chip { font-weight: 700; }

/* ---- 0.5.0: minimized agents share one tile, last in their group; context light ---- */
.cr-min-tile { gap: 8px; }
.cr-min-title { margin: 0; font-size: 0.95rem; color: var(--ui-dim); font-weight: 600; }
.cr-min-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cr-min-row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.cr-min-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-min-row .cr-dots { margin-left: auto; }
.cr-agent-icon.is-tiny { width: 24px; height: 24px; border-radius: 6px; font-size: 11px; }
.cr-badge.is-small { min-width: 20px; height: 20px; font-size: 0.75rem; padding: 0 5px; }

/* 0.5.1: orange for context over 500K (Owner). lib/ui 1.8.0's --ui-orange, measured by the Art Director
   (d164263); a light only, never text. */
.cr-light.is-orange { background: var(--ui-orange); border-color: var(--ui-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-orange) 25%, transparent), 0 0 10px var(--ui-orange); }

/* 0.6.0: the icon and name open the agent's app (Owner). */
.cr-app-link { all: unset; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; border-radius: 8px;
  min-width: 0; }
.cr-app-link:hover .cr-agent-name { text-decoration: underline; text-underline-offset: 3px; }
.cr-app-link:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.cr-app-link[disabled] { cursor: progress; opacity: 0.7; }

/* 0.6.1: a stale Dashboard copy is shown dimmed and not counted (Owner: "it's a bit stale"). */
.cr-waiting.is-stale, .cr-waiting.is-stale a { color: var(--ui-dim); }