/* Jarbou3i overview (UIX-3, ADR-0002): the brief (what matters first, then how
   the conclusion is built), then the detailed diagnostics. Classes are
   .j-brief* and .j-diag*; the explanation's steps and the score rule are .j-rec
   records, the counts .j-stats. */

/* A part of the brief: a heading, then its blocks. */
.j-brief {
  display: grid; gap: var(--j-s-4); min-width: 0; margin: 0 0 var(--j-s-5);
}
.j-brief-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--j-s-3) var(--j-s-5); }
.j-brief-head > div { display: grid; gap: var(--j-s-1); flex: 1 1 24ch; min-width: 0; }
.j-brief-head h4 { margin: 0; color: var(--j-fg); font: 700 var(--j-t-22)/1.25 var(--j-font-display); letter-spacing: -.01em; text-wrap: balance; }
.j-brief-head > div > p { max-width: 72ch; margin: 0; color: var(--j-fg-muted); line-height: 1.55; overflow-wrap: anywhere; }
/* The publication verdict: a status, said in words, under an ink rule. */
.j-brief-gate {
  display: grid; gap: var(--j-s-1); margin: 0; padding: var(--j-s-2) 0 0;
  border-block-start: var(--j-rule) solid var(--j-ink);
}

/* The conclusion beside its two figures, each under an ink rule, no boxes. */
.j-brief-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: var(--j-s-5); }
.j-brief-claim, .j-brief-figures > div, .j-brief-signal {
  display: grid; gap: var(--j-s-2); align-content: start; min-width: 0; padding: var(--j-s-3) 0 0;
  border-block-start: var(--j-rule) solid var(--j-ink);
}
.j-brief-claim > p { margin: 0; color: var(--j-fg); font-size: var(--j-t-18); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.j-brief-figures { display: grid; gap: var(--j-s-4); margin: 0; }
.j-brief-figures dd { display: grid; gap: var(--j-s-2); margin: 0; }
.j-brief-figures b { color: var(--j-fg); font: 700 var(--j-t-28)/1 var(--j-font-data); font-variant-numeric: tabular-nums; }
/* A share of the whole; the band of the score legend colours it. */
.j-brief-bar { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--j-line); }
.j-brief-bar::before { content: ""; display: block; inline-size: var(--j-pct); block-size: 100%; border-radius: inherit; background: var(--j-signal); }
.j-brief-bar[data-tone="ok"]::before { background: var(--j-ok); }
.j-brief-bar[data-tone="warn"]::before { background: var(--j-warn); }
.j-brief-bar[data-tone="crit"]::before { background: var(--j-crit); }

/* The principal uncertainty and the next action: their labels say which;
   an uncertainty’s rule is in the warning colour. */
.j-brief-signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--j-s-5); }
.j-brief-signal[data-tone="warn"] { border-block-start-color: var(--j-warn); }
.j-brief-signal > p { margin: 0; color: var(--j-fg); font-size: var(--j-t-14); line-height: 1.55; overflow-wrap: anywhere; }

/* How the conclusion is built: its steps, each a record that ends on its link. */
.j-brief-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--j-s-5);
  margin: 0; padding: 0; list-style: none;
}
.j-brief-steps > li { display: grid; min-width: 0; }
.j-brief-steps .j-rec { grid-template-rows: auto auto 1fr auto; align-content: stretch; }
.j-brief-desc { margin: 0; color: var(--j-fg-muted); font-size: var(--j-t-13); line-height: 1.5; }
.j-brief-items { display: grid; gap: var(--j-s-3); align-content: start; margin: 0; padding: 0; list-style: none; }
.j-brief-items > li { display: grid; gap: var(--j-s-1); min-width: 0; padding-block-start: var(--j-s-3); border-block-start: 1px solid var(--j-line); }
.j-brief-items strong { color: var(--j-fg); font-size: var(--j-t-14); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
/* Three lines at most; the step's link opens the whole record. */
.j-brief-items p {
  display: -webkit-box; margin: 0; overflow: hidden; color: var(--j-fg); font-size: var(--j-t-13); line-height: 1.55;
  overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.j-brief-tags { display: flex; flex-wrap: wrap; gap: var(--j-s-1); margin-block-start: var(--j-s-1); }
.j-brief-open { justify-content: space-between; width: 100%; font-size: var(--j-t-14); }
.j-brief-open:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }

/* Where the brief ends and the diagnostics begin. */
.j-brief-divider { display: flex; align-items: center; gap: var(--j-s-3); margin: var(--j-s-2) 0 var(--j-s-4); }
.j-brief-divider::before, .j-brief-divider::after { content: ""; flex: 1; height: 1px; background: var(--j-line); }
/* A note above the brief, such as a migrated import. */
.j-brief-alert { margin-bottom: var(--j-s-4); }

/* The diagnostics: the gate, the scores and their rule, the caps on readiness,
   the next action, then the open items. */
.j-diag { display: grid; gap: var(--j-s-4); min-width: 0; }
.j-diag h4 { margin: 0; color: var(--j-fg); font: 600 var(--j-t-16)/1.35 var(--j-font-display); }
.j-diag > section { display: grid; gap: var(--j-s-2); min-width: 0; }
.j-diag > .j-note { display: grid; gap: var(--j-s-2); padding: var(--j-s-3) var(--j-s-4); }
.j-diag > .j-note :is(p, ul) { margin: 0; }
.j-diag > .j-note ul { padding-inline-start: var(--j-s-5); }
.j-diag > .j-note li + li { margin-top: var(--j-s-1); }
/* Six scores, each a figure out of 100 over its bar and what it measures:
   three to a row, then two, then one; a size under the brief's figures. */
.j-brief-figures[data-layout="grid"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.j-brief-figures[data-layout="grid"] b { font-size: var(--j-t-22); }
/* The legend of the bars' colours: a swatch, then its range. */
.j-brief-bands {
  display: flex; flex-wrap: wrap; gap: var(--j-s-2) var(--j-s-4); margin: 0; padding: 0; list-style: none;
  color: var(--j-fg-muted); font: 600 var(--j-t-12)/1.3 var(--j-font-data);
}
.j-brief-bands > li { display: inline-flex; align-items: center; gap: var(--j-s-2); }
.j-brief-bands .j-brief-bar { inline-size: 20px; }
.j-diag-notes { display: grid; gap: var(--j-s-2); margin: 0; padding: 0; list-style: none; }

@media (max-width: 760px) {
  .j-brief-main, .j-brief-signals { grid-template-columns: minmax(0, 1fr); }
  .j-brief-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-brief-claim > p { font-size: var(--j-t-16); }
}
@media (max-width: 420px) {
  .j-brief-figures { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .j-brief, .j-brief-steps .j-rec { break-inside: avoid; }
  .j-brief-open, .j-brief-divider { display: none; }
}
@media (forced-colors: active) {
  .j-brief-gate, .j-brief-claim, .j-brief-figures > div, .j-brief-signal { border-color: CanvasText; }
  .j-brief-bar { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; }
  .j-brief-bar::before { background: Highlight; }
}