/* OpenFlow v2: the queue pages' own rules. Report 204.
   Uses the shared templates in of-base.css (`templates/_of.html`); only
   this page group's rules go here. See
   planning/design/openflow-v2-handoff/BUILD-NOTES.md.

     1. The side panel of a queue item  .wq-pager .wq-pfoot .wq-skipline
     2. The Work queue                  .wq (person cards, rows)
     3. The other queue pages            /tasks/, CE, onboarding */


/* ── 1. The side panel of a queue item ─────────────────────────────────
   Pages 25-27 and addition 4: "‹ n of N ›" between the title and ✕, then
   the foot — the buttons, and a line of what they do with "Skip for now"
   on its right. Sizes are the drawn panel's (32px arrows, 13px count). */
.wq-pager {
  flex: none;
  display: flex; align-items: center; gap: 2px;
  font-size: 13px; color: var(--of-head-ink);
  white-space: nowrap;
}
.wq-pager__btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--ink-1); text-decoration: none;
}
.wq-pager__btn:hover { background: var(--tint-bg); color: var(--ink-1); }
.wq-pager__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wq-pager__btn .ms { font-size: 20px; }
.wq-pager__pos { padding: 0 2px; font-variant-numeric: tabular-nums; }

.ui-panel__foot.wq-pfoot { flex-direction: column; align-items: stretch; gap: 8px; }
.wq-pfoot[hidden] { display: none; }
.wq-pfoot__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.wq-pfoot__btns .ui-btn { min-height: 44px; flex: 1 1 140px; white-space: nowrap; }
.wq-pfoot__btns .ui-btn--quiet { flex: 0 0 auto; }
.wq-skipline {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 12px;
  font-size: 14px; color: var(--of-muted);
}
.wq-skipline__words, .wq-skipline__words .jr-effect { flex: 1 1 220px; margin: 0; font-size: 14px; color: var(--of-muted); }
.wq-skipline__words:empty { display: none; }
.wq-skipline__skip {
  flex: none; margin-left: auto;
  color: var(--copper-press, #94501E); font-size: 14px; text-decoration: none; white-space: nowrap;
}
.wq-skipline__skip:hover { text-decoration: underline; }


/* ── 2. The Work queue (page 24) ───────────────────────────────────────
   The header and chips are of-base's; the person cards and rows keep
   journeys-staff.css's `.wq-*` (report 196 drew them as this handoff
   does). Spacing is the drawn page's: 20 under the header, 16 under the
   chips. */
.wq { gap: 0; }
.wq > .of-head { margin-bottom: 20px; }
.wq > .wq-chips { margin-bottom: 16px; }
.wq > .wq-people, .wq > .wq-group { margin-bottom: 16px; }
.wq > .wq-group + .wq-group { margin-top: 4px; }
.wq-empty { text-align: center; padding: 40px 20px; }
.wq-empty__ico { font-size: 28px; color: var(--ok-fg, #0F6B4F); }
.wq-empty .of-state__title { margin-top: 6px; }
.wq-foot-link { margin: 0; font-size: 15px; color: var(--of-muted); }
.wq-foot-link a { text-decoration: none; }
@media (max-width: 759px) {
  .wq .of-head__actions, .wq .of-seg { width: 100%; }
  .wq .of-seg__opt { flex: 1; justify-content: center; }
}


/* ── 3. Your own tasks (page 02, /tasks/) ──────────────────────────────
   The rows keep rest-pages.css's `.rp-row`; a row of yours opens its task
   in the side panel, so the whole row is the link. */
.tq-row { position: relative; }
.tq-row:hover { background: var(--of-head-bg); }
a.tq-row__open { color: var(--ink-1); text-decoration: none; }
a.tq-row__open::after { content: ""; position: absolute; inset: 0; }
.tq-row .rp-row__act { position: relative; z-index: 1; }
.tq-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.tq-due { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.tq-body { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.tq-where { margin: 0; }
.tq-act { margin-top: 16px; }
.tq-foot > form { flex: 1 1 200px; display: flex; }
.tq-foot > form .ui-btn { flex: 1; min-height: 44px; }


/* ── 4. CE review (page 52) ────────────────────────────────────────────
   A row per course; the card (components.css / pages-events-ce.css) and
   the decision open in the side panel. A queue task's link lands on the
   row by its id, clear of the top bar. */
.cr .of-row { scroll-margin-top: 84px; }
.cr .of-row:target { background: var(--of-head-bg); }
.cr-group { margin-bottom: 24px; }
.cr-blurb { margin: -4px 0 10px; font-size: 14px; color: var(--of-muted); }
.ui-panel .cr-card { padding: 0; border: 0; background: none; }
.cr-foot .cr-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin: 0; }
.cr-foot .cr-decide .ui-btn { min-height: 44px; flex: 1 1 140px; white-space: nowrap; }
.cr-foot .cr-decide .of-danger { flex: 0 0 auto; }
.cr-foot .cr-decide .of-danger:disabled { color: var(--ink-4); cursor: not-allowed; text-decoration: none; }
.cr-one .cr-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }


/* ── 5. Approved courses (page 54) ─────────────────────────────────────
   One card per state; "Replace this list" opens the upload in the panel. */
.co-replace { margin: 16px 0 0; }
.co-panel .course-upload {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px;
  margin: 0; padding: 0; border: 0;
}
.co-panel .course-upload .field-note { flex-basis: auto; }
.co-panel .course-upload .ui-btn--primary { align-self: stretch; min-height: 44px; }


/* ── 6. Onboarding board (page 28) ─────────────────────────────────────
   The team cards are chips now; a chip's overdue count stays red. The
   rows (journeys-staff.css `.fb-row`) keep the checkpoints bar. */
.fb.of-t { gap: 16px; }
.fb .of-head { margin-bottom: 4px; }
.fb-chip__late { font-size: 13px; font-weight: 600; color: var(--alert-fg); }
.of-chip[aria-current] .fb-chip__late { color: #FFD9D1; }
.fb .of-toolbar .fb-toggle { white-space: nowrap; }


/* ── 7. Onboard a broker (page 30) ─────────────────────────────────────
   One column at 760: Who, A few questions, What will happen, then the form
   bar. journeys-staff.css drew "What will happen" as a sticky column on
   the right; here it is the last section. */
.fs.of-t .jr-start { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
.fs.of-t .jr-panel { position: static; }
.fs.of-t .of-formbar.jr-panel__go { padding: 12px; border-top: 1px solid var(--line); margin-top: 0; }
.fs.of-t .of-formbar .jr-panel__small { margin-top: 0; }


/* ── 8. Onboarding reports (page 31) ───────────────────────────────────
   One folded card per journey type: the name and its numbers in a line,
   the tiles and tables when it is open. */
.jr-reports.of-t > * + * { margin-top: 20px; }
.jr-report-fold > .jr-report-fold__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  cursor: pointer; list-style: none;
}
.jr-report-fold > .jr-report-fold__head::-webkit-details-marker { display: none; }
.jr-report-fold__head .ui-card__title { margin: 0; flex: 1 1 220px; }
.jr-report-fold__sum { font-size: 14px; color: var(--of-muted); }
.jr-report-fold__sum b { color: var(--alert-fg); font-weight: 600; }
.jr-report-fold__chev { font-size: 22px; color: var(--ink-4); transition: transform .15s ease; }
.jr-report-fold[open] .jr-report-fold__chev { transform: rotate(180deg); }
.jr-report-fold[open] > .jr-report-fold__head { margin-bottom: 16px; }


/* ── 9. CE compliance (page 53) ────────────────────────────────────────
   Between a phone and a desk the five columns share the card's width
   instead of running Standing off its right edge. */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .cc .ui-table { table-layout: fixed; width: 100%; }
  .cc .ui-table th:nth-child(1) { width: 24%; }
  .cc .ui-table th:nth-child(2) { width: 18%; }
  .cc .ui-table th:nth-child(3) { width: 15%; }
  .cc .ui-table th:nth-child(4) { width: 11%; }
  .cc .ui-table td, .cc .ui-table th { overflow-wrap: anywhere; }
}

/* Report 249. Give a department task to one staff member. */
.task-assign { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-assign select { max-width: 100%; font-size: 0.875rem; }
.task-assigned { color: var(--ink-2, inherit); }
.jr-assign { padding: 8px 0 0; }