/* Workflow bands - several people share this screen, so every in-flight
     row names its owner and whether it is open on someone else's machine. */
  /* ── What to do next ──────────────────────────────────────────────
     The first thing after signing in is an instruction, not a menu. It gets
     the page's only large type and its only filled button, so there is never
     a question about where to start. */
  .next-up {
    display: flex; align-items: center; gap: 16px;
    background: var(--brand); color: #fff; border-radius: 10px;
    padding: 7px 14px 7px 0; margin-bottom: 8px; overflow: hidden;
    animation: nextArrive .5s cubic-bezier(.16,.84,.34,1) both;
  }
  /* a graduated rule down the leading edge - the same instrument motif the
     pipeline bar uses, so the two read as one system */
  .next-mark {
    width: 10px; align-self: stretch; flex-shrink: 0;
    background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.55) 0 2px, transparent 2px 7px);
  }
  .next-body { flex: 1; min-width: 0; }
  .next-why { font-size: var(--fs-label); letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.72); }
  .next-what { font-size: var(--fs-title); font-weight: 600; line-height: 1.25; margin-top: 2px; }
  .next-where { font-family: var(--mono); font-size: var(--fs-label); color: rgba(255,255,255,.72); margin-top: 3px; }
  .next-act {
    flex-shrink: 0; appearance: none; border: 0; border-radius: 7px; cursor: pointer;
    background: #fff; color: var(--brand); font-family: inherit; font-size: var(--fs-body); font-weight: 600;
    padding: 8px 16px; transition: transform .14s ease, box-shadow .14s ease;
  }
  .next-act:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
  .next-act:active { transform: translateY(0); }
  .next-act:focus-visible { outline: 3px solid rgba(255,255,255,.7); outline-offset: 2px; }

  /* ── Motion by priority ───────────────────────────────────────────
     Three speeds, and they mean something. The instruction arrives first and
     alone. Blocking equipment breathes slowly and never stops, because it is
     still true tomorrow. A lock pulses quickly, because it is true only
     while someone is sitting at that screen. Everything else is still. */
  @keyframes nextArrive {
    from { opacity: 0; transform: translateY(-10px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
  /* Pendency blocks. The number is the point of the block, so it leads;
     a block at zero stays neutral so the eye goes to what is actually
     waiting rather than to a wall of colour. */
  .pend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 8px; margin-bottom: 6px; }
  /* Quiet: the heading orients, the tiles carry the information. Sentence
     case and small, so it never competes with the counts beneath it. */
  .pend-group { margin-bottom: 1px; }
  .pend-group-title { font-size: var(--fs-label); letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ink-faint); margin: 0 0 4px 2px; font-weight: 600; }
  .pend-block { text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--line);
      border-left: 3px solid var(--line); border-radius: 8px; padding: 7px 12px; transition: box-shadow .12s, transform .12s; }
  .pend-block:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); transform: translateY(-1px); }
  .pend-block.open { box-shadow: 0 0 0 2px var(--brand-tint, rgba(23,84,110,0.14)); }
  .pend-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .pend-icon { width: 17px; height: 17px; opacity: 0.45; flex-shrink: 0; }
  .pend-block.tone-brand  .pend-icon { color: var(--brand); opacity: 0.85; }
  .pend-block.tone-amber  .pend-icon { color: var(--amber); opacity: 0.9; }
  .pend-block.tone-danger .pend-icon { color: var(--danger, #b3261e); opacity: 1; }
  .pend-n { font-size: var(--fs-head); font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
  .pend-label { display: block; font-size: var(--fs-label); font-weight: 600; margin-top: 2px; color: var(--ink); }
  .pend-sub { display: block; font-size: var(--fs-label); color: var(--ink-faint); margin-top: 1px; }
  .pend-block.tone-brand  { border-left-color: var(--brand); }
  .pend-block.tone-brand  .pend-n { color: var(--brand); }
  .pend-block.tone-amber  { border-left-color: var(--amber); }
  .pend-block.tone-amber  .pend-n { color: var(--amber); }
  .pend-block.tone-danger { border-left-color: var(--danger, #b3261e); }
  .pend-block.tone-danger .pend-n { color: var(--danger, #b3261e); }
  .pend-detail .wf-row:last-child { border-bottom: 0; }

  /* Three families of block, each with its own ground so they are told apart
     before the words are read: work in hand is plain, things waiting on a
     person are finely striped, equipment problems are cross-hatched. The
     texture is faint on purpose - it separates the groups without competing
     with the number. */
  .pend-block.fam-work  { background:
      linear-gradient(#fff, #fff); }
  .pend-block.fam-wait  { background:
      repeating-linear-gradient(45deg, rgba(198,124,20,0.055) 0 6px, transparent 6px 12px), #fff; }
  .pend-block.fam-equip { background:
      repeating-linear-gradient(45deg,  rgba(179,38,30,0.06) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(-45deg, rgba(179,38,30,0.05) 0 5px, transparent 5px 10px), #fff; }
  .pend-block.fam-work.tone-brand   { border-color: rgba(23,84,110,0.28); }
  .pend-block.fam-wait.tone-amber   { border-color: rgba(198,124,20,0.34); }
  .pend-block.fam-equip.tone-danger { border-color: rgba(179,38,30,0.36); }
  /* a family whose count is zero keeps the texture but drops the colour, so
     "nothing waiting" still reads as the same group */
  .pend-block.fam-wait:not(.tone-amber) .pend-icon,
  .pend-block.fam-equip:not(.tone-danger) .pend-icon { opacity: 0.3; }

  /* Actions are not navigation. They sit under their own heading, indented,
     on a lighter ground with a dashed edge, so the eye never mistakes "do
     something" for "go somewhere". */
  #navActions { padding-left: 4px; }
  .nav-item.nav-action { border-left: 2px dashed rgba(159,208,228,0.45); border-radius: 0 8px 8px 0;
      margin-left: 4px; background: rgba(255,255,255,0.04); font-size: var(--fs-body); }
  .nav-item.nav-action:hover { background: rgba(255,255,255,0.13); border-left-color: #9FD0E4; }
  .sidebar.qs-mode .nav-item.nav-action { border-left-color: rgba(201,182,245,0.5); }
  .sidebar.qs-mode .nav-item.nav-action:hover { border-left-color: #C9B6F5; }

  /* A little life on arrival: the blocks deal in, the numbers count up, and a
     press gives way under the finger. It should feel like a tool that is
     awake - not a spreadsheet someone emailed you. */
  @keyframes aqcalDealIn {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  .pend-block { animation: aqcalDealIn 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
  .pend-block:nth-child(1) { animation-delay: 0.16s; }
  .pend-block:nth-child(2) { animation-delay: 0.20s; }
  .pend-block:nth-child(3) { animation-delay: 0.24s; }
  .pend-block:nth-child(4) { animation-delay: 0.28s; }
  .pend-block:nth-child(5) { animation-delay: 0.32s; }
  .pend-block:nth-child(6) { animation-delay: 0.36s; }
  .pend-block:nth-child(7) { animation-delay: 0.40s; }
  .pend-block:nth-child(8) { animation-delay: 0.44s; }
  .pend-block:active { transform: translateY(1px) scale(0.995); }
  .pend-block .pend-icon { transition: transform 0.18s ease; }
  .pend-block:hover .pend-icon { transform: scale(1.12) rotate(-4deg); }

  /* Nothing pending is worth saying out loud rather than leaving a blank. */
  .all-clear { display: flex; align-items: center; gap: 10px; padding: 9px 13px; margin-bottom: 10px;
      border: 1px solid rgba(29,132,90,0.28); border-radius: 10px; font-size: var(--fs-body); color: #1D845A;
      background: repeating-linear-gradient(45deg, rgba(29,132,90,0.05) 0 6px, transparent 6px 12px), #fff;
      animation: aqcalDealIn 0.4s ease-out; }
  .all-clear svg { width: 18px; height: 18px; flex-shrink: 0; }

  /* Motion only where something is actually waiting on a person. A count of
     zero never animates, so movement on this screen always means "this one",
     and the eye is not trained to ignore it. */
  @keyframes aqcalPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
  }
  @keyframes aqcalGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.35); }
    50%      { box-shadow: 0 0 0 5px rgba(179, 38, 30, 0); }
  }
  @keyframes aqcalSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
  /* masters that are blocking work: the strongest signal on the page */
  .pend-block.tone-danger { animation: aqcalGlow 3.4s ease-in-out infinite; }
  .pend-block.tone-danger .pend-n { animation: aqcalPulse 3.4s ease-in-out infinite; }
  /* live: someone is at that screen now, so it moves at roughly a resting
     pulse - fast enough to read as happening rather than pending */
  .wf-lock { animation: aqcalPulse 1.4s ease-in-out infinite; }
  /* waiting on a decision, not on the clock: slower than a lock, quicker
     than equipment */
  .wf-unassigned { animation: aqcalPulse 2.4s ease-in-out infinite; }
  /* the drill-down arriving, so it is clear which block produced it */
  .pend-detail { animation: aqcalSlideIn 0.18s ease-out; }

  /* Anyone who has asked their system to stop moving things gets a static
     page - the colour and the number still carry the same meaning. */
  @media (prefers-reduced-motion: reduce) {
    .pend-block, .pend-block.tone-danger, .pend-block.tone-danger .pend-n,
    .wf-lock, .wf-unassigned, .pend-detail, .all-clear, .next-up { animation: none; }
    .next-act:hover { transform: none; }
    .pend-block:hover .pend-icon { transform: none; }
  }
  .wf-band { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
  .wf-band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-body); font-weight: 600; flex-wrap: wrap; }
  .wf-band-note { font-size: var(--fs-label); font-weight: 400; color: var(--ink-faint); }
  .wf-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: var(--fs-body); border-bottom: 1px solid var(--line); cursor: pointer; }
  .wf-row:last-child { border-bottom: 0; }
  .wf-row:hover { background: var(--brand-tint, rgba(0,0,0,0.03)); }
  .wf-job { font-weight: 600; min-width: 132px; }
  .wf-item { flex: 1; min-width: 120px; color: var(--ink); }
  .wf-state { font-size: var(--fs-label); color: var(--ink-faint); min-width: 104px; }
  .wf-owner { font-size: var(--fs-label); color: var(--ink-faint); min-width: 128px; text-align: right; }
  .wf-unassigned { color: var(--amber); }
  .wf-over { color: var(--danger, #b3261e); }
  .wf-lock { font-size: var(--fs-label); padding: 2px 7px; border-radius: 10px; background: var(--amber); color: #fff; white-space: nowrap; }
  @media (max-width: 780px) {
    .wf-row { flex-wrap: wrap; gap: 6px; }
    .wf-job, .wf-state, .wf-owner { min-width: 0; text-align: left; }
  }

  /* The band heading over a group of queue cards. Small and quiet: it separates
     equipment work from job work without competing with the counts, which are
     the thing being scanned for. Present only when both kinds are on screen. */
  .tb-band {
    font-size: var(--fs-body); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-faint);
    margin: 18px 0 8px; padding: 0;
  }
  .tb-band:first-of-type { margin-top: 0; }