/* =========================================================
   GlobeWarn — sources-prose.css

   Scope: the Sources card only. Every rule sits under #sources or the
   .gw-sources-prose class the script adds to it, so nothing else on the
   page can be reached from here.

   One card, one paragraph. The list stays in the document for screen
   readers; it is only taken off the screen.
   ========================================================= */

/* The head row keeps its own layout — title on the left, count on the
   right, exactly as the rest of the page does it. The paragraph sits under
   that row, at full width, because the script now places it there rather
   than inside it. Nothing about the card's grid is overridden. */

.gw-sources-prose .gw-sources-line {
  display: block;
  grid-column: 1 / -1;

  /* Kept inside the card, whatever the section's own layout is doing. A
     grid or flex item defaults to a minimum width of its content, which is
     what let a long sentence push past the right edge; min-width: 0 is what
     stops that, and max-width finishes the job. */
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* The list is kept for screen readers, so it is not removed — it is taken
   out of the flow, where it can leave no gap between the sentence and the
   bottom edge of the card. */
.gw-sources-prose .gw-sources-list {
  position: absolute;
  margin: 0;
  padding: 0;
  height: 0;
}

/* Nothing inside this card separates anything any more: no rules between
   rows, no borders on the wrapper, no gaps left by blocks that are gone.
   The card is one card, holding one paragraph. */
.gw-sources-prose .gw-gone { display: none; }

.gw-sources-prose > hr,
.gw-sources-prose > .divider { display: none; }

.gw-sources-prose .gw-sources-list {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.gw-sources-prose .gw-sources-line {
  /* Flush to the section: no gap above beyond what the head row already
     leaves, and nothing below, so the card ends where the sentence ends. */
  /* Set exactly like the paragraph under "Paid pricing options": the
     heading has its line, then one quiet paragraph beneath it, in the dim
     text colour, at a comfortable measure rather than the card's full
     width.

     The inset matters: .section carries no padding of its own — it lives on
     .section__head (12px 14px 4px) and on the table below it. A paragraph
     added as a direct child of .section therefore starts with none, which
     is what put the sentence against both edges. The 14px here is the same
     14px the head row uses, so the title and the text line up.

     No fixed measure: 68ch was comfortable on a narrow column and left a
     band of empty card to the right on a wide one. The card's own width is
     the measure. */
  margin: 0;
  padding: 4px 14px 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft, #55606d);
  text-wrap: pretty;          /* no lonely last word, where supported */
}

/* Nothing inside the sentence may be a block, whatever the card's own rules
   say, or a line break comes back with it. */
.gw-sources-prose .gw-sources-line * {
  display: inline;
  max-width: 100%;
  white-space: normal;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.gw-sources-prose .gw-sources-line a { display: inline; }

/* The source name carries the weight so the eye can find each one in the
   run of text without a bullet to help it, and it takes the body colour so
   it stands out from the dim prose around it. */
.gw-sources-prose .gw-source-name {
  font-weight: 600;
  color: var(--ink, inherit);
  white-space: normal;
}

/* Links inside the sentence: underlined on hover only, so five of them in a
   row do not turn the paragraph into a fence. */
.gw-sources-prose .gw-sources-line a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line, #c9d2dc);
}

.gw-sources-prose .gw-sources-line a:hover {
  border-bottom-color: var(--accent, #D9480F);
}

.gw-sources-prose .gw-sources-line a:focus-visible {
  outline: 2px solid var(--accent, #D9480F);
  outline-offset: 2px;
  border-radius: 3px;
}

/* The card's own frame stays; everything that drew a line inside it goes.
   Padding is left alone here — it is what keeps the text off the edge. */
.gw-sources-prose > * {
  border-top: 0;
  border-bottom: 0;
}

.gw-sources-prose > .gw-sources-line { border: 0; }

/* If the paragraph still ends up outside the card's inset — a card with its
   padding on an inner wrapper rather than on itself — this puts it back in
   line with the heading above it. */
.gw-sources-prose > .gw-sources-line:first-child {
  padding-inline: inherit;
}