/* Per-board access: what the pages show about who can see a board and post in it.
   The label beside a board's name (Pages/Access/_BoardTag), the line on a board's own
   page (Pages/Access/_BoardAccessLine), the "you cannot post here" sentence, and the
   access lines under /manage (Pages/Manage/_AccessSummary and the Access pages).

   Mobile first, and nothing here is fixed in width: the line and the summaries wrap.
   Every color and corner radius is a custom property from site.css, so a community's
   theme can change them. The lock is decoration: the words beside it always say it. */

/* "Staff only", "Members only": the tag from threads.css with a small lock in front. */
.access-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; margin-right: 0; background: var(--ink); color: var(--on-accent); white-space: nowrap; }
.access-tag svg { flex: none; }
.page-sub .access-tag { margin-left: 0; margin-right: 6px; }

/* On a board's own page, for staff: who can see it and post in it. */
.access-line {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: var(--radius-small);
  background: var(--surface); box-shadow: var(--elev-1); overflow-wrap: anywhere;
}
.access-line svg { flex: none; margin-top: 2px; }
.access-line a { white-space: nowrap; }

/* Where the "New thread" button would be, for somebody the board does not let post. */
.access-refusal { max-width: 34ch; }
.note.access-refusal { max-width: none; }

/* Under /manage: a board's access in words, on the boards list and the Access pages. */
.m-board-access { margin-top: 4px; font-size: 14px; }
.m-board-access .access-tag, .m-access-now .access-tag { margin-left: 0; margin-right: 6px; }
.m-access-now { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); background: var(--surface-alt); overflow-wrap: anywhere; }
.m-access-now .m-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.m-form .m-access-now { padding: 0; border: 0; background: none; }

@media (min-width: 768px) {
  .m-access-now { padding: 16px 20px; }
  .m-form .m-access-now { padding: 0; }
}