/* The reading column: app/templates/article.html and the head of
   app/templates/live_story.html.

   Loaded after style.css, ops.css and reports.css so the page's own
   rules win without touching the shared sheets.

   A material is a post opened on its own. So the page speaks the feed's
   vocabulary: the same name row, the same quiet line of facts under the
   headline, the same hairline between one thing and the next. What the
   page adds is the measure of the text — one column, one measure, and
   everything else either quiet or evidence. */

/* The name row of a material, and of a live story's head: the row the
   feed already shows, with the disclosure mark pushed to its end. */
.article-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.article-head-tail {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The disclosure mark on a name row is a word, not a chip: the row it
   sits in is a row of facts, and a bordered box in a row of facts is
   the one thing in that row that reads as a control. */
.article-head .ai-tag {
  padding: 0;
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-medium);
  background: none;
  border: 0;
  color: var(--muted);
}

/* The headline of a material is a headline, not a poster: the measure
   is short, so the type has to be quieter than the display size the
   page carried before. */
.article h1 {
  font-size: clamp(var(--text-2xl), 2.1vw, var(--text-3xl));
  line-height: 1.18;
  margin: 16px 0 10px;
}

.article-dek {
  font-size: var(--text-base);
  line-height: 1.6;
  margin: 0 0 14px;
  color: var(--muted-strong);
}

/* The text itself: one measure, and paragraphs separated by space. */
.article-body {
  font-size: var(--text-base);
  line-height: 1.72;
  max-width: 68ch;
}

.article-body p { margin: 0 0 18px; }

/* The facts under the headline stay a line of quiet words. The rule
   that closes the head is the only line on the page that is not text. */
.article-meta {
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
}

/* The sources of a material are a list of links, not a panel: the
   reader checks the address, then reads on. The live story's sources
   are the same list, in the same place. */
.article-col .sources-lead,
.liveblog-main .sources-lead {
  margin: 26px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.article-col .sources-lead summary,
.liveblog-main .sources-lead summary {
  gap: 10px;
}

.article-col .sources-lead ul,
.liveblog-main .sources-lead ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.article-col .sources-lead li,
.liveblog-main .sources-lead li {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  word-break: normal;
}

.article-col .sources-lead li:last-child,
.liveblog-main .sources-lead li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* A source is a domain and the page it points to: the domain is the
   link, the address is a quiet line under it. One shape at every width,
   so a list of sources does not change its mind when the column
   narrows. */
.article-col .sources-lead li,
.liveblog-main .sources-lead li,
.article .update-sources li,
.liveblog-main .update-sources li {
  display: block;
}

.article-col .sources-lead li .source-url,
.liveblog-main .sources-lead li .source-url,
.article .update-sources li .source-url,
.liveblog-main .update-sources li .source-url {
  display: block;
  margin-top: 2px;
}

   filled buttons, no panel. */
.article-actions {
  margin-top: var(--s-4);
}

.article-actions .copy-button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}

.article-actions .copy-button:hover {
  color: var(--text);
}

/* The share row is a line of words with dots between them, the way a
   timeline spells out the ways to pass a post on.

   The row is a line of text, not a row of boxes, and the dot is written
   without spaces around it: the browser can break the line between two
   words, but never between a word and a dot, so a narrow column never
   leaves a dot standing at the start of a line. */
.share-row {
  display: block;
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.share-label {
  margin-right: 10px;
}

.share-button {
  display: inline;
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

.share-button:hover {
  color: var(--accent);
  text-decoration: none;
}

.share-sep {
  margin: 0 8px;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
}

/* "Читати далі" is the feed's own posts: a column divided by
   hairlines, not a grid of boxes with a different shape from the rest
   of the site. */
.related {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* The section's own label — not the headline of a post inside it, which
   is the feed's headline and must look like one. */
.related > h2 {
  margin: 0 0 12px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}

.related-feed {
  border-top: 0;
}

.related-feed .post:last-child {
  border-bottom: 0;
}

/* The drawer of rejected updates is a drawer of the same page: a word
   to open it, a flat list inside. */
.liveblog-main .audit {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0 0;
}

/* The notice at the very bottom of a live story is the notice at the
   bottom of a material: the same quiet line under the same hairline. */
.liveblog-disclaimer {
  margin-top: var(--s-5);
  padding: var(--s-4) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}

   posts, divided by hairlines, with a quiet line of facts. */
.updates {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.updates h2 {
  margin: 0 0 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}

.updates .stream-timeline {
  margin-top: 0;
}

/* The corrections and the tags are the tail of the material: quiet
   words under a hairline. */
.corrections {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.corrections h2 {
  margin: 0 0 12px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}

/* The section already draws its own rule; the list inside it must not
   draw a second one. */
.corrections .log {
  border-top: 0;
}

.tags-line {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.tags-line a {
  color: var(--muted-strong);
  font-weight: var(--font-weight-medium);
}

.tags-line a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* The same dot as the share row, for the same reason: a dot that is
   glued to the word before it cannot be left alone at the start of a
   line. */
.tag-sep {
  margin: 0 6px;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
}

/* The verifier's notes are evidence, and evidence on this page is a
   column of text under a hairline — not a card. They were the last
   boxes left on a page whose every other part is flat, so a page that
   had been made to look like a timeline still ended in a stack of
   grey rectangles. */
.article .verifier .issue {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0 0;
  margin-bottom: 18px;
}

.article .verifier .issue:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* The run's audit is a closed drawer at the end of the text: a word to
   open it, and what is inside held to the same flat hand. */
.article .audit {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0 0;
}

   the disclosure are one column of quiet rows, not a table of cells. */
.article-side .disclosure-facts {
  grid-template-columns: 1fr;
  gap: 0;
}

.article-side .disclosure-facts li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}

.article-side .disclosure-facts b {
  font-size: var(--text-sm);
}

.article-side .evidence-box {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* The name of the card: a name in bold, the way every other card in
   the right column is named. */
.article-side .evidence-part {
  padding: 0;
}

.article-side .evidence-part b {
  display: block;
  margin: 0;
  padding: 12px var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  text-transform: none;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.article-side .evidence-part ul {
  margin: 0;
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 16px);
}

.article-side .evidence-part li {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted-strong);
}

/* The card that says what could not be confirmed is a card like the
   others: the name above it already says which of the two it is. */
.article-side .evidence-part--unknown {
  border-style: solid;
  border-color: var(--line);
}

/* The disclosure on a live story's page is the same disclosure the
   material carries, in the same flat hand: a word, a line of facts, and
   the links to the evidence. */
.liveblog-main .ai-disclosure {
  margin: 26px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.liveblog-main .disclosure-facts {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
}

.liveblog-main .disclosure-facts li {
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
}

/* The side column of a live story is a column of cards, the same as
   the material's side column and the same as the rail of every other
   page. */
.liveblog-side .liveblog-panel {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.liveblog-side .liveblog-panel--unknown {
  border-top-style: solid;
}

/* The headline of a live story is the headline of a material: the same
   size, the same weight, so the two pages read as one. */
.liveblog-head h1 {
  font-size: clamp(var(--text-2xl), 2.1vw, var(--text-3xl));
  line-height: 1.18;
  margin: 16px 0 10px;
}

/* The line at the very bottom of the material: the newsroom's own
   notice, in the quietest hand on the page. */
.article .disclaimer {
  margin-top: var(--s-5);
  padding: var(--s-4) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}

@media (max-width: 620px) {
  .article-head-tail {
    margin-left: 0;
    flex: 1 1 100%;
  }

  /* On a phone the headline of a material is the headline of a post:
     the same words at the same size the reader met in the feed. A
     bigger type here would make an opened post look like a poster. */
  .article h1,
  .liveblog-head h1 {
    font-size: var(--text-xl);
  }
}