/* Jarbou3i case sections (UIX-3, ADR-0002): the parts the case file's sections
   share. A lede under a heading, record cards in a list, checks with their
   verdicts, counts, a 1–5 meter and a data table. Classes are .j-lede,
   .j-recs, .j-rec*, .j-checks, .j-stats, .j-meter and .j-table*. */

/* The line under a section heading that says what the section holds. */
.j-lede { max-width: 72ch; margin: calc(-1 * var(--j-s-2)) 0 var(--j-s-4); color: var(--j-fg-muted); line-height: 1.6; }

/* Records, one per row; two at a time when they are short (data-cols="2"). */
.j-recs { display: grid; gap: var(--j-s-5); margin: 0; padding: 0; list-style: none; }
.j-recs[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.j-recs > li { display: grid; min-width: 0; }
/* A record a search filters out. The case document is outside .j-root, whose
   [hidden] rule would cover it; a wider rule here would also hide the legacy
   accordions that print open. */
.j-recs > li[hidden] { display: none; }
:is(.j-recs, .j-note) + h3 { margin-top: var(--j-s-5); }

/* A record: its ID and qualifiers, its statement, then its facts, under an ink
   rule rather than in a box. Its chips say its tone in words and colour. */
.j-rec {
  display: grid; gap: var(--j-s-3); align-content: start; min-width: 0; padding: var(--j-s-3) 0 0;
  border: 0; border-block-start: 2px solid var(--j-ink); border-radius: 0; background: none;
}
/* The inspector's "Open full record" lands on the card. */
.j-rec:focus { outline: none; }
.j-rec:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }
/* A card that opens the inspector is a button. */
button.j-rec { width: 100%; color: inherit; font: inherit; text-align: start; cursor: pointer; }
button.j-rec:hover { border-block-start-color: var(--j-signal); }
button.j-rec .j-rec-title { font-size: var(--j-t-14); }
.j-rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-s-2); min-width: 0; }
.j-rec-head > .j-rec-title { flex: 1 1 12ch; }
/* A long code ("Erreur d’acteur ou conséquence imprévue") wraps inside its chip
   rather than push a narrow page sideways. */
.j-rec-head > .j-chip { max-width: 100%; padding-block: 3px; line-height: 1.3; white-space: normal; }
.j-rec-id { color: var(--j-signal); font: 600 var(--j-t-12)/1.3 var(--j-font-data); }
.j-rec-title { margin: 0; color: var(--j-fg); font-size: var(--j-t-16); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
h5.j-rec-title { font-size: var(--j-t-14); line-height: 1.35; }
.j-rec-text { margin: 0; color: var(--j-fg); font-size: var(--j-t-14); line-height: 1.6; overflow-wrap: anywhere; }
.j-rec-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--j-s-3) var(--j-s-4); margin: 0; }
.j-rec-facts > div { display: grid; gap: var(--j-s-1); align-content: start; min-width: 0; }
.j-rec-facts dd { margin: 0; color: var(--j-fg); font-size: var(--j-t-13); line-height: 1.55; overflow-wrap: anywhere; }
/* Facts written as prose take a wider measure. */
.j-rec-facts[data-prose] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.j-rec-facts dd > ul { margin: 0; padding-inline-start: var(--j-s-4); }
.j-rec-facts dd li + li { margin-top: var(--j-s-1); }
/* A fact that is a set of qualifiers, such as the layers a record touches. */
.j-rec-facts dd:has(> .j-chip) { display: flex; flex-wrap: wrap; gap: var(--j-s-1); }
/* A summary that is a list of points. */
ul.j-rec-text { padding-inline-start: var(--j-s-5); list-style: disc; }
ul.j-rec-text > li + li { margin-top: var(--j-s-1); }
/* A note of several paragraphs, or a sentence and what to do about it. */
.j-note > p { margin: 0; }
.j-note > p + p { margin-top: var(--j-s-1); }
.j-note > p + .j-btn { margin-top: var(--j-s-2); }

/* Checks, each a question beside its verdict (a .j-status), two to a row; a
   concern is washed so it stands out among the passes. */
.j-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--j-s-2); margin: 0; }
.j-checks > div {
  display: flex; align-items: center; justify-content: space-between; gap: var(--j-s-3); min-width: 0;
  padding: var(--j-s-2) var(--j-s-3); border: 1px solid var(--j-line); border-radius: var(--j-r-2); background: var(--j-panel-2);
}
.j-checks > [data-tone="warn"] { background: var(--j-warn-wash); }
.j-checks dt { color: var(--j-fg); font-size: var(--j-t-14); line-height: 1.45; overflow-wrap: anywhere; }
.j-checks dd { margin: 0; }
.j-checks + .j-note { margin-top: var(--j-s-3); }
/* The passes, folded under their count after the checks to look at. */
.j-checks + .j-disclosure[data-self-audit-passed], .j-disclosure[data-self-audit-passed] + .j-note { margin-top: var(--j-s-3); }
.j-disclosure[data-self-audit-passed] > .j-checks { padding: 0 var(--j-s-3) var(--j-s-3); }

/* Counts, each a figure over its name; a tone colours the figure only. */
.j-stats { display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); gap: var(--j-s-2); }
.j-stats > span {
  display: grid; gap: 2px; padding: var(--j-s-2) var(--j-s-3); border: 1px solid var(--j-line); border-radius: var(--j-r-2);
  background: var(--j-panel-2); color: var(--j-fg-muted); font: 600 var(--j-t-12)/1.3 var(--j-font-ui);
}
.j-stats b { color: var(--j-fg); font: 700 var(--j-t-18)/1.2 var(--j-font-data); }
.j-stats > [data-tone="ok"] b { color: var(--j-ok); }
.j-stats > [data-tone="warn"] b { color: var(--j-warn); }
.j-stats > [data-tone="crit"] b { color: var(--j-crit); }
/* Four counts in a row. */
.j-stats[data-cols="4"] { grid-template-columns: repeat(4, minmax(88px, 1fr)); }

/* A 1–5 score in five steps, the score beside them in figures. */
.j-meter { display: inline-flex; align-items: center; gap: 3px; }
.j-meter > i { width: 14px; height: 6px; border-radius: 3px; background: var(--j-line-strong); }
.j-meter > i[data-on] { background: var(--j-signal); }
.j-meter > span { margin-inline-start: var(--j-s-1); color: var(--j-fg-muted); font: 600 var(--j-t-12)/1 var(--j-font-data); }

/* A data table; wider than the page, it scrolls inside its frame. */
.j-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--j-line); border-radius: var(--j-r-2); }
.j-table { width: 100%; border-collapse: collapse; background: var(--j-panel); font-size: var(--j-t-13); }
.j-table :is(th, td) { padding: var(--j-s-2) var(--j-s-3); border-bottom: 1px solid var(--j-line); text-align: start; vertical-align: top; }
.j-table thead th {
  background: var(--j-panel-2); color: var(--j-fg-muted); font: 700 var(--j-t-13)/1.3 var(--j-font-ui); white-space: nowrap;
}
.j-table tbody tr:last-child > * { border-bottom: 0; }
.j-table tbody th { min-width: 200px; font-weight: 400; }
.j-table td code {
  display: inline-block; margin: 1px; padding: 2px 5px; border-radius: var(--j-r-1);
  background: var(--j-panel-2); color: var(--j-signal); font: 600 var(--j-t-12)/1.3 var(--j-font-data);
}

@media (max-width: 760px) {
  .j-recs[data-cols="2"], .j-checks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  /* A count per row, its figure before its name: three columns would split a
     name such as “Occurrences”. */
  .j-stats, .j-stats[data-cols] { grid-template-columns: minmax(0, 1fr); }
  .j-stats > span { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--j-s-2); }
}
@media (forced-colors: active) {
  .j-rec, .j-checks > div, .j-table-wrap, .j-stats > span { border-color: CanvasText; }
  .j-meter > i { border: 1px solid CanvasText; }
  .j-meter > i[data-on] { background: CanvasText; }
}