/* FCS.Folksonomy.Blazor — layout only. The boxes, borders, corners, spacing and colours are
   Radzen's (RadzenCard, RadzenStack, the grid, the theme variables); these rules only size the
   column, the pictures and the text lines Radzen has no control for. */

/* Twitter's column is 600px wide and dense: cards touch, padding is tight, text is 15px. */
.fcs-folk-column {
  max-width: 38rem;
}

.fcs-folk-column .rz-card.fcs-folk-post,
.fcs-folk-column .rz-card.fcs-folk-composer,
.fcs-folk-column .rz-card.fcs-folk-person {
  --rz-card-padding: 0.6rem 0.8rem;
  padding: 0.6rem 0.8rem;
}

.fcs-folk-column .rz-stack > .rz-card + .rz-card {
  margin-top: -1px;
}

.fcs-folk-column .rz-card .rz-card {
  margin-top: 0;
}

/* Only the stacks that hold cards lose their gap — never the stacks inside a card. */
.fcs-folk-column .fcs-folk-feed > .rz-stack,
.fcs-folk-column > .rz-stack {
  gap: 0 !important;
}

.fcs-folk-column .fcs-folk-feed > .rz-stack > .rz-card:not(:first-child),
.fcs-folk-column > .rz-stack > .rz-card:not(:first-child),
.fcs-folk-column > .rz-stack > .fcs-folk-feed > .rz-stack > .rz-card:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.fcs-folk-column .fcs-folk-feed > .rz-stack > .rz-card:not(:last-child),
.fcs-folk-column > .rz-stack > .rz-card:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.fcs-folk-spacer {
  flex: 1;
}

/* ---------------------------------------------------------------- composer */

.fcs-folk-composer-main {
  flex: 1;
  min-width: 0;
}

.fcs-folk-count {
  font-variant-numeric: tabular-nums;
  color: var(--rz-text-secondary-color);
  font-size: 0.85rem;
}

.fcs-folk-count-over {
  color: var(--rz-danger);
  font-weight: 600;
}

/* No overflow clipping here: Monaco's hover and suggest widgets must be free to spill past the
   box (they are also fixed-positioned, see folk-lsp-monaco.js). */
.fcs-folk-editor {
  border-radius: var(--rz-border-radius);
  border: 1px solid var(--rz-border-color, var(--rz-base-300));
}


/* ---------------------------------------------------------------- posts */

.fcs-folk-post-focused {
  border-color: var(--rz-primary);
}

.fcs-folk-post-event .fcs-folk-body {
  color: var(--rz-text-secondary-color);
}

.fcs-folk-post-avatar {
  flex: 0 0 auto;
  line-height: 0;
}

.fcs-folk-post-main {
  flex: 1;
  min-width: 0;
}

.fcs-folk-author {
  font-weight: 700;
}

.fcs-folk-author:hover {
  text-decoration: underline;
}

.fcs-folk-handle,
.fcs-folk-dot,
.fcs-folk-when {
  color: var(--rz-text-secondary-color);
  font-size: 0.9rem;
}

.fcs-folk-when {
  text-decoration: none;
}

.fcs-folk-kind.rz-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
}

.fcs-folk-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
  font-size: 0.95rem;
}

.fcs-folk-editor .fcs-monaco-wrap {
  min-height: 60px;
  transition: height 0.1s ease-out;
}

.fcs-folk-event-mark {
  margin-right: 0.35rem;
  opacity: 0.7;
}

.fcs-folk-event-link {
  margin-left: 0.5rem;
  font-size: 0.85rem;
}

.fcs-folk-text .rz-link {
  text-decoration: none;
}

.fcs-folk-tag {
  color: var(--rz-secondary);
}

.fcs-folk-actions {
  margin-left: -0.5rem;
}

.fcs-folk-actions .rz-button {
  min-width: 3.5rem;
  justify-content: flex-start;
}

/* ---------------------------------------------------------------- avatars */

.fcs-folk-avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--rz-base-200);
  flex: 0 0 auto;
}

.fcs-folk-avatar-org,
.fcs-avatar.fcs-folk-avatar-org {
  border-radius: 22%;
  object-fit: contain;
  background: var(--rz-base-100);
}

/* ---------------------------------------------------------------- profile */

/* The banner bleeds to the card's edges; the picture overlaps its bottom edge. The head is
   positioned and stacked above the banner so the banner can never paint over the picture. */
.fcs-folk-banner {
  height: 8rem;
  margin: calc(-1 * var(--rz-card-padding, 1rem)) calc(-1 * var(--rz-card-padding, 1rem)) 0;
  background: linear-gradient(120deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
  border-radius: var(--rz-border-radius) var(--rz-border-radius) 0 0;
}

.fcs-folk-profile-head {
  position: relative;
  z-index: 1;
}

.fcs-folk-profile-top {
  margin-top: -2.75rem;
}

.fcs-folk-profile-avatar .fcs-folk-avatar,
.fcs-folk-profile-avatar .fcs-avatar {
  border: 4px solid var(--rz-card-background-color, var(--rz-base-background-color));
  box-sizing: content-box;
}

.fcs-folk-profile-display {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

.fcs-folk-profile-bio {
  white-space: pre-wrap;
}

.fcs-folk-profile-counts b {
  color: var(--rz-text-color);
}

/* ---------------------------------------------------------------- people */

.fcs-folk-person-main {
  flex: 1;
  min-width: 0;
}

/* ---------------------------------------------------------------- notifications */

.fcs-folk-bell {
  position: relative;
  text-decoration: none;
}

.fcs-folk-bell-count.rz-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
  line-height: 1.2;
}

.fcs-folk-notification-glyph {
  margin-right: 0.35rem;
  color: var(--rz-text-secondary-color);
}

.fcs-folk-notification-post {
  text-decoration: none;
}

/* ---------------------------------------------------------------- explore */

.fcs-folk-tagcloud a {
  color: var(--rz-secondary);
}