/* ---------- Journey: the status element ---------- */
.status { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.status-text { font-size: 13px; font-weight: 560; color: var(--st); white-space: nowrap; transition: color 200ms var(--ease-out); }
[data-status] { --st: var(--accent); }
[data-status="new"] { --st: var(--text-2); }
[data-status="on_hold"] { --st: var(--warning); }
[data-status="pending_signoff"] { --st: var(--violet); }
[data-status="closed"] { --st: var(--success); }
[data-status="canceled"] { --st: var(--text-3); }

.jt { --w: 72px; --bead: 8px; position: relative; display: inline-block; flex: none; width: var(--w); height: calc(var(--bead) + 6px); color: var(--st); }
.jt-lg { --w: 128px; --bead: 10px; }
.jt-rail, .jt-fill { position: absolute; left: calc(var(--bead) / 2); right: calc(var(--bead) / 2); top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; }
.jt-rail { background: var(--thread); }
.jt-fill { background: currentColor; transform-origin: left center; transform: scaleX(var(--p, 0)); }
.jt-bead {
  position: absolute; top: 50%; width: var(--bead); height: var(--bead); margin: calc(var(--bead) / -2) 0 0 calc(var(--bead) / -2);
  left: calc(var(--bead) / 2 + (100% - var(--bead)) * var(--i) / 4);
  border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--thread);
  transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.jt-bead.is-lit { background: currentColor; box-shadow: none; }
.jt-bead.is-current { transform: scale(1.3); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
[data-status="on_hold"] .jt-bead.is-current { background: var(--surface); box-shadow: inset 0 0 0 2px currentColor, 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
[data-status="canceled"] .jt-rail { background: none; border-top: 2px dashed var(--thread); height: 0; margin-top: -1px; }
[data-status="canceled"] .jt-fill { display: none; }
[data-status="canceled"] .jt-bead { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--thread); transform: none; }
.jt-orb {
  position: absolute; top: 50%; left: 0; width: calc(var(--bead) + 6px); height: calc(var(--bead) + 6px);
  margin: calc((var(--bead) + 6px) / -2) 0 0 calc((var(--bead) + 6px) / -2);
  border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, color-mix(in srgb, currentColor 62%, #fff) 46%, currentColor 100%);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent), 0 4px 12px -2px color-mix(in srgb, currentColor 55%, transparent);
}

.prio { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.prio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pc, var(--text-3)); box-shadow: var(--pr, none); }
.prio[data-priority="critical"] { --pc: var(--danger); color: var(--ink); font-weight: 560; }
.prio[data-priority="high"] { --pc: var(--warning); }
.prio[data-priority="medium"] { --pc: var(--text-3); }
.prio[data-priority="low"] { --pc: transparent; --pr: inset 0 0 0 1.5px var(--text-3); }

.sla { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 560; color: var(--sc, var(--text-2)); white-space: nowrap; }
.sla .ic { width: 15px; height: 15px; stroke-width: 2; }
.sla[data-kind="overdue"], .sla[data-kind="missed"] { --sc: var(--danger); }
.sla[data-kind="soon"] { --sc: var(--warning); }
.sla[data-kind="ontrack"] { --sc: var(--text-2); font-weight: 500; }
.sla[data-kind="met"] { --sc: var(--success); }
.sla[data-kind="paused"], .sla[data-kind="none"] { --sc: var(--text-3); font-weight: 500; }
.sub { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* Manager All Tickets: dense, scannable, for daily dispatchers. */
  .head-actions { display: flex; align-items: center; gap: 10px; }
  .live { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 520; color: var(--text-2); }
  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent); transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
  .live.is-offline .live-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
  .updates { height: 32px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 560; color: var(--ink); background: var(--accent-soft); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), background-color 160ms var(--ease-out); }
  .updates .ic { width: 15px; height: 15px; stroke-width: 2; color: var(--accent); }
  .updates[hidden] { display: none; }
  @starting-style { .updates { opacity: 0; transform: translateY(-4px) scale(0.97); } }
  .updates:active { transform: scale(0.97); }
.state { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; white-space: nowrap; }
.state::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--state-color, var(--text-3)); }
.state[data-tone="success"] { --state-color: var(--success); }
.state[data-tone="warning"] { --state-color: var(--warning); }
.state[data-tone="danger"] { --state-color: var(--danger); }
.state[data-tone="neutral"] { --state-color: transparent; }
.state[data-tone="neutral"]::before { box-shadow: inset 0 0 0 1.5px var(--text-3); }

.availability-control { position: relative; }
.availability-trigger { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; color: var(--text-2); font-size: 13px; font-weight: 520; }

.availability-option { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border-radius: 10px; color: var(--ink); font-size: 14px; text-align: left; }
.availability-option .state { flex: 1; }
.availability-option:focus-visible { outline: none; background: var(--hover-strong); }
.availability-control select[aria-hidden="true"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (hover: hover) and (pointer: fine) {
  .updates:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .status-text, .jt-bead, .live-dot, .updates { transition-duration: 0ms; }
  .jt-orb { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .availability-option:hover { background: var(--hover-strong); }
}