/* =========================================================================
   Journeys — the firm's side. Report 138.

   The journeys design handoff's B1–B4 (starting a journey), D1–D5 (the work
   queue and its items), E1 (one person's journey) and F1–F2 (the overview):
   `planning/design/journeys-handoff/Journeys - Staff.dc.html` and
   `Journeys - Firm.dc.html`. Every value is the handoff README's token table.

   OWN PREFIX, `jr-`, AND NOTHING SHARED IS RESTYLED. The shell, the rail,
   `.ui-page`, `.ui-btn` and the form controls are `components.css`'s and
   other areas use them; where the design needs something they do not have,
   it is here, under `jr-`.
   ========================================================================= */

:root {
  /* ALIASES OF THE SHARED TOKENS — report 190. This block used to hold its
     own copy of the handoff's hex table, so a colour here could drift from
     the same colour in `components.css`, and did: the meta grey (#5F7085),
     the faint grey (#7A8899), the glyph (#A8A093) and the input edge
     (#B6AFA3) are the four values `redesign-2026-09.md` §3 retires for
     failing contrast, and they were still drawn here. Every name now points
     at the shared token, so a colour or a face means the same on every
     screen. The names stay so no rule below had to move. */
  --jr-paper: var(--page-bg);
  --jr-card: var(--card-bg);
  --jr-subtle: var(--rail-bg);
  --jr-hover: var(--tint-bg);
  --jr-chip: var(--chip-bg);
  --jr-border: var(--line);
  --jr-divider: var(--line-2);
  --jr-input: var(--line-input);
  --jr-btn-border: var(--line-3);
  --jr-ink: var(--ink-1);
  --jr-body: var(--ink-2);
  --jr-secondary: var(--ink-3);
  --jr-meta: var(--ink-4);
  --jr-faint: var(--ink-4);
  --jr-glyph: var(--muted-ink);
  --jr-copper: var(--copper-cta);
  --jr-copper-hover: var(--accent-hi);
  --jr-link: var(--accent);
  --jr-warn-bg: var(--warn-bg);
  --jr-warn-ink: var(--warn-fg);
  --jr-green: var(--green-deep);
  --jr-green-bg: var(--ok-bg);
  --jr-green-ink: var(--ok-fg);
  --jr-wait-bg: var(--wait-bg);
  --jr-wait-ink: var(--wait-fg);
  --jr-wait-2: var(--wait-fg-2);
  --jr-red: var(--alert-fg);
  --jr-red-bg: var(--alert-bg);
  --jr-red-border: var(--alert-dot);
  --jr-red-ink: var(--alert-fg);
  --jr-shadow: var(--shadow-shell);
  --jr-dialog-shadow: var(--shadow-dialog);
  --jr-overlay: var(--overlay);
  --jr-mono: var(--font-sans);
}

/* ── The page ──────────────────────────────────────────────────────── */

.jr-page { color: var(--jr-ink); }
/* :where() since report 190, so a link class later in this file sets its own
   colour without `!important`. */
.jr-page :where(a:not(.ui-btn):not(.jr-btn):not(.jr-row):not(.jr-tab):not(.jr-filter):not(.jr-plain)) { color: var(--jr-link); text-decoration: none; }
.jr-page :where(a:not(.ui-btn):not(.jr-btn):not(.jr-row):not(.jr-tab):not(.jr-filter):not(.jr-plain)):hover { color: var(--jr-copper-hover); text-decoration: underline; }
.jr-back {
  display: inline-block;
  font-size: var(--fs-meta);
  color: var(--jr-meta);
  margin-bottom: 8px;
}
.jr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.jr-head__text { min-width: 0; flex: 1 1 420px; }
.jr-title {
  margin: 0;
  font-size: var(--fs-page-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--jr-ink);
}
.jr-sub {
  margin: 6px 0 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--jr-secondary);
}
.jr-sub strong { color: var(--jr-ink); font-weight: 500; }
.jr-sub--counts { margin-top: 2px; font-size: var(--fs-ui); color: var(--jr-meta); }
.jr-tab-empty { margin: 4px 0 22px; font-size: var(--fs-body); color: var(--jr-secondary); }
.jr-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.jr-card {
  background: var(--jr-card);
  border: 1px solid var(--jr-border);
  border-radius: var(--radius-lg);
}
.jr-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 22px 22px 14px;
}
.jr-card__title { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--jr-ink); }
.jr-card__meta { font-size: var(--fs-meta); color: var(--jr-meta); }
.jr-card__body { padding: 20px 22px; }

/* Buttons in the design's shape: 10px radius, ink primary, bordered
   secondary, a red-text destructive and a solid red confirm. Since report
   190 the size, weight, edge and disabled look are the shared `--btn-*`
   tokens (components.css §1), so this is the same button as `.ui-btn`. */
.jr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: var(--btn-min-h); padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-sm); border: 1px solid var(--btn-edge);
  background: var(--jr-card); color: var(--jr-ink);
  font: inherit; font-size: var(--btn-fs); font-weight: var(--btn-weight); line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
}
.jr-btn:hover { background: var(--jr-hover); text-decoration: none; color: var(--jr-ink); }
.jr-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.jr-btn--primary:hover { background: var(--primary-press); border-color: var(--primary-press); color: var(--on-primary); }
.jr-btn--danger-text { color: var(--jr-red); border-color: var(--alert-dot); }
.jr-btn--danger-text:hover { color: var(--jr-red); background: var(--jr-red-bg); }
.jr-btn--danger { background: var(--jr-red); border-color: var(--jr-red); color: var(--on-anchor); }
.jr-btn--danger:hover { background: color-mix(in srgb, var(--alert-fg) 85%, black); color: var(--on-anchor); }
.jr-btn--wide { width: 100%; min-height: 44px; }
.jr-btn:disabled, .jr-btn:disabled:hover { opacity: 1; background: var(--btn-off-bg); color: var(--btn-off-fg); border-color: var(--btn-off-edge); cursor: not-allowed; }
.jr-btn:focus-visible, .jr-row:focus-visible, .jr-tab:focus-visible {
  outline: 2px solid var(--jr-copper); outline-offset: 2px;
}

/* Chips */
.jr-chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: var(--pill-pad-y) var(--pill-pad-x); border-radius: var(--radius-pill);
  font-size: var(--pill-fs); font-weight: var(--pill-weight); line-height: var(--pill-lh);
  background: var(--jr-chip); color: var(--jr-body);
}
.jr-chip--review { background: var(--jr-wait-bg); color: var(--jr-wait-ink); }
.jr-chip--ce { background: var(--jr-warn-bg); color: var(--jr-warn-ink); }
.jr-chip--task { background: var(--jr-chip); color: var(--jr-body); }
.jr-chip--copper { background: var(--jr-warn-bg); color: var(--jr-warn-ink); }
.jr-chip--red { background: var(--jr-red-bg); color: var(--jr-red); }
.jr-chip--green { background: var(--jr-green-bg); color: var(--jr-green-ink); }
.jr-chip--blue { background: var(--jr-wait-bg); color: var(--jr-wait-ink); }
.jr-chip--neutral { background: var(--jr-chip); color: var(--jr-secondary); }

.jr-mono { font-variant-numeric: tabular-nums; }

/* ── D1 · The work queue ───────────────────────────────────────────── */

.jr-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px;
  background: var(--jr-chip); border-radius: var(--radius); margin: 0 0 26px;
  max-width: 100%;
}
.jr-tab {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  font-size: var(--fs-ui); font-weight: 500; color: var(--jr-secondary);
  text-decoration: none;
}
.jr-tab:hover { color: var(--jr-ink); text-decoration: none; }
.jr-tab[aria-current="page"] {
  background: var(--jr-card); color: var(--jr-ink); font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-navy) 6%, transparent);
}
.jr-tab__n { font-weight: 400; }

.jr-group { margin: 0 0 22px; }
.jr-group__title {
  margin: 0 0 8px; font-size: var(--fs-body); font-weight: 600; color: var(--jr-ink);
}
.jr-group__title--overdue { color: var(--jr-red); }
.jr-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--jr-card); border: 1px solid var(--jr-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.jr-list > li + li { border-top: 1px solid var(--jr-divider); }
.jr-row {
  display: grid;
  /* Report 155 (M-F10): ONE grid for every row, with or without a button,
     so the third column starts at the same x on every row. */
  grid-template-columns: 150px minmax(0, 1fr) 220px 110px auto;
  align-items: center; gap: 16px;
  padding: 14px 22px; min-height: 65px;
  color: inherit; text-decoration: none;
  transition: background 140ms ease;
}
a.jr-row:hover { background: var(--jr-hover); text-decoration: none; color: inherit; }
.jr-row__title { display: block; font-size: var(--fs-body); font-weight: 500; color: var(--jr-ink); line-height: 1.35; }
/* M-F10: every title is ink, a link or not. The page's link rule is
   `.jr-page a:not(…)×4`, so this one carries the same weight and more. */
.jr-page .jr-row a.jr-row__title:not(.ui-btn):not(.jr-btn):not(.jr-row):not(.jr-tab) { color: var(--jr-ink); }
.jr-page .jr-row a.jr-row__title:not(.ui-btn):not(.jr-btn):not(.jr-row):not(.jr-tab):hover { color: var(--jr-ink); text-decoration: underline; }
/* One grid for the whole list: each row is a subgrid of it, so a row with a
   "Mark done for …" button and a row with a chevron share every column. */
@media (min-width: 861px) {
  .jr-list { display: grid; grid-template-columns: 150px minmax(0, 1fr) 220px 110px auto; }
  .jr-list > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .jr-list > li > .jr-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.jr-row__meta { display: block; font-size: var(--fs-meta); color: var(--jr-meta); line-height: 1.4; margin-top: 1px; }
.jr-row__area { font-size: var(--fs-ui); color: var(--jr-secondary); }
.jr-row__due { font-size: var(--fs-ui); color: var(--jr-secondary); }
.jr-row__due--overdue { color: var(--jr-red); font-weight: 600; }
.jr-row__chev { color: var(--jr-glyph); font-size: var(--fs-body); text-align: right; }
.jr-row--own { opacity: 0.6; }
.jr-row--own .jr-row__title { color: var(--jr-secondary); }
.jr-row__act { display: flex; justify-content: flex-end; }
.jr-row__act form { margin: 0; }

.jr-mini {
  font: inherit; font-size: var(--fs-meta); font-weight: 500; color: var(--jr-ink);
  background: var(--jr-card); border: 1px solid var(--jr-btn-border);
  border-radius: var(--radius-inner); padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.jr-mini:hover { background: var(--jr-hover); }
.jr-queue-foot { margin: 8px 0 0; font-size: var(--fs-meta); color: var(--jr-meta); }

/* D4 · the empty queue, and my own journey */
.jr-clear {
  text-align: center; padding: 34px 28px 30px;
  background: var(--jr-card); border: 1px solid var(--jr-border);
  border-radius: var(--radius-lg); max-width: 560px;
}
.jr-clear h2 { margin: 0 0 8px; font-size: var(--fs-section); font-weight: 600; }
.jr-clear p { margin: 0 auto 18px; max-width: 46ch; font-size: var(--fs-body); line-height: 1.6; color: var(--jr-secondary); }
.jr-own {
  padding: 22px 26px 24px; max-width: 560px;
  background: var(--jr-card); border: 1px solid var(--jr-border); border-radius: var(--radius-lg);
}
.jr-own__eyebrow { margin: 0 0 4px; font-size: var(--fs-meta); color: var(--jr-meta); }
.jr-own h1, .jr-own h2 { margin: 0 0 12px; font-size: var(--fs-section); font-weight: 600; }
.jr-own__note {
  margin: 0; padding: 14px 14px; border-radius: var(--radius-sm);
  background: var(--jr-chip); color: var(--jr-body); font-size: var(--fs-ui); line-height: 1.6;
}

/* ── D2 / D3 · One item ────────────────────────────────────────────── */

.jr-item-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 0 16px; margin: 0 0 22px;
  border-bottom: 1px solid var(--jr-border);
  font-size: var(--fs-ui);
}
.jr-item-bar__back, body.is-focus .jr-item-bar__back { color: var(--jr-body); }
.jr-item-bar__pos { color: var(--jr-meta); }
.jr-item-bar__skip, body.is-focus .jr-item-bar__skip { margin-left: auto; color: var(--jr-body); }
/* Report 176: the site-admin chip sits at the right end of the item bar. It
   takes the free space itself only when there is no Skip for now. */
.focus-top--item > .admin-chip { margin-left: 16px; }
.focus-top--item:not(:has(.jr-item-bar__skip)) > .admin-chip { margin-left: auto; }
.jr-review {
  display: grid; grid-template-columns: minmax(0, 1fr) 432px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "file head" "file side";
  column-gap: 32px; align-items: start;
}
.jr-review__file { grid-area: file; min-width: 0; }
.jr-review__head { grid-area: head; }
.jr-review__side { grid-area: side; }
.jr-file-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: var(--fs-meta); color: var(--jr-meta);
}
.jr-file-head strong { font-size: var(--fs-body); font-weight: 500; color: var(--jr-ink); }
.jr-file-head a { margin-left: auto; font-weight: 500; }
.jr-viewer {
  background: var(--sunk-bg); border-radius: var(--radius-lg); padding: 26px;
  min-height: 560px; display: flex; justify-content: center; align-items: flex-start;
}
.jr-viewer iframe, .jr-viewer object {
  width: 100%; min-height: 720px; border: 0; background: var(--card-bg);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink-navy) 12%, transparent);
}
.jr-viewer img { max-width: 100%; max-height: 720px; border-radius: var(--radius-inner); background: var(--card-bg); }
.jr-viewer__none { align-self: center; color: var(--jr-secondary); font-size: var(--fs-body); text-align: center; max-width: 40ch; line-height: 1.55; }
.jr-answers {
  width: 100%; max-width: 600px; background: var(--card-bg); border-radius: var(--radius-inner);
  padding: 28px 34px; box-shadow: 0 2px 10px color-mix(in srgb, var(--ink-navy) 12%, transparent);
}
.jr-answers h3 { margin: 0 0 16px; font-size: var(--fs-body); font-weight: 600; }
.jr-answers dl { display: grid; grid-template-columns: 170px 1fr; gap: 10px 16px; margin: 0; font-size: var(--fs-ui); }
.jr-answers dt { color: var(--jr-meta); }
.jr-answers dd { margin: 0; color: var(--jr-ink); overflow-wrap: anywhere; }

/* Report 145 (S7). No min-height: it pushed the button under the page's
   footer at 1440×900. The button follows what the reader has to read, and
   `.jr-decide__go` pins it to the foot of the scrolling page when the
   column is taller than the screen. */
.jr-decide { display: flex; flex-direction: column; }
.jr-eyebrow { margin: 0 0 2px; font-size: var(--fs-meta); color: var(--jr-meta); }
.jr-item-title { margin: 0; font-size: var(--fs-heading); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.jr-item-for { margin: 6px 0 22px; font-size: var(--fs-body); color: var(--jr-meta); line-height: 1.45; }
.jr-h3 { margin: 0 0 12px; font-size: var(--fs-body); font-weight: 600; color: var(--jr-ink); }
/* M-F14: the Who card on a start with no questions. */
.jr-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 14px 0 0; }
.jr-who dt { font-size: var(--fs-meta); color: var(--jr-meta); }
.jr-who dd { margin: 2px 0 0; font-size: var(--fs-body); color: var(--jr-ink); overflow-wrap: anywhere; }
@media (max-width: 860px) { .jr-who { grid-template-columns: minmax(0, 1fr); } }
/* M-F4: the signed agreement a task verifies. */
.jr-signed { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--jr-subtle); font-size: var(--fs-ui); line-height: 1.55; color: var(--jr-body); }
.jr-task__card .jr-h3 { margin-top: 20px; }
.jr-checks { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.jr-check {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: var(--fs-body); line-height: 1.4; color: var(--jr-ink); cursor: pointer;
  background: none; border: 0; padding: 0; text-align: left; font-family: inherit;
}
.jr-check__box {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--jr-input); background: var(--card-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-anchor); font-size: var(--fs-micro); font-weight: 700;
}
.jr-check[data-mark="ok"] .jr-check__box { background: var(--jr-green); border-color: var(--jr-green); }
.jr-check[data-mark="no"] .jr-check__box { background: var(--jr-red); border-color: var(--jr-red); }
.jr-check[data-mark="no"] { color: var(--jr-red); }
.jr-prose { margin: 0 0 12px; font-size: var(--fs-body); line-height: 1.6; color: var(--jr-body); }

/* APPROVE / SEND BACK IS TWO BUTTONS, NOT A TOGGLE — report 190, review
   [26]. It was a segmented control on a chip track: two grey words, one of
   which went white when picked, next to a primary that stayed off until
   then. The phone had two real buttons and the desk a faint switch. Each
   side is now a secondary button (`--btn-*`), and the picked one takes the
   look of what it will do: Approve the primary, Send back the danger pair. */
.jr-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 22px;
}
.jr-seg input { position: absolute; opacity: 0; pointer-events: none; }
.jr-seg label {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--btn-min-h); padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--btn-edge); border-radius: var(--radius-sm);
  background: var(--card-bg); color: var(--ink-1);
  font-size: var(--btn-fs); font-weight: var(--btn-weight); line-height: 1.2;
  cursor: pointer; transition: background 140ms ease, border-color 140ms ease;
}
.jr-seg label:hover { background: var(--tint-bg); border-color: var(--ink-4); }
.jr-seg input[value="return"] + label { color: var(--alert-fg); border-color: var(--alert-dot); }
.jr-seg input:checked + label { background: var(--anchor); border-color: var(--anchor); color: var(--on-anchor); }
.jr-seg input[value="return"]:checked + label { background: var(--alert-bg); border-color: var(--alert-fg); color: var(--alert-fg); box-shadow: inset 0 0 0 1px var(--alert-fg); }
.jr-seg input:disabled + label { background: var(--btn-off-bg); color: var(--btn-off-fg); border-color: var(--btn-off-edge); cursor: not-allowed; }
.jr-seg input:focus-visible + label { outline: 2px solid var(--jr-copper); outline-offset: 2px; }

.jr-label { display: block; margin: 0 0 6px; font-size: var(--fs-ui); font-weight: 500; color: var(--jr-body); }
.jr-label small { display: block; font-size: var(--fs-meta); font-weight: 400; color: var(--jr-meta); }
.jr-textarea, .jr-input, .jr-select {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--jr-ink);
  background: var(--card-bg); border: 1px solid var(--jr-input); border-radius: var(--radius-sm);
  padding: 11px 13px; line-height: 1.5;
}
.jr-textarea { min-height: 120px; resize: vertical; }
.jr-input { height: 44px; padding: 0 13px; }
.jr-select { height: 44px; padding: 0 36px 0 13px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--jr-secondary) 50%), linear-gradient(135deg, var(--jr-secondary) 50%, transparent 50%);
  background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.jr-textarea:focus, .jr-input:focus, .jr-select:focus { outline: 2px solid var(--jr-copper); outline-offset: 0; border-color: var(--jr-copper); }
.jr-input--warn { border-color: var(--jr-copper); }
/* The design's fields are 44px at 16px. `components.css` §6 sets every
   field on a `.ui-page` with a (0,7,1) selector, so these are held here,
   for this area's own classes only. */
.jr-page .jr-input, .jr-page .jr-select {
  min-height: 44px !important; font-size: var(--fs-body) !important;
  border-radius: var(--radius-sm) !important;
}
.jr-page .jr-textarea { font-size: var(--fs-body) !important; padding: 11px 13px !important; border-radius: var(--radius-sm) !important; }
.jr-page .jr-input--warn { border-color: var(--jr-copper) !important; }
.jr-effect { margin: 16px 0 0; font-size: var(--fs-ui); line-height: 1.6; color: var(--jr-meta); }
.jr-effect strong { color: var(--jr-ink); font-weight: 500; }
/* The scrolling page (`.ui-page`) has a 72px (`--space-10`) padding at its
   foot, and a sticky box is held inside it — at `bottom: 0` the button sat
   72px up and covered the sentence above it at rest. The negative inset
   pins it at the true foot of what the reader can see instead. */
.jr-decide__go {
  position: sticky; bottom: calc(-1 * var(--space-10)); z-index: 2;
  margin-top: 8px; padding: 16px 0 12px;
  background: var(--jr-paper);
}
.jr-effect--hint { margin-top: 8px; font-size: var(--fs-meta); color: var(--jr-faint); }
.jr-effect--hint[hidden] { display: none; }
.jr-cant-see { margin: -4px 0 10px; font-size: var(--fs-meta); color: var(--jr-meta); }
/* S8: a block that holds a short answer card fits it. */
.jr-viewer--fit { min-height: 0; }
.jr-decide [data-when="return"], .jr-decide [data-when="approve"] { display: none; }
.jr-decide[data-outcome="return"] [data-when="return"],
.jr-decide[data-outcome="approve"] [data-when="approve"] { display: block; }
.jr-done-note {
  margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--jr-green-bg); color: var(--jr-green-ink); font-size: var(--fs-ui); line-height: 1.5;
}
.jr-problems { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--jr-red-bg); color: var(--jr-red-ink); font-size: var(--fs-ui); }
.jr-problems p { margin: 0; }
.jr-phone-bar { display: none; }

/* D3 · a task item */
.jr-task { max-width: 820px; }
.jr-task__card { padding: 28px 34px 30px; }
.jr-instructions {
  margin: 0 0 18px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--jr-subtle); border: 1px solid var(--jr-border);
  font-size: var(--fs-body); line-height: 1.6; color: var(--jr-body);
}
.jr-instructions p { margin: 0; }
.jr-instructions p + p { margin-top: 8px; }
.jr-tick-list { list-style: none; margin: 0 0 20px; padding: 0; border: 1px solid var(--jr-border); border-radius: var(--radius); }
.jr-tick-list li + li { border-top: 1px solid var(--jr-divider); }
.jr-tick-list label { display: flex; gap: 14px; align-items: center; padding: 13px 16px; font-size: var(--fs-body); color: var(--jr-body); cursor: pointer; }
.jr-tick-list input { width: 22px; height: 22px; accent-color: var(--jr-green); margin: 0; flex: none; }
.jr-task__go { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.jr-task__go .jr-effect { margin: 0; flex: 1 1 260px; font-size: var(--fs-ui); }
.jr-note-field { margin: 0 0 18px; }
.jr-note-toggle { cursor: pointer; font-size: var(--fs-ui); color: var(--jr-meta); }
.jr-note-toggle:hover { color: var(--jr-ink); }

/* ── E1 · One person's journey ─────────────────────────────────────── */

.jr-flag {
  margin: 0 0 18px; padding: 14px 18px; border-radius: var(--radius);
  border: 1.5px solid var(--jr-red-border); background: var(--card-bg);
  color: var(--jr-red-ink); font-size: var(--fs-ui); line-height: 1.5;
}
.jr-closed {
  margin: 0 0 18px; padding: 14px 18px; border-radius: var(--radius);
  background: var(--jr-chip); color: var(--jr-body); font-size: var(--fs-ui); line-height: 1.55;
}
.jr-cps { padding: 22px 22px 20px; margin-bottom: 20px; }
.jr-cps__grid { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.jr-cp__bar { height: 6px; border-radius: var(--radius-xs); background: var(--jr-chip); }
.jr-cp--reached .jr-cp__bar { background: var(--jr-green); }
.jr-cp--in_progress .jr-cp__bar { background: var(--jr-copper); }
.jr-cp--moved_back .jr-cp__bar { background: var(--jr-red); }
.jr-cp__name { margin: 10px 0 2px; font-size: var(--fs-ui); line-height: 1.3; color: var(--jr-ink); padding-right: 6px; }
.jr-cp__state { font-size: var(--fs-meta); color: var(--jr-faint); }
.jr-cp--reached .jr-cp__state { color: var(--jr-green); }
.jr-cp--in_progress .jr-cp__state { color: var(--jr-copper); }
.jr-cp--moved_back .jr-cp__state { color: var(--jr-red); }

.jr-two { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.jr-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.jr-parties { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--jr-divider); }
.jr-parties li + li { border-top: 1px solid var(--jr-divider); }
.jr-party { display: grid; grid-template-columns: 236px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 22px; min-height: 65px; }
.jr-party__who { font-size: var(--fs-body); color: var(--jr-ink); }
.jr-party__what { font-size: var(--fs-body); color: var(--jr-ink); }
.jr-party__what small { display: block; font-size: var(--fs-meta); color: var(--jr-meta); }

.jr-all { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--jr-divider); }
.jr-all > li + li { border-top: 1px solid var(--jr-divider); }
.jr-act { display: grid; grid-template-columns: 24px minmax(0, 1fr) 200px 170px; gap: 12px; align-items: center; padding: 10px 22px; min-height: 40px; }
.jr-act__title { font-size: var(--fs-body); font-weight: 500; color: var(--jr-ink); line-height: 1.3; }
.jr-act__title a { color: var(--jr-ink); }
.jr-act__title a:hover { color: var(--accent-hi); }
.jr-act__why { display: block; font-size: var(--fs-meta); font-style: italic; font-weight: 400; color: var(--jr-faint); }
.jr-act__note { display: block; font-size: var(--fs-meta); font-weight: 400; color: var(--jr-red-ink); margin-top: 2px; }
.jr-act__note--staff { color: var(--jr-meta); }
.jr-act__who { font-size: var(--fs-ui); color: var(--jr-secondary); }
.jr-act__state { font-size: var(--fs-ui); color: var(--jr-secondary); }
.jr-act__state--green { color: var(--jr-green); }
.jr-act__state--copper { color: var(--jr-copper); }
.jr-act__state--red { color: var(--jr-red); }
.jr-act__state--faint { color: var(--jr-faint); }
.jr-act--skipped { opacity: 0.6; }
.jr-glyph { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-micro); font-weight: 700; color: var(--on-anchor); }
.jr-glyph--done { background: var(--jr-green); }
.jr-glyph--open { border: 1.5px solid var(--jr-copper); background: var(--card-bg); }
.jr-glyph--locked { border: 1.5px dashed var(--jr-btn-border); background: var(--jr-paper); }
.jr-glyph--returned { background: var(--jr-red); }
.jr-glyph--skipped, .jr-glyph--stopped { border: 1.5px solid var(--jr-divider); background: var(--jr-paper); }

.jr-welcome { list-style: none; margin: 0; padding: 0 22px; }
.jr-welcome li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: var(--fs-body); color: var(--jr-ink); }
.jr-welcome li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--jr-green); transform: translateY(-2px); }
.jr-welcome__when { margin-left: auto; font-size: var(--fs-meta); color: var(--jr-meta); white-space: nowrap; }
.jr-welcome-foot { margin: 6px 22px 20px; font-size: var(--fs-meta); color: var(--jr-meta); line-height: 1.5; }
.jr-history { list-style: none; margin: 0; padding: 0 22px 12px; }
.jr-history li { padding: 10px 0; }
.jr-history li + li { border-top: 1px solid var(--jr-divider); }
.jr-history__what { font-size: var(--fs-body); line-height: 1.4; color: var(--jr-ink); }
.jr-history__who { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--jr-meta); }
.jr-empty-line { margin: 0 22px 20px; font-size: var(--fs-ui); color: var(--jr-meta); }
.jr-answers-edit { font-size: var(--fs-meta); }

/* ── Dialogs (B2, B4) ──────────────────────────────────────────────── */

.jr-dialog {
  width: min(520px, calc(100vw - 32px)); padding: 0; border: 0;
  border-radius: var(--shell-radius); box-shadow: var(--jr-dialog-shadow); color: var(--jr-ink);
}
.jr-dialog--wide { width: min(520px, calc(100vw - 32px)); }
.jr-dialog::backdrop { background: var(--jr-overlay); }
.jr-dialog__body { padding: 26px 28px 26px; }
.jr-dialog h2 { margin: 0 0 12px; font-size: var(--fs-heading); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.jr-dialog p { margin: 0 0 12px; font-size: var(--fs-body); line-height: 1.6; color: var(--jr-body); }
.jr-dialog .jr-quiet { color: var(--jr-meta); }
.jr-dialog__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.jr-check-line { display: flex; gap: 10px; align-items: center; font-size: var(--fs-body); color: var(--jr-body); margin: 4px 0 0; }
.jr-check-line input { width: 20px; height: 20px; accent-color: var(--jr-ink); margin: 0; }
.jr-field { margin: 0 0 14px; }

/* ── B1 · Onboard a new broker ─────────────────────────────────────── */

.jr-start { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; }
.jr-start__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.jr-form-card { padding: 24px 24px 24px; }
.jr-form-card h2 { margin: 0 0 14px; font-size: var(--fs-section); font-weight: 600; }
.jr-form-card h2 + .jr-sub { margin: -10px 0 16px; font-size: var(--fs-ui); }
.jr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.jr-grid2 > .jr-field { margin: 0; }
.jr-grid2 + .jr-field, .jr-field + .jr-grid2, .jr-grid2 + .jr-grid2, .jr-typo + .jr-grid2 { margin-top: 14px; }
.jr-field .jr-label { font-size: var(--fs-meta); }
.jr-typo {
  display: flex; align-items: center; gap: 16px; margin: 8px 0 0;
  padding: 10px 12px 10px 14px; border-radius: var(--radius-sm);
  background: var(--jr-warn-bg); color: var(--jr-warn-ink); font-size: var(--fs-ui); line-height: 1.35;
}
.jr-typo[hidden] { display: none; }
/* M-F13: in the narrow Change-email dialog the button goes under the words. */
.jr-dialog .jr-typo { flex-wrap: wrap; gap: 8px 16px; }
.jr-dialog .jr-typo > span { flex: 1 1 200px; min-width: 0; }
.jr-typo strong { font-weight: 600; }
.jr-typo button {
  margin-left: auto; flex: none; font: inherit; font-size: var(--fs-ui); font-weight: 500;
  color: var(--jr-copper); background: var(--card-bg); border: 0; border-radius: var(--radius-inner);
  padding: 6px 12px; cursor: pointer;
}
.jr-segpick { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 4px; padding: 4px; background: var(--jr-chip); border-radius: var(--radius-sm); max-width: 100%; }
.jr-segpick input { position: absolute; opacity: 0; pointer-events: none; }
.jr-segpick label { display: flex; justify-content: center; padding: 8px 14px; border-radius: var(--radius-inner); font-size: var(--fs-body); color: var(--jr-meta); cursor: pointer; }
.jr-segpick input:checked + label { background: var(--jr-card); color: var(--jr-ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-navy) 8%, transparent); }
.jr-segpick input:focus-visible + label { outline: 2px solid var(--jr-copper); }

.jr-panel { position: sticky; top: 90px; }
.jr-panel__sec { padding: 18px 22px; border-top: 1px solid var(--jr-divider); }
.jr-panel__sec:first-child { border-top: 0; padding-top: 22px; }
.jr-panel__h { margin: 0; font-size: var(--fs-section); font-weight: 600; }
.jr-panel__lead { margin: 2px 0 0; font-size: var(--fs-ui); color: var(--jr-meta); }
.jr-panel__k { margin: 0 0 4px; font-size: var(--fs-meta); font-weight: 600; color: var(--jr-meta); }
.jr-panel__v { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--jr-ink); }
.jr-panel__v strong { font-weight: 600; }
.jr-panel__v .jr-copper { color: var(--jr-copper); font-weight: 600; }
.jr-panel__small { margin: 8px 0 0; font-size: var(--fs-ui); line-height: 1.55; color: var(--jr-meta); }
.jr-panel__go { padding: 18px 22px 22px; border-top: 1px solid var(--jr-divider); }

.jr-choices { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.jr-choice { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.jr-choice h2 { margin: 0 0 2px; font-size: var(--fs-section); font-weight: 600; }
.jr-choice p { margin: 0; font-size: var(--fs-ui); color: var(--jr-meta); line-height: 1.5; }
.jr-choice > div { flex: 1; min-width: 0; }

/* B3 · Confirmed */
.jr-done { max-width: 620px; padding: 8px 0; }
.jr-done__tick { width: 48px; height: 48px; border-radius: 50%; background: var(--jr-green); color: var(--on-anchor); display: flex; align-items: center; justify-content: center; font-size: var(--fs-heading); margin: 0 0 18px; }
.jr-done h1 { margin: 0 0 12px; font-size: var(--fs-page-title); font-weight: 600; letter-spacing: -0.01em; }
.jr-done p { margin: 0 0 10px; font-size: var(--fs-body); line-height: 1.6; color: var(--jr-body); }
.jr-done p strong { color: var(--jr-ink); }
.jr-done .jr-actions { margin-top: 22px; }

/* ── F1 · The overview ─────────────────────────────────────────────── */

.jr-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 22px; }
.jr-strip-note { margin: -12px 0 20px; font-size: var(--fs-meta); color: var(--jr-meta); }
.jr-team { padding: 16px 16px 14px; border-radius: var(--radius-lg); background: var(--jr-card); border: 1px solid var(--jr-border); }
.jr-team--worst { border-color: var(--jr-red); }
.jr-team__name { margin: 0 0 12px; font-size: var(--fs-ui); font-weight: 500; color: var(--jr-ink); min-height: 1.4em; }
.jr-team__n { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-meta); color: var(--jr-meta); }
.jr-team__n b { font-variant-numeric: tabular-nums; font-size: var(--fs-heading); font-weight: 500; color: var(--jr-ink); }
.jr-team__bar { display: flex; height: 5px; border-radius: var(--radius-xs); overflow: hidden; background: var(--jr-chip); margin: 8px 0 10px; }
.jr-team__bar i { display: block; height: 100%; }
.jr-team__bar .jr-late { background: var(--jr-red); }
.jr-team__bar .jr-rest { background: var(--jr-ink); }
.jr-team__late { font-size: var(--fs-meta); color: var(--jr-red); }
.jr-team__late--none { color: var(--jr-green); }

.jr-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; align-items: center; }
.jr-filters .jr-input { width: 260px; height: 40px; }
/* `components.css` §6 styles every field on a `.ui-page` at full width with
   a (0,7,1) selector. These two rows are the design's pills, so their width
   is held here, under this page's own class and nowhere else. */
.jr-filters .jr-input { width: 220px !important; min-height: 40px !important; }
.jr-filters .jr-pill { width: auto !important; min-height: 40px !important; padding-right: 32px !important; border-color: var(--line-input) !important; }   /* a control edge, 3:1 — report 190 */
/* Review of 138: a native select is as wide as its longest option ("New
   broker onboarding — New Mexico"), which pushed "Overdue only" onto a second
   line. F1 draws the filters as one row of pills sized to what they say. */
@media (min-width: 900px) {
  .jr-filters .jr-input { width: 200px !important; }
  .jr-filters .jr-pill { max-width: 190px; text-overflow: ellipsis; }
}
.jr-pill {
  height: 40px; font: inherit; font-size: var(--fs-ui); color: var(--jr-ink);
  background: var(--card-bg); border: 1px solid var(--jr-border); border-radius: var(--radius-sm);
  padding: 0 30px 0 13px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--jr-ink) 50%), linear-gradient(135deg, var(--jr-ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 17px, calc(100% - 12px) 17px;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.jr-toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; font-size: var(--fs-ui); color: var(--jr-ink); cursor: pointer; }
.jr-toggle input { accent-color: var(--jr-ink); margin: 0; }
.jr-toggle input { width: 18px; height: 18px; }
.jr-apply { height: 40px; }
.js .jr-apply { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.jr-pipe { margin: 0 0 16px; overflow: hidden; }
.jr-pipe__head, .jr-pipe__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 230px 110px 90px;
  gap: 16px; align-items: center; padding: 0 22px;
}
.jr-pipe__head { padding-top: 14px; padding-bottom: 14px; background: var(--jr-subtle); border-bottom: 1px solid var(--jr-divider); align-items: center; }
.jr-pipe__type { grid-column: 1 / span 2; font-size: var(--fs-body); font-weight: 600; color: var(--jr-ink); }
.jr-pipe__type small { margin-left: 6px; font-size: var(--fs-meta); font-weight: 400; color: var(--jr-meta); }
.jr-pipe__phone-head { display: none; }
.jr-pipe__th { font-size: var(--fs-label); font-weight: 600; color: var(--jr-meta); }
.jr-pipe__rows { list-style: none; margin: 0; padding: 0; }
.jr-pipe__rows li + li { border-top: 1px solid var(--jr-divider); }
.jr-pipe__row { min-height: 62px; padding-top: 10px; padding-bottom: 10px; color: inherit; text-decoration: none; transition: background 140ms ease; }
a.jr-pipe__row:hover { background: var(--jr-hover); text-decoration: none; }
.jr-pipe__name { font-size: var(--fs-body); font-weight: 500; color: var(--jr-ink); line-height: 1.3; }
.jr-pipe__name small { display: block; font-size: var(--fs-meta); font-weight: 400; color: var(--jr-meta); }
.jr-track { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 4px; }
.jr-track i { display: block; height: 8px; border-radius: var(--radius-xs); background: var(--sunk-bg); }
.jr-track i.jr-reached { background: var(--jr-green); }
.jr-track i.jr-in_progress { background: var(--jr-copper); }
.jr-track i.jr-moved_back, .jr-legend i.jr-moved_back {
  /* Hatched as well as red, so it is not told from copper by hue alone. */
  background: repeating-linear-gradient(135deg, var(--jr-red) 0 3px, color-mix(in srgb, var(--alert-dot) 40%, var(--card-bg)) 3px 6px); }
.jr-legend i.jr-reached { background: var(--jr-green); }
.jr-legend i.jr-in_progress { background: var(--jr-copper); }
.jr-legend i.jr-not_yet { background: var(--sunk-bg); }
.jr-pipe__progress { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.jr-pipe__now { font-size: var(--fs-meta); color: var(--jr-secondary); line-height: 1.35; }
.jr-pipe__back { font-weight: 600; color: var(--jr-red); }
.jr-pipe__next { font-size: var(--fs-ui); color: var(--jr-body); }
.jr-pipe__late { font-size: var(--fs-ui); font-weight: 600; color: var(--jr-red); }
.jr-pipe__late--none { font-weight: 400; color: var(--jr-glyph); }
@media (max-width: 860px) { .jr-pipe__late--none { display: none; } }
.jr-pipe__days { font-size: var(--fs-meta); color: var(--jr-body); white-space: nowrap; }
/* REPORT 177. "Started" is the column head at desktop; a phone has none. */
/* REPORT 183: hidden to the eye only, so a screen reader and the row's
   accessible name still say "Started today", never a bare "Today". */
.jr-pipe__days-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jr-pipe__days-when { display: inline-block; }
.jr-pipe__days-when::first-letter { text-transform: uppercase; }
@media (max-width: 860px) { .jr-pipe__days-lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; } .jr-pipe__days-when::first-letter { text-transform: none; } .jr-pipe__days { color: var(--jr-meta); font-size: var(--fs-meta); } }
.jr-stand { margin: -4px 22px 14px; font-size: var(--fs-ui); line-height: 1.45; color: var(--jr-body); }
.jr-stand b { font-weight: 600; color: var(--jr-ink); }
@media (max-width: 860px) { .jr-stand { margin: -2px 16px 12px; } }
.jr-foot { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin: 4px 0 0; }
.jr-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: var(--fs-meta); color: var(--jr-secondary); }
.jr-foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-meta); }
.jr-page .jr-foot .jr-foot__links a:not(.ui-btn):not(.jr-btn):not(.jr-row):not(.jr-tab) { color: var(--jr-secondary); text-decoration: underline; text-decoration-color: var(--jr-border); text-underline-offset: 3px; }
.jr-page .jr-foot .jr-foot__links a:not(.ui-btn):not(.jr-btn):not(.jr-row):not(.jr-tab):hover { color: var(--jr-ink); }
.jr-legend i { display: inline-block; width: 18px; height: 6px; border-radius: var(--radius-xs); margin-right: 6px; vertical-align: middle; }
.jr-empty { text-align: center; padding: 48px 20px 40px; }
.jr-empty h2 { margin: 0 0 10px; font-size: var(--fs-heading); font-weight: 600; }
.jr-empty p { margin: 0 auto 20px; max-width: 58ch; font-size: var(--fs-body); line-height: 1.6; color: var(--jr-secondary); }

/* ── Narrower screens ──────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .jr-two, .jr-start { grid-template-columns: minmax(0, 1fr); }
  .jr-review { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "file" "side"; row-gap: 16px; }
  .jr-panel, .jr-decide { position: static; min-height: 0; }
  .jr-row { grid-template-columns: 130px minmax(0, 1fr) 170px 100px auto; }
  .jr-list { grid-template-columns: 130px minmax(0, 1fr) 170px 100px auto; }
  .jr-pipe__head, .jr-pipe__row { grid-template-columns: 170px minmax(0, 1fr) 190px 100px 84px; }
}

/* Hidden above 860px; declared before the query so the query can show it
   without `!important` (report 190). */
.jr-pipe__phone-type { display: none; }
@media (max-width: 860px) {
  .jr-row, .jr-row--with-act {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "chip due" "main main" "area area";
    gap: 6px 12px; padding: 14px 16px;
  }
  .jr-row > :nth-child(1) { grid-area: chip; }
  .jr-row > :nth-child(2) { grid-area: main; }
  .jr-row > .jr-row__area { grid-area: area; font-size: var(--fs-meta); }
  .jr-row > .jr-row__due { grid-area: due; text-align: right; font-size: var(--fs-meta); }
  .jr-row > .jr-row__chev { display: none; }
  .jr-row > .jr-row__act { grid-area: area; justify-content: flex-start; }
  .jr-party { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  .jr-party__who { grid-column: 1 / -1; font-weight: 600; }
  .jr-act { grid-template-columns: 24px minmax(0, 1fr); padding: 10px 16px; }
  .jr-act__who, .jr-act__state { grid-column: 2; }
  .jr-cps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .jr-pipe__head { display: none; }
  .jr-pipe__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 16px; }
  .jr-pipe__row > .jr-pipe__progress { grid-column: 1 / -1; grid-row: 2; }
  .jr-pipe__row > .jr-pipe__next, .jr-pipe__row > .jr-pipe__late { grid-column: 1 / -1; }
  .jr-pipe__row > .jr-pipe__days { grid-column: 2; grid-row: 1; }
  /* S1: at 768 and on a phone the card keeps its checkpoint names, over
     tracks that run the card's full width with the same 16px inset. */
  .jr-pipe__phone-head { display: block; padding: 14px 16px 12px; background: var(--jr-subtle); border-bottom: 1px solid var(--jr-divider); }
  .jr-pipe__phone-type { display: block; margin: 0 0 10px; font-size: var(--fs-body); font-weight: 600; }
  .jr-grid2 { grid-template-columns: minmax(0, 1fr); }
  .jr-filters .jr-input { width: 100%; }
  .jr-title { font-size: var(--fs-page-title); }
  /* M-F9: one row of tabs; a long list scrolls inside itself. */
  .jr-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; }
  .jr-tab { padding: 8px 12px; font-size: var(--fs-ui); white-space: nowrap; flex: none; }
  .jr-task__card { padding: 20px 18px; }
  .jr-card__head { padding: 18px 16px 12px; }
  .jr-party, .jr-act { padding-left: 16px; padding-right: 16px; }
  .jr-welcome { padding: 0 16px; }
  .jr-welcome li { flex-wrap: wrap; }
  .jr-history { padding: 0 16px 12px; }
  .jr-welcome-foot { margin: 6px 16px 18px; }
  .jr-answers { padding: 20px 18px; }
  .jr-answers dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .jr-answers dd { margin-bottom: 8px; }
}

/* D5's pinned pair, from 900px down (report 150). In the stacked layout
   (<=1180px) the decision sits under the file, and a sticky button cannot
   leave its column: measured at 800x600 the Approve button started 1158px
   down the page. Up to 900px the app has no side rail, so D5's full-width
   bar fits; 901-1180px is still open (see report 150). */
@media (max-width: 900px) {
  .jr-decide .jr-seg, .jr-decide__go { display: none; }
  .jr-decide { padding-bottom: 96px; }
  .jr-phone-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; z-index: 30;
    /* Above the app's own bottom bar, which is drawn over the page. */
    bottom: calc(var(--tabbar-tap, 0px) + var(--tabbar-rule, 0px)
                 + env(safe-area-inset-bottom));
    padding: 14px 18px;
    background: var(--jr-subtle); border-top: 1px solid var(--jr-border);
  }
  .jr-phone-bar .jr-btn { min-height: 52px; font-size: var(--fs-section); border-radius: var(--radius); }
  /* Report 190 (review [27]): Approve was green, the only green primary in
     the product. It is the primary — navy — and Send back is the danger
     secondary every other shell draws. */
  .jr-btn.jr-btn--back { color: var(--alert-fg); border-color: var(--alert-dot); background: var(--card-bg); }
  .jr-btn--approve { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  .jr-btn--approve:hover { background: var(--primary-press); border-color: var(--primary-press); color: var(--on-primary); }
  /* Report 155 (M-F3): the reason box shows only after the first tap on
     "Send back" (which sets data-outcome="return"); the second tap sends.
     So no note can be typed and then dropped by an Approve. */
  .jr-decide[data-outcome="approve"] [data-when="return"] { display: none; }
  .jr-phone-bar .jr-go-hint { grid-column: 1 / -1; }
}
/* M-F3: what Approve waits for, in the bar the thumb is on. */
.jr-go-hint { margin: 0 0 8px; font-size: var(--fs-meta); color: var(--jr-secondary); text-align: center; }
.jr-go-hint[hidden] { display: none; }

/* D5 · a review at phone size: the decision is a pair pinned at the bottom. */
@media (max-width: 720px) {
  .jr-item-bar { padding-bottom: 12px; margin-bottom: 16px; }
  .jr-item-bar__skip { display: none; }
  .focus-top--item > .admin-chip { margin-left: 12px !important; }
  .jr-viewer { min-height: 300px; padding: 0; background: var(--sunk-bg); overflow: hidden; }
  .jr-viewer iframe, .jr-viewer object { min-height: 320px; }
  .jr-viewer img { max-height: 420px; border-radius: var(--radius); }
  .jr-file-head { font-size: var(--fs-meta); }
  .jr-item-title { font-size: var(--fs-heading); }
}

/* Report 156 (M-O1). Reports: numbers link like the board's (ink, underline
   on hover, not browser blue), and each journey type's six numbers sit in
   one row — 3×2 at 1024 and below, 2×3 on a phone. */
.jr-reports a:not(.ui-btn):not(.ui-stat):not(.ui-back) { color: var(--jr-ink); text-decoration: none; font-weight: 600; }
.jr-reports a:not(.ui-btn):not(.ui-stat):not(.ui-back):hover { color: var(--jr-ink); text-decoration: underline; text-underline-offset: 3px; }
.jr-report-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 14px 0 6px; border: 1px solid var(--jr-border); border-radius: var(--radius); overflow: hidden; }
.jr-report-tiles > div { padding: 14px 16px; border-left: 1px solid var(--jr-border); min-width: 0; }
.jr-report-tiles > div:first-child { border-left: 0; }
.jr-report-tiles dt { font-size: var(--fs-label); color: var(--jr-meta); line-height: 1.3; }
.jr-report-tiles dd { margin: 6px 0 0; font-size: var(--fs-heading); line-height: 1.2; }
.jr-report-tiles dd .jr-report-tiles__words { font-size: var(--fs-ui); }
.jr-report-tiles__sub { display: block; font-size: var(--fs-label); color: var(--jr-meta); margin-top: 4px; line-height: 1.35; }
@media (max-width: 1024px) {
  .jr-report-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jr-report-tiles > div:nth-child(3n+1) { border-left: 0; }
  .jr-report-tiles > div:nth-child(n+4) { border-top: 1px solid var(--jr-border); }
}
@media (max-width: 600px) {
  .jr-report-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-report-tiles > div { border-left: 0; }
  .jr-report-tiles > div:nth-child(2n) { border-left: 1px solid var(--jr-border); }
  .jr-report-tiles > div:nth-child(n+3) { border-top: 1px solid var(--jr-border); }
}
.jr-reports .ui-card h3.card-title { margin-top: 22px; }
/* The four firm totals: one row from 600px up (2×2 on a phone), so
   "Overdue activities" never drops to a row of its own. */
@media (min-width: 600px) { .jr-reports .ui-stat { flex-basis: 0; min-width: 0; } }
@media (max-width: 599px) { .jr-reports .ui-stat { flex: 1 1 40%; min-width: 0; } }

/* Report 160. D2's own frame: the item bar is the page's top bar
   (`body.is-focus`, journeys-person.css), and at a desk the item fills the
   card in two panes — what was sent on the paper, and the decision in a
   white 460px panel with its own left edge. No page footer. */
body.is-review .ui-page--foot { display: none; }
@media (min-width: 1181px) {
  body.is-review .jr-page--item { padding: 0; max-width: none; }
  body.is-review .jr-review {
    grid-template-columns: minmax(0, 1fr) 460px; column-gap: 0;
    min-height: calc(100vh - 2 * var(--space-5, 20px) - 58px);
  }
  body.is-review .jr-review__file { padding: 32px; }
  body.is-review .jr-review__head,
  body.is-review .jr-review__side {
    background: var(--card-bg); border-left: 1px solid var(--jr-border);
    padding-left: 28px; padding-right: 28px; align-self: stretch;
  }
  body.is-review .jr-review__head { padding-top: 32px; }
  body.is-review .jr-review__side { padding-bottom: 28px; }
  body.is-review .jr-decide__go { background: var(--card-bg); bottom: 0; }
}

/* Report 161 (ADE-263): the broker-record form and its NetSuite copy. */
.jr-record-known { margin: 0 0 6px; }
.jr-record-hint { margin: 6px 0 0; font-size: var(--fs-meta); }
.jr-segpick--two { grid-auto-columns: minmax(96px, 1fr); }
.jr-record-copy .jr-sub { margin: -6px 0 14px; font-size: var(--fs-ui); }
.jr-record-netsuite { margin: 24px 0 20px; }
.jr-record-netsuite .jr-tick-list { margin-bottom: 12px; }
.jr-record-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 0 16px; border-top: 1px solid var(--jr-divider); }
.jr-record-dl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--jr-divider); }
.jr-record-dl dt { color: var(--jr-meta); font-size: var(--fs-ui); }
.jr-record-dl dd { margin: 0; color: var(--jr-ink); font-size: var(--fs-body); overflow-wrap: anywhere; user-select: all; }
@media (max-width: 860px) {
  .jr-record-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Report 166. A change of email waiting for the person to confirm it. */
.jr-pending-email p { margin: 0 0 12px; overflow-wrap: anywhere; }

/* Report 166. Where the four people on a broker record came from. */
.jr-record-from { margin: 0 0 14px; }

/* Report 170 (ADE-279). The person an item is about, what they sent for
   it, a team task's link, and the sessions to register them for. Minimal:
   the Claude Design review restyles these screens. */
.jr-person { display: flex; gap: 16px; align-items: flex-start; margin: 16px 0; padding: 14px; border-radius: var(--radius-sm); background: var(--jr-subtle); }
.jr-person__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--card-bg); }
.jr-person__facts { margin: 0; flex: 1; min-width: 0; }
.jr-given { margin-top: 20px; }
.jr-given__item + .jr-given__item { margin-top: 16px; }
.jr-given__view { min-height: 0; padding: 12px; margin-bottom: 10px; }
.jr-given__view img { max-height: 360px; }
.jr-given__view iframe { height: 360px; min-height: 0; }
.jr-given .jr-answers { max-width: none; padding: 16px 18px; }
.jr-task__link { margin: 14px 0; }
.jr-sessions { margin-top: 20px; }
.jr-sessions__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--jr-divider); }
.jr-sessions__list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--jr-divider); }

/* ── Report 174 · the design review's screen 5 (Review - Firm, 5a/5b) ── */

.jr-qhead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.jr-qhead__text { flex: 1 1 320px; min-width: 0; }
.jr-qhead .jr-sub--counts { margin-top: 6px; font-size: var(--fs-ui); color: var(--jr-meta); }

/* By person / By due date: a two-part switch. */
.jr-viewpick { display: inline-flex; gap: 4px; padding: 4px; background: var(--jr-chip); border-radius: var(--radius); }
.jr-page .jr-viewpick a.jr-plain { padding: 7px 14px; border-radius: var(--radius-inner); font-size: var(--fs-ui); color: var(--jr-secondary); text-decoration: none; white-space: nowrap; }
.jr-page .jr-viewpick a.jr-plain:hover { color: var(--jr-ink); text-decoration: none; }
.jr-page .jr-viewpick a.jr-plain[aria-current="page"] { background: var(--jr-card); color: var(--jr-ink); font-weight: 600; }

/* One row of filter chips. */
.jr-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.jr-page a.jr-filter {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid var(--jr-border);
  background: var(--jr-card); color: var(--jr-body); font-size: var(--fs-meta); font-weight: 500;
  text-decoration: none;
}
.jr-page a.jr-filter:hover { background: var(--jr-hover); color: var(--jr-ink); text-decoration: none; }
.jr-page a.jr-filter[aria-current="page"] { background: var(--jr-ink); border-color: var(--jr-ink); color: var(--on-anchor); font-weight: 600; }
.jr-filter__n { font-variant-numeric: tabular-nums; font-size: var(--fs-label); }
.jr-filter:focus-visible, .jr-viewpick a:focus-visible, .jr-person-line__head:focus-visible { outline: 2px solid var(--jr-copper); outline-offset: 2px; }

/* A person's line (5a). */
.jr-people { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.jr-person-line { background: var(--jr-card); border: 1px solid var(--jr-border); border-radius: var(--radius-lg); overflow: hidden; }
.jr-person-line__head { display: flex; gap: 14px; align-items: center; padding: 16px 22px; cursor: pointer; list-style: none; }
.jr-person-line__head::-webkit-details-marker { display: none; }
.jr-person-line__head:hover { background: var(--jr-hover); }
.jr-person-line[open] > .jr-person-line__head { background: var(--jr-subtle); border-bottom: 1px solid var(--jr-divider); }
.jr-person-line__caret { width: 14px; flex: none; color: var(--jr-secondary); font-size: var(--fs-meta); }
.jr-person-line__caret::before { content: "▸"; }
.jr-person-line[open] .jr-person-line__caret::before { content: "▾"; }
.jr-avatar {
  width: 36px; height: 36px; flex: none; border-radius: var(--radius-pill); background: var(--jr-ink); color: var(--on-anchor);
  font-size: var(--fs-label); font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.jr-person-line__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.jr-person-line__name { font-size: var(--fs-body); font-weight: 600; color: var(--jr-ink); }
.jr-person-line__what { font-weight: 400; color: var(--jr-meta); }
.jr-person-line__stand { font-size: var(--fs-meta); color: var(--jr-secondary); line-height: 1.45; }
.jr-person-line__due { font-size: var(--fs-meta); color: var(--jr-secondary); white-space: nowrap; }
.jr-person-line__journey { display: none; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.jr-person-line[open] .jr-person-line__due { display: none; }
.jr-person-line[open] .jr-person-line__journey { display: inline; }
.jr-list.jr-list--person { border: 0; border-radius: 0; }
.jr-list--person .jr-row { padding: 12px 22px; min-height: 0; }
@media (min-width: 861px) { .jr-list.jr-list--person { padding-left: 36px; } }
.jr-row--person .jr-row__title, .jr-row--date .jr-row__title { font-size: var(--fs-body); }
.jr-row__who { font-size: var(--fs-ui); color: var(--jr-ink); }
.jr-row--person .jr-row__area, .jr-row--date .jr-row__area, .jr-row--person .jr-row__due, .jr-row--date .jr-row__due { font-size: var(--fs-meta); }
@media (min-width: 861px) {
  .jr-list.jr-list--person { grid-template-columns: 124px minmax(0, 1fr) 220px 120px minmax(16px, auto); }
  .jr-list.jr-list--date { grid-template-columns: 124px minmax(0, 1fr) 200px 200px 110px minmax(0, auto); }
}
.jr-more { border-top: 1px solid var(--jr-divider); }
.jr-more > summary { padding: 12px 22px 12px 58px; font-size: var(--fs-meta); color: var(--jr-secondary); cursor: pointer; list-style: none; }
.jr-more > summary::-webkit-details-marker { display: none; }
.jr-more__show { color: var(--jr-link); font-weight: 500; }
.jr-more[open] .jr-more__show { display: none; }
.jr-more__list { list-style: none; margin: 0; padding: 0 22px 12px 58px; }
.jr-more__list li { display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); gap: 16px; padding: 8px 0; font-size: var(--fs-ui); color: var(--jr-secondary); border-top: 1px solid var(--jr-divider); }
.jr-more__title { color: var(--jr-body); }
.jr-more__words { color: var(--jr-meta); }

@media (max-width: 860px) {
  .jr-person-line__head { padding: 14px 16px; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  .jr-person-line__text { flex-basis: calc(100% - 90px); }
  .jr-person-line__due, .jr-person-line[open] .jr-person-line__journey { margin-left: 76px; }
  .jr-list--person .jr-row { padding: 12px 16px; }
  .jr-more > summary, .jr-more__list { padding-left: 16px; padding-right: 16px; }
  .jr-more__list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .jr-row__who:empty { display: none; }
}
@media (max-width: 860px) {
  .jr-row.jr-row--date { grid-template-areas: "chip due" "main main" "who who" "area area"; }
  .jr-row > .jr-row__who { grid-area: who; font-size: var(--fs-meta); }
}

/* ── Report 174 · the design review's screen 6 (a firm item) ─────────────
   The work on the left, the person on the right, one action pinned at the
   foot of the work. Task (6a), review (6b) and broker record (6d) share it;
   the frame is `body.is-focus` (the item draws its own top bar). */
body.is-item .ui-page--foot { display: none; }
.jr-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.jr-item__work { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.jr-item__body { display: flex; flex-direction: column; gap: 24px; padding: 0 0 20px; }
.jr-item__head .jr-eyebrow { margin: 0 0 6px; }
.jr-item__head .jr-item-title { font-size: var(--fs-page-title); }
.jr-item__head .jr-item-for { margin: 6px 0 0; font-size: var(--fs-ui); color: var(--jr-secondary); }
.jr-item__part { max-width: 640px; }
.jr-item__part .jr-h3 { margin: 0 0 10px; font-size: var(--fs-body); }
.jr-item .jr-instructions { margin: 0; padding: 0; background: none; border: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--jr-body); }
.jr-item .jr-task__link { margin: 14px 0 0; }
.jr-item .jr-tick-list { display: flex; flex-direction: column; gap: 10px; margin: 0; border: 0; border-radius: 0; }
.jr-item .jr-tick-list li + li { border-top: 0; }
.jr-item .jr-tick-list label { gap: 12px; padding: 12px 16px; background: var(--jr-card); border: 1px solid var(--jr-border); border-radius: var(--radius); color: var(--jr-ink); }
.jr-item .jr-tick-list input { width: 20px; height: 20px; accent-color: var(--jr-ink); }
.jr-item .jr-note-field { margin: 0; }
.jr-item__foot {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 0; background: var(--jr-paper); border-top: 1px solid var(--jr-border);
}
.jr-item__foot .jr-btn--primary { min-height: 48px; padding: 13px 22px; font-size: var(--fs-body); }
.jr-item__foot .jr-effect { margin: 0; flex: 1 1 260px; font-size: var(--fs-ui); color: var(--jr-secondary); }
.jr-item__foot [data-tick-hint][hidden] { display: none; }
.jr-item__side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* The person card (6a), also E1's right column (screen 9). */
.jr-person { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; background: none; border-radius: 0; }
.jr-person__head { display: flex; gap: 14px; align-items: center; }
.jr-person__photo { width: 64px; height: 64px; border-radius: var(--radius-pill); object-fit: cover; flex: none; background: var(--jr-chip); }
.jr-person__photo--none { display: flex; align-items: center; justify-content: center; background: var(--jr-ink); color: var(--on-anchor); font-size: var(--fs-section); font-weight: 600; }
.jr-person__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-person__name { font-size: var(--fs-section); font-weight: 600; color: var(--jr-ink); }
.jr-person__sub { font-size: var(--fs-meta); color: var(--jr-meta); }
.jr-person__facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: var(--fs-ui); }
.jr-person__facts dt { color: var(--jr-meta); }
.jr-person__facts dd { margin: 0; color: var(--jr-ink); overflow-wrap: anywhere; }
.jr-page .jr-person__facts a:not(.jr-btn) { color: var(--jr-ink); }

/* What they sent (6a), under the card. */
.jr-given { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-top: 18px; border-top: 1px solid var(--jr-divider); }
.jr-given .jr-h3 { margin: 0; font-size: var(--fs-body); }
.jr-given__item { display: flex; flex-direction: column; gap: 12px; }
.jr-given__item + .jr-given__item { margin-top: 0; }
.jr-given__file { display: flex; gap: 12px; align-items: center; }
.jr-given__thumb { width: 72px; height: 88px; flex: none; border-radius: var(--radius-sm); overflow: hidden; background: var(--jr-chip); display: flex; align-items: flex-end; justify-content: center; }
.jr-given__thumb img { width: 100%; height: 100%; object-fit: cover; }
.jr-page .jr-given__thumb--doc { padding-bottom: 6px; font-variant-numeric: tabular-nums; font-size: var(--fs-micro); color: var(--jr-secondary); text-decoration: none; }
.jr-given__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-given__name strong { font-size: var(--fs-ui); font-weight: 500; }
.jr-given__name span { font-size: var(--fs-meta); color: var(--jr-meta); overflow-wrap: anywhere; }
.jr-given__dl { font-size: var(--fs-meta); font-weight: 500; }
.jr-given__long { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--jr-subtle); border: 1px solid var(--jr-border); border-radius: var(--radius); }
.jr-given__long-head { display: flex; margin: 0; font-size: var(--fs-meta); }
.jr-given__long-head strong { font-weight: 600; }
.jr-given__long-text { margin: 0; font-size: var(--fs-ui); line-height: 1.55; color: var(--jr-body); white-space: pre-line; }
.jr-given__line { display: flex; gap: 12px; align-items: baseline; font-size: var(--fs-ui); }
.jr-given__k { width: 150px; flex: none; color: var(--jr-meta); }
.jr-given__v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.jr-copy { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-meta); font-weight: 500; color: var(--jr-link); cursor: pointer; }
.jr-copy:hover { text-decoration: underline; }

/* Orientation (6c): each session a card, Register at its end. */
.jr-item .jr-sessions { margin: 0; }
.jr-item .jr-sessions__list { display: flex; flex-direction: column; gap: 8px; border: 0; }
.jr-item .jr-sessions__list li { padding: 12px 14px; border: 1px solid var(--jr-border); border-radius: var(--radius); background: var(--jr-card); flex-wrap: nowrap; }
.jr-sessions__off { opacity: 0.55; }
.jr-sessions__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-sessions__when { font-size: var(--fs-ui); font-weight: 500; }
.jr-sessions__meta { font-size: var(--fs-meta); color: var(--jr-meta); }
.jr-sessions__meta--full { color: var(--jr-red); }
/* Report 185: a session not open to the broker. Its words are muted; the
   Add button is not. On a phone the button goes under the words. */
.jr-sessions__notopen .jr-sessions__when { color: var(--jr-meta); }
@media (max-width: 560px) {
  .jr-item .jr-sessions__list li.jr-sessions__notopen { flex-wrap: wrap; gap: 10px; }
  .jr-sessions__notopen .jr-btn { width: 100%; }
}

@media (min-width: 1181px) {
  body.is-item .jr-page--item { padding: 0; max-width: none; }
  body.is-item .jr-item {
    grid-template-columns: minmax(0, 1fr) 460px; gap: 0;
    min-height: calc(100vh - 2 * var(--space-5, 20px) - 58px);
  }
  body.is-item .jr-item__body { flex: 1; padding: 32px 44px; }
  body.is-item .jr-item__foot { padding: 18px 44px; background: var(--card-bg); }
  body.is-item .jr-item__side { background: var(--card-bg); border-left: 1px solid var(--jr-border); padding: 28px; }
}
@media (max-width: 1180px) {
  .jr-item__side { padding: 22px; background: var(--jr-card); border: 1px solid var(--jr-border); border-radius: var(--radius-lg); }
  .jr-item__foot { padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); }
  .jr-item__foot .jr-btn--primary { width: 100%; }
}
@media (max-width: 720px) {
  .jr-given__k { width: 110px; }
  .jr-person__facts { grid-template-columns: 104px minmax(0, 1fr); }
  .jr-item__head .jr-item-title { font-size: var(--fs-heading); }
}
.jr-page .jr-person__facts a.jr-plain { color: var(--jr-ink); text-decoration: none; }
.jr-page .jr-person__facts a.jr-plain:hover { text-decoration: underline; }
/* 6b: the review in the same frame. */
.jr-item--review .jr-viewer { min-height: 0; padding: 16px; }
.jr-item--review .jr-viewer img { max-height: 440px; }
.jr-item--review .jr-viewer iframe,
.jr-item--review .jr-viewer object { min-height: 0; height: 440px; }
/* Report 178: the way round a viewer that shows nothing sits above it, and
   a file sent again says what went back. */
.jr-file-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 10px; }
.jr-file-bar__name { flex: 1 1 200px; min-width: 0; font-size: var(--fs-body); font-weight: 500; color: var(--jr-ink); overflow-wrap: anywhere; }
.jr-file-bar__open { font-size: var(--fs-ui); font-weight: 500; }
.jr-before { margin: 0 0 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--jr-warn-bg); color: var(--jr-warn-ink); font-size: var(--fs-ui); line-height: 1.5; }
.jr-before p { margin: 0; }
.jr-before p + p { margin-top: 4px; }
.jr-before a { color: var(--jr-warn-ink); font-weight: 500; }
.jr-item--review .jr-checks { margin: 0; }
.jr-item--review .jr-seg { margin: 0 0 12px; max-width: 460px; }
.jr-item__foot .jr-go-hint:not([hidden]) { display: inline; margin: 0; font-size: inherit; text-align: left; color: inherit; }
.jr-decide[data-outcome="return"] [data-approve-told] { display: none; }
.jr-item__head .jr-cant-see { margin: 0; font-size: var(--fs-meta); }
.jr-phone-only { display: none; }
@media (max-width: 900px) {
  .jr-decide.jr-item__work .jr-item__foot { display: none; }
  .jr-phone-only { display: block; }
}
/* 6d: the broker record in the same frame. */
.jr-item__head .jr-record-from { margin: 6px 0 0; }
.jr-record-fields { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.jr-record-fields .jr-field { margin: 0; }
.jr-item .jr-record-copy .jr-actions { margin-top: 4px; }

/* Report 174 · the design review's 7a: "When you start" in three lines. */
.jr-panel__sec--head { padding: 20px 22px 6px; }
.jr-panel__lines { display: flex; flex-direction: column; gap: 14px; padding: 10px 22px 18px; }
.jr-panel__line { position: relative; margin: 0; padding-left: 20px; font-size: var(--fs-body); line-height: 1.5; color: var(--jr-ink); }
.jr-panel__line::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--jr-ink); }
.jr-panel__line strong { font-weight: 600; }
.jr-panel__all { border-top: 1px solid var(--jr-divider); }
.jr-panel__all > summary { display: flex; gap: 10px; padding: 14px 22px; font-size: var(--fs-ui); cursor: pointer; list-style: none; }
.jr-panel__all > summary::-webkit-details-marker { display: none; }
.jr-panel__all-open { font-weight: 500; }
.jr-panel__all-open::before { content: "▸ "; }
.jr-panel__all[open] .jr-panel__all-open::before { content: "▾ "; }
.jr-panel__all-n { margin-left: auto; color: var(--jr-meta); }
.jr-panel__list { list-style: none; margin: 0; padding: 0 0 6px; max-height: 420px; overflow-y: auto; }
.jr-panel__list li { display: flex; gap: 10px; padding: 10px 22px; border-top: 1px solid var(--jr-divider); font-size: var(--fs-ui); }
.jr-panel__list li > span:first-child { flex: 1; min-width: 0; }
.jr-panel__who { color: var(--jr-meta); text-align: right; }
.jr-panel__off { opacity: 0.6; }
.jr-panel__off .jr-panel__who { font-style: italic; }
.jr-panel__go .jr-panel__small { margin-top: 10px; font-size: var(--fs-meta); }

/* Report 174 · the design review's 8a: onboarding started. */
.jr-started { max-width: 680px; margin: 24px auto; background: var(--jr-card); border: 1px solid var(--jr-border); border-radius: var(--radius-lg); overflow: hidden; }
.jr-started__head { display: flex; gap: 16px; align-items: center; padding: 28px 32px 24px; }
.jr-started__head h1 { margin: 0; font-size: var(--fs-page-title); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.jr-started__tick { width: 44px; height: 44px; flex: none; border-radius: var(--radius-pill); background: var(--jr-green); color: var(--on-anchor); font-size: var(--fs-section); display: flex; align-items: center; justify-content: center; }
.jr-started__meta { margin: 4px 0 0; font-size: var(--fs-ui); color: var(--jr-meta); }
.jr-started__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 18px 32px; border-top: 1px solid var(--jr-divider); }
.jr-started__row h2 { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--jr-meta); }
.jr-started__row p { margin: 0; font-size: var(--fs-body); line-height: 1.5; overflow-wrap: anywhere; }
.jr-started__row p + p { margin-top: 6px; }
.jr-started__go { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 20px 32px 24px; border-top: 1px solid var(--jr-divider); }
.jr-started__all { margin-left: auto; font-size: var(--fs-ui); font-weight: 500; }
@media (max-width: 720px) {
  .jr-started { margin: 0; }
  .jr-started__head, .jr-started__row, .jr-started__go { padding-left: 20px; padding-right: 20px; }
  .jr-started__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .jr-started__go .jr-btn { width: 100%; }
  .jr-started__all { margin-left: 0; }
}
.jr-panel__list li > span:first-child { flex: 1 1 55%; }
.jr-panel__who { flex: 0 1 45%; }
.jr-e1-person { padding: 22px; }

/* ── Report 191. Overlaps, clips and the phone (the look-and-feel review) ──
   Measured with scripts/overlap_probe.py over every page the review saw, at
   390, 768, 1024, 1280 and 1440. Each rule names the review item it closes. */

/* [12] "10 days / overdue" wrapped in a 110px column. The due line never
   wraps, and its column is 130px, which holds "11 days overdue". Fixed, not
   max-content, so separate lists on one page keep the same columns. In the
   by-person list the chip column is 140px: "Broker record" is 103px and the
   indented row left it 94. */
.jr-row__due { white-space: nowrap; }
@media (min-width: 861px) {
  .jr-list { grid-template-columns: 150px minmax(0, 1fr) 220px 130px auto; }
  .jr-list.jr-list--person { grid-template-columns: 140px minmax(0, 1fr) 220px 130px minmax(16px, auto); }
  /* Fixed tracks, so the Overdue, Today and Later lists line up with each
     other; the last one clears the row's own 22px padding, which a subgrid
     row does not give its content (the due date sat 14px past the edge). */
  .jr-list.jr-list--date { grid-template-columns: 110px minmax(0, 1fr) 180px 200px 130px 24px; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .jr-list { grid-template-columns: 130px minmax(0, 1fr) 170px 120px auto; }
  /* At 1024 the by-date list's fixed columns left the task's name about
     80px and it ran into the person's. Here the words share the width by
     fractions, which still line the lists up: they are all the same width. */
  .jr-list.jr-list--date { grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 120px 16px; }
}

/* A journey's page at 1280, where its cards sit two across: "Who has what
   right now" and the step list gave their fixed columns (236px, 200px +
   170px) first and the step's own name the leftover, so "Check the E&O
   certificate" stood one word to a line with "certificate" through the
   chip beside it. The step's name gets the larger share. */
@media (min-width: 861px) {
  .jr-party { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) auto; }
  .jr-act { grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 1fr) auto; }
  .jr-act__title a, .jr-act__why a { overflow-wrap: break-word; }
}

/* [69] The E&O check: the PDF filled the first desk screen and the three
   checks the footer asks for were under it. The preview is a preview —
   "Open full size" is beside it — so it takes about a third of the screen
   and the title and the checks start above the fold. */
.jr-item--review .jr-viewer iframe,
.jr-item--review .jr-viewer object { height: clamp(200px, 24vh, 440px); }
.jr-item--review .jr-viewer img { max-height: clamp(200px, 24vh, 440px); }

/* [33] A Licensing check on a phone: the fixed Approve / Send back bar sat
   over the last lines of the person card (QB, Business type) with nothing
   left to scroll. The page ends a bar's height above the bar. */
@media (max-width: 900px) {
  .jr-item:has(.jr-phone-bar) { padding-bottom: 120px; }
}

/* [32] The broker record on a phone: "Save the record" and its three-line
   note were pinned over the fields in the middle of the form. On a phone
   the task's action follows the last field, as the agreement's does
   (report 164); on a desk it stays pinned. */
@media (max-width: 720px) {
  .jr-item__foot.jr-task__go { position: static; }
}

/* [71] An address on a phone broke where the edge fell ("example.or / g").
   `view/filters.breakable` gives it joints; this lets it use them. */
.jr-person__facts a.jr-plain { overflow-wrap: break-word; }

/* [78] The board on a phone: five team cards took more than a screen before
   the list of people. Two to a row and without the bar — the count and
   "overdue" carry the same fact — they take under half of one. */
@media (max-width: 720px) {
  .jr-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .jr-team { padding: 10px 12px; border-radius: var(--radius); }
  .jr-team__name { margin: 0 0 4px; font-size: var(--fs-meta); min-height: 0; }
  .jr-team__n { font-size: var(--fs-label); gap: 6px; }
  .jr-team__n b { font-size: var(--fs-section); }
  .jr-team__bar { display: none; }
  .jr-team__late { font-size: var(--fs-label); }
}

/* A journey's welcome email list at 1280 and 1440: the time is `nowrap`
   and the line could not wrap, so "Sun 27 Sep, 9:00 AM" ran past the card.
   It wraps at every width, as it already did under 860. */
.jr-welcome li { flex-wrap: wrap; }

/* Onboard at 390, found by the probe: the business-type picker's columns
   had a 160px floor each, so "Commercial" sat past the picker's edge. On a
   phone the choices share the width. */
@media (max-width: 720px) {
  .jr-segpick { grid-auto-columns: minmax(0, 1fr); }
  .jr-segpick label { padding-inline: 8px; }
}

/* =========================================================================
   REPORT 196 — THE FIRM'S JOURNEY PAGES ON THE MODERN DESIGN SYSTEM.
   Source: `planning/design/modern-handoff/` ("Adealia Modern.dc.html" queue
   and task panel; "Adealia Firm.dc.html" board, one journey, onboard new).
   Page rules only, under their own prefixes: `wq-` the Work queue, `fb-`
   the board, `fj-` one person's journey, `fs-` onboard and started, `fi-`
   an item (page and side panel). The shared components are
   design-system.css's `.ui-*`; nothing shared is restyled here.
   ========================================================================= */

/* ── The Work queue ─────────────────────────────────────────────────── */
.wq { display: flex; flex-direction: column; gap: 18px; }
.wq > * { margin: 0; }
.wq-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.wq-head__text { flex: 1 1 280px; min-width: 0; }
.wq-viewpick {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.wq-viewpick a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-3); text-decoration: none;
}
.wq-viewpick a .ms { font-size: 18px; }
.jr-page .wq-viewpick a { color: var(--ink-3); }
.jr-page .wq-viewpick a:hover { background: var(--hover-bg); color: var(--ink-1); text-decoration: none; }
.jr-page .wq-viewpick a[aria-current], .jr-page .wq-viewpick a[aria-current]:hover { background: var(--anchor); color: var(--on-anchor); }
.wq-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jr-page a.ui-chip { color: var(--ink-1); }
.jr-page a.ui-chip[aria-current] { color: var(--on-anchor); }
.jr-page a.ui-chip:hover { text-decoration: none; }

.wq-people { display: flex; flex-direction: column; gap: 18px; }
.wq-person, .wq-card {
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.wq-person__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 14px 18px; cursor: pointer; list-style: none;
}
.wq-person__head::-webkit-details-marker { display: none; }
.wq-person__head:hover { background: var(--rail-bg); }
.wq-person__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wq-person__text { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.wq-person__name { font-weight: 600; }
.wq-person__meta, .wq-person__stand { font-size: var(--fs-meta); color: var(--ink-4); overflow-wrap: anywhere; }
.wq-person__meta::first-letter { text-transform: uppercase; }
.wq-person__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.jr-page a.wq-person__journey { font-size: 14px; color: var(--accent); }
.wq-person__due { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.wq-person__chev .ms { font-size: 22px; color: var(--ink-4); transition: transform .15s ease; display: block; }
.wq-person[open] > .wq-person__head .wq-person__chev .ms { transform: rotate(180deg); }

.wq-list { list-style: none; margin: 0; padding: 0; }
.wq-person .wq-list > li, .wq-card > li + li { border-top: 1px solid var(--line-2); }
.wq-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 13px 18px; color: var(--ink-1); font-size: var(--fs-row); text-decoration: none;
}
.jr-page a.wq-row, .jr-page a.wq-row:hover { color: var(--ink-1); text-decoration: none; }
.wq-row--link:hover, .wq-row--with-act:hover { background: var(--rail-bg); }
.wq-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wq-row__kind { flex: none; }
.wq-row__text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.wq-row__title { font-weight: 500; overflow-wrap: anywhere; }
.jr-page a.wq-row__title { color: var(--ink-1); }
.wq-row__meta { font-size: var(--fs-meta); color: var(--ink-4); overflow-wrap: anywhere; }
.wq-row__due { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.wq-row__due--overdue { color: var(--alert-fg); }
.wq-row__chev { width: 20px; flex: none; display: flex; }
.wq-row__chev .ms { font-size: 20px; color: var(--ink-4); }
.wq-row--own { color: var(--ink-3); background: var(--rail-bg); }
.wq-row__act form { margin: 0; }

.wq-more { border-top: 1px solid var(--line-2); font-size: var(--fs-meta); color: var(--ink-4); }
.wq-more > summary { padding: 10px 18px; cursor: pointer; list-style: none; }
.wq-more > summary::-webkit-details-marker { display: none; }
.wq-more__show { color: var(--accent); font-weight: 500; }
.wq-more__list { list-style: none; margin: 0; padding: 0 18px 12px; display: flex; flex-direction: column; gap: 6px; }
.wq-more__list li { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.wq-more__title { color: var(--ink-2); font-weight: 500; }

.wq-group { display: flex; flex-direction: column; gap: var(--space-2); }
.wq-group__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.wq-group__title--overdue { color: var(--alert-fg); }
.wq-group__n { font-weight: 400; color: var(--ink-4); }
.wq-tab-empty .ui-state__title { font-size: var(--fs-body); }
.wq-foot { font-size: var(--fs-meta); color: var(--ink-4); }

@media (max-width: 759px) {
  .wq-person__head { flex-wrap: wrap; padding: 14px 16px; }
  .wq-person__side { order: 3; flex-basis: 100%; flex-direction: row; justify-content: space-between; padding-left: 48px; }
  .wq-person__chev { order: 2; }
  .wq-row { padding: 12px 16px; }
  .wq-row__text { flex-basis: calc(100% - 120px); }
  .wq-viewpick { width: 100%; }
  .wq-viewpick a { flex: 1; justify-content: center; }
}
@media (max-width: 759px) {
  .wq-row__due { margin-left: auto; }
}

/* ── An item in the side panel ──────────────────────────────────────── */
.ui-panel .fi-foot[hidden], .ui-panel .fi-back[hidden] { display: none; }
.ui-panel .fi-foot .ui-btn--secondary { flex: 0 0 auto; }
.ui-panel .fi-back textarea { width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink-1); padding: 10px 12px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); }
.ui-panel .fi-back .ui-field__label { margin: 0; }
.ui-panel [data-broker-record] .jr-grid2 { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ui-panel [data-broker-record] .jr-item__part { margin: 0; padding: 0; border: 0; }
.ui-panel [data-broker-record] .jr-h3 { margin: 0 0 var(--space-2); font-size: 14px; font-weight: 600; }
.ui-panel [data-broker-record] .jr-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ui-panel [data-broker-record] .jr-record-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.ui-panel [data-broker-record] .jr-record-hint { margin: 0; }
.ui-panel [data-broker-record] .jr-record-dl { margin: 0; }
.ui-panel .jr-sessions__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ui-panel .jr-sessions__list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ui-panel .jr-sessions__text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.ui-panel .jr-sessions__when { font-weight: 500; }
.ui-panel .jr-sessions__meta { font-size: var(--fs-meta); color: var(--ink-4); }
.ui-panel .jr-sessions__meta--full { color: var(--alert-fg); }
.ui-panel .jr-sessions .jr-h3 { margin: 0 0 var(--space-2); font-size: 14px; font-weight: 600; }

/* ── The board ──────────────────────────────────────────────────────── */
.fb { display: flex; flex-direction: column; gap: 20px; }
.fb > * { margin: 0; }
.fb-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.fb-head__text { flex: 1 1 240px; min-width: 0; }
.fb-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fb-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.fb-team {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: var(--ink-1); font-size: 14px; text-decoration: none;
}
.jr-page a.fb-team, .jr-page a.fb-team:hover { color: var(--ink-1); text-decoration: none; }
a.fb-team:hover { border-color: var(--ink-4); }
a.fb-team:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-team.is-on { border-color: var(--anchor); box-shadow: 0 0 0 1px var(--anchor); }
.fb-team__name { font-weight: 600; }
.fb-team__n { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fb-team__what { font-size: var(--fs-meta); color: var(--ink-4); }
.fb-team__late { font-size: var(--fs-meta); font-weight: 600; color: var(--alert-fg); }
.fb-team__late--none { color: var(--done-ink); }
.fb-note { margin-top: -8px; font-size: var(--fs-meta); color: var(--ink-4); }

.fb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.jr-page .fb-filters .jr-input, .jr-page .fb-filters .jr-select { width: auto; flex: 1 1 170px; min-width: 0; max-width: 240px; height: 40px; }
.fb-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.fb-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--anchor); }
@media (min-width: 900px) { .fb-row__when { display: inline-block; } .fb-row__when::first-letter { text-transform: uppercase; } }

.fb-type { display: flex; flex-direction: column; gap: var(--space-2); }
.fb-type__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.fb-type__n { font-weight: 400; color: var(--ink-4); }
.fb-table { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.fb-table__head, .fb-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.8fr) 110px;
  gap: 8px 16px; align-items: center;
}
.fb-table__head {
  padding: 10px 18px; background: var(--rail-bg); border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-micro); font-weight: 600; color: var(--ink-4);
}
.fb-rows { list-style: none; margin: 0; padding: 0; }
.fb-rows > li + li { border-top: 1px solid var(--line-2); }
.fb-row { padding: 14px 18px; color: var(--ink-1); font-size: 14px; text-decoration: none; }
.jr-page a.fb-row, .jr-page a.fb-row:hover { color: var(--ink-1); text-decoration: none; }
.fb-row:hover { background: var(--rail-bg); }
.fb-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fb-row__who, .fb-row__progress, .fb-row__next { min-width: 0; display: flex; flex-direction: column; }
.fb-row__name { font-size: var(--fs-row); font-weight: 600; overflow-wrap: anywhere; }
.fb-row__meta { font-size: var(--fs-meta); color: var(--ink-4); overflow-wrap: anywhere; }
.fb-row__back { font-weight: 600; color: var(--alert-fg); }
.fb-track { gap: 3px; margin-bottom: 6px; }
.fb-track i { height: 6px; border-radius: var(--radius-pill); }
.fb-row__next .jr-pipe__next { overflow-wrap: anywhere; }
.fb-row__next .jr-pipe__next::first-letter { text-transform: uppercase; }
.fb-row__late { font-size: var(--fs-meta); color: var(--alert-fg); }
.fb-row__days { font-size: var(--fs-meta); color: var(--ink-4); }
.fb-row__days-lbl { display: none; }
.fb-foot { margin: 0; }

@media (max-width: 899px) {
  .fb-table__head { display: none; }
  .fb-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; }
  .fb-row__days-lbl { display: inline; }
  .jr-page .fb-filters .jr-input, .jr-page .fb-filters .jr-select { max-width: none; flex-basis: 100%; }
}
@media (max-width: 759px) {
  .fb-teams { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fb-head__actions { width: 100%; }
}

/* ── One person's journey ───────────────────────────────────────────── */
.fj { display: flex; flex-direction: column; gap: 20px; }
.fj > * { margin: 0; }
.fj-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.jr-page a.fj-back { color: var(--ink-3); }
.jr-page a.fj-back:hover { color: var(--ink-1); }
.fj-back .ms { font-size: 18px; }
.fj-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-top: -8px; }
.fj-head__text { flex: 1 1 280px; min-width: 0; }
.fj-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fj-head__actions form { margin: 0; }
.fj-eyebrow { margin: 0; font-size: var(--fs-meta); color: var(--ink-4); }
.fj-alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px;
  background: var(--rail-bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-2);
}
.fj-alert > .ms { font-size: 20px; color: var(--ink-4); }
.fj-alert p { margin: 0; }
.fj-alert--red { background: var(--alert-bg); border-color: var(--alert-line); color: var(--alert-fg); }
.fj-alert--red > .ms { color: var(--alert-fg); }
.fj-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.fj-actions form { margin: 0; }
.ui-btn.fj-danger, .jr-page .ui-btn.fj-danger { color: var(--alert-fg); font-weight: 600; }

.fj-card {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.fj-card--flush { padding: 0; gap: 0; }
.fj-card--flush > .fj-card__head { padding: 16px 20px; }
.fj-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.fj-card__title { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--ink-1); }
.fj-card__title small { font-size: var(--fs-meta); font-weight: 400; color: var(--ink-4); }
.fj-card__meta { font-size: 14px; color: var(--ink-4); }
.fj-empty { margin: 0; font-size: 14px; color: var(--ink-4); }
.fj-foot { margin: 0; font-size: var(--fs-meta); color: var(--ink-4); overflow-wrap: anywhere; }

.fj-cps__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px 10px; }
.fj-cp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fj-cp__bar { height: 5px; border-radius: var(--radius-pill); background: var(--track-bg); }
.fj-cp--reached .fj-cp__bar { background: var(--done-ink); }
.fj-cp--in_progress .fj-cp__bar { background: var(--copper-cta); }
.fj-cp--moved_back .fj-cp__bar { background: var(--alert-fg); }
.fj-cp__name { margin: 0; font-size: var(--fs-meta); line-height: 1.3; color: var(--ink-1); overflow-wrap: anywhere; }
.fj-cp__state { font-size: var(--fs-micro); color: var(--ink-4); }
.fj-cp--reached .fj-cp__state { color: var(--done-ink); }
.fj-cp--in_progress .fj-cp__state { color: var(--warn-fg); }
.fj-cp--moved_back .fj-cp__state { color: var(--alert-fg); font-weight: 600; }

.fj-two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.fj-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fj-col--side { gap: 16px; }
@media (max-width: 1099px) { .fj-two { grid-template-columns: minmax(0, 1fr); } }

.fj-stand { margin: 0; padding: 0 20px 12px; font-size: 14px; color: var(--ink-3); }
.fj-stand b { font-weight: 600; color: var(--ink-1); }
.fj-parties, .fj-all, .fj-history, .fj-welcome { list-style: none; margin: 0; padding: 0; }
.fj-party {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  padding: 12px 20px; border-top: 1px solid var(--line-2);
}
.fj-party__who { width: 190px; max-width: 100%; font-weight: 600; font-size: 14px; }
.fj-party__what { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.fj-party__what small { font-size: var(--fs-meta); color: var(--ink-4); }

.fj-history { display: flex; flex-direction: column; gap: 12px; }
.fj-history li { display: flex; gap: 12px; font-size: 14px; }
.fj-history__when { width: 92px; flex: none; color: var(--ink-4); }
.fj-history__what { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.fj-history__what small { font-size: var(--fs-meta); color: var(--ink-4); }

.fj-act {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: start;
  padding: 12px 20px; border-top: 1px solid var(--line-2); font-size: 14px;
}
.fj-glyph .ms { font-size: 20px; color: var(--ink-4); }
.fj-glyph--done .ms { color: var(--done-ink); font-variation-settings: 'wght' 350, 'opsz' 20, 'FILL' 1; }
.fj-glyph--returned .ms { color: var(--alert-fg); }
.fj-glyph--open .ms { color: var(--copper-cta); }
.fj-act__title { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-row); overflow-wrap: anywhere; }
.fj-act__why, .fj-act__note { font-size: var(--fs-meta); color: var(--ink-4); }
.fj-act__note { color: var(--alert-fg); }
.fj-act__note--staff { color: var(--ink-3); }
.fj-act__who { font-size: var(--fs-meta); color: var(--ink-4); text-align: right; }
.fj-act__state { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.fj-act__state--green { color: var(--done-ink); }
.fj-act__state--red { color: var(--alert-fg); }
.fj-act__state--copper { color: var(--warn-fg); }
.fj-act--skipped .fj-act__title { color: var(--ink-4); }
@media (max-width: 759px) {
  .fj-act { grid-template-columns: 24px minmax(0, 1fr); }
  .fj-act__who, .fj-act__state { grid-column: 2; text-align: left; }
  /* Report 202: a long state ("Not needed now — …") wraps on a phone; kept
     on one line it pushed the page 16px past the screen at 390. */
  .fj-act__state { white-space: normal; overflow-wrap: anywhere; }
  .fj-party { padding: 12px 16px; }
  .fj-act { padding: 12px 16px; }
  .fj-card { padding: 16px; }
  .fj-card--flush { padding: 0; }
  .fj-card--flush > .fj-card__head { padding: 16px; }
  .fj-stand { padding: 0 16px 12px; }
}

.fj-welcome { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.fj-welcome li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.fj-welcome__when { color: var(--ink-4); font-size: var(--fs-meta); }
.fj-more { gap: 8px; }
.fj-more__title { margin: 0; font-size: var(--fs-row); font-weight: 600; }

/* The person card (`_person.html`) as the handoff draws it here: avatar
   and name, then one fact to a line under a rule. */
.fj-person .jr-person { margin: 0; padding: 0; border: 0; background: none; }
.fj-person .jr-person__head { display: flex; gap: 12px; align-items: center; }
.fj-person .jr-person__photo { width: 42px; height: 42px; border-radius: 50%; flex: none; object-fit: cover; }
.fj-person .jr-person__photo--none { display: inline-flex; align-items: center; justify-content: center; background: var(--anchor); color: var(--on-anchor); font-weight: 600; font-size: 14px; }
.fj-person .jr-person__who { display: flex; flex-direction: column; min-width: 0; }
.fj-person .jr-person__name { font-weight: 600; font-size: var(--fs-row); }
.fj-person .jr-person__sub { font-size: var(--fs-meta); color: var(--ink-4); }
.fj-person .jr-person__facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); margin: 12px 0 0; font-size: 14px; }
.fj-person .jr-person__facts dt, .fj-person .jr-person__facts dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--line-2); overflow-wrap: anywhere; }
.fj-person .jr-person__facts dt { color: var(--ink-4); }

/* ── Start a journey · Onboard a new broker · Started ───────────────── */
.fs { display: flex; flex-direction: column; gap: 20px; }
.fs > * { margin: 0; }
.fs .jr-head { margin: -8px 0 0; }
.fs .jr-start { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
.fs .jr-card { border-radius: var(--radius-lg); }
.fs .jr-form-card { padding: 20px; }
.fs-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fs-who .jr-field { margin: 0; min-width: 0; }
.fs .jr-label { font-size: 14px; font-weight: 600; color: var(--ink-1); }
/* The questions as the handoff's pill choices: navy when chosen. */
.fs .jr-segpick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; }
.fs .jr-segpick label {
  min-height: 38px; align-items: center; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-3); background: var(--card-bg); color: var(--ink-2); font-size: 14px;
}
.fs .jr-segpick input:checked + label { background: var(--anchor); border-color: var(--anchor); color: var(--on-anchor); box-shadow: none; }
.fs .jr-segpick input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "What will happen": each line with its icon. */
.fs .jr-panel { top: 20px; }
.fs .jr-panel__sec--head { padding: 20px 20px 4px; }
.fs .jr-panel__lines { padding: 10px 20px 16px; }
.fs .jr-panel__line { padding-left: 30px; font-size: 14px; }
.fs .jr-panel__line::before {
  content: ""; top: 1px; width: auto; height: auto; background: none; border-radius: 0;
  font-family: 'Material Symbols Outlined'; font-size: 20px; line-height: 1; color: var(--ink-4);
  font-feature-settings: 'liga'; font-variation-settings: 'wght' 350, 'opsz' 20;
}
.fs .jr-panel__line[data-panel-email]::before { content: "mail"; }
.fs .jr-panel__line[data-panel-count]::before { content: "checklist"; }
.fs .jr-panel__line[data-panel-today]::before { content: "groups"; }
.fs .jr-panel__go { padding: 16px 20px 20px; }
@media (max-width: 1099px) { .fs .jr-start { grid-template-columns: minmax(0, 1fr); } .fs .jr-panel { position: static; } }

/* Started: what happened, in one card. */
.fs-started .jr-started { border-radius: var(--radius-lg); }
.fs-started .jr-started__tick .ms { font-size: 22px; }
.fs-started .jr-started__go .ui-btn { flex: 0 0 auto; }

/* Report 251 (the 22 Oct redesign). ONE PROGRESS COMPONENT: the board, the
   journey and the intake draw redesign.css `.segs`; the legend's swatches
   take the same four fills. */
.fb-track.segs { width: 100%; max-width: 260px; }
.jr-legend i.jr-reached { background: var(--accent); }
.jr-legend i.jr-in_progress { background: var(--warn-dot); }
.jr-legend i.jr-moved_back { background: repeating-linear-gradient(135deg, var(--alert-dot) 0 2px, var(--alert-bg) 2px 4px); }
.jr-legend i.jr-not_yet { background: var(--chip-bg); }
.fj-segs { margin: 4px 0 12px; }
/* The intake answers fold under the one-line header. */
.fj-answers { margin: 8px 0 0; }
.fj-answers > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.fj-answers__words { margin: 6px 0 4px; font-size: 14px; color: var(--ink-2); max-width: 72ch; }
/* The steps in groups; Doesn't apply starts closed. */
.fj-group { border-top: 1px solid var(--line-2); }
.fj-group:first-of-type { border-top: 0; }
.fj-group__sum { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--ink-1); list-style: none; }
.fj-group__sum::-webkit-details-marker { display: none; }
.fj-group__sum::before { content: "chevron_right"; font-family: "Material Symbols Outlined"; font-weight: 400; font-size: 20px; color: var(--ink-3); transition: transform .12s; }
.fj-group[open] > .fj-group__sum::before { transform: rotate(90deg); }
/* REPORT 253. The one Work queue, By due date: report 250's table pattern
   (`ce/_course_table.html`, `.ce-table` in of-progress.css) — the shared
   `.ui-table` head, 64 px rows, due date first; overdue rows are tinted
   and pinned to the top, with a line above the table that says so. On a
   phone each row is two lines: what to do, then person · due · action. */
.wq-table-wrap { border-radius: var(--radius-lg); }
.wq-table { table-layout: auto; }
.wq-table thead th { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-4);
  background: var(--rail-bg); border-bottom: 1px solid var(--line-2);
  padding: 10px 14px; white-space: nowrap; text-align: left; }
.wq-th__arrow { font-size: 16px; vertical-align: -3px; margin-left: 2px; }
.wq-th--act { width: 1%; }
.wq-table td { padding: 12px 14px; font-size: 14px; color: var(--ink-1); height: 64px;
  border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.wq-td__title { display: block; font-weight: 500; color: var(--ink-1); overflow-wrap: anywhere; }
a.wq-td__title { text-decoration: none; }
a.wq-td__title:hover { text-decoration: underline; }
.wq-td__meta { display: block; margin-top: 2px; font-size: 13px; color: var(--of-muted); }
.wq-td__meta .of-pill { margin-left: 4px; }
.wq-td--person, .wq-td--team { color: var(--of-muted); }
.wq-td--due { white-space: nowrap; color: var(--ink-2); }
.wq-td--overdue { color: var(--alert-fg); font-weight: 600; }
.wq-tr--late > td { background: #FFFBF9; }
.wq-tr--late > td:first-child { box-shadow: inset 3px 0 0 var(--alert-fg); }
.wq-tr--own > td { color: var(--of-muted); }
.wq-td--act { white-space: nowrap; text-align: right; }
.wq-td--act form { display: inline-flex; gap: 6px; align-items: center; }
.wq-td--act .task-assign { margin-left: 6px; }
.wq-pinned { display: flex; align-items: center; gap: 6px; margin: 0 4px;
  font-size: 13px; color: var(--of-muted); }
.wq-pinned .ms { font-size: 16px; }
.wq-done { margin: 0 4px; }
.wq-done__line { cursor: pointer; font-size: 14px; color: var(--of-muted); }
@media (max-width: 720px) {
  .wq-table, .wq-table tbody { display: block; width: 100%; }
  .wq-table thead { display: none; }
  /* `.ui-table` turns every row and cell into a block on a phone; these
     win over it so a row is the two-line grid. */
  .wq-table tbody tr.wq-tr { display: grid; width: auto;
    grid-template-columns: 1fr max-content;
    grid-template-areas: "what what" "person due" "act act";
    gap: 4px 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  .wq-table tbody tr.wq-tr > td { display: block; width: auto; height: auto;
    padding: 0; border: 0; min-width: 0; }
  /* The two-line row is the design; the column names stay for screen
     readers (data-label) and are not painted. */
  .wq-table tbody tr.wq-tr > td[data-label]::before { content: none; display: none; }
  .wq-table tbody tr.wq-tr > .wq-td--what { grid-area: what; }
  .wq-table tbody tr.wq-tr > .wq-td--person { grid-area: person; }
  .wq-table tbody tr.wq-tr > .wq-td--team { display: none; }
  .wq-table tbody tr.wq-tr > .wq-td--due { grid-area: due; }
  .wq-table tbody tr.wq-tr > .wq-td--act { grid-area: act; text-align: left;
    white-space: normal; }
}
.wq-td--what .wq-td__meta { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; }