/* The row.
 *
 * Every list in the app is made of these -- articles and topics both -- so the
 * two read as one product. The shape is fixed: an eyebrow of metadata, a
 * title, a summary, and optionally controls beside the link. What varies is
 * only which of those a given list has, never how they look.
 *
 * Rows are separated by hairlines rather than boxed as cards. A card was a box
 * inside a box inside .container, and dropping two of the three is most of the
 * reason these pages read as calm. */

.row-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--rule-soft);
}

.row:first-child {
  border-top: 1px solid var(--rule-soft);
}

/* The link fills the row, so the hit area is the size of the content rather
   than of a few words at the bottom of it. There is no "Read more" doing a
   second job, and no buttons inside -- a link cannot contain them. */
.row-link {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 18px 4px;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--ease);
}

/* Hover has to read on two different grounds: rows sit on --raised inside a
   .container and on --ground without one, so the tint is --sunk, which differs
   from both. It was --raised, which is exactly the container's own colour --
   the hover was painting the surface it already sat on and showed nothing.

   The tint alone is quiet, so the title takes the accent too. Between them the
   row says "link" before you have to guess. */
.row-link:hover,
.row-link:focus-visible {
  background-color: var(--sunk);
}

.row-link:hover .row-title,
.row-link:focus-visible .row-title {
  color: var(--leaf);
}

/* Metadata, above the title. Set in the data face because that is what it is:
   counts, dates, states. */
.row-eyebrow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  margin-bottom: 6px;
}

/* No ellipsis here. A topic name is the first thing the eyebrow says, and on a
   phone it was being cut off mid-word to keep a line that was going to wrap
   anyway. It wraps instead; only the collapsed row, which is a single line by
   definition, still truncates. */
.row-eyebrow-item {
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

/* One eyebrow item carries a warning rather than a fact: a private topic is
   not visible to anyone else, and that is worth saying in colour. */
.row-eyebrow-item--warn {
  color: var(--warn);
}

/* The topic above an article's title is a link, and was the only one on that
   page with nothing to say so. */
a.row-eyebrow-item {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color var(--ease);
}

a.row-eyebrow-item:hover {
  color: var(--leaf);
}

/* A dot between consecutive items. Drawn in CSS rather than written into the
   markup, so it stays out of the text a screen reader reads and out of a
   copy-paste.

   It hangs off the item *before* the gap. As a ::before it belonged to the item
   after it and travelled with it whenever the eyebrow wrapped, which is how a
   phone ended up showing a dot sitting alone at the head of the date's line.
   :last-child rather than the old adjacent-sibling pair, because the read check
   is always ahead of the items and never after them.

   Scoped to .row-eyebrow, which is the thing the dot belongs to: it is what
   holds a line of metadata together, so an eyebrow that stacks its items --
   the article header does -- gets none without having to cancel one. */
.row-eyebrow .row-eyebrow-item:not(:last-child)::after {
  content: "·";
  margin-left: 10px;
  color: var(--rule-strong);
}

.row-check {
  display: inline-flex;
  align-self: center;
  flex: 0 0 auto;
  color: var(--leaf);
}

.row-title {
  margin: 0 0 6px;
  font-size: var(--fs-lg);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.row-summary {
  margin: 0;
  font-family: var(--font-read);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink-soft);
  /* Two lines is enough to choose from a list. The rest is one click away. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Controls that belong to the row but cannot live inside its link: follow and
   feed on a topic, edit and delete on the manage page. */
.row-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
}

.row-actions--stacked {
  flex-direction: column;
  align-items: stretch;
}

/* Read, on a list that keeps chronological order: the row holds its place, its
   shape and its colour, and the check in the eyebrow is the whole signal.
   Muting the title as well said the same thing twice, and it made an article
   list and a topic list -- which has no read state -- look like two different
   designs sitting next to each other in the nav.

   Read, on the day, which folds them to one line and sinks them below the
   unread. Reading tidies the list; it never greys it out. */
.row--collapsed .row-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 4px;
}

/* On one line the eyebrow is no longer above anything, so it stops reserving
   space below itself and sits inline with the title. */
.row--collapsed .row-eyebrow {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.row--collapsed .row-eyebrow-item {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row--collapsed .row-title {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .row--collapsed .row-eyebrow-item {
    display: none;
  }
}