/* Jarbou3i model engine (UIX-3, ADR-0002): the engine map, each layer of the
   model a station on one line that opens it in the case file, and the case file's
   layers, each a heading whose button opens its records (the WAI-ARIA
   accordion pattern). A layer's colour (--j-layer, set by the app) only marks
   it: its number and name say which it is. Classes are .j-engine-* and
   .j-layer*. */

/* The map is the line: per layer a station, its name beside it, then the
   layer's stretch of line to the next station, longer the more records it
   holds. The line runs down through the stations, names to the side; the six
   Strategic layers, given the width, ride it across instead (below). The ring
   sits 31px into its step (2px border, 12px padding, half of 34px) and the
   line runs through its centre. The layer open in the case file wears a
   second ring in its line's colour. */
.j-engine-map {
  --j-stop: 128px; --j-stop-c: 31px;
  display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none;
}
.j-engine-map > li { position: relative; display: grid; min-width: 0; padding-block-end: calc(var(--j-s-2) + min(var(--j-n, 0) * 6px, 96px)); }
.j-engine-map > li::before {
  content: ""; position: absolute; z-index: 1; inset-block-start: var(--j-stop-c); inset-inline-start: calc(var(--j-stop-c) - 4px);
  inline-size: 8px; block-size: 100%; background: var(--j-layer, var(--j-line-strong));
}
/* The last stretch ends at a terminus, where a next station would stand. */
.j-engine-map > li:last-child { margin-block-end: calc(var(--j-stop-c) + 13px); }
.j-engine-map > li:last-child::after {
  content: ""; position: absolute; z-index: 2; inset-block-start: calc(100% + var(--j-stop-c) - 13px); inset-inline-start: calc(var(--j-stop-c) - 13px);
  inline-size: 26px; block-size: 26px; box-sizing: border-box; border-radius: 50%; border: var(--j-station) solid var(--j-ink); background: var(--j-panel);
}
.j-engine-step {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; align-content: start;
  gap: var(--j-s-1) var(--j-s-3); min-width: 0; padding: var(--j-s-3);
  border: 2px solid transparent; border-radius: var(--j-r-3);
  background: transparent; color: var(--j-fg); font: inherit; text-align: start; cursor: pointer;
  transition: background-color var(--j-dur-1) var(--j-ease-out), border-color var(--j-dur-1) var(--j-ease-out);
}
.j-engine-n {
  grid-row: 1 / span 3; position: relative; z-index: 2; display: grid; place-items: center; inline-size: 34px; block-size: 34px; box-sizing: border-box; border-radius: 50%;
  border: var(--j-station) solid var(--j-ink); background: var(--j-panel);
  color: var(--j-fg); font: 700 var(--j-t-12)/1 var(--j-font-ui);
}
.j-engine-name { grid-column: 2; grid-row: 1; padding-block-start: 6px; font-size: var(--j-t-16); font-weight: 700; line-height: 1.35; overflow-wrap: break-word; }
.j-engine-count { grid-column: 2; grid-row: 2; color: var(--j-fg-muted); font: 600 var(--j-t-13)/1.3 var(--j-font-ui); }
.j-engine-count b { color: var(--j-fg); font: 700 var(--j-t-18)/1 var(--j-font-ui); }
.j-engine-text { grid-column: 2; grid-row: 3; color: var(--j-fg-muted); font-size: var(--j-t-13); line-height: 1.5; overflow-wrap: break-word; }
.j-engine-step:hover { background: var(--j-raise); }
.j-engine-step:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }
/* The layer open in the case file: an ink edge, its ring doubled. */
.j-engine-step[aria-current="true"] { border-color: var(--j-ink); }
.j-engine-step[aria-current="true"] .j-engine-n { box-shadow: 0 0 0 3px var(--j-panel), 0 0 0 7px var(--j-layer, var(--j-ink)); }
/* Before an analysis the map explains the layers; a count of zero says nothing. */
.j-engine-map[data-loaded="false"] .j-engine-count { display: none; }
/* With room, a layer's description sits beside its name and records. */
@media (min-width: 621px) {
  .j-engine-step { grid-template-columns: 34px minmax(9rem, 15rem) minmax(0, 1fr); column-gap: var(--j-s-4); }
  .j-engine-n { grid-row: 1 / span 2; }
  .j-engine-text { grid-column: 3; grid-row: 1 / span 2; padding-block-start: 6px; }
}
/* Across: the six Strategic stations in a row, names hanging from them. The
   app sets the columns from the record counts (--j-cols), so the stretches
   compare; each keeps a floor that leaves room for its name. */
@media (min-width: 901px) {
  .j-engine-map:not([data-layers="9"]) { grid-template-columns: var(--j-cols, repeat(6, minmax(var(--j-stop), 1fr))); column-gap: var(--j-s-3); }
  .j-engine-map:not([data-layers="9"]) > li { padding-block-end: 0; margin-block-end: 0; }
  .j-engine-map:not([data-layers="9"]) > li::before {
    inset-block-start: calc(var(--j-stop-c) - 4px); inset-inline-start: var(--j-stop-c); inline-size: calc(100% + var(--j-s-3)); block-size: 8px;
  }
  .j-engine-map:not([data-layers="9"]) > li:last-child::before { inline-size: calc(100% - var(--j-stop-c) - 13px); }
  .j-engine-map:not([data-layers="9"]) > li:last-child::after { inset-block: calc(var(--j-stop-c) - 13px) auto; inset-inline: auto 0; }
  .j-engine-map:not([data-layers="9"]) .j-engine-step { grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: var(--j-s-2); }
  .j-engine-map:not([data-layers="9"]) :is(.j-engine-n, .j-engine-name, .j-engine-count, .j-engine-text) { grid-column: 1; grid-row: auto; padding-block-start: 0; }
  .j-engine-map:not([data-layers="9"]) .j-engine-text { order: 1; }
}

/* The case file's layers. A layer's head: its number, name, records and
   chevron, its description under its name; its body holds its records. */
.j-layers { display: grid; gap: var(--j-s-3); }
.j-layer {
  min-width: 0; border: 2px solid var(--j-line); border-radius: var(--j-r-3); background: var(--j-panel);
}
.j-layer-h { margin: 0; font: inherit; }
.j-layer-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--j-s-1) var(--j-s-3);
  inline-size: 100%; min-height: 44px; padding: var(--j-s-3) var(--j-s-4); border: 0; border-radius: var(--j-r-2);
  background: none; color: var(--j-fg); font: inherit; text-align: start; cursor: pointer;
}
.j-layer-head:hover { background: var(--j-raise); }
.j-layer-head:focus-visible { outline: 3px solid var(--j-signal); outline-offset: -3px; }
.j-layer-head[aria-expanded="true"] { border-end-start-radius: 0; border-end-end-radius: 0; }
/* Its number in a ring of its line's colour, as on the map. */
.j-layer-n {
  grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%;
  border: var(--j-station) solid var(--j-layer, var(--j-line-strong)); color: var(--j-fg); font: 700 var(--j-t-12)/1 var(--j-font-ui);
}
.j-layer-name { font-size: var(--j-t-16); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.j-layer-text { grid-column: 2 / -1; color: var(--j-fg-muted); font-size: var(--j-t-13); line-height: 1.5; overflow-wrap: anywhere; }
.j-layer-count { color: var(--j-fg-muted); font: 600 var(--j-t-12)/1.3 var(--j-font-ui); }
.j-layer-count b { color: var(--j-fg); font: 700 var(--j-t-16)/1 var(--j-font-ui); }
/* A chevron drawn from two borders: down when closed, up when open. */
.j-layer-chev {
  inline-size: 8px; block-size: 8px; margin-inline: var(--j-s-1);
  border-right: 2px solid var(--j-fg-muted); border-bottom: 2px solid var(--j-fg-muted); transform: translateY(-2px) rotate(45deg);
}
.j-layer-head[aria-expanded="true"] .j-layer-chev { transform: translateY(2px) rotate(-135deg); }
/* No display here: a closed body keeps the browser's [hidden]. */
.j-layer-body { padding: var(--j-s-4); border-block-start: 1px solid var(--j-line); }

@media (prefers-reduced-motion: no-preference) {
  .j-layer-chev { transition: transform var(--j-dur-2) var(--j-ease-out); }
}
@media (max-width: 620px) {
  /* With an analysis open the case file holds each layer's description, so
     each stop is one short row, name and records beside its ring, and the
     case file comes sooner. The ring then sits 23px in (4px padding). */
  .j-engine-map[data-loaded="true"] { --j-stop-c: 23px; }
  .j-engine-map[data-loaded="true"] > li { padding-block-end: min(var(--j-n, 0) * 4px, 48px); }
  .j-engine-map[data-loaded="true"] .j-engine-step { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; padding: var(--j-s-1); }
  .j-engine-map[data-loaded="true"] :is(.j-engine-n, .j-engine-name, .j-engine-count) { grid-row: 1; padding-block-start: 0; }
  .j-engine-map[data-loaded="true"] .j-engine-count { grid-column: 3; }
  .j-engine-map[data-loaded="true"] .j-engine-text { display: none; }
  .j-layer-head, .j-layer-body { padding: var(--j-s-3); }
}
/* A printed case file shows every layer open. */
@media print {
  .j-layer-body[hidden] { display: block !important; }
  .j-layer-chev { display: none; }
}
@media (forced-colors: active) {
  .j-engine-step, .j-layer { border-color: CanvasText; }
  .j-engine-step[aria-current="true"] { outline: 2px solid Highlight; }
  .j-engine-map > li::before { forced-color-adjust: none; background: CanvasText; }
}