/* Jarbou3i dialogs (UIX-4, ADR-0002): the shell every modal shares, the parts
   their bodies share, and the review ledger. Classes are .j-modal-*, .j-pick*
   and .j-ledger-*. The app opens a dialog by setting aria-hidden="false" on its
   backdrop (with the "show" class it keeps for its own checks). */

.j-modal-back {
  position: fixed; inset: 0; z-index: var(--j-z-dialog); display: none; align-items: center; justify-content: center;
  padding: var(--j-s-4); background: var(--j-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.j-modal-back[aria-hidden="false"] { display: flex; }
.j-modal {
  width: min(880px, 100%); max-height: 88vh; overflow: auto; padding: var(--j-s-5);
  border: 1px solid var(--j-line); border-block-start: var(--j-rule) solid var(--j-ink); border-radius: 0 0 var(--j-r-3) var(--j-r-3); background: var(--j-panel); box-shadow: var(--j-shadow);
}
.j-modal[data-size="wide"] { width: min(1180px, 100%); }
.j-modal:focus { outline: none; }
/* A side sheet: the frame at the inline end, full height, its own parts
   scrolling (a bottom sheet on a phone). The page behind it does not scroll. */
.j-modal-back[data-variant="sheet"] { align-items: stretch; justify-content: flex-end; padding: 0; }
.j-modal[data-size="sheet"] {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(560px, 96vw); height: 100%; max-height: none;
  padding: 0; overflow: hidden; border-width: 0; border-inline-start-width: 1px; border-radius: 0;
}
html:has(.j-modal-back[data-variant="sheet"][aria-hidden="false"]) { overflow: hidden; }
.j-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--j-s-3); }
.j-modal-head h3 { margin: 0; font-size: var(--j-t-22); }
.j-modal-hint { margin: var(--j-s-1) 0 0; color: var(--j-fg-muted); }

/* What a dialog guarantees, said once above its content. */
.j-modal-trust {
  margin: 0; padding: var(--j-s-2) var(--j-s-3); border: 1px solid color-mix(in srgb, var(--j-signal) 45%, transparent);
  border-radius: var(--j-r-2); background: var(--j-signal-wash); color: var(--j-fg); font-size: var(--j-t-13);
}
.j-modal-sechead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--j-s-2); }
.j-modal-sechead h4 { margin: 0; font-size: var(--j-t-14); }
.j-modal-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--j-s-2); }
/* It takes focus, so the keyboard can scroll it. */
.j-modal-pre {
  max-height: 60vh; overflow: auto; margin: var(--j-s-3) 0; padding: var(--j-s-3); border: 1px solid var(--j-line); border-radius: var(--j-r-2);
  background: var(--j-raise); color: var(--j-fg); font: var(--j-t-13)/1.55 var(--j-font-code); white-space: pre-wrap; overflow-wrap: anywhere;
}
.j-modal-pre:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }

/* A list of choices, one pressed: revisions, ledger tasks. Its buttons take
   focus, so the keyboard can scroll it. Its rows keep their content's height
   when the list is too long to fit: auto rows would shrink to 44px. */
.j-pick-list { display: grid; grid-auto-rows: max-content; gap: var(--j-s-1); max-height: 56vh; overflow-y: auto; padding: var(--j-s-1); }
.j-pick {
  display: grid; gap: var(--j-s-1); 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: transparent; color: var(--j-fg); text-align: start; cursor: pointer;
}
.j-pick:hover { background: var(--j-raise); }
.j-pick:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }
/* Pressed by a thicker leading edge too, not by colour alone. */
.j-pick[aria-pressed="true"] { background: var(--j-signal-wash); border: 2px solid var(--j-ink); }
.j-pick-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-s-2); }
.j-pick .j-chip { background: var(--j-panel); }
.j-pick code { overflow-wrap: anywhere; font-size: var(--j-t-12); }
.j-pick-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--j-s-2); font-size: var(--j-t-12); }

/* The review ledger: the tasks beside the decision on the chosen one. */
.j-ledger { display: grid; gap: var(--j-s-3); margin-top: var(--j-s-3); }
.j-ledger-grid { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.3fr); gap: var(--j-s-4); align-items: start; }
.j-ledger-grid > section { display: grid; gap: var(--j-s-3); align-content: start; min-width: 0; }
.j-ledger-grid h4 { margin: 0; font-size: var(--j-t-14); }
.j-ledger-counts { display: flex; flex-wrap: wrap; gap: var(--j-s-1); }
.j-ledger-selected { display: grid; gap: var(--j-s-1); justify-items: start; padding: var(--j-s-3); border: 1px solid var(--j-line); border-radius: var(--j-r-2); }
.j-ledger-selected code, .j-ledger-selected small { overflow-wrap: anywhere; font-family: var(--j-font-code); font-size: var(--j-t-12); }
.j-ledger-waiver { display: grid; gap: var(--j-s-3); padding: var(--j-s-3); border: 1px dashed var(--j-warn); border-radius: var(--j-r-2); }
.j-ledger-history ol { display: grid; gap: var(--j-s-2); margin: 0; padding: 0 var(--j-s-3) var(--j-s-3) var(--j-s-6); font-size: var(--j-t-13); }
.j-ledger-history li > div { display: flex; flex-wrap: wrap; gap: var(--j-s-1) var(--j-s-3); }
.j-ledger-history p { margin: var(--j-s-1) 0 0; }
.j-ledger-history code { font-family: var(--j-font-code); font-size: var(--j-t-12); color: var(--j-fg-muted); }

@media (max-width: 620px) {
  .j-modal-back[data-variant="sheet"] { align-items: flex-end; }
  .j-modal[data-size="sheet"] {
    width: 100%; height: min(86vh, 760px); border-width: 1px 0 0;
    border-start-start-radius: var(--j-r-3); border-start-end-radius: var(--j-r-3);
  }
}

@media (max-width: 760px) {
  .j-modal { padding: var(--j-s-3); }
  .j-ledger-grid { grid-template-columns: 1fr; }
  .j-pick-list { max-height: 250px; }
}

@media (forced-colors: active) {
  .j-pick[aria-pressed="true"] { outline: 2px solid Highlight; }
  .j-modal[data-size="sheet"] { border-color: CanvasText; }
}

@media print {
  .j-modal-back { display: none !important; }
}