/* Operator pages: the pipeline side of the desk (queue, decisions, arbiter,
   editor, cycles, rejected, corrections). Loaded after style.css so the
   page-specific rules win without touching the shared sheet.

   The pipeline pages are logs, and a log reads like a timeline: a name row,
   a headline, a quiet row of facts under it, a hairline between rows. No
   boxes, no pill shelves, no table furniture. */

/* The list itself: one column of rows, divided by hairlines. */
.log { border-top: 1px solid var(--line); }

.log-row {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--duration-fast) var(--ease);
}

/* A row answers the pointer, the way a row on a timeline does: the
   column's background tints under the cursor. Only the colour moves —
   a row that grew under the pointer would push the column down. */
.log-row:hover {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

/* A row a filter hid is not on the page. */
.event-row[hidden] { display: none; }

.log-title {
  margin: 0 0 4px;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.28;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.log-title a { color: inherit; }
.log-title a:hover { color: var(--accent); text-decoration: none; }

.log-title--small { font-size: var(--text-md); }

.log-body {
  margin: 6px 0 8px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.log-body p { margin: 0 0 6px; }
.log-body p:last-child { margin-bottom: 0; }

/* The facts under a row: quiet words, separated by a dot. */
.log-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 14px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}
/* The facts in the bar are separate items, not a sentence.

   A middot between them looked like a separator and was not one: it
   floated in the middle of the gap, and a bar that wraps left it
   stranded at the end of a line — a mark with nothing after it, which
   is what the rule above this site set out to avoid. The bar now
   separates its items with room, the way a timeline separates its
   counts.

   The middot is not gone from the site: it belongs to a byline, where
   it joins the handle to the time, and to a compound fact inside one
   item ("Брифінг · Війня"), where it joins two words that are one
   thing. Those never sit at the end of a line, because the item that
   carries them is one box. */
.log-actions .post-action { color: inherit; }
.log-actions .post-action--num { color: var(--muted-strong); }
.log-actions .post-action--warn { color: var(--warn); }

/* A level wears its colour — the same three words, the same three
   colours the article page gives them. A low risk is not a warning and
   a high one is; the risk used to be amber on every row, so a material
   with nothing to be alarmed about looked alarmed. */
.log-actions .post-action--level-low { color: var(--ok); }
.log-actions .post-action--level-medium { color: var(--warn); }
.log-actions .post-action--level-high { color: var(--danger); }

/* A name row in a log: the agent that did the thing, said plainly. */
.log-row .name-row { margin-bottom: 4px; }

/* The figures in the side column: the same numbers the masthead prints,
   set flat. A label on the left, the number on the right — the report
   pages' own key–value row, so a figure reads the same everywhere.

   The row itself is a line of small words. A ledger prints its numbers
   big and right-aligned over a hairline, one to a row: the shape of an
   operator's console. The side column of a timeline is a list of small
   words, and the number is one of the words.

   The card around them was missing. The figures floated in the margin
   of the page with nothing to hold them, and a column of numbers with
   no edge is the one thing the eye cannot find again. x.com's rail is
   a column of cards — a bounded, rounded block, a hairline between the
   rows, the number right-aligned so the figures line up in a column
   and can be taken in at a glance. The feed itself stays cardless: a
   box in the middle of the run of posts breaks the run, and the run is
   the feed. Context is allowed to be a box. */
.side-figures {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.side-figure {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  border-bottom: 0;
}
.side-figure:last-child { border-bottom: 0; }
.side-figure b {
  order: 2;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.side-figure span {
  order: 1;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* The rows of the card: a hairline between them, and a number big
   enough to be the thing the reader came for. */
.side-figures .side-figure {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--s-4);
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line);
}
.side-figures .side-figure:last-child { border-bottom: 0; }
.side-figures .side-figure b {
  min-width: 0;
  flex-shrink: 0;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}
.side-figures .side-figure span { min-width: 0; }

/* The note under the figures: a card of its own, with a name. x.com
   keeps its "About this account" in a box with a bold title; the note
   here says the same kind of thing — why this page reads this way. */
.side-note {
  margin: 0;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted-strong);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.side-note-title {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.side-note a { color: var(--text); }
.side-note a:hover { text-decoration: underline; }
.side-note code {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--muted-strong);
}

/* A section title inside the main column: a hairline and a word. */
.log-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.log-head h2 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}
.log-head a { color: var(--muted); font-size: var(--text-2xs); }
.log-head a:hover { color: var(--accent); }

/* Two ways out of a section, side by side: the links of one head. */
.log-head-links {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
}

/* A heading inside the side column: a word and a rule, the way the main
   column heads its sections. */
.side-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.side-head-title {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* The options an agent offered: a quiet list under the question. */
.log-options {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
}
.log-options summary { cursor: pointer; color: var(--muted-strong); }
.log-options ul { margin: 6px 0 0; padding-left: 18px; }

/* The hero of a pipeline page: a title and a sentence, nothing shouted. */
.hero .eyebrow { display: none; }

/* A log row that is a source list: the citation, the way a timeline prints
   the links under a post. */
.log-sources {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s-3);
  font-size: var(--text-2xs);
}
.log-sources a { color: var(--muted); }
.log-sources a:hover { color: var(--accent); }

/* The pipeline of a cycle, set flat: a line of words under the hero.
   The default pipeline is a bordered card, which is right where it
   sits in a panel, and wrong in a column that is supposed to read as
   prose. */
.pipeline--flat {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  margin: 0 0 var(--s-4);
}

/* The materials a cycle produced: the headlines, one per line, with the
   facts about them beside. A timeline prints the links under a post the
   same way — the list is part of the post, not a widget hanging off it. */
.log-items {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.log-items li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-3);
}
.log-items a { color: var(--text); }
.log-items a:hover { color: var(--accent); text-decoration: none; }

/* The quiet facts beside a headline: verdict, confidence, format. */
.log-item-meta {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}
.log-item-meta--warn { color: var(--warn); }
/* A failure is red; a wall is amber. The two were the same colour
   before, and the same word too — so a limit the newsroom drew on
   itself looked like a malfunction of the platform. */
.log-item-meta--danger { color: var(--danger); }

/* The argument behind a hire: a list of reasons, in the row's own
   voice, under the decision it justifies. */
.log-evidence {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.log-evidence li { padding-left: 12px; text-indent: -12px; }