/* FREE SAILING — org-conv.css. Conversations and notifications.

   WHAT THIS FILE IS ALLOWED TO CONTAIN. Only what the conversation subsystem
   genuinely adds. org-ui.css already owns the workspace vocabulary (.ws-head,
   .ws-tabs, .ws-rows, .ws-row, .ws-empty) and the conversation bubbles
   themselves (.cv, .cv-m, .cv-b, .cv-w, .cv-f) — those are reused verbatim and
   are deliberately NOT redefined here, because a second definition of a shared
   class is how two surfaces start drifting apart while both look correct.

   Everything below is new: the object-context bar that makes a thread legible
   out of context, the primitive tags that stop a public question and a private
   message reading as the same thing, the three honest not-empty states (a fault,
   a sign-in gate, an example), and the notification rows.

   COLOUR COMES FROM THE TOKENS, never from a new palette. Every value below is
   a site.css variable with the same fallback org-ui.css already uses, so this
   file cannot introduce a colour the rest of the board does not have. */

/* ───────────────────────────────────────────────────────────── small button.
   org-ui.css has .btn-danger and no small size, and a bare `.btn-sm` from this
   lane would collide with whatever a later one means by it. Namespaced. */
.cv-btn { padding: 6px 13px; font-size: 13px; }

/* ────────────────────────────────────────────── which primitive is this row.
   The single most important thing on a row after who sent it. A public
   question sitting unanswered is visible to every stranger reading the page; a
   private message is not. Drawing them identically is what let one card do
   both jobs and neither. */
.cv-tag {
  display: inline-block; vertical-align: 1px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 7px; margin-left: 6px;
  border: 1px solid transparent; white-space: nowrap;
}
.cv-tag-pub  { background: #E7EEFB; color: #1F4FA8; border-color: #CFDDF6; }
.cv-tag-priv { background: var(--line-2, #EAF0F7); color: var(--ink-60, #48555C);
               border-color: var(--line, #DCE5EF); }
/* An example is marked in chrome AND in words, never in only one of them. The
   dashed edge is the wordless second cue for somebody scanning quickly. */
.cv-tag-ex {
  background: #fff; color: var(--ink-40, #5C6B74);
  border: 1px dashed var(--ink-25, #66757D);
}

/* ──────────────────────────────────────────────────────── the object context.
   "Regarding: Novice race day · 11 of 16 entries". This is not a subtitle: it
   is the reason a thread is readable at all once it has left the object it
   belongs to, and it is why an aggregate Inbox can exist without becoming a
   second place conversations live. */
.cv-about {
  font-size: 12.5px; color: var(--ink-60, #48555C); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-about b { font-weight: 700; color: var(--ink, #0D1417); }

.cv-ctx {
  border: 1px solid var(--line, #DCE5EF); border-radius: var(--r-s, 8px);
  background: var(--line-2, #EAF0F7);
  padding: 12px 14px; margin: 0 0 18px;
}
.cv-ctx-t { font-size: 13.5px; color: var(--ink-60, #48555C); }
.cv-ctx-t b { color: var(--ink, #0D1417); }
.cv-ctx-s { color: var(--ink-40, #5C6B74); }
.cv-ctx-a { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ──────────────────────────────────────────────────────────────── one thread.
   Several threads can hang off one object — two people asking about the same
   race — so each is a bounded block rather than a run of bubbles that blur into
   one conversation with four voices in it. */
.cv-th { border-top: 1px solid var(--line, #DCE5EF); padding: 16px 0 4px; }
.cv-th:first-of-type { border-top: 0; padding-top: 4px; }
.cv-th-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cv-th-who { font-size: 14.5px; font-weight: 700; }
.cv-th-when { margin-left: auto; font-size: 12px; color: var(--ink-40, #5C6B74); }
.cv-th-s { font-size: 13.5px; color: var(--ink-60, #48555C); margin: 4px 0 12px; }
.cv-h {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-40, #5C6B74); margin: 22px 0 8px; font-weight: 700;
}
.cv-none { font-size: 13.5px; color: var(--ink-40, #5C6B74); margin: 0 0 14px; }

/* ─────────────────────────────────────────────────────── replying, honestly.
   .cv-f (the composer) is org-ui.css's. What is new is the two cases where
   there is NOTHING to type into, and they get real weight rather than a
   disabled box: a form that accepts words and stores nothing is the worst
   defect this site has shipped, and drawing one greyed out is the same lie
   with less contrast. */
.cv-lb { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.cv-note { font-size: 12.5px; color: var(--ink-40, #5C6B74); margin: 8px 0 0; max-width: 56ch; }
.cv-err { font-size: 13px; color: #8A1B2B; margin: 10px 0 0; font-weight: 600; }
.cv-noreply {
  border: 1px solid var(--line, #DCE5EF); border-radius: var(--r-s, 8px);
  padding: 14px 16px; margin: 4px 0 6px; background: #fff;
}
.cv-noreply b { display: block; font-size: 14px; margin-bottom: 4px; }
.cv-noreply p { font-size: 13px; color: var(--ink-60, #48555C); margin: 0 0 12px; max-width: 56ch; }
.cv-noreply p:last-child { margin-bottom: 0; }

/* ──────────────────────────────────── the three states that are NOT emptiness.
   A fault, a sign-in gate and a genuine empty state look nothing like each
   other on purpose. The old board gave all three the same face — "Nothing
   matches that yet." — which is how a surface can look finished while somebody
   waits behind a read that never answered. */
.cv-fault, .cv-gate {
  border-radius: var(--r-s, 8px); padding: 14px 16px; margin: 0 0 18px;
  border: 1px solid var(--line, #DCE5EF); background: #fff;
}
.cv-fault { border-left: 3px solid #8A1B2B; }
.cv-gate  { border-left: 3px solid var(--hl, #1F5FD0); }
.cv-fault b, .cv-gate b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.cv-fault p, .cv-gate p { font-size: 13px; color: var(--ink-60, #48555C); margin: 0 0 10px; max-width: 60ch; }
.cv-gate p:last-child, .cv-fault p:last-child { margin-bottom: 0; }
.cv-empty { padding: 20px 0 6px; }
.cv-empty b { display: block; font-size: 15px; margin-bottom: 5px; }
.cv-empty p { font-size: 13.5px; color: var(--ink-60, #48555C); margin: 0; max-width: 56ch; }

/* ─────────────────────────────────────────────────────────── notifications.
   Grouped by WHAT CHANGED, because that is the question a person opened the
   bell to answer. Each row is a whole button: the target is the change, and the
   destination is the object it happened to. */
.nt-g { margin: 0 0 26px; }
.nt-g-h {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-40, #5C6B74); font-weight: 700;
  margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #DCE5EF);
}
.nt {
  display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line-2, #EAF0F7);
  padding: 13px 8px 13px 18px; cursor: pointer; position: relative;
  font: inherit; color: inherit;
}
.nt:hover, .nt:focus-visible { background: var(--line-2, #F5F8FC); outline: none; }
/* Unread is a mark on the row, not a colour swap: a read and an unread
   notification must stay equally legible, because reading one does not make it
   less true. */
.nt.is-unread::before {
  content: ""; position: absolute; left: 4px; top: 19px;
  width: 7px; height: 7px; border-radius: 999px; background: var(--hl, #1F5FD0);
}
.nt.is-unread .nt-t { font-weight: 700; }
.nt-main { flex: 1 1 auto; min-width: 0; }
.nt-t { font-size: 14.5px; font-weight: 600; }
.nt-b {
  font-size: 13px; color: var(--ink-60, #48555C); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nt-r { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-40, #5C6B74); padding-top: 2px; }

/* ────────────────────────────────────────────────────────────────── narrow.
   A drawer is 92vw on a phone (org-ui.css), so the context bar and the
   notification rows have to hold at that width without the time column pushing
   the title into two characters. */
@media (max-width: 640px) {
  .cv-th-when { margin-left: 0; }
  .nt { padding-right: 0; gap: 10px; }
  .nt-r { font-size: 12px; }
  .cv-about { white-space: normal; }
}