/* Jarbou3i references (UIX-3, ADR-0002): a record named inside a text, and the
   sheet that inspects it. Classes are .j-ref* and .j-insp-*. The sheet is the
   kernel dialog frame as a side sheet (.j-modal-back[data-variant="sheet"]). */

/* A reference: the record's name and its ID, a button that opens the sheet. */
.j-ref {
  display: inline-grid; grid-template-columns: minmax(0, auto) auto; align-items: center; gap: var(--j-s-2);
  position: relative; max-width: 100%; margin: 2px 3px; padding: 5px var(--j-s-2);
  border: 1px solid color-mix(in srgb, var(--j-signal) 35%, var(--j-line)); border-radius: var(--j-r-2);
  background: var(--j-signal-wash); color: var(--j-fg); font: inherit; text-align: start; vertical-align: middle; cursor: pointer;
}
.j-ref:hover { border-color: var(--j-signal); }
/* The chip sits in a line of text; its hit area is a 44px target all the same,
   with a pixel each way for a line that lands between device pixels. */
.j-ref::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: calc(var(--j-control) + 2px); transform: translateY(-50%); }
.j-ref:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }
.j-ref-label { min-width: 0; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.j-ref-id {
  padding: 2px 5px; border-radius: var(--j-r-1); background: var(--j-panel); color: var(--j-signal);
  font: 600 var(--j-t-12)/1.3 var(--j-font-data); white-space: nowrap;
}
/* Evidence also reads as evidence by its ID; the tone only adds to it. */
.j-ref[data-reference-type="evidence"] { border-color: color-mix(in srgb, var(--j-ok) 40%, var(--j-line)); background: var(--j-ok-wash); }
.j-ref[data-reference-type="evidence"] .j-ref-id { color: var(--j-ok); }

/* The sheet: the record's type and ID, its name, then its sections. */
.j-insp-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--j-s-4);
  padding: var(--j-s-5); border-bottom: 1px solid var(--j-line);
}
.j-insp-head h2 { margin-bottom: var(--j-s-1); font-size: var(--j-t-22); line-height: 1.28; overflow-wrap: anywhere; }
.j-insp-body { display: grid; gap: var(--j-s-6); align-content: start; min-width: 0; padding: var(--j-s-5); overflow: auto; }
.j-insp-summary { line-height: 1.65; }
.j-insp-sec { display: grid; gap: var(--j-s-3); min-width: 0; }
.j-insp-sec > h3 { display: flex; align-items: center; gap: var(--j-s-2); font-size: var(--j-t-16); }
.j-insp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--j-s-2); margin: 0; }
.j-insp-facts > div { min-width: 0; padding: var(--j-s-2) var(--j-s-3); border-radius: var(--j-r-2); background: var(--j-panel-2); }
.j-insp-facts dd { margin: var(--j-s-1) 0 0; font-size: var(--j-t-13); font-weight: 600; overflow-wrap: anywhere; }
.j-insp-facts a { color: var(--j-signal); text-underline-offset: 2px; }
.j-insp-facts code { direction: ltr; unicode-bidi: isolate; font: var(--j-t-12) var(--j-font-code); }
/* Two sides of one question: support beside counter-evidence. */
.j-insp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--j-s-3); }
/* A side is a column under its heading, not a box: its records are the boxes. */
.j-insp-pair > div { display: grid; gap: var(--j-s-2); align-content: start; min-width: 0; }
.j-insp-sub { display: grid; gap: var(--j-s-2); padding-top: var(--j-s-3); border-top: 1px solid var(--j-line); }
.j-insp-sub h5 { margin: 0; }
.j-insp-sec .j-note ul { margin: var(--j-s-1) 0 0; padding-inline-start: var(--j-s-5); line-height: 1.55; }
/* Records it leads to, each a 44px button: its name, then its ID. */
.j-insp-list { display: grid; gap: var(--j-s-2); margin: 0; padding: 0; list-style: none; }
.j-insp-rec {
  display: grid; gap: 2px; width: 100%; min-height: 44px; 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);
  font: inherit; text-align: start; cursor: pointer;
}
.j-insp-rec:hover { border-color: var(--j-signal); }
.j-insp-rec:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }
.j-insp-rec > span { font-size: var(--j-t-13); font-weight: 600; overflow-wrap: anywhere; }
.j-insp-rec > :is(small, code) { color: var(--j-fg-muted); font: 500 var(--j-t-12)/1.3 var(--j-font-code); overflow-wrap: anywhere; white-space: normal; }
/* Where the record appears, numbered in document order. */
.j-insp-occ { counter-reset: occurrence; }
.j-insp-occ > li { counter-increment: occurrence; }
.j-insp-occ .j-insp-rec { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--j-s-3); }
.j-insp-occ .j-insp-rec::before { content: counter(occurrence, decimal-leading-zero); grid-row: span 2; color: var(--j-signal); font: 600 var(--j-t-12)/1 var(--j-font-data); }
.j-insp-occ .j-insp-rec > code { grid-column: 2; }
.j-insp-foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--j-s-2); padding: var(--j-s-4) var(--j-s-5); border-top: 1px solid var(--j-line); }
.j-insp-foot:has(> [hidden]) { grid-template-columns: 1fr; }
.j-insp-foot .j-btn { width: 100%; }

@media (max-width: 620px) {
  .j-ref { grid-template-columns: minmax(0, 1fr) auto; }
  .j-insp-head, .j-insp-body { padding: var(--j-s-4); }
  .j-insp-foot { grid-template-columns: 1fr; padding: var(--j-s-3) var(--j-s-4); }
  .j-insp-facts, .j-insp-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
  .j-ref, .j-insp-rec { border-color: CanvasText; }
}