/* Spec 33 §W6.1 — the Workers view.

   It is a destination-page like Files, Routines and Connections, so its
   horizontal width comes from `.destination-page` (UIQ R3) and this file sets
   no page gutter of its own: that contract is board-wide and a per-page
   override is exactly what the R3 check refuses.

   Every colour here is a token, so the view is correct in both themes without
   a second set of rules. */

.workers-section {
  display: block;
  padding-block: var(--ui-page-gutter);
  overflow: auto;
}

/* -- list ---------------------------------------------------------------- */

.workers-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.workers-page-head h3 {
  margin: 0 0 0.25rem;
}
.workers-list-view:has(#workers-empty:not([hidden])) .workers-page-head {
  margin-bottom: 0;
}
.workers-list-view:has(#workers-empty:not([hidden])) .workers-page-head .conn-pane-explainer {
  display: none;
}
.workers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.75rem;
  align-items: start;
}
.worker-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--ui-line-soft);
  border-radius: 12px;
  background: var(--ui-panel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.worker-card:hover,
.worker-card:focus-visible {
  border-color: var(--ui-line-strong);
}
.worker-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.worker-card-name {
  /* min-width:0 alone loses to a chip that will not shrink; the chip's own
     flex:0 0 auto above keeps the deficit on the name, where ellipsis is
     the right answer. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.worker-card-sub,
.worker-card-note {
  color: var(--ui-text-muted);
  font-size: 0.85rem;
}
.worker-card[data-worker-invalid="true"] {
  border-color: var(--ui-warning-line);
}
.worker-card[data-worker-invalid="true"] .worker-card-note {
  color: var(--ui-warning);
}

.workers-empty {
  display: grid;
  justify-items: center;
  gap: 1.35rem;
  width: min(66rem, 100%);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.75rem) 0 1.25rem;
  text-align: center;
}
.workers-empty-intro {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  max-width: 40rem;
}
.workers-empty h3,
.workers-empty h4 {
  margin: 0;
}
.workers-empty-intro > p {
  margin: 0;
  max-width: 38rem;
  color: var(--ui-text-muted);
  line-height: 1.5;
}
.workers-empty-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.1rem;
  border: 1px solid var(--ui-line-soft);
  border-radius: 14px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}
.workers-empty-icon .ui-icon {
  width: 24px;
  height: 24px;
}
.workers-empty-eyebrow {
  color: var(--ui-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.workers-empty-examples {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  width: 100%;
}
.workers-empty-example {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--ui-line-soft);
  border-radius: 12px;
  background: var(--ui-panel);
  text-align: left;
}
.workers-empty-example-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  background: var(--ui-panel-soft, var(--ui-bg));
  color: var(--ui-accent);
}
.workers-empty-example-icon .ui-icon {
  width: 16px;
  height: 16px;
}
.workers-empty-example h4 {
  font-size: 0.9rem;
}
.workers-empty-example p {
  margin: 0.25rem 0 0;
  color: var(--ui-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.workers-empty-actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.workers-empty-actions .button,
.workers-empty-agent-link {
  min-height: 42px;
}
.workers-empty-agent-link {
  border: 0;
  background: transparent;
  color: var(--ui-accent);
  font: 600 0.82rem/1.2 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.workers-empty-agent-link:hover,
.workers-empty-agent-link:focus-visible {
  color: var(--ui-text);
}
.workers-empty-owner-note,
.workers-empty-how {
  margin: -0.65rem 0 0;
  color: var(--ui-text-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}
.workers-empty-owner-note {
  max-width: 34rem;
}
.workers-empty-how {
  width: 100%;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ui-line-soft);
}
.workers-empty-how code {
  font-size: 0.72rem;
}

.worker-skeleton {
  height: 5.5rem;
  border-radius: 12px;
  background: var(--ui-panel-soft, var(--ui-panel));
  animation: worker-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes worker-skeleton-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .worker-skeleton { animation: none; }
}

/* -- chips --------------------------------------------------------------- */

.worker-chip {
  flex: 0 0 auto;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--ui-text-muted);
  white-space: nowrap;
}
.worker-chip[data-worker-lifecycle="active"] {
  border-color: var(--ui-success-line);
  color: var(--ui-success);
}
.worker-chip[data-worker-lifecycle="paused"],
.worker-chip[data-worker-lifecycle="invalid"] {
  border-color: var(--ui-warning-line);
  color: var(--ui-warning);
}

/* -- detail -------------------------------------------------------------- */

.workers-detail-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.workers-detail-bar-label {
  color: var(--ui-text-muted);
}
.workers-detail-body {
  display: grid;
  gap: 1rem;
  max-width: 54rem;
}
.worker-detail-head {
  display: grid;
  gap: 0.35rem;
}
.worker-detail-identity {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.worker-detail-identity h2 {
  margin: 0;
}
.worker-detail-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.85rem;
}
.worker-detail-lifecycle,
.worker-detail-rights {
  margin: 0;
  color: var(--ui-text-muted);
}

.worker-section {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ui-line-soft);
  border-radius: 12px;
  background: var(--ui-panel);
}
.worker-section h3 {
  margin: 0;
  font-size: 1rem;
}
.worker-section-note {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.85rem;
}
.worker-section p {
  margin: 0;
}
.worker-field-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ui-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.worker-responsibility,
.worker-facts {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.worker-quiet {
  color: var(--ui-text-muted);
}
.worker-path,
.worker-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--ui-text-muted);
  overflow-wrap: anywhere;
}

/* A pending sentence is the view saying what it does NOT know. It reads as a
   note, never as an error: nothing is broken when a later slice has not
   shipped. */
.worker-pending {
  padding: 0.55rem 0.7rem;
  border-left: 2px solid var(--ui-line);
  color: var(--ui-text-muted);
  font-size: 0.85rem;
}
.worker-blocked {
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
  font-size: 0.88rem;
}

.worker-assign {
  display: grid;
  gap: 0.5rem;
}
.worker-assign textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-bg);
  color: inherit;
  font: inherit;
  resize: vertical;
}
.worker-assign textarea:disabled,
.worker-assign .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.worker-assign-actions {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

.worker-grants {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.worker-grant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--ui-line-soft);
  border-radius: 9px;
}
.worker-grant-what {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 12rem;
}
.worker-grant-what code {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
}
.worker-grant-status {
  flex: 0 0 auto;
  color: var(--ui-text-muted);
  font-size: 0.8rem;
}
.worker-grant[data-worker-grant="pending"] .worker-grant-status {
  color: var(--ui-warning);
}

/* An automation row is a link to the routine: the schedule lives there, and
   this worker never holds a second copy of it (§W3.2). */
.worker-automation {
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--ui-text);
  font-weight: 600;
  text-decoration: none;
}
.worker-automation:hover,
.worker-automation:focus-visible {
  text-decoration: underline;
}
.worker-grant[data-worker-automation-state="off"] .worker-grant-status {
  color: var(--ui-warning);
}
/* The schedule chip is `flex: 0 0 auto` and the name is the only item that
   can shrink, so a narrow row sent the whole deficit to the name and broke it
   one character per line (measured at 390px). These rows stack instead, and
   the chip is allowed to wrap rather than run over the status beside it. */
.worker-grant[data-worker-automation] .worker-grant-what,
.worker-grant[data-worker-request] .worker-grant-what {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.worker-grant[data-worker-automation] .worker-chip {
  max-width: 100%;
  white-space: normal;
}

.worker-access-group {
  display: grid;
  gap: 0.4rem;
}

.worker-instructions {
  margin: 0;
  max-height: 22rem;
  overflow: auto;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ui-line-soft);
  border-radius: 10px;
  background: var(--ui-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.worker-invalid {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ui-warning-line);
  border-radius: 12px;
  background: var(--ui-warning-soft);
}
.worker-invalid h2 {
  margin: 0;
  font-size: 1.05rem;
}
.worker-invalid p {
  margin: 0;
}
.worker-invalid .button {
  justify-self: start;
}
.worker-error {
  color: var(--ui-warning);
}

/* -- phone --------------------------------------------------------------- */

@media (max-width: 820px) {
  .workers-grid {
    grid-template-columns: 1fr;
  }
  .workers-detail-body {
    max-width: none;
  }
  .worker-section {
    padding: 0.85rem 0.9rem;
  }
  /* Tap targets stay at the board's 44px floor on the phone surface. */
  .worker-card,
  .worker-grant[data-worker-automation] {
    min-height: 44px;
  }
  .workers-empty {
    gap: 1rem;
    padding-top: 0.5rem;
  }
  .workers-empty-examples {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .workers-empty-example {
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem;
  }
  .workers-empty-actions {
    display: grid;
    width: 100%;
  }
  .workers-empty-actions .button,
  .workers-empty-agent-link {
    width: 100%;
  }
}