/*
 * Processes under way.
 *
 * "it should be simple and display active processes so user can easily see where its up
 *  to and also see archived/completed processes" (2026-09-14)
 *
 * This was a six-column table: name, slug, status, version, started, last activity. Every
 * column was narrow, the widest fact on the page was a machine slug, and the one thing
 * somebody tracking their work needs — the step it is waiting on and who has it — was in
 * none of them. A row of cells cannot carry a step name and a person's name legibly at
 * 10px in a 110px column, so this is a list of pieces of work instead, each with room for
 * the sentence that answers "where is it up to".
 *
 * Colour, type and the rail come from theme.css. Nothing here redefines a brand token:
 * theme.css loads second and per-tenant colour has to win.
 */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--tenant-font, Inter, "Segoe UI", system-ui, sans-serif);
  color: var(--ink, #27272a);
  background: #fff;
}
button,
input {
  font: inherit;
}
:root {
  --muted: #667085;
  --line: #e4e7ec;
  /* The four states a piece of work is in, each with its own colour and its own word.
     Running is the brand; waiting-too-long borrows the accent; finished is deliberately
     quiet, because a finished list is for looking things up, not for watching. */
  --running: var(--brand, #007b77);
  --running-tint: var(--brand-tint, #eaf8f7);
  --late: #b3600f;
  --late-tint: #fdf3e7;
  --done: #5b6472;
  --done-tint: #f1f3f6;
  --stopped: #a01f2a;
  --stopped-tint: #fdf0f1;
}

/* ---- the page ---- */
/* The geometry the My tasks page uses, to the pixel: an 84px title row across the top
   with the rail beside it, then the list and the panel underneath. The two halves of Work
   were laid out by two different sets of rules, so the heading jumped and changed size
   when you moved between them. */
.case-shell {
  height: 100%;
  display: grid;
  grid-template-columns: var(--bb-rail-w) minmax(560px, 1fr) 360px;
  grid-template-rows: 84px minmax(0, 1fr);
  overflow: hidden;
  /* The frame the detail drawer slides inside of. Fixed to the viewport it covered the
     shared BridgeConnect header, which is in normal flow above this shell. */
  position: relative;
}
.case-nav {
  grid-column: 1;
  grid-row: 1 / 3;
}
.runtime-page-head {
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 32px 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.runtime-page-title {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.runtime-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.case-nav a {
  height: 58px;
  border-radius: 9px;
  color: #b8c2d0;
  text-decoration: none;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
}
.case-nav a:hover,
.case-nav .active {
  background: #1c3761;
  color: #fff;
}
.case-nav small {
  font-size: 9px;
}
.case-nav .brand {
  height: 42px;
  width: 42px;
  margin: 0 auto 10px;
  background: #fff;
  color: var(--nav, #343438);
  font-weight: 800;
}
.case-nav a[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
.nav-bottom {
  margin-top: auto;
}
main {
  grid-column: 2;
  grid-row: 2;
  overflow: auto;
  padding: 0 32px 40px;
  background: #fff;
}
h1 {
  font-size: 30px;
  line-height: 40px;
  margin: 0;
  letter-spacing: -0.025em;
}
/* How many, of what is on screen — not a badge with a bare number beside a heading that
   does not say what the number counts. It sits directly above the list it counts, so it
   reads as a caption for what is there rather than a statistic about the page. */
#case-count {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.search {
  width: 300px;
  height: 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 11px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
}
.search:focus-within {
  border-color: var(--brand, #007b77);
  box-shadow: 0 0 0 3px var(--brand-tint, #eaf8f7);
}
.search input {
  border: 0;
  outline: 0;
  width: 100%;
  color: var(--ink, #27272a);
}

/* ---- which of them ---- */
.case-tabs {
  margin-top: 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 22px;
}
.case-tabs button {
  border: 0;
  background: transparent;
  padding: 11px 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.case-tabs button:hover {
  color: var(--ink, #27272a);
}
.case-tabs .active {
  border-bottom-color: var(--brand, #007b77);
  color: var(--brand, #007b77);
  font-weight: 700;
}
.case-tabs button:focus-visible {
  outline: 2px solid var(--brand, #007b77);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- one piece of work ---- */
#case-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.case-row {
  position: relative;
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--state, var(--line));
  border-radius: 10px;
  padding: 14px 16px 13px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.case-row:hover {
  border-color: var(--brand-line, #9bdedb);
  border-left-color: var(--state, var(--line));
  box-shadow: 0 1px 3px #10182814;
}
.case-row.selected {
  border-color: var(--brand, #007b77);
  border-left-color: var(--state, var(--line));
  background: var(--brand-tint, #eaf8f7);
}
/* The band has to stay a band. Selected, its own tint and the card's were the same
   colour, so the one line the page exists for stopped standing out on the row a person
   had just clicked. */
.case-row.selected .case-now {
  --tint: #fff;
}
.case-row:focus-visible {
  outline: 2px solid var(--brand, #007b77);
  outline-offset: 1px;
}
.case-row[data-state="running"] {
  --state: var(--running);
}
.case-row[data-state="late"] {
  --state: var(--late);
}
.case-row[data-state="done"] {
  --state: var(--done);
}
.case-row[data-state="stopped"] {
  --state: var(--stopped);
}

/* line 1: what this piece of work is, and when it last moved */
.case-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.case-title b {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
}
.case-title time {
  flex: none;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
/* line 2: the process it follows, by its name — never its slug */
.case-process {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: -4px;
}

/* line 3: WHERE IT IS UP TO. The reason the page exists, so it is the one thing with a
   fill behind it. */
.case-now {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--tint, var(--soft, #f4f7f7));
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.case-row[data-state="running"] .case-now {
  --tint: var(--running-tint);
}
.case-row[data-state="late"] .case-now {
  --tint: var(--late-tint);
}
.case-row[data-state="done"] .case-now {
  --tint: var(--done-tint);
}
.case-row[data-state="stopped"] .case-now {
  --tint: var(--stopped-tint);
}
.case-now .at {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--state, var(--muted));
}
.case-now strong {
  font-weight: 650;
}
.case-now .who {
  color: var(--muted);
}
.case-now .who:before {
  content: "·";
  margin-right: 7px;
}
/* Yours, and late: the two things worth spotting from across the list. */
.flag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.flag.yours {
  background: var(--brand, #007b77);
  color: #fff;
}
.flag.late {
  background: var(--late);
  color: #fff;
}
.case-now .more {
  color: var(--muted);
  font-size: 11px;
}

/* line 4: how far it has come, and nothing claiming to know how far is left */
.case-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- the one being looked at ---- */
#case-detail {
  grid-column: 3;
  grid-row: 2;
  border-left: 1px solid var(--line);
  background: #fafbfc;
  padding: 18px;
  overflow: auto;
}
.detail-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 12px;
}
.detail-card h2 {
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 5px;
  letter-spacing: -0.01em;
}
.detail-card h3 {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 11px;
}
.detail-card > p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11.5px;
}
.detail-card dl {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 7px 10px;
  font-size: 11.5px;
  margin: 12px 0 0;
}
.detail-card dt {
  color: var(--muted);
}
.detail-card dd {
  margin: 0;
}
.step-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: 9px 0;
  font-size: 12px;
  width: 100%;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
  color: inherit;
  font-family: inherit;
}
.step-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.step-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10.5px;
}
.step-row .state {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.step-row .state.open {
  color: var(--running);
}
.step-row .state.done {
  color: var(--done);
}
.step-row .state.stopped {
  color: var(--stopped);
}
/* A step of the reader's own is a way in to doing it, so it is coloured and captioned
   like a link. Styled the same as the plain rows it sits among, it read as text. */
button.step-row {
  cursor: pointer;
}
button.step-row strong {
  color: var(--brand, #007b77);
}
/* Each kind of row says what it opens. One shared caption put "Open this step" under a
   sub-process, which is not a step. */
button.step-row:after {
  grid-column: 1 / -1;
  color: var(--brand, #007b77);
  font-size: 10.5px;
  font-weight: 650;
}
button.step-row[data-open-task]:after {
  content: "Open this step →";
}
button.step-row[data-linked-case]:after {
  content: "Open this process →";
}
button.step-row:hover strong,
button.step-row:hover:after {
  text-decoration: underline;
}
button.step-row:focus-visible {
  outline: 2px solid var(--brand, #007b77);
  outline-offset: 2px;
  border-radius: 6px;
}
.detail-action {
  display: block;
  width: 100%;
  margin-top: 11px;
  padding: 9px 12px;
  border: 1px solid var(--brand, #007b77);
  border-radius: 8px;
  background: var(--brand, #007b77);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.detail-action.quiet {
  background: #fff;
  color: var(--brand, #007b77);
}
.detail-action:hover {
  filter: brightness(0.95);
}
/* The way back out of the drawer. On a wide screen the panel sits beside the list and
     there is nothing to go back from, so it is not there. */
.detail-back {
  display: none;
}
@media (max-width: 1000px) {
  .detail-back {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink, #27272a);
    font-size: 12px;
    font-weight: 650;
    text-align: left;
    padding: 0 12px;
    cursor: pointer;
  }
}
.activity {
  border-left: 1px solid #cfd5df;
  padding: 0 0 14px 16px;
  position: relative;
  font-size: 11px;
}
.activity:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.activity:before {
  content: "";
  position: absolute;
  left: -4px;
  top: 3px;
  width: 7px;
  height: 7px;
  background: var(--running);
  border-radius: 50%;
}
.activity strong {
  display: block;
  font-weight: 600;
}
.activity time {
  color: var(--muted);
}

/* ---- nothing here ---- */
.empty {
  text-align: center;
  color: var(--muted);
  padding: 46px 18px;
  font-size: 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.empty h2 {
  color: var(--ink, #27272a);
  font-size: 15px;
  margin: 0 0 6px;
}
.empty p {
  margin: 0;
  max-width: 34em;
  margin-inline: auto;
  line-height: 1.55;
}
#case-detail .empty {
  border: 0;
}
#case-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  opacity: 0;
  background: #142033;
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11px;
  transform: translate(-50%, 15px);
  transition: 0.2s;
  pointer-events: none;
}
#case-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1000px) {
  .case-shell {
    grid-template-columns: var(--bb-rail-w) minmax(0, 1fr);
  }
  #case-detail {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(380px, 94vw);
    transform: translateX(100%);
    transition: 0.18s;
    box-shadow: -10px 0 30px #0002;
    z-index: 4;
  }
  .case-shell.detail-open #case-detail {
    transform: none;
  }
}
@media (max-width: 760px) {
  .case-shell {
    grid-template-rows: 56px minmax(0, 1fr);
  }
  .runtime-page-head {
    grid-column: 2;
    height: 56px;
    align-items: center;
    padding: 0 14px;
  }
  .runtime-page-title {
    gap: 12px;
  }
  h1 {
    font-size: 20px;
    line-height: 28px;
  }
  /* No room for both the heading and a search box on a phone. The tabs and the list are
     what the page is; searching is a desktop refinement. */
  .runtime-page-actions {
    display: none;
  }
  main {
    padding: 0 14px 32px;
  }
  .case-tabs {
    gap: 16px;
    overflow-x: auto;
  }
  .case-tabs button {
    white-space: nowrap;
  }
  .case-title {
    flex-direction: column;
    gap: 3px;
  }
  .case-nav small {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .case-row,
  #case-toast,
  #case-detail {
    transition: none;
  }
}

/* ORANGE BEFORE RED. A case whose open step is inside its warning window; past due stays red. */
.flag.soon{background:#fff3df;color:var(--warning,#b45309)}
.step-row .state.open.soon{background:#fff3df;color:var(--warning,#b45309)}
.step-row .state.open.late{background:#fff0f1;color:var(--danger,#b42318)}