:root {
  --bg:#ffffff; --text:#1b1e27; --muted:#5a6175; --line:#dfe2ec;
  --accent:#4752c4; --accent-hover:#3a44a6; --accent-text:#ffffff; --link:#3a44a6;
  --field-border:#6b7287; --chip-bg:#eceefa; --error:#b3261e; --flash-bg:#e6f4ea; --flash-text:#14532d;
  --danger:#b3261e; --danger-text:#ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#12141a; --text:#e8eaf0; --muted:#9aa1b4; --line:#2b2f3b;
    --accent:#5865f2; --accent-hover:#4752c4; --accent-text:#ffffff; --link:#9ba5ff;
    --field-border:#8089a0; --chip-bg:#232843; --error:#ff8a80; --flash-bg:#14301f; --flash-text:#a7f3c0;
    --danger:#ff8a80; --danger-text:#12141a;
  }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, sans-serif; }
main { max-width:960px; margin:0 auto; padding:16px; }
a { color:var(--link); }
.muted { color:var(--muted); }
:focus-visible { outline:3px solid var(--link); outline-offset:2px; }

.nav { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); }
.nav nav { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.nav form { margin:0; }
.brand { font-weight:800; color:var(--text); text-decoration:none; }
.me { display:inline-flex; align-items:center; gap:8px; }
.avatar { border-radius:50%; }

.btn { display:inline-block; background:var(--accent); color:var(--accent-text); border:0; border-radius:8px; padding:8px 14px; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; }
.btn:hover { background:var(--accent-hover); }
button.link { background:none; border:0; padding:0; font:inherit; color:var(--link); text-decoration:underline; cursor:pointer; }
button.link:hover { color:var(--text); }

.form { display:grid; gap:20px; max-width:640px; }
.field { display:grid; gap:6px; border:0; padding:0; margin:0; min-width:0; }
label, legend { font-weight:600; padding:0; }
input[type=text], input[type=search], input:not([type]), textarea {
  width:100%; font:inherit; color:var(--text); background:var(--bg);
  border:1px solid var(--field-border); border-radius:8px; padding:8px 10px;
}
textarea { resize:vertical; }
input::placeholder { color:var(--muted); opacity:1; }
.hint { margin:0; color:var(--muted); font-size:.875rem; }
.error { color:var(--error); margin:0; }
input[aria-invalid=true] { border-color:var(--error); }
.flash { background:var(--flash-bg); color:var(--flash-text); border-radius:8px; padding:8px 12px; margin:0 0 16px; max-width:640px; }
.check { display:flex; gap:8px; align-items:flex-start; font-weight:400; }
.check input { margin-top:5px; }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips:empty { display:none; }
.chips:not(:empty) { margin-bottom:8px; } /* with the field's 6px gap: 14px between the chips and the search box */
.chip { display:inline-flex; align-items:center; gap:6px; background:var(--chip-bg); color:var(--text); border-radius:999px; padding:2px 6px 2px 8px; }
.chip img { image-rendering:pixelated; }
.chip-x { background:none; border:0; color:var(--text); font:inherit; font-size:1.25rem; line-height:1; padding:2px 6px; border-radius:999px; cursor:pointer; }
.chip-x:hover { background:var(--line); }
.suggest { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pick { display:inline-flex; align-items:center; gap:6px; background:var(--chip-bg); color:var(--text); border:1px solid var(--field-border); border-radius:8px; padding:2px 10px 2px 4px; font:inherit; cursor:pointer; }
.pick:hover { border-color:var(--link); }
.pick img { image-rendering:pixelated; }

/* Landing, legal pages, footer */
.hero { padding:32px 0 8px; max-width:640px; }
.hero h1 { font-size:2rem; line-height:1.2; margin:0 0 12px; }
.lead { font-size:1.125rem; margin:0 0 20px; }
.steps ol { list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:step; }
.steps li { counter-increment:step; border:1px solid var(--line); border-radius:12px; padding:12px 16px 12px 56px; position:relative; }
.steps li::before { content:counter(step); position:absolute; left:16px; top:12px; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-text); display:grid; place-items:center; font-weight:700; }
.steps h3 { margin:0 0 4px; font-size:1.0625rem; }
.steps p { margin:0; }
.badge { font-size:.75rem; font-weight:600; background:var(--chip-bg); color:var(--text); border:1px solid var(--field-border); border-radius:999px; padding:1px 8px; vertical-align:middle; }
.notice { margin:32px 0; padding:4px 16px 8px; border-left:4px solid var(--accent); }
.prose { max-width:720px; }
.prose h2 { margin:28px 0 8px; font-size:1.25rem; }
.prose ul, .prose dl { padding-left:20px; }
.prose dl { padding-left:0; }
.prose dt { font-weight:700; margin-top:8px; }
.prose dd { margin:0 0 0 0; }
.footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; max-width:960px; margin:32px auto 0; padding:16px; border-top:1px solid var(--line); color:var(--muted); font-size:.875rem; }
.footer nav { display:flex; gap:16px; }

/* Communities */
.btn.ghost { background:transparent; color:var(--link); border:1px solid var(--field-border); }
.btn.ghost:hover { background:var(--chip-bg); }
.cards { list-style:none; margin:16px 0; padding:0; display:grid; gap:16px; max-width:720px; }
.card { border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.card-head { display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.guild-icon { width:40px; height:40px; border-radius:12px; flex:none; }
.guild-icon.placeholder { display:grid; place-items:center; background:var(--chip-bg); color:var(--text); font-weight:700; text-transform:uppercase; }
.inline-form { display:grid; gap:6px; }
.slug-row { display:flex; align-items:center; gap:6px; }
.slug-row input { flex:1; min-width:0; }
.status { background:var(--chip-bg); color:var(--text); border:1px solid var(--field-border); border-radius:999px; padding:0 8px; font-size:.8125rem; }
.notice-plain { border-left:4px solid var(--accent); padding:4px 12px; max-width:720px; }
code { background:var(--chip-bg); color:var(--text); border-radius:4px; padding:0 4px; }
.inline-form .btn { justify-self:start; margin-top:4px; }
.badge, .status { white-space:nowrap; display:inline-block; }

/* Admin dashboard */
.subnav { display:flex; gap:16px; flex-wrap:wrap; margin:0 0 16px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.subnav a, .filters a { text-decoration:none; padding:2px 0; }
.subnav a[aria-current], .filters a[aria-current] { font-weight:700; text-decoration:underline; text-underline-offset:4px; color:var(--text); }
.filters { display:flex; gap:14px; flex-wrap:wrap; }
.counts { list-style:none; display:flex; gap:12px; flex-wrap:wrap; padding:0; margin:0 0 16px; }
.counts a { display:block; border:1px solid var(--line); border-radius:12px; padding:6px 14px; text-decoration:none; color:var(--text); }
.counts a:hover { border-color:var(--link); }
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table th { font-size:.8125rem; color:var(--muted); font-weight:600; white-space:nowrap; }
.table form { margin:0; }
.guild-icon.small { width:28px; height:28px; border-radius:8px; vertical-align:middle; margin-right:6px; }
.facts { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; max-width:720px; }
.facts dt { color:var(--muted); }
.facts dd { margin:0; overflow-wrap:anywhere; }
.btn.danger { background:var(--danger); color:var(--danger-text); }
.btn.danger:hover { background:var(--danger); box-shadow:inset 0 0 0 2px var(--danger-text); }
.action { margin:0 0 20px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; }
.search-row { display:flex; gap:8px; max-width:520px; margin:0 0 16px; }
.search-row input { flex:1; min-width:0; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Sharing */
.share-form { display:grid; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.share-main { font-size:1.0625rem; }
.warning { margin:0; padding:8px 12px; border-left:4px solid var(--error); background:var(--chip-bg); color:var(--text); border-radius:0 8px 8px 0; }
.hide-fields { border:1px solid var(--line); border-radius:12px; padding:8px 14px; display:grid; gap:6px; }
.hide-fields legend { font-weight:600; padding:0 6px; }

/* Navigation buttons */
.btn.small { padding:4px 12px; font-size:.9375rem; }
.btn.ghost[aria-current="page"] { background:var(--chip-bg); border-color:var(--link); }
/* The profile button holds a picture and a name: lay them out in a row and keep it the same height as the others. */
.nav .btn.me { display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 5px; }
.nav .btn .avatar { width:23px; height:23px; margin:0; }

/* Public community pages */
.community-head { display:flex; gap:12px; align-items:center; margin:8px 0 16px; }
.community-head h1 { margin:0; }
.community-head p { margin:0; }
.members { list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.member .card-head h2 { margin:0; font-size:1.125rem; overflow-wrap:anywhere; }
.accounts { margin:0 0 8px; }
.profile { display:grid; gap:4px; margin:0; }
.profile dt { color:var(--muted); font-size:.8125rem; margin-top:8px; }
.profile dd { margin:0; overflow-wrap:anywhere; }
.profile dd.text { white-space:pre-line; }
.tags { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.tag { display:inline-flex; align-items:center; gap:4px; background:var(--chip-bg); color:var(--text); border-radius:999px; padding:1px 10px; font-size:.9375rem; }
.tag img { image-rendering:pixelated; margin-left:-6px; }

/* Community directory: search, table, filters, pager */
.directory-search { display:flex; gap:8px; max-width:560px; margin:0 0 12px; }
.directory-search input[type=search] { flex:1; min-width:0; }
.filters { list-style:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:0; margin:0 0 8px; }
.filters a.filter-chip { display:inline-flex; gap:6px; align-items:center; background:var(--chip-bg); color:var(--text); border:1px solid var(--field-border); border-radius:999px; padding:2px 14px 2px 16px; text-decoration:none; font-size:.9375rem; }
.filters a.filter-chip:hover { border-color:var(--link); }
.summary { margin:8px 0; }
.sortbar { margin:0 0 8px; font-size:.9375rem; color:var(--muted); }
.directory { width:100%; border-collapse:collapse; }
.directory th, .directory td { text-align:left; vertical-align:top; padding:10px; border-bottom:1px solid var(--line); }
.directory thead th { font-size:.8125rem; color:var(--muted); font-weight:600; white-space:nowrap; }
.directory a.sort { color:var(--link); text-decoration:none; }
.directory .person { min-width:11rem; font-weight:600; }
.person-head { display:flex; align-items:center; gap:8px; }
.person-name { overflow-wrap:anywhere; }
.accounts, .matched { display:block; font-weight:400; font-size:.875rem; margin-top:4px; overflow-wrap:anywhere; }
.matched { color:var(--muted); font-style:italic; }
.directory .text { display:block; white-space:pre-line; overflow-wrap:anywhere; }
.directory .tags { margin-bottom:4px; }
a.tag { text-decoration:none; border:1px solid transparent; }
a.tag:hover { border-color:var(--link); }
.tag-active { outline:2px solid var(--link); }
.wishlist { display:block; margin-top:4px; }
.pager { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:center; margin:16px 0; }
.page-numbers { display:flex; flex-wrap:wrap; gap:4px; list-style:none; margin:0; padding:0; }
.page-numbers a, .page-numbers [aria-current] { display:inline-block; min-width:2.25rem; padding:6px 8px; text-align:center; border-radius:8px; text-decoration:none; }
.page-numbers a { border:1px solid var(--line); }
.page-numbers a:hover { border-color:var(--link); }
.page-numbers [aria-current] { background:var(--accent); color:var(--accent-text); font-weight:600; }
.page-numbers .muted { padding:6px 4px; }
.letters { display:flex; flex-wrap:wrap; gap:2px 4px; margin:12px 0; }
.letters a, .letters span { display:inline-block; min-width:2rem; padding:4px 6px; text-align:center; border-radius:6px; text-decoration:none; }
.letters a:hover { background:var(--line); }
.letters [aria-current] { background:var(--accent); color:var(--accent-text); font-weight:600; }

@media (max-width:720px) {
  .directory thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .directory, .directory tbody, .directory tr, .directory th, .directory td { display:block; width:100%; }
  .directory tr { border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin:0 0 16px; }
  .directory th, .directory td { border:0; padding:4px 0; }
  .directory td:empty { display:none; }
  .directory td::before { content:attr(data-label); display:block; color:var(--muted); font-size:.8125rem; }
  .directory .person { font-size:1.125rem; min-width:0; }
}
.popular { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:8px 0; }
.popular .tags { margin:0; }
#results:focus { outline:none; }

/* Person page */
.back { margin:0 0 16px; }
.person-hero { display:flex; align-items:center; gap:16px; margin:0 0 20px; }
.person-hero h1 { margin:0; overflow-wrap:anywhere; }
.person-hero .accounts { margin:4px 0 0; font-size:1rem; }
.avatar.big { width:72px; height:72px; border-radius:50%; }
.person-facts { margin:0; }
.person-facts > div { padding:14px 0; border-top:1px solid var(--line); }
.person-facts dt { color:var(--muted); font-size:.875rem; margin:0 0 6px; }
.person-facts dd { margin:0; }
.person-facts .text { white-space:pre-line; overflow-wrap:anywhere; }
.person-link { color:var(--link); text-decoration:none; }
.person-link:hover .person-name { text-decoration:underline; }

/* Signed in on a community address */
.signed-in { display:inline-flex; align-items:center; gap:8px; font-weight:600; }

/* Manage (community admins) */
.plain-list { list-style:none; margin:0 0 16px; padding:0; }
.plain-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--line); }
.plain-list form { margin:0; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:16px 0; }
.table .person-head .avatar { flex:none; }

/* Delete account */
.danger-zone { margin:40px 0 16px; padding-top:16px; border-top:1px solid var(--line); }
.stack { display:flex; flex-direction:column; gap:10px; max-width:480px; }