/* Unread tracking: the dot beside a board or a thread, the bold title and "First unread"
   link of an unread thread, the welcome strip on the board index, the New posts page and
   the "mark read" buttons. All of it is for signed-in members; a visitor's page has none
   of these elements and looks exactly as it did.

   The look follows docs/mockups/Main.dc.html and Board.dc.html: a filled dot for new
   posts, a hollow ring for none. Never color alone: filled against hollow, with the
   words for a screen reader on the element.

   Mobile first: the rules outside a media query lay the page out for a phone; the
   min-width block at the end is the desktop. Everything tapped is at least 44 px tall.
   Every color and radius is a custom property from site.css. */

.unread-dot {
  flex: none; display: block; width: 12px; height: 12px;
  border: 2px solid var(--read-ring); border-radius: var(--radius-round);
}
/* Filled, with a soft glow of its own color. */
.unread-dot.is-unread { border-color: var(--unread); background: var(--unread); box-shadow: var(--unread-glow); }

/* On the board index the dot sits on the corner of the board's icon tile (site.css),
   ringed with the surface so it reads on the tile. A board with nothing new shows no
   mark there at all: present against absent, and a screen reader still hears "No new
   posts" from the element, which is kept but not drawn. */
.board-tile > .unread-dot { position: absolute; top: -4px; right: -4px; }
.board-tile > .unread-dot.is-unread { box-shadow: 0 0 0 2px var(--surface), var(--unread-glow); }
.board-tile > .unread-dot:not(.is-unread) { width: 1px; height: 1px; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); }

/* A thread row that has a dot keeps a column for it on the left, so the lines of the row
   that stack on a phone all start under the title, not under the dot. */
.thread-row:has(> .unread-dot) { position: relative; padding-left: 40px; }
.thread-row > .unread-dot { position: absolute; left: 16px; top: 20px; }

/* An unread thread: the bold title (with the dot, never by itself). */
.thread-row:has(> .unread-dot.is-unread) .thread-title { font-weight: 700; }

/* "First unread", after "Started by". On a phone the whole title block is the title
   link's tap area, so this sits above it and is tall enough to tap. */
.first-unread {
  position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); font-weight: 600; text-decoration: none;
}
.first-unread:hover { text-decoration: underline; }

/* The board a thread is on, in the New posts list. Words on a phone, a link from tablet up. */
.thread-board { color: inherit; text-decoration: none; pointer-events: none; }

/* The welcome strip under the banner of the board index: a card that floats, with a
   breath of the community's color in it. */
.welcome-band { padding-top: 14px; }
.welcome-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding: 10px 16px;
  border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--welcome-fill); box-shadow: var(--elev-1);
}
.welcome-row p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.welcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.welcome-actions form, .mark-read { margin: 0; }
.welcome-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }
.welcome-band a:focus-visible, .welcome-band .forum-button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-chip);
}

/* Tablet and up: the dot is a column of its own, in the middle of the row's height. */
@media (min-width: 768px) {
  .welcome-band { padding-top: 20px; }
  .welcome-row { padding: 12px 22px; }
  .thread-row:has(> .unread-dot) { padding-left: 54px; }
  .thread-row > .unread-dot { left: 22px; top: 50%; transform: translateY(-50%); }
  /* The dot's column comes out of the title's share, so the row wraps at the same width as without it. */
  .thread-row > .unread-dot + .thread-main { flex-basis: 308px; }
  .thread-board { color: var(--accent); pointer-events: auto; }
  .thread-board:hover { text-decoration: underline; }
}

/* A mouse can hit a line of text. Touch screens keep 44 px. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .first-unread { display: inline; min-height: 0; }
}