/* The private AI practice layer.

   assets/research-instrument.css owns the system: the palette, the type, the
   grid, the twelve tracks, the state chips and the boundary component every
   practice shares. This sheet does one thing on top of it, and every rule is
   scoped to .research-instrument[data-ri-practice="systems"] so nothing here
   can reach the homepage chapter or the other two practices.

   The one thing is dominance. On this route the permission and system
   boundary is not an artefact beside the argument, it is the argument: the
   page exists so a reader can see what the arrangement can reach without
   having to trust a description of it. So the diagram is given the weight
   that claim deserves.

   Three rules govern how it is drawn:

     - nothing is carried by colour. Inside and outside differ by border
       style, by ground and by a written state role, and each row prints its
       own role in words. Reading it in monochrome loses nothing;
     - the base is one column, so at 390 the diagram is one ordered reading
       sequence: everything inside the boundary, then everything outside it,
       in the order the argument needs. It is not a desktop diagram stacked;
     - from 768 the two groups become deliberately adjacent fields, which is
       where the comparison becomes visible at a glance, and the rule between
       them is the boundary itself.

   No url(), no @import, no remote origin, no imagery. */

/* ---------------------------------------------------------------- */
/* The dominant boundary                                             */
/* ---------------------------------------------------------------- */

.research-instrument[data-ri-practice="systems"] [data-relevance] {
  max-width: 52ch;
  color: var(--ri-graphite);
}

.research-instrument[data-ri-practice="systems"] #help .ri-index > li {
  padding-block: var(--ri-space-2);
}

/* One column at the base. The system sheet already states this for
   .ri-boundary; it is restated here because on this route it is load-bearing
   rather than incidental, and a change to the shared component must not
   silently reorder the one device this page is built around. */
.research-instrument[data-ri-practice="systems"] .ri-boundary--dominant {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ri-space-3);
  margin-top: var(--ri-space-3);
}

/* The groups carry more weight here than they do in the homepage preview:
   this is the page a reader came to for exactly this. The inside group is a
   solid frame; the outside group is dashed over the deeper ground, which is
   the same distinction the state chips draw, made once more at the scale of
   the whole field. */
.research-instrument[data-ri-practice="systems"] .ri-boundary--dominant .ri-boundary__group {
  padding: var(--ri-space-4) var(--ri-space-3);
  border-width: 2px;
}

.research-instrument[data-ri-practice="systems"] .ri-boundary--dominant .ri-boundary__group--outside {
  border-style: dashed;
}

/* Each row is one legible unit at any width: the subject, what it means, and
   the written state role. The role sits under the note rather than beside it,
   so a long role name never competes with the sentence for the same line. */
.research-instrument[data-ri-practice="systems"] .ri-boundary--dominant .ri-boundary__list > li {
  min-width: 0;
  padding-left: var(--ri-space-2);
  border-left: var(--ri-hairline) solid var(--ri-rule);
}

.research-instrument[data-ri-practice="systems"] .ri-boundary--dominant .ri-boundary__name {
  font-size: var(--ri-type-body);
  line-height: var(--ri-type-body-line);
}

.research-instrument[data-ri-practice="systems"] .ri-boundary--dominant .ri-boundary__note {
  max-width: 60ch;
}

.research-instrument[data-ri-practice="systems"] .ri-boundary--dominant .ri-boundary__state {
  display: block;
  margin-top: var(--ri-space-1);
}

/* Keyboard focus inside the diagram. The group takes a tab stop from its
   role, and a focus ring that disappears against either ground would make
   the one device on this page unnavigable. Ink, not an accent. */
.research-instrument[data-ri-practice="systems"] .ri-boundary--dominant:focus-visible,
.research-instrument[data-ri-practice="systems"] .ri-boundary--dominant a:focus-visible {
  outline: 3px solid var(--ri-ink);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- */
/* The opening preview                                               */
/* ---------------------------------------------------------------- */

/* The compact form of the same device, in the opening. It exists so the
   first desktop viewport shows what this practice is about rather than a
   panel of prose, and so a handset meets the boundary immediately after the
   proposition and the action.

   It is the same component with the notes dropped: one row per subject, each
   carrying its written state role. Two columns from 48rem, because at that
   width inside and outside read as a pair; one column below it, in DOM
   order, which is inside then outside. */
.research-instrument[data-ri-practice="systems"] .ri-boundary--preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ri-space-2);
  padding: var(--ri-space-3);
  border: 2px solid var(--ri-rule);
  background: var(--ri-paper);
}

.research-instrument[data-ri-practice="systems"] .ri-boundary--preview .ri-boundary__group {
  padding: var(--ri-space-2);
  border-width: var(--ri-hairline);
}

.research-instrument[data-ri-practice="systems"] .ri-boundary--preview .ri-boundary__list > li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--ri-space-2);
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.research-instrument[data-ri-practice="systems"] .ri-boundary--preview .ri-boundary__list > li + li {
  margin-top: var(--ri-space-1);
  padding-top: var(--ri-space-1);
}

.research-instrument[data-ri-practice="systems"] .ri-boundary--preview .ri-boundary__name {
  flex: 1 1 8rem;
  font-weight: 400;
  font-size: var(--ri-type-meta);
  line-height: var(--ri-type-meta-line);
}

.research-instrument[data-ri-practice="systems"] .ri-boundary--preview .ri-boundary__state {
  flex: 0 1 auto;
  margin-top: 0;
  min-width: 0;
}

.research-instrument[data-ri-practice="systems"] .ri-boundary__preview-title,
.research-instrument[data-ri-practice="systems"] .ri-boundary__preview-more {
  margin: 0;
}

.research-instrument[data-ri-practice="systems"] .ri-boundary--preview:focus-visible,
.research-instrument[data-ri-practice="systems"] .ri-boundary--preview a:focus-visible {
  outline: 3px solid var(--ri-ink);
  outline-offset: 3px;
}

/* The longer reading follows the opening grid, so on a handset it comes
   after the preview rather than before it. */
.research-instrument[data-ri-practice="systems"] .ri-opening__reading {
  margin-top: var(--ri-space-4);
}

/* ---------------------------------------------------------------- */
/* Built, beside not built                                           */
/* ---------------------------------------------------------------- */

/* The unbuilt column is drawn as unbuilt: the same list, on the deeper
   ground, inside a dashed frame that matches the outside-the-boundary group.
   A reader who has read the diagram already knows what a dashed frame means
   here, which is the point of using the same device twice. */
.research-instrument[data-ri-practice="systems"] .ri-unbuilt {
  margin-top: var(--ri-space-4);
  padding: var(--ri-space-4) var(--ri-space-3);
  border: 2px dashed var(--ri-rule);
  background: var(--ri-paper-deep);
}

.research-instrument[data-ri-practice="systems"] .ri-unbuilt .ri-account > li {
  min-width: 0;
}

/* ---------------------------------------------------------------- */
/* The two wider bands                                               */
/* ---------------------------------------------------------------- */

/* 768: inside and outside become adjacent fields, which is where the
   comparison is read at a glance rather than in sequence. */
@media (min-width: 48rem) {
  .research-instrument[data-ri-practice="systems"] .ri-boundary--dominant {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ri-space-4);
  }

  /* The preview pairs the same way, and its title and its link cross both
     columns so the block reads as one object rather than four. */
  .research-instrument[data-ri-practice="systems"] .ri-boundary--preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-instrument[data-ri-practice="systems"] .ri-boundary__preview-title,
  .research-instrument[data-ri-practice="systems"] .ri-boundary__preview-more {
    grid-column: 1 / -1;
  }
}

/* 1440: the diagram holds the wide measure it earns as the page's centre,
   and the unbuilt column sits beside nothing, so it keeps a reading measure
   rather than running the full width of the frame. */
@media (min-width: 90rem) {
  .research-instrument[data-ri-practice="systems"] .ri-boundary--dominant .ri-boundary__group {
    padding: var(--ri-space-5) var(--ri-space-4);
  }

  .research-instrument[data-ri-practice="systems"] .ri-unbuilt {
    padding: var(--ri-space-5) var(--ri-space-4);
  }
}