/* Jarbou3i case file (ADR-0002): the review as one document in reading order,
   with an outline that jumps to its sections. Classes are .j-case-*, layout
   only; the sections keep their own views. */

/* The outline beside the document; one column at 1120px and below. */
.j-case { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: var(--j-card-gap); align-items: start; }
/* The outline stays in reach while the document scrolls. */
.j-case-outline {
  position: sticky; top: var(--j-s-4); max-height: calc(100vh - var(--j-s-6)); overflow-y: auto;
  display: grid; gap: 2px; align-content: start; padding: var(--j-s-1);
}
/* An entry is a station: a ring on one line, then the section's name over
   what it holds, its count beside them. The line is ridden in ink up to where
   the reader is. */
.j-case-link {
  position: relative;
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "stop name count" "stop hint count";
  align-items: center; align-content: center; gap: 2px var(--j-s-3); width: 100%; min-height: 44px; padding: var(--j-s-2) var(--j-s-3);
  border: 0; border-radius: var(--j-r-2); background: transparent; color: var(--j-fg); font-weight: 600; text-align: start;
}
.j-case-link::before {
  content: ""; grid-area: stop; position: relative; z-index: 1; box-sizing: border-box; inline-size: 16px; block-size: 16px; border-radius: 50%;
  border: var(--j-station) solid var(--j-line-strong); background: var(--j-panel);
}
.j-case-link:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: calc(var(--j-s-3) + 5px); inset-block-start: 50%;
  inline-size: var(--j-track); block-size: calc(100% + 2px); background: color-mix(in srgb, var(--j-line-strong) 45%, var(--j-panel));
}
.j-case-link:has(~ [aria-current="location"])::after { background: var(--j-ink); }
.j-case-link:has(~ [aria-current="location"])::before { border-color: var(--j-ink); background: var(--j-ink); }
.j-case-link:hover { background: var(--j-panel-2); }
.j-case-link:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }
/* A name breaks between words, never inside one. */
.j-case-link > strong { grid-area: name; font-size: var(--j-t-14); font-weight: inherit; line-height: 1.3; overflow-wrap: break-word; }
.j-case-link > small { grid-area: hint; color: var(--j-fg-muted); font-size: var(--j-t-12); font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; }
.j-case-count {
  grid-area: count; min-width: 28px; padding: 2px var(--j-s-2); border: 1px solid var(--j-line); border-radius: 999px;
  background: var(--j-panel-2); color: var(--j-fg); font: 600 var(--j-t-12)/1.4 var(--j-font-data);
  font-variant-numeric: tabular-nums; text-align: center;
}
/* Where the reader is: tinted and its station ringed, not colour alone. Its
   weight stays: a bolder name can wrap, and an outline above the document
   that changes height moves the page under the reader. */
.j-case-outline [aria-current="location"] { background: var(--j-signal-wash); color: var(--j-fg); }
.j-case-outline [aria-current="location"]::before { border-color: var(--j-ink); box-shadow: 0 0 0 3px var(--j-panel), 0 0 0 6px var(--j-ink); }
/* Rows start at the top: a lone note while a section loads keeps its height. */
/* The document is the review panel's own body: no second box. */
.j-case-doc { display: grid; gap: var(--j-s-6); align-content: start; min-width: 0; min-height: 440px; }
/* Headings in the document, unless a view styles its own. */
:where(.j-case-doc) h3 { margin: 0 0 var(--j-s-3); color: var(--j-fg); font: 700 var(--j-t-22)/1.25 var(--j-font-display); letter-spacing: -.01em; }
.j-case-sec { min-width: 0; scroll-margin-top: var(--j-s-4); }
.j-case-sec + .j-case-sec { padding-top: var(--j-s-6); border-top: 1px solid var(--j-line); }
.j-case-sec:focus { outline: none; }
.j-case-sec:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 6px; border-radius: var(--j-r-2); }
/* Below 1120px the outline scrolls away with the page; this brings it back. */
.j-case-return {
  position: fixed; z-index: var(--j-z-top); inset-inline-end: var(--j-s-4);
  bottom: calc(var(--j-s-4) + env(safe-area-inset-bottom, 0px)); box-shadow: var(--j-shadow);
}
.j-case-return[hidden] { display: none; }
@media (min-width: 1121px) { .j-case-return { display: none; } }

@media (forced-colors: active) {
  .j-case-count { border-color: CanvasText; }
  .j-case-outline [aria-current="location"] { outline: 2px solid Highlight; }
}
/* One column: the outline sits above the document, in three columns, then two. */
@media (max-width: 1120px) {
  .j-case { grid-template-columns: minmax(0, 1fr); }
  .j-case-outline { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 940px) {
  .j-case-outline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--j-s-2); }
  /* Tiles in a grid: no line to ride, so no stations; where the reader is
     takes an ink edge. */
  .j-case-link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count" "hint count"; border: 2px solid var(--j-line); }
  .j-case-link::before, .j-case-link::after { display: none; }
  .j-case-outline [aria-current="location"] { border-color: var(--j-ink); }
}
@media (max-width: 760px) {
  .j-case-outline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--j-s-2); padding: var(--j-s-2); }
  /* Two to a row: the names only, the count under a name it does not fit beside. */
  .j-case-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--j-s-2); padding: var(--j-s-2); }
  .j-case-link > small { display: none; }
}
@media print {
  .j-case { display: block; }
  .j-case-outline, .j-case-return { display: none !important; }
}