/* Lighthouse v3 · lead drawer (assets/js/lighthouse-journey.js; docs/lighthouse-design-v3.md §5).
   Everything is scoped under .lh-jr-root, which the script appends to <body>. Tokens (--lh-*, --ch-*, --oc-*) and the shared
   classes (.lh-btn*, .lh-pill*, .lh-chan*, .lh-ai, .lh-ev*, .lh-ticon*, .lh-tagx, .lh-kbd) come from lighthouse.css under
   :is(#wlf-lighthouse, .lh-jr-root); this file never declares a token or restyles a shared class. Spacing: 4/8/12/16/24/32. */
html.lh-jr-open, body.lh-jr-open { overflow: hidden; }
html.lh-jr-open { scrollbar-gutter: stable; }

.lh-jr-root { color: var(--lh-ink); font: 400 14px/20px var(--lh-f-sans); text-align: left; letter-spacing: normal; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }

/* reset theme globals (Divi styles bare p, h2, h3, ol, li, table, button, a …) */
.lh-jr-root, .lh-jr-root *, .lh-jr-root *::before, .lh-jr-root *::after { box-sizing: border-box; }
.lh-jr-root p, .lh-jr-root h2, .lh-jr-root h3, .lh-jr-root ol, .lh-jr-root ul, .lh-jr-root li, .lh-jr-root dl, .lh-jr-root dt, .lh-jr-root dd { margin: 0; padding: 0; }
.lh-jr-root h2, .lh-jr-root h3 { color: var(--lh-ink); letter-spacing: normal; text-transform: none; }
.lh-jr-root ol, .lh-jr-root ul { list-style: none; }
.lh-jr-root li::marker { content: none; }
.lh-jr-root button { font: inherit; color: inherit; cursor: pointer; margin: 0; text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0; border-radius: 0; background: none; border: 0; padding: 0; text-align: inherit; }
.lh-jr-root a { letter-spacing: normal; text-transform: none; font-size: inherit; }
.lh-jr-root table { border: 0; margin: 0; border-radius: 0; table-layout: auto; border-collapse: collapse; }
.lh-jr-root th, .lh-jr-root td { border: 0; background: transparent; }
.lh-jr-root svg { max-width: none; height: auto; }
.lh-jr-root [hidden] { display: none !important; }

/* drawer-local bits. Focus overrides use #lh-jr-sheet: the shared :is(#wlf-lighthouse, .lh-jr-root) :focus-visible rule has ID specificity. */
.lh-jr-root .jr-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: -1px; border: 0; }
.lh-jr-root .jr-icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.lh-jr-root .jr-mono { font: 400 13px/20px var(--lh-f-mono); }
.lh-jr-root .jr-h3 { font: 600 16px/24px var(--lh-f-sans); color: var(--lh-ink); margin: 0 0 12px; }
.lh-jr-root .jr-scroll-x { overflow-x: auto; max-width: 100%; }
.lh-jr-root .jr-info { display: flex; gap: 8px; align-items: flex-start; font: 400 14px/20px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-info .jr-icon { margin-top: 2px; }
.lh-jr-root .jr-info + .jr-info { margin-top: 8px; }
.lh-jr-root .jr-info-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lh-jr-root .jr-foot { font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); margin-top: 12px; }
.lh-jr-root .jr-skel { display: block; height: 12px; border-radius: var(--lh-r-sm); background: var(--lh-info-bg); }
.lh-jr-root .jr-skel-title { width: 180px; height: 20px; }
.lh-jr-root .jr-loading { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }

/* ===== shell (§5.2): scrim + right drawer, above the Divi fixed header (99999) and the WP admin bar ===== */
.lh-jr-root .jr-scrim { position: fixed; inset: 0; z-index: 100050; background: var(--lh-scrim); opacity: 0; transition: opacity 150ms ease-out; }
.lh-jr-root.jr-in .jr-scrim { opacity: 1; }
.lh-jr-root.jr-closing .jr-scrim { pointer-events: none; }
.lh-jr-root .jr-drawer { position: fixed; z-index: 100051; top: 0; right: calc(0px - var(--jr-sbw, 0px)); bottom: 0; width: clamp(560px, 44vw, 720px); max-width: 100vw; margin: 0; padding: 0;
  display: flex; flex-direction: column; background: var(--lh-card); color: var(--lh-ink); border-left: 1px solid var(--lh-card-border); box-shadow: var(--lh-e2); border-radius: 0;
  transform: translateX(100%); transition: transform 200ms cubic-bezier(.2, .7, .2, 1); }
.lh-jr-root.jr-in .jr-drawer { transform: none; }
.lh-jr-root .jr-drawer:focus { outline: none; }
@media (max-width: 899px) { .lh-jr-root .jr-drawer { width: min(560px, 92vw); } }
@media (max-width: 599px) { .lh-jr-root .jr-drawer { left: 0; width: auto; max-width: none; border-left: 0; box-shadow: none; } }

.lh-jr-root .jr-toast { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 100061; background: var(--lh-primary); color: var(--lh-primary-ink);
  padding: 8px 16px; border-radius: var(--lh-r-md); font: 500 14px/20px var(--lh-f-sans); box-shadow: var(--lh-shadow); max-width: calc(100vw - 32px); }

/* ===== sticky header (§5.3) ===== */
.lh-jr-root .jr-head { flex: none; padding: 12px 24px 16px; border-bottom: 1px solid var(--lh-border); background: var(--lh-card); }
.lh-jr-root .jr-bar { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 12px; }
.lh-jr-root .jr-pos { min-width: 64px; text-align: center; font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); font-variant-numeric: tabular-nums; }
.lh-jr-root .jr-kbds { display: inline-flex; gap: 4px; margin-left: 4px; }
#lh-jr-sheet .jr-close { margin-left: auto; }   /* id: the shared .lh-btn rule (margin: 0) has ID specificity */
.lh-jr-root .jr-ident { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; }
.lh-jr-root .jr-titlerow { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.lh-jr-root .jr-title { font: 600 20px/28px var(--lh-f-sans); color: var(--lh-ink); margin: 0; padding: 0; }
.lh-jr-root .jr-title:focus { outline: none; }
#lh-jr-sheet .jr-title:focus-visible { outline: none; }   /* a programmatic focus target (tabindex -1), not a control */
.lh-jr-root .jr-title .jr-mono { font: 600 18px/28px var(--lh-f-mono); }
.lh-jr-root .jr-actions { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; }
.lh-jr-root .jr-nosf { font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-sub { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 14px/20px var(--lh-f-sans); color: var(--lh-ink-muted); min-width: 0; }
.lh-jr-root .jr-chg { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--lh-r-sm); background: var(--lh-unfav-bg); color: var(--lh-unfav-text); font: 600 12px/16px var(--lh-f-sans); white-space: nowrap; cursor: help; }
@media (max-width: 599px) {
  .lh-jr-root .jr-head { padding: 8px 16px 12px; }
  .lh-jr-root .jr-kbds { display: none; }
  .lh-jr-root .jr-ident { grid-template-columns: minmax(0, 1fr); }
  .lh-jr-root .jr-actions { grid-column: 1; grid-row: 3; padding-top: 8px; }
}

/* ===== body (§5.4) ===== */
.lh-jr-root .jr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 16px 24px 32px; display: flex; flex-direction: column; gap: 24px; }
.lh-jr-root .jr-lede { font: 400 16px/24px var(--lh-f-sans); color: var(--lh-ink); max-width: 68ch; text-wrap: pretty; }
@media (max-width: 599px) { .lh-jr-root .jr-body { padding: 12px 16px 24px; gap: 16px; } }

/* facts */
.lh-jr-root .jr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.lh-jr-root .jr-fact { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lh-jr-root .jr-fact dt { font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-fact dd { font: 600 14px/20px var(--lh-f-sans); color: var(--lh-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lh-jr-root .jr-fact dd.jr-fact-sub { font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); display: block; }
.lh-jr-root .jr-fact-ic { width: 16px; height: 16px; stroke-width: 2.25; }
.lh-jr-root .jr-fact.is-leak dd:not(.jr-fact-sub) { color: var(--lh-unfav-text); }
.lh-jr-root .jr-fact.is-fail dd:not(.jr-fact-sub) { color: var(--lh-sys); }
.lh-jr-root .jr-pend { color: var(--lh-unfav-text); font-weight: 600; }
.lh-jr-root .jr-differs { margin-left: 4px; }
@media (max-width: 599px) { .lh-jr-root .jr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* journey ribbon: 7 connected steps, done / pending / leak / not connected */
.lh-jr-root .jr-rib { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 4px; }
.lh-jr-root .jr-rib-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.lh-jr-root .jr-rib-step + .jr-rib-step::before { content: ""; position: absolute; top: 11px; height: 2px; left: calc(-50% + 14px); right: calc(50% + 14px); background: var(--lh-ink); }
.lh-jr-root .jr-rib-step.is-pending::before { background: repeating-linear-gradient(90deg, var(--lh-hatch) 0 4px, transparent 4px 8px); }
.lh-jr-root .jr-rib-step.is-leak::before { background: repeating-linear-gradient(90deg, var(--lh-unfav) 0 4px, transparent 4px 8px); }
.lh-jr-root .jr-rib-step.is-leak.is-fail::before { background: repeating-linear-gradient(90deg, var(--lh-sys) 0 4px, transparent 4px 8px); }
.lh-jr-root .jr-rib-step.is-nc::before { background: repeating-linear-gradient(90deg, var(--lh-band-edge) 0 4px, transparent 4px 8px); }
.lh-jr-root .jr-rib-node { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--lh-card); }
.lh-jr-root .is-done > .jr-rib-node { background: var(--lh-ink); color: var(--lh-card); }
.lh-jr-root .is-done > .jr-rib-node .jr-icon { width: 14px; height: 14px; stroke-width: 2.25; }
.lh-jr-root .is-done > .jr-rib-node.is-ch { background: var(--lh-card); box-shadow: inset 0 0 0 2px var(--lh-ink); }
.lh-jr-root .is-pending > .jr-rib-node { border: 1.5px dashed var(--lh-hatch); }
.lh-jr-root .is-leak > .jr-rib-node { border: 2px dashed var(--lh-unfav); color: var(--lh-unfav-text); }
.lh-jr-root .is-leak.is-fail > .jr-rib-node { color: var(--lh-sys); border-color: var(--lh-sys); }   /* a failure is red end to end, never amber (§2.1) */
.lh-jr-root .is-leak > .jr-rib-node .jr-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.lh-jr-root .is-nc > .jr-rib-node { background: repeating-linear-gradient(135deg, var(--lh-hatch) 0 1.5px, var(--lh-band) 1.5px 4px); }
.lh-jr-root .jr-rib-lab { font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-rib-val { font: 600 12px/16px var(--lh-f-sans); color: var(--lh-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.lh-jr-root .is-pending > .jr-rib-val, .lh-jr-root .is-nc > .jr-rib-val { color: var(--lh-ink-muted); }
.lh-jr-root .is-leak > .jr-rib-val { color: var(--lh-unfav-text); }
.lh-jr-root .is-leak.is-fail > .jr-rib-val { color: var(--lh-sys); }
.lh-jr-root button.jr-rib-go { text-align: center; border-radius: var(--lh-r-sm); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer; }
.lh-jr-root button.jr-rib-go:hover { text-decoration-color: currentColor; }
.lh-jr-root .jr-rib-t { font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-faint); font-variant-numeric: tabular-nums; min-height: 16px; }
@media (max-width: 599px) {
  .lh-jr-root .jr-rib { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lh-jr-root .jr-rib-step { display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; gap: 0 8px; text-align: left; }
  .lh-jr-root .jr-rib-step + .jr-rib-step::before { top: -8px; left: 11px; right: auto; width: 2px; height: 8px; }
  .lh-jr-root .jr-rib-step.is-pending::before { background: repeating-linear-gradient(180deg, var(--lh-hatch) 0 3px, transparent 3px 5px); }
  .lh-jr-root .jr-rib-step.is-leak::before { background: repeating-linear-gradient(180deg, var(--lh-unfav) 0 3px, transparent 3px 5px); }
  .lh-jr-root .jr-rib-step.is-leak.is-fail::before { background: repeating-linear-gradient(180deg, var(--lh-sys) 0 3px, transparent 3px 5px); }
  .lh-jr-root .jr-rib-step.is-nc::before { background: repeating-linear-gradient(180deg, var(--lh-band-edge) 0 3px, transparent 3px 5px); }
  .lh-jr-root .jr-rib-lab::after { content: " ·"; }
  .lh-jr-root .jr-rib-val { -webkit-line-clamp: 1; text-align: left; }
  .lh-jr-root button.jr-rib-go { text-align: left; }
}

/* tabs: sticky at the top of the scroller */
.lh-jr-root .jr-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; background: var(--lh-card); border-bottom: 1px solid var(--lh-border); overflow-x: auto; scrollbar-width: none; flex: none; }
.lh-jr-root .jr-tab { font: 600 14px/20px var(--lh-f-sans); padding: 10px 12px; color: var(--lh-ink-muted); white-space: nowrap; background: transparent; border: 0; border-radius: 0; }
.lh-jr-root .jr-tab:hover { color: var(--lh-ink); background: var(--lh-hover-bg); }
.lh-jr-root .jr-tab[aria-selected="true"] { color: var(--lh-ink); box-shadow: inset 0 -3px 0 var(--lh-selected-bg); }
#lh-jr-sheet .jr-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--lh-focus); }
#lh-jr-sheet .jr-tab[aria-selected="true"]:focus-visible { box-shadow: inset 0 -3px 0 var(--lh-selected-bg), inset 0 0 0 2px var(--lh-focus); }
.lh-jr-root .jr-panel { min-width: 0; }
#lh-jr-sheet .jr-panel:focus-visible { outline: 2px solid var(--lh-focus); outline-offset: 4px; }
.lh-jr-root .jr-tabwrap { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ===== Activity (§5.5) ===== */
.lh-jr-root .jr-acttools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.lh-jr-root .jr-flt { display: flex; flex-wrap: wrap; gap: 8px; }
.lh-jr-root .jr-fbtn .jr-n { font-variant-numeric: tabular-nums; color: var(--lh-ink-muted); }
.lh-jr-root .jr-fbtn[aria-pressed="true"] .jr-n { color: inherit; }
.lh-jr-root .jr-acttools-r { margin-left: auto; display: flex; gap: 4px; }
.lh-jr-root .jr-acts > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
.lh-jr-root .jr-acts > li::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--lh-rail); }
.lh-jr-root .jr-acts > li:first-child::before { top: 14px; }
.lh-jr-root .jr-acts > li:last-child::before { bottom: auto; height: 14px; }
.lh-jr-root .jr-acts > li:only-child::before { display: none; }
.lh-jr-root .jr-acts > li.jr-gap::before { background: repeating-linear-gradient(to bottom, var(--lh-rail) 0 3px, transparent 3px 6px); }
.lh-jr-root .jr-dayli > .jr-day { grid-column: 2; margin: 16px 0 8px; padding-left: 8px; font: 600 12px/16px var(--lh-f-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--lh-ink-muted); }
.lh-jr-root .jr-acts > .jr-dayli:first-child > .jr-day { margin-top: 0; }
.lh-jr-root .jr-gap-t { grid-column: 2; padding: 0 8px 12px; font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); font-style: italic; }
.lh-jr-root .jr-act { padding-bottom: 12px; }
.lh-jr-root .jr-act-ic { grid-column: 1; position: relative; z-index: 1; display: inline-grid; width: 28px; height: 28px; }
.lh-jr-root .jr-act > .jr-dot { grid-column: 1; justify-self: center; align-self: start; position: relative; z-index: 1; width: 8px; height: 8px; margin-top: 10px; border-radius: 50%; background: var(--lh-t-neutral); box-shadow: 0 0 0 3px var(--lh-card); }
.lh-jr-root .jr-act-main { grid-column: 2; min-width: 0; }
.lh-jr-root .jr-act-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 0 8px; align-items: center; width: 100%; min-height: 28px; padding: 4px 8px; border-radius: var(--lh-r-md);
  text-align: left; color: var(--lh-ink); background: transparent; border: 0; cursor: pointer; }
.lh-jr-root .jr-act-head:hover { background: var(--lh-hover-bg); }
#lh-jr-sheet .jr-act-head:focus-visible { outline: 2px solid var(--lh-focus); outline-offset: 0; }
.lh-jr-root .jr-act-subj { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font: 500 14px/20px var(--lh-f-sans); color: var(--lh-ink); }
.lh-jr-root .jr-act.is-ms .jr-act-text { font-weight: 600; }
.lh-jr-root .jr-act-t { font: 400 12px/20px var(--lh-f-sans); color: var(--lh-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; align-self: start; }
.lh-jr-root .jr-chev { width: 16px; height: 16px; color: var(--lh-ink-muted); transition: transform 150ms; align-self: start; margin-top: 2px; }
.lh-jr-root [aria-expanded="true"] > .jr-chev, .lh-jr-root details[open] > summary > .jr-chev { transform: rotate(180deg); }
.lh-jr-root .jr-act-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); padding-top: 2px; }
.lh-jr-root .jr-act.is-step .jr-act-head { min-height: 24px; padding-top: 2px; padding-bottom: 2px; }
.lh-jr-root .jr-act.is-step .jr-act-subj { font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-act.is-step { padding-bottom: 8px; }
.lh-jr-root .jr-act-body { margin: 4px 8px 0; display: flex; flex-direction: column; gap: 12px; padding: 0 0 4px; }
.lh-jr-root .jr-now .jr-now-dot { grid-column: 1; justify-self: center; position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 2px; border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--lh-hatch) 0 1.5px, var(--lh-band) 1.5px 3px); box-shadow: 0 0 0 1px var(--lh-band-edge), 0 0 0 4px var(--lh-card); }
.lh-jr-root .jr-now .jr-now-t { grid-column: 2; padding: 0 8px; font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-acts > .jr-now:first-child { padding-bottom: 12px; }

/* details: key / value, call ids, legs, system details */
.lh-jr-root .jr-kv { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 4px 12px; }
.lh-jr-root .jr-kv > dt { font: 400 12px/20px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-kv > dd { font: 400 14px/20px var(--lh-f-sans); color: var(--lh-ink); overflow-wrap: anywhere; min-width: 0; }
.lh-jr-root .jr-kv > dd.jr-kv-full { grid-column: 1 / -1; color: var(--lh-ink-muted); }
.lh-jr-root .jr-kv-wide { grid-template-columns: 160px minmax(0, 1fr); gap: 8px 12px; }
.lh-jr-root .jr-chg-line { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: 600 12px/16px var(--lh-f-sans); color: var(--lh-unfav-text); }
.lh-jr-root .jr-chg-line .jr-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.lh-jr-root .jr-id { display: inline-block; margin-right: 12px; font: 400 13px/20px var(--lh-f-mono); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .lh-jr-root .jr-kv, .lh-jr-root .jr-kv-wide { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lh-jr-root .jr-kv > dd { margin-bottom: 8px; }
}
.lh-jr-root .jr-legs { width: 100%; font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink); }
.lh-jr-root .jr-legs:not(.jr-outt) { table-layout: fixed; min-width: 420px; }
.lh-jr-root .jr-legs:not(.jr-outt) th:nth-child(1) { width: 32%; }
.lh-jr-root .jr-legs:not(.jr-outt) th:nth-child(2) { width: 24%; }
.lh-jr-root .jr-legs:not(.jr-outt) th:nth-child(3), .lh-jr-root .jr-legs:not(.jr-outt) th:nth-child(4) { width: 11%; }
.lh-jr-root .jr-legs th { text-align: left; font: 600 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); padding: 4px 12px 4px 0; border-bottom: 1px solid var(--lh-border); white-space: nowrap; }
.lh-jr-root .jr-legs td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--lh-border); vertical-align: top; }
.lh-jr-root .jr-legs tr:last-child td { border-bottom: 0; }
.lh-jr-root .jr-legs .jr-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lh-jr-root .jr-legs-q { display: block; color: var(--lh-ink-muted); }
.lh-jr-root .jr-sysd > summary, .lh-jr-root .jr-rules > summary { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 0; border-radius: var(--lh-r-sm); cursor: pointer; list-style: none; font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-sysd > summary::-webkit-details-marker, .lh-jr-root .jr-rules > summary::-webkit-details-marker { display: none; }
.lh-jr-root .jr-sysd > summary:hover, .lh-jr-root .jr-rules > summary:hover { color: var(--lh-ink); text-decoration: underline; text-underline-offset: 3px; }
.lh-jr-root .jr-sysd > summary .jr-chev, .lh-jr-root .jr-rules > summary .jr-chev { margin-top: 0; }
.lh-jr-root .jr-sysl { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-left: 8px; border-left: 2px solid var(--lh-border); }
.lh-jr-root .jr-sysrow { display: grid; grid-template-columns: 88px 84px minmax(0, 1fr) auto; gap: 0 8px; font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-sys-t { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lh-jr-root .jr-sys-s { font-weight: 600; color: var(--lh-ink); }
.lh-jr-root .jr-rawev { font: 400 12px/16px var(--lh-f-mono); color: var(--lh-ink-muted); overflow-wrap: normal; word-break: normal; }
.lh-jr-root .jr-sys-l { grid-column: 3; color: var(--lh-ink); }
.lh-jr-root .jr-sys-e { grid-column: 4; grid-row: 1; white-space: nowrap; }
@media (max-width: 599px) { .lh-jr-root .jr-sysrow { grid-template-columns: 72px minmax(0, 1fr); } .lh-jr-root .jr-sys-s, .lh-jr-root .jr-sys-e { grid-column: auto; grid-row: auto; } .lh-jr-root .jr-rawev, .lh-jr-root .jr-sys-l { grid-column: 2; } }

/* ===== Calls tab ===== */
.lh-jr-root .jr-calls > .jr-h3 + .jr-callblk, .lh-jr-root .jr-calls > .jr-h3 { margin-top: 0; }
.lh-jr-root .jr-calls > * + .jr-h3 { margin-top: 24px; }
.lh-jr-root .jr-callblk { display: flex; flex-direction: column; gap: 12px; }
.lh-jr-root .jr-callblk + .jr-callblk { border-top: 1px solid var(--lh-border); padding-top: 16px; margin-top: 16px; }
.lh-jr-root .jr-callblk-h { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; align-items: start; }
.lh-jr-root .jr-callblk-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 500 14px/20px var(--lh-f-sans); }
.lh-jr-root .jr-callblk-m .jr-act-sub { padding-top: 2px; }
.lh-jr-root .jr-calls > .jr-rules { margin-top: 24px; }
.lh-jr-root .jr-rules > :not(summary) { margin-top: 8px; font: 400 14px/20px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-rules ul { list-style: disc; padding-left: 20px; }
.lh-jr-root .jr-rules li { margin: 4px 0; }
.lh-jr-root .jr-rules a, .lh-jr-root .jr-info-p a { color: var(--lh-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Salesforce tab ===== */
.lh-jr-root .jr-sfp > .jr-info { margin-bottom: 12px; }
.lh-jr-root .jr-sfl { display: flex; flex-direction: column; margin-bottom: 24px; }
.lh-jr-root .jr-sfi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--lh-border); }
.lh-jr-root .jr-sfi:first-child { padding-top: 0; }
.lh-jr-root .jr-sfi-t { font: 400 14px/20px var(--lh-f-sans); color: var(--lh-ink); }
.lh-jr-root .jr-hist > li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0 12px; padding-bottom: 12px; }
.lh-jr-root .jr-hist > li::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--lh-rail); }
.lh-jr-root .jr-hist > li:first-child::before { top: 10px; }
.lh-jr-root .jr-hist > li:last-child::before { bottom: auto; height: 10px; }
.lh-jr-root .jr-hist > li:only-child::before { display: none; }
.lh-jr-root .jr-hist-ic { position: relative; z-index: 1; display: inline-grid; width: 20px; height: 20px; }
.lh-jr-root .jr-hist-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lh-jr-root .jr-hist-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 14px/20px var(--lh-f-sans); color: var(--lh-ink); }
.lh-jr-root .jr-hist-i.is-latest .jr-hist-l { font-weight: 600; }
.lh-jr-root .jr-hist-d { font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-faint); }
.lh-jr-root .jr-hist-t { font: 400 12px/20px var(--lh-f-sans); color: var(--lh-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Consent tab (docs/lighthouse-consent-spec.md §3.8): neutral ink and grey only; mismatches never red or amber ===== */
.lh-jr-root .jr-cx { display: flex; flex-direction: column; gap: 20px; }
.lh-jr-root .jr-cx-sec { display: flex; flex-direction: column; gap: 8px; }
.lh-jr-root .jr-cx-sec > .jr-h3 { margin: 0; }
.lh-jr-root .jr-cx-list, .lh-jr-root .jr-cx-jlist { display: flex; flex-direction: column; gap: 8px; }
.lh-jr-root .jr-cx-li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 14px/20px var(--lh-f-sans); color: var(--lh-ink); }
.lh-jr-root .jr-cx-j, .lh-jr-root .jr-cx-mm { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--lh-border); border-radius: var(--lh-r-md); background: var(--lh-surface-2); }
.lh-jr-root .jr-cx-jh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lh-jr-root .jr-cx-jt { font: 600 14px/20px var(--lh-f-sans); color: var(--lh-ink); }
.lh-jr-root .jr-cx-jl { font: 400 13px/20px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-cx-stop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lh-jr-root .jr-cx-note, .lh-jr-root .jr-cx-now { font: 400 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-cx-why { display: flex; flex-direction: column; gap: 2px; }
.lh-jr-root .jr-rules .lcx-rules, .lh-jr-root .jr-cx-rules { list-style: disc; padding: 8px 0 0 20px; display: flex; flex-direction: column; gap: 6px; font: 400 13px/20px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-rules .lcx-rules > li, .lh-jr-root .jr-cx-rules > li { display: list-item; margin: 0; }
.lh-jr-root .jr-rules .lcx-rules > li::marker, .lh-jr-root .jr-cx-rules > li::marker { content: initial; }
.lh-jr-root .jr-rules .lcx-rules strong, .lh-jr-root .jr-cx-rules strong { color: var(--lh-ink); font-weight: 600; }

/* reduced motion: no transitions; the script also removes the root at once on close */
@media (prefers-reduced-motion: reduce) {
  .lh-jr-root .jr-scrim, .lh-jr-root .jr-drawer, .lh-jr-root .jr-chev { transition: none; }
}

/* ---------- 1.21.0 (docs/lighthouse-ui-overhaul-spec.md, CONSENT items) ---------- */
/* MB-04: the tab strip scrolls sideways and every label stays whole (FEATURES.mobileSheets adds .jr-tabs-ms) */
.lh-jr-root .jr-tabs.jr-tabs-ms { flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.lh-jr-root .jr-tabs.jr-tabs-ms .jr-tab { flex: 0 0 auto; }
/* C-12: opened from the Consent tab, the lead facts and stages fold away and a 3-line summary leads */
.lh-jr-root .jr-story > summary { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 0; border-radius: var(--lh-r-sm); cursor: pointer; list-style: none; font: 600 13px/18px var(--lh-f-sans); color: var(--lh-ink-muted); }
.lh-jr-root .jr-story > summary::-webkit-details-marker { display: none; }
.lh-jr-root .jr-story > summary:hover { color: var(--lh-ink); text-decoration: underline; text-underline-offset: 3px; }
.lh-jr-root .jr-story > summary .jr-chev { margin-top: 0; }
.lh-jr-root .jr-story[open] > .jr-facts { margin-top: 12px; }
.lh-jr-root .jr-story[open] > .jr-rib { margin-top: 16px; }
.lh-jr-root .jr-cx-sum { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--lh-border); border-radius: var(--lh-r-md, 8px); background: var(--lh-surface-2, #f8f9fc); font: 400 14px/20px var(--lh-f-sans); color: var(--lh-ink); }
.lh-jr-root .jr-cx-sum p { margin: 0; }
.lh-jr-root .jr-cx-sum strong { font-weight: 600; }
/* C-30: amber and red are reserved for feed and system status. A gap in a lead's journey (not reached, a callback pending) and
   "Changed in Salesforce" read in neutral ink; a Salesforce post failure stays red (.is-fail, a system state). */
.lh-jr-root .jr-chg { background: transparent; color: var(--lh-ink); box-shadow: inset 0 0 0 1px var(--lh-control-border, #6b7590); }
.lh-jr-root .jr-chg-line { color: var(--lh-ink); }
.lh-jr-root .jr-fact.is-leak dd:not(.jr-fact-sub) { color: var(--lh-ink); font-weight: 600; }
.lh-jr-root .jr-pend { color: var(--lh-ink); font-weight: 600; }
.lh-jr-root .jr-rib-step.is-leak::before { background: repeating-linear-gradient(90deg, var(--lh-ink-muted) 0 4px, transparent 4px 8px); }
.lh-jr-root .is-leak > .jr-rib-node { border-color: var(--lh-ink-muted); color: var(--lh-ink); }
.lh-jr-root .is-leak > .jr-rib-val { color: var(--lh-ink); font-weight: 600; }
.lh-jr-root .jr-rib-step.is-leak.is-fail::before { background: repeating-linear-gradient(90deg, var(--lh-sys) 0 4px, transparent 4px 8px); }
.lh-jr-root .is-leak.is-fail > .jr-rib-node { color: var(--lh-sys); border-color: var(--lh-sys); }
.lh-jr-root .is-leak.is-fail > .jr-rib-val { color: var(--lh-sys); }
@media (max-width: 599px) {
  .lh-jr-root .jr-rib-step.is-leak::before { background: repeating-linear-gradient(180deg, var(--lh-ink-muted) 0 3px, transparent 3px 5px); }
  .lh-jr-root .jr-rib-step.is-leak.is-fail::before { background: repeating-linear-gradient(180deg, var(--lh-sys) 0 3px, transparent 3px 5px); }
}