/* css/citation-figure.css -- GENERATED. Do not edit this file.
   Written by citation-figure/emit.py --place in the support repository
   from its citation-figure.css; edit that and re-emit. */

/* ===== CITATION FIGURE =====
   Styles for one weblog entry's figure, loaded by the figure's own include
   and by no other page: two variants inline, the full drawing in a <dialog>
   with a hover layer. Nothing here positions a mark; these rules choose the
   variant and dress the dialog, after the performance plate's.

   The variant is chosen by a container query -- the width of the column the
   figure sits in -- rather than a media query on the window, because the
   entry column narrows again when the sidebar returns at wide windows.

   No z-index anywhere: showModal() puts the dialog in the top layer.
   ------------------------------------------------------------------------ */

.citation-figure { margin: 1.5rem 0; }

.cf-variants { container-type: inline-size; }

/* Each variant sits in its own wrapper. The phone variant's carries the
   hidden attribute, so a reader with none of these styles -- a feed
   reader, chiefly -- shows the mid drawing alone; a display rule here
   overrides hidden wherever the container calls for the phone variant. */
.cf-variant { display: none; }
.cf-variant svg { display: block; width: 100%; height: auto; }

@container (max-width: 479px) {
  .cf-variants .cf-variant-narrow { display: block; }
}
/* On a wide column the mid drawing is capped rather than stretched: at
   760px its type renders at about 14px, and the full drawing is one click
   away in the dialog. */
@container (min-width: 480px) {
  .cf-variants .cf-variant-mid { display: block; max-width: 760px; margin-inline: auto; }
}

.citation-figure figcaption {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: #8b9489;                       /* green-grey, the figure's furniture */
}

.citation-figure-dialog {
  /* The site's universal reset zeroes every margin, which takes away the
     margin: auto that centres a modal dialog; restored here. */
  margin: auto;
  width: min(96vw, 1000px);
  max-width: none;
  padding: 0;
  border: 1px solid #3a423a;            /* green-grey rule */
  border-radius: 4px;
  background: #1a1f1b;                  /* dark green-tinted charcoal */
  color: #ede8e2;                       /* the site's own text colour */
}

.citation-figure-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }

.cf-dialog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem 0;
}

.cf-dialog-head h2 { margin: 0; font-size: 1.125rem; }

.cf-dialog-close {
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: #8b9489;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.cf-dialog-close:hover,
.cf-dialog-close:focus-visible { color: #ede8e2; }

.cf-readout {
  margin: 0.25rem 1rem 0.5rem;
  min-height: 1.4em;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: #8b9489;
}

/* The full drawing never shrinks below 870px, where its tick labels render
   at about 10px; a narrower window pans it inside this pane instead. */
.cf-dialog-pane {
  overflow: auto;
  max-height: calc(100vh - 8rem);
  padding: 0 1rem 1rem;
}

.cf-dialog-pane svg { display: block; width: 100%; min-width: 870px; height: auto; }

/* Isolation. CSS outranks the SVG's presentation attributes, so these
   override the drawing's own opacities without touching the markup.
   Weight carries the emphasis with the hue unchanged; acid green marks the
   node under the pointer or focus, the site's colour for interaction. */
.cf-isolating .edges path { stroke-opacity: 0.06; }
.cf-isolating .edges path.on { stroke-opacity: 1; stroke-width: 2; }
.cf-isolating .nodes path { opacity: 0.25; }
.cf-isolating .nodes path.on { opacity: 1; }
.cf-isolating .nodes path.cf-focus { stroke: #00ff00; stroke-width: 2; }   /* acid green */
.cf-dialog-pane .nodes path:focus { outline: none; }