/* The waiting states (plan, slice 9b-1), spec section 3. Linked from hq/index.html by
   slice 9b-2, which wires hq/waiting.js into the page. Colours are style.css's
   variables, so light and dark, and body.night, come out right without a second palette.

   Spec section 7: waiting states are text, not colour alone, and everything works at 720 px
   and under. Every rule here is about an item's own card, so nothing can reach the HUD. */

.owner-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); color: var(--ink-2);
  font: 800 11px/1 var(--font); padding: 4px 9px 4px 4px; border-radius: 999px;
  max-width: 11em; overflow: hidden;
}
.owner-chip .initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--line); color: var(--ink); font: 900 9px/1 var(--font);
}
.owner-chip .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-chip.mine { background: var(--accent-bg); color: var(--accent); }
.owner-chip.mine .initials { background: var(--accent); color: var(--accent-ink); }

/* The line under a card's title: `Waiting for @anna's worker`, `Needs an owner`, `Dropped`. */
.waiting-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 700 12px/1.4 var(--font); color: var(--warn);
  background: var(--warn-bg); border-radius: 12px; padding: 6px 10px;
}
.waiting-line .text { flex: 1; min-width: 12em; }
.waiting-line.dropped, .waiting-line.needs-owner { color: var(--bad); background: var(--bad-bg); }
.waiting-line[hidden] { display: none; }

/* `Take over` / `Take it`. A button, never the default key: pressing Enter on a card must not
   move somebody else's work (the same rule as the pairing page's `Add worker`, spec section 2). */
.waiting-line .take {
  flex: none; font: 800 12px/1 var(--font); cursor: pointer;
  padding: 7px 12px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); box-shadow: none;
}
.waiting-line .take:hover { filter: brightness(.97); }

/* `Taken over from @anna`, which stays on the item afterwards. */
.taken-note { font: 700 11px/1.4 var(--font); color: var(--ink-3); }

/* The room banner, owners only: rounds and nightly work are paused. */
.room-banner {
  display: flex; align-items: center; gap: 10px;
  font: 700 13px/1.4 var(--font); color: var(--warn); background: var(--warn-bg);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px;
}
.room-banner[hidden] { display: none; }

/* `Your worker is back. 3 things were waiting for you.` */
.worker-back {
  font: 800 13px/1.4 var(--font); color: var(--ok); background: var(--ok-bg);
  border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow);
}

@media (max-width: 720px) {
  .waiting-line { padding: 8px 10px; }
  .waiting-line .take { width: 100%; }
  .owner-chip { max-width: 8em; }
}

/* On the ticket board panel (slice 9b-2): the card's kind and chip on one line, and the confirm
   text beside its two buttons. */
.work-card { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.work-card .sub { display: flex; align-items: center; gap: 8px; }
.waiting-line .take.cancel { background: var(--panel-2); color: var(--ink-2); }
.toast.worker-back { background: var(--ok-bg); color: var(--ok); }