.community-page {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.community-page h1,
.community-page h2,
.community-page h3 {
  overflow-wrap: anywhere;
}
.community-page h2 {
  font-size: 18px;
  margin: 0 0 14px;
}
.community-page h3 {
  font-size: 15px;
  margin: 0 0 5px;
}
.community-card {
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 0;
}
.community-card p {
  color: var(--text-secondary);
  line-height: 1.7;
}
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 16px;
}
.community-stack {
  display: grid;
  gap: 12px;
}
.community-member {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}
.community-member p {
  margin: 0;
  font-size: 13px;
}
.community-member img {
  border-radius: 8px;
}
.community-initial {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 22px;
}
.community-filters,
.community-actions,
.community-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.community-filters {
  align-items: end;
  gap: 16px;
}
.community-filters.community-card,
.calendar-toolbar {
  background: var(--bg-card);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.community-filters > .community-field {
  flex: 1 1 170px;
}
.community-filters > .community-field:first-child {
  flex-grow: 1.5;
}
.community-filters > .community-check {
  align-self: end;
  min-height: 42px;
}
.community-filters input:not([type='checkbox']),
.community-filters select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
}
.community-filters > button,
.community-filters > .button {
  min-height: 42px;
  margin: 0;
}
.community-grid > .empty-state {
  grid-column: 1 / -1;
  width: 100%;
}
.community-field > label {
  display: block;
  margin: 0;
  line-height: 1.5;
}
.community-field small {
  line-height: 1.5;
}
.community-check {
  min-height: 42px;
  margin: 0;
  align-self: start;
}
.community-form > .community-check {
  align-self: center;
}
.community-form > button[type='submit'] {
  justify-self: start;
}
.community-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.community-form .community-field > input,
.community-form .community-field > select {
  min-height: 44px;
}
.community-form input[type='file'] {
  min-height: 44px;
  padding: 8px;
}
.community-form .community-field > label:empty {
  display: none;
}
@media (max-width: 650px) {
  .community-filters > .community-field {
    flex-basis: 100%;
  }
}
.community-pager {
  justify-content: center;
}
.community-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin: 24px 0;
  padding-bottom: 12px;
}
.community-tabs a,
.community-tabs button {
  color: var(--text-secondary);
  padding: 9px 14px;
  border-radius: 6px;
  text-decoration: none;
}
.community-tabs a:hover,
.community-tabs a:focus-visible {
  background: var(--bg-hover, #25252a);
  color: var(--text-primary);
}
.community-banner {
  width: 100%;
  height: clamp(150px, 23vw, 270px);
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 24px;
}
.community-profile-heading {
  display: flex;
  align-items: center;
  gap: 22px;
}
.community-profile-heading h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 38px);
}
.community-profile-heading p {
  margin: 5px 0;
  color: var(--text-secondary);
}
.community-profile-heading > .button {
  margin-left: auto;
}
.community-avatar {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-secondary);
  display: grid;
  place-items: center;
  font-size: 36px;
  color: var(--accent);
  border: 1px solid var(--border);
}
.community-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.community-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.community-prose {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.community-facts {
  margin: 20px 0 0;
}
.community-facts div {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.community-facts dt {
  color: var(--text-muted);
}
.community-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.community-form {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}
.community-form > fieldset,
.community-form > .wide,
.community-form > .community-actions,
.community-form > .community-error,
.community-form > h3 {
  grid-column: 1 / -1;
}
.community-form fieldset {
  border: 0;
  border-bottom: 1px solid var(--border);
  margin: 0 0 24px;
  padding: 0 0 24px;
  min-width: 0;
}
.community-form legend {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 20px;
}
.community-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 650px) {
  .community-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
.community-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.community-field.wide,
.community-form-grid > .wide {
  grid-column: 1 / -1;
}
.community-field input,
.community-field select,
.community-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.community-field textarea {
  resize: vertical;
  min-height: 120px;
}
.community-field label {
  font-size: 13px;
  font-weight: 600;
}
.community-checks {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}
.community-check,
.community-field > .community-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.community-check input[type='checkbox'] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin: 0;
}
.community-check > span {
  min-width: 0;
  line-height: 1.5;
}
.community-image-preview {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  border-radius: 8px;
}
.community-error {
  color: var(--danger, #ff8c8c);
  padding: 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
}
.community-error[hidden] {
  display: none;
}
@media (max-width: 650px) {
  .community-profile-heading {
    flex-wrap: wrap;
    gap: 14px;
  }
  .community-profile-heading > .button {
    margin-left: 0;
  }
  .community-profile-grid,
  .community-form-grid {
    grid-template-columns: 1fr;
  }
  .community-card {
    padding: 18px;
  }
  .community-profile-heading h1 {
    font-size: 26px;
  }
}
.community-history {
  display: grid;
  gap: 26px;
  margin-top: 24px;
}
.community-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.community-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.community-stat strong {
  font-size: 25px;
  color: var(--accent);
}
.community-stat span {
  color: var(--text-muted);
  font-size: 12px;
}
.community-history-title,
.community-history-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.community-history-title time,
.community-history-row span {
  color: var(--text-muted);
  font-size: 12px;
}
.community-history-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.calendar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 20px;
}
.calendar-controls h2 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  min-width: min(100%, 180px);
}
.calendar-controls .community-actions {
  margin: 0;
}
.calendar-toolbar {
  margin-bottom: 24px;
}
.calendar-filters {
  margin-bottom: 0;
}
.calendar-day.outside-month {
  background: color-mix(in srgb, var(--text-muted) 3%, transparent);
}
.calendar-day.outside-month h3 {
  opacity: 0.5;
}
.calendar-scroll {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 770px;
}
.calendar-weekday {
  text-align: center;
  padding: 14px;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.calendar-day {
  min-height: 132px;
  padding: 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.calendar-day.today {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.calendar-day h3 {
  color: var(--text-muted);
  font-size: 12px;
}
.calendar-day.today h3 {
  color: var(--accent);
}
.calendar-event {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 12px;
  overflow-wrap: anywhere;
  background: var(--bg-card);
}
.calendar-event > span:last-child {
  color: var(--text-muted);
  font-size: 11px;
}
.calendar-event.cancelled {
  opacity: 0.65;
  border-left-color: var(--text-muted);
}
.calendar-event-kind {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
}
.calendar-event-kind[data-kind='pvp'] {
  color: #ed9393;
}
.calendar-event-kind[data-kind='social'],
.calendar-event-kind[data-kind='community'] {
  color: #92c3e9;
}
.calendar-event-kind[data-kind='achievement'] {
  color: #c4abef;
}
.calendar-agenda {
  display: grid;
  gap: 18px;
}
.calendar-agenda .calendar-day {
  min-height: 0;
  border: 0;
  padding: 0;
  background: none;
}
.calendar-agenda .calendar-day h3 {
  font-size: 15px;
}
.calendar-week .calendar-day {
  min-height: 350px;
}
@media (max-width: 650px) {
  .calendar-controls h2 {
    font-size: 15px;
  }
}
.community-participants {
  margin-top: 24px;
}
[data-rsvp] {
  display: grid;
  gap: 18px;
}
.community-feed {
  list-style: none;
  padding: 0;
  margin: 0;
}
.community-feed-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.community-feed-item:last-child {
  border: 0;
}
.community-feed-item p {
  margin: 0 0 7px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.community-feed-item time {
  font-size: 11px;
  color: var(--text-muted);
}
.community-feed-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
[data-profile-activity] {
  margin-top: 26px;
}
.community-form-fields {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.community-form-fields .wide {
  grid-column: 1/-1;
}
.community-markdown {
  line-height: 1.5;
  overflow-wrap: anywhere;
  min-width: 0;
}
.community-markdown h1,
.community-markdown h2,
.community-markdown h3,
.community-markdown h4,
.community-markdown h5,
.community-markdown h6 {
  line-height: 1.25;
  margin: 1.1em 0 0.4em;
  scroll-margin-top: 6rem;
}
.community-markdown h1 {
  font-size: 1.65em;
}
.community-markdown h2 {
  font-size: 1.4em;
}
.community-markdown h3 {
  font-size: 1.2em;
}
.community-markdown > :first-child {
  margin-top: 0;
}
.community-markdown > :last-child {
  margin-bottom: 0;
}
.community-markdown p {
  margin: 0.5em 0;
  line-height: inherit;
}
.community-markdown ul,
.community-markdown ol {
  margin: 0.4em 0;
  padding-inline-start: 1.4em;
}
.community-markdown li {
  padding: 0;
  margin: 0.15em 0;
}
.community-markdown li > ul,
.community-markdown li > ol {
  margin-block: 0.15em;
  padding-inline-start: 1.2em;
}
.community-markdown li > p {
  margin: 0.15em 0;
}
.community-markdown hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1em 0;
}
.community-markdown img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1em auto;
}
.community-markdown a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.community-markdown pre {
  white-space: pre;
  overflow: auto;
  padding: 0.75rem;
  margin: 0.6em 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  max-width: 100%;
}
.community-markdown code {
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--bg-secondary);
  border-radius: 3px;
  padding: 0.1em 0.3em;
}
.community-markdown pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.community-markdown table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.community-markdown td,
.community-markdown th {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border, #32404b);
  text-align: left;
}
.community-markdown blockquote {
  margin: 0.5em 0;
  padding: 0.1em 0.75em;
  border-left: 3px solid var(--border-strong, var(--text-muted));
  color: var(--text-secondary);
}
.community-markdown blockquote > :first-child {
  margin-top: 0;
}
.community-markdown blockquote > :last-child {
  margin-bottom: 0;
}
.guide-reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.guide-reading-layout:has(.guide-contents:not([hidden])) {
  grid-template-columns: 220px minmax(0, 1fr);
}
.guide-contents {
  align-self: start;
  position: sticky;
  top: 6rem;
}
.guide-contents li {
  margin: 0.65rem 0;
}
.guide-card h2 {
  font-size: 1.2rem;
}
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: var(--text-primary);
  transition:
    background 150ms,
    border-color 150ms;
}
.guide-card:hover,
.guide-card:focus-visible {
  background: var(--bg-elevated);
  border-color: var(--accent-border);
}
.guide-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.guide-card.guide-card-featured {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.guide-card.guide-card-featured:is(:hover, :focus-visible) {
  border-color: var(--accent-hover);
}
.guide-card .guide-featured-tag {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-hover);
}
.guide-card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.guide-card-icon .icon {
  width: 22px;
  height: 22px;
}
.guide-card-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.guide-heading-content,
.guide-revision-title,
.guide-icon-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.guide-heading-content > div,
.guide-icon-controls > div {
  min-width: 0;
}
.guide-heading-content > .guide-card-icon,
.guide-icon-controls > .guide-card-icon {
  width: 56px;
  height: 56px;
}
.guide-icon-field {
  display: grid;
  gap: 10px;
}
.guide-icon-field > span {
  font-size: 13px;
  font-weight: 600;
}
.guide-icon-controls .community-actions {
  margin: 0 0 8px;
  gap: 8px;
}
.guide-revision-title {
  margin: 12px 0;
}
.guide-revision-title h3 {
  margin: 0;
}
.guide-card-content {
  min-width: 0;
  flex: 1;
}
.guide-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.guide-card-tags:empty {
  display: none;
}
.guide-card h2 {
  margin: 0 0 10px;
  font-size: 17px;
}
.guide-card-summary {
  margin: 0 0 14px;
}
.guide-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.guide-card-meta > span,
.guide-card-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.guide-card-meta .icon,
.guide-card-open .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.guide-card-open {
  margin-top: auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
.community-guides-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.community-guides-grid {
  --guide-columns: 4;
}
.community-guides-grid,
.community-guides-grid .loading-cards {
  grid-template-columns: repeat(var(--guide-columns), minmax(0, 1fr));
  gap: 16px;
}
[data-guide-cards] > :is(.loading-state, .guide-results-error) {
  grid-column: 1 / -1;
}
.guide-stat-placeholder {
  display: block;
  width: 48px;
  height: 29px;
  border-radius: 6px;
}
@media (max-width: 1279px) {
  .community-guides-grid {
    --guide-columns: 3;
  }
}
@media (max-width: 959px) {
  .community-guides-grid {
    --guide-columns: 2;
  }
}
@media (max-width: 599px) {
  .community-guides-grid {
    --guide-columns: 1;
  }
}
.guide-library-filters > .community-field {
  flex-basis: 135px;
}
@media (max-width: 650px) {
  .guide-library-filters > .community-field {
    flex-basis: 100%;
  }
}
.community-guides-list .guide-card {
  flex-direction: row;
  align-items: center;
}
.community-guides-list .guide-card-open {
  flex-shrink: 0;
  margin-top: 0;
}
.guide-library-stats,
.community-library-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
.guide-library-stat,
.community-library-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}
.guide-library-stat > .icon,
.community-library-stat > .icon {
  color: var(--accent);
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.guide-library-stat > div,
.community-library-stat > div {
  display: grid;
  gap: 4px;
}
.guide-library-stat span,
.community-library-stat span {
  color: var(--text-secondary);
  font-size: 12px;
}
.guide-library-stat strong,
.community-library-stat strong {
  font-size: 24px;
  line-height: 1.2;
}
@media (max-width: 600px) {
  .guide-library-stats,
  .community-library-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .guide-library-stat,
  .community-library-stat {
    padding: 12px 16px;
  }
  .guide-library-stat > div,
  .community-library-stat > div {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .guide-library-stat > .icon,
  .community-library-stat > .icon {
    width: 20px;
    height: 20px;
  }
  .community-guides-list .guide-card {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 16px;
  }
  .community-guides-list .guide-card-content {
    flex-basis: calc(100% - 60px);
  }
  .community-guides-list .guide-card-open {
    margin-left: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .guide-card {
    transition: none;
  }
}
.guide-toolbar {
  padding: 0.5rem 0;
  gap: 0.25rem;
}
.guide-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.guide-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.guide-upload:focus-within {
  outline: 2px solid var(--primary, #c9a34b);
  outline-offset: 2px;
}
.guide-reference-editor {
  border-top: 1px solid var(--border, #32404b);
  padding-top: 1rem;
}
.guide-reference-editor .community-tag {
  margin: 0.25rem;
}
.guide-history {
  padding: 0;
  list-style: none;
  margin-top: 1rem;
}
.guide-history li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border, #32404b);
}
.guide-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.guide-comparison pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 36rem;
  overflow: auto;
  background: var(--bg-secondary);
  padding: 0.5rem;
}
.guide-comparison pre span {
  display: block;
  min-height: 1.3em;
}
.guide-line-changed {
  background: rgba(211, 166, 57, 0.18);
  border-left: 3px solid #d3a639;
  padding-left: 0.4rem;
}
@media (max-width: 720px) {
  .community-form-fields,
  .guide-comparison,
  .guide-reading-layout:has(.guide-contents:not([hidden])) {
    grid-template-columns: 1fr;
  }
  .guide-contents {
    position: static;
  }
  .guide-history li {
    align-items: flex-start;
    flex-direction: column;
  }
}
.community-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(197, 153, 89, 0.35);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  background: rgba(197, 153, 89, 0.08);
  color: var(--accent, #d6b179);
  text-transform: capitalize;
}
.community-tag .button {
  padding: 0 0.2rem;
  min-height: 0;
}
.related-guides {
  margin-top: 1.25rem;
}
.recognition-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.recognition-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  min-width: 4rem;
  height: 4rem;
  border: 1px solid rgba(197, 153, 89, 0.25);
  background: linear-gradient(135deg, rgba(197, 153, 89, 0.16), transparent);
  border-radius: 1rem;
  font-size: 2rem;
  overflow: hidden;
}
.recognition-image {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 1rem;
}
.recognition-card h2 {
  font-size: 1.2rem;
  margin: 0.6rem 0;
}
.recognition-card time {
  font-size: 0.8rem;
  color: var(--muted, #aaa);
}
.recognition-cover {
  max-height: 24rem;
  max-width: 100%;
  object-fit: contain;
  border-radius: 1rem;
}
.recognition-detail {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.community-achievements-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.community-achievements-list .recognition-card {
  flex-direction: row;
  gap: 18px;
  padding: 20px;
}
.community-achievements-list .recognition-card > div {
  min-width: 0;
  flex: 1;
}
.community-achievements-list .community-actions {
  margin: 0;
  gap: 8px;
}
.community-achievements-list .recognition-card p {
  margin: 8px 0 0;
  font-size: 13px;
}
.community-achievements-list :is(.recognition-image, .recognition-symbol) {
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 10px;
  flex-shrink: 0;
  font-size: 26px;
}
.achievement-credit {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}
.achievement-credit > .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}
.history-detail {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.history-detail > .recognition-cover {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
}
.history-detail-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(18px, 3vw, 28px);
}
.history-detail-body > .community-actions {
  margin: 0;
}
@media (max-width: 480px) {
  .recognition-card {
    flex-direction: column;
  }
}
.badge-rarity-uncommon .recognition-symbol {
  border-color: #4a9442;
}
.badge-rarity-rare .recognition-symbol {
  border-color: #458fc7;
}
.badge-rarity-epic .recognition-symbol {
  border-color: #9e64d4;
}
.badge-rarity-legendary .recognition-symbol {
  border-color: #d68e37;
}
.badge-page .heading-actions,
.badge-page-actions,
.badge-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.badge-page .heading-actions {
  justify-content: flex-end;
}
.badge-page .heading-actions .button,
.badge-page-actions .button,
.badge-form-actions .button {
  min-height: 42px;
  text-align: center;
}
.badge-page-actions {
  margin-top: 24px;
}
.badge-form-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.badge-form > p {
  margin: 0;
}
.badge-form :is([data-image-library], [data-image-remove]) {
  align-self: flex-start;
}
.badge-search-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}
.badge-search-actions :is(input, button) {
  min-height: 44px;
}
.badge-detail-card {
  padding: clamp(20px, 3vw, 32px);
}
.badge-detail-intro {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}
.badge-detail-emblem {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
  text-align: center;
}
.badge-detail-art {
  display: grid;
  place-items: center;
  width: 144px;
  height: 144px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--badge-rarity-color) 60%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(
      circle at center,
      color-mix(in srgb, var(--badge-rarity-color) 12%, transparent),
      transparent 75%
    ),
    var(--bg-secondary);
}
.badge-detail-art :is(.recognition-image, .recognition-symbol) {
  width: 100%;
  min-width: 0;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--badge-rarity-color);
  font-size: 56px;
}
.badge-detail-rarity {
  color: color-mix(in srgb, var(--badge-rarity-color) 75%, white);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.badge-detail-summary {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.badge-detail-labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.badge-detail-category {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge-detail-featured {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 12px;
}
.badge-detail-featured .icon {
  width: 14px;
  height: 14px;
}
.badge-detail-description {
  max-width: 68ch;
  margin: 0;
  font-size: 15px;
}
.badge-award-recipient {
  display: grid;
  gap: 5px;
  margin-top: 2px;
}
.badge-award-recipient > span {
  color: var(--text-muted);
  font-size: 12px;
}
.badge-award-recipient h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}
.badge-person-link {
  color: var(--text-primary);
  text-decoration: none;
}
.badge-person-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.badge-award-reason {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.badge-award-reason h2 {
  margin: 0 0 8px;
  font-size: 14px;
}
.badge-award-reason p {
  margin: 0;
}
.badge-award-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}
.badge-award-facts > div {
  min-width: 0;
}
.badge-award-facts dt {
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.badge-award-facts dd {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  min-width: 0;
  color: var(--text-secondary);
}
.badge-award-facts .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}
@media (max-width: 650px) {
  .badge-page .heading-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .badge-detail-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .badge-detail-art {
    width: 112px;
    height: 112px;
    padding: 18px;
  }
  .badge-detail-summary {
    justify-items: center;
    text-align: center;
  }
  .badge-detail-labels {
    justify-content: center;
  }
  .badge-detail-description {
    font-size: 14px;
  }
  .badge-award-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .badge-award-facts > div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
  }
  .badge-award-facts dt {
    margin: 0;
  }
}
@media (max-width: 380px) {
  .badge-search-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .badge-page-actions .button,
  .badge-form-actions .button {
    width: 100%;
  }
}
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
  gap: 12px;
}
.badge-grid > .empty-state {
  grid-column: 1 / -1;
}
.badge-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 146px;
  padding: 18px 12px 14px;
  border: 1px solid color-mix(in srgb, var(--badge-rarity-color) 70%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--badge-rarity-color) 7%, transparent), transparent),
    var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}
.badge-tile:hover {
  border-color: var(--badge-rarity-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-rarity-color) 30%, transparent);
}
.badge-tile:focus-visible {
  outline: 2px solid var(--badge-rarity-color);
  outline-offset: 3px;
}
.badge-grid .badge-tile > :is(.recognition-symbol, .recognition-image) {
  width: 52px;
  min-width: 52px;
  height: 52px;
  border: 0;
  border-radius: 8px;
  background: none;
  object-fit: contain;
  font-size: 36px;
  color: var(--badge-rarity-color);
}
.badge-tile-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  max-width: 100%;
  min-height: 2.8em;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.badge-tile-featured {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--badge-rarity-color);
}
.badge-tile-featured .icon {
  width: 14px;
  height: 14px;
}
.badge-expanded {
  min-width: 0;
  overflow-wrap: anywhere;
}
.badge-expanded-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}
.badge-expanded-heading :is(.recognition-image, .recognition-symbol) {
  flex-shrink: 0;
  object-fit: contain;
}
.badge-expanded > .community-prose {
  margin: 16px 0;
}
.badge-expanded h3 {
  margin: 20px 0 8px;
  font-size: 14px;
}
.badge-detail-meta {
  margin: 0 0 8px;
  color: color-mix(in srgb, var(--badge-rarity-color) 75%, white);
  text-transform: capitalize;
}
.badge-detail-facts {
  display: grid;
  gap: 12px;
  font-size: 13px;
}
.badge-detail-facts dt {
  color: var(--text-muted);
  margin-bottom: 4px;
}
.badge-detail-facts dd {
  margin: 0;
}
.badge-expanded-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
@media (max-width: 480px) {
  .badge-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr));
    gap: 10px;
  }
}
.badge-assignments-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.badge-assignments-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.badge-assignment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 24px;
  padding: 20px;
}
.badge-assignment-content,
.badge-assignment-heading > div {
  min-width: 0;
}
.badge-assignment-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}
.badge-assignment-heading :is(.recognition-symbol, .recognition-image) {
  width: 48px;
  min-width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 24px;
}
.badge-assignment h2 {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.35;
}
.badge-assignment-title {
  color: var(--text-primary);
  text-decoration: none;
}
.badge-assignment-title:hover {
  color: var(--accent-hover);
}
.badge-assignment-labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: capitalize;
}
.badge-assignment-labels .community-tag {
  padding: 2px 8px;
  font-size: 11px;
}
.badge-assignment-labels .icon {
  width: 12px;
  height: 12px;
}
.badge-assignment-revoked {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-muted);
}
.badge-assignment-recipient {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.badge-assignment-recipient > .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}
.badge-assignment-character {
  color: var(--text-secondary);
}
.badge-assignment .badge-assignment-reason {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}
.badge-assignment-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}
.badge-assignment-footer time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.badge-assignment-footer time .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.badge-assignment-footer .button {
  min-width: 82px;
  min-height: 42px;
  flex-shrink: 0;
}
.badge-assignments-grid .badge-assignment {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.badge-assignments-grid .badge-assignment-content {
  flex: 1;
}
.badge-assignments-grid .badge-assignment-footer {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  min-height: 55px;
  margin-top: auto;
  padding: 12px 0 0;
  border-left: 0;
  border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .badge-assignment {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
  }
  .badge-assignment-footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
.community-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
}
.community-check small {
  display: block;
}
.community-card {
  overflow-wrap: anywhere;
}
.community-page .button {
  max-width: 100%;
  white-space: normal;
}
.hall-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hall-card-image {
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.hall-card-symbol {
  height: 125px;
  display: grid;
  place-items: center;
  font-size: 3.5rem;
  color: var(--accent, #d6b179);
  background: radial-gradient(ellipse at center, rgba(197, 153, 89, 0.15), transparent 75%);
}
.hall-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hall-card-body .community-tag {
  align-self: flex-start;
}
.hall-card-body h2 {
  margin: 0;
}
.community-hall-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.community-hall-list .hall-card {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding: 20px;
}
.community-hall-list :is(.hall-card-image, .hall-card-symbol) {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  font-size: 32px;
}
.community-hall-list .hall-card-body {
  min-width: 0;
  padding: 0;
  gap: 8px;
}
.community-hall-list .hall-card-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.community-hall-list .hall-card-body > small {
  color: var(--text-muted);
}
@media (max-width: 600px) {
  .community-hall-list .hall-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }
  .community-hall-list :is(.hall-card-image, .hall-card-symbol) {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
}
.guild-history {
  --history-rail-width: 72px;
  --history-rail-gap: 24px;
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.guild-history-entry {
  position: relative;
  padding: 0 0 28px calc(var(--history-rail-width) + var(--history-rail-gap));
  scroll-margin-top: 110px;
}
.guild-history-entry::before {
  content: '';
  position: absolute;
  left: calc(var(--history-rail-width) / 2 - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-border), rgba(197, 153, 89, 0.14));
}
.guild-history-entry:last-child::before {
  background: linear-gradient(180deg, var(--accent-border), transparent);
}
.history-rail {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--history-rail-width);
  display: grid;
  gap: 12px;
  justify-items: center;
}
.history-year {
  position: relative;
  padding: 3px 10px;
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.history-marker {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  text-decoration: none;
  box-shadow: 0 0 0 5px var(--bg-primary);
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}
.history-marker-icon .icon {
  display: block;
  width: 22px;
  height: 22px;
}
.history-marker time {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.history-marker strong {
  font-size: 22px;
  line-height: 1;
}
.history-marker small {
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.history-marker-featured .history-marker-icon {
  color: var(--accent);
}
.guild-history-entry:is(:hover, :focus-within, .history-entry-active) .history-marker {
  border-color: var(--accent);
  color: var(--accent-hover);
  background: linear-gradient(145deg, var(--accent-soft), transparent), var(--bg-secondary);
  box-shadow:
    0 0 0 5px var(--bg-primary),
    0 0 22px rgba(197, 153, 89, 0.13);
}
.guild-history-entry:has(.history-marker:hover) .history-card,
.guild-history-entry:has(.history-marker:focus-visible) .history-card {
  border-color: var(--accent);
}
.history-marker:focus-visible,
.history-years a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.history-years {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.history-years > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}
.history-years > span .icon {
  width: 16px;
  height: 16px;
}
.history-years a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.history-years a:is(:hover, [aria-current]) {
  border-color: var(--accent-border);
  color: var(--accent-hover);
  background: var(--accent-soft);
}
.history-date {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-width: 0;
}
.history-date time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #d6b179);
}
.history-date .icon {
  width: 15px;
  height: 15px;
}
.history-date small {
  color: var(--text-secondary);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.history-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  isolation: isolate;
  padding: 0;
  overflow: hidden;
  transition: border-color 150ms ease;
}
.history-card-image {
  min-height: clamp(280px, 30vw, 380px);
}
.history-card .history-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.history-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  z-index: 1;
}
.history-card-image .history-card-content {
  padding-top: 72px;
  background: linear-gradient(180deg, transparent, rgba(12, 12, 12, 0.82) 60px, rgba(12, 12, 12, 0.94));
}
.history-card-meta,
.history-card-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.history-card-meta {
  justify-content: space-between;
  gap: 12px 20px;
}
.history-card h2 {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  text-wrap: balance;
}
.history-card-link {
  color: var(--text-primary);
  text-decoration: none;
}
.history-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.history-card:has(.history-card-link:hover),
.history-card:focus-within {
  border-color: var(--accent);
}
.history-card-link:focus-visible {
  outline: none;
}
.history-card-link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}
.history-card-summary {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.history-card .history-excerpt {
  flex: 1 1 240px;
  max-width: 80ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.history-card-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 600;
}
.history-card-open .icon {
  width: 16px;
  height: 16px;
}
.history-card-review {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: 4px;
}
.history-card-image .history-card-link {
  color: #fff;
}
.history-card-image :is(.history-excerpt, .history-date small) {
  color: #e0ddd8;
}
.history-card-image .history-date time {
  color: var(--accent-hover);
}
.history-card-image .community-tag {
  background: rgba(20, 20, 20, 0.8);
  border-color: rgba(255, 255, 255, 0.25);
  color: #eee6dd;
}
@media (max-width: 720px) {
  .guild-history {
    --history-rail-width: 44px;
    --history-rail-gap: 12px;
  }
  .history-marker {
    padding: 10px 4px;
    border-radius: 9px;
  }
  .history-marker-icon .icon {
    width: 18px;
    height: 18px;
  }
  .history-marker strong {
    font-size: 18px;
  }
  .history-marker small {
    font-size: 10px;
  }
  .history-year {
    padding: 3px 5px;
    font-size: 10px;
  }
  .history-card-content {
    padding: 18px;
  }
  .history-card-image {
    min-height: 320px;
  }
  .history-card-meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .history-card-open {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .history-marker,
  .history-card {
    transition: none;
  }
}
.community-manager {
  min-width: 0;
}
.community-manager > .community-page {
  max-width: none;
  padding: 0;
}
.community-manager .community-manager {
  padding: 0;
}
.community-manager .page-heading {
  margin-bottom: 1.25rem;
}
.community-manager .community-filters {
  margin-bottom: 1rem;
}
.community-manager-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.community-manager-stats article {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.community-manager-stats strong {
  font-size: 2rem;
  color: var(--accent, #d6b179);
}
.community-manager-stats span {
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.community-table-scroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.community-manager-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.community-manager > .community-table-scroll + .empty-state {
  margin-top: 18px;
}
.community-manager-table th,
.community-manager-table td {
  padding: 0.8rem;
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.community-manager-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.community-manager-table td {
  min-width: 90px;
  max-width: 320px;
  overflow-wrap: anywhere;
}
.community-manager-table small {
  display: block;
  color: var(--text-secondary);
  margin-top: 0.3rem;
}
.community-manager-table .button {
  margin: 0;
  white-space: nowrap;
}
.community-table-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}
.community-manager-table td:has(> .community-table-actions) {
  width: 1%;
  max-width: none;
}
.community-table-actions .button {
  flex: 0 0 auto;
}
.badge-tile,
.badge-expanded,
.badge-tooltip,
.badge-detail-card,
.recognition-table-item,
.badge-rarity-tag {
  --badge-rarity-color: var(--quality-common, #fff);
}
.badge-rarity-tag {
  color: color-mix(in srgb, var(--badge-rarity-color) 75%, white);
  border-color: color-mix(in srgb, var(--badge-rarity-color) 45%, transparent);
  background: color-mix(in srgb, var(--badge-rarity-color) 10%, transparent);
  text-transform: capitalize;
  white-space: nowrap;
}
.badge-rarity-uncommon {
  --badge-rarity-color: var(--quality-uncommon, #1eff00);
}
.badge-rarity-rare {
  --badge-rarity-color: var(--quality-rare, #0070dd);
}
.badge-rarity-epic {
  --badge-rarity-color: var(--quality-epic, #a335ee);
}
.badge-rarity-legendary {
  --badge-rarity-color: var(--quality-legendary, #ff8000);
}
.community-manager-table tr:last-child td {
  border-bottom: 0;
}

.community-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
}
.community-media-choice {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-wrap: anywhere;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.community-media-choice img {
  width: 100%;
  height: 100px;
  object-fit: contain;
}

.community-manager-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}
.community-manager-event {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.community-manager-event small {
  color: var(--text-secondary);
}
@media (max-width: 760px) {
  .community-manager-overview {
    grid-template-columns: 1fr;
  }
}

.community-manager > section > .community-form {
  max-width: none;
}

.community-form > .community-form-grid,
.community-form > p {
  grid-column: 1/-1;
}
.community-field > .community-actions {
  margin: 0;
  align-items: stretch;
  flex-wrap: nowrap;
}
.community-field > .community-actions input {
  flex: 1;
  min-width: 0;
}
.community-field > .community-actions button {
  flex-shrink: 0;
}
.community-form .community-error[hidden] {
  display: none;
}

.profile-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.profile-catalog-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.profile-catalog-card > .community-actions {
  margin: 0 0 16px;
  gap: 6px;
}
.profile-catalog-card p {
  margin: 0 0 12px;
}
.profile-catalog-card .profile-catalog-source {
  font-size: 12px;
  color: var(--accent);
}
.profile-catalog-actions {
  margin-top: auto;
  padding-top: 12px;
  width: 100%;
}
.profile-catalog-actions .button {
  width: 100%;
}
.profile-module-editor [hidden] {
  display: none;
}
.profile-module-editor [data-source-settings] {
  padding: 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.profile-module-editor [data-source-settings] > p {
  margin: 0 0 16px;
  font-size: 13px;
}
.profile-module-editor [data-source-settings] > p:last-child {
  margin: 16px 0 0;
}
.profile-module-field-choices .community-checks {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.profile-no-characters > .icon,
.profile-no-talents > .icon {
  width: 30px;
  height: 30px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.profile-no-characters .button {
  margin-top: 16px;
}
.community-member-picker {
  display: grid;
  gap: 16px;
}
.community-member-selection {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--accent-soft);
}
.community-member-selection[hidden] {
  display: none;
}
.community-member-selection > div {
  flex: 1;
  min-width: 0;
}
.community-member-selection small {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
}
.community-member-check {
  color: var(--accent);
  flex-shrink: 0;
}
.community-picker-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.community-picker-identity .community-initial {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 8px;
  flex-shrink: 0;
}
.community-member-results td {
  min-width: 0;
  vertical-align: middle;
}
.community-member-results .button {
  min-height: 42px;
  margin: 0;
}
@media (max-width: 600px) {
  .community-member-selection {
    flex-wrap: wrap;
  }
  .community-member-selection > button {
    width: 100%;
  }
  .community-member-results th:nth-child(2),
  .community-member-results td:nth-child(2) {
    display: none;
  }
  .community-member-results th,
  .community-member-results td {
    padding: 10px;
  }
  .community-picker-identity .community-initial {
    display: none;
  }
}
.guide-topic-picker {
  background: var(--bg-secondary);
  margin-top: 16px;
  padding: 18px;
}
.guide-topic-picker > .community-actions {
  margin-bottom: 0;
}
.guide-topic-picker [hidden] {
  display: none;
}
.guide-topic-picker > [role='status'] {
  font-size: 13px;
  margin: 12px 0;
}
.guide-topics-empty {
  margin: 14px 0 0;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.guide-topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 14px 0;
  list-style: none;
}
.guide-topic-tags .community-tag {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  max-width: 100%;
}
.guide-topic-tags .icon-button {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.profile-module-summary .recognition-card p,
.profile-history-summary .community-history > section > p,
.profile-history-summary .community-history > section > details,
.profile-history-summary .community-history .community-card > p,
.profile-history-summary .community-history .community-card > ul {
  display: none;
}
.profile-modules-grid > .profile-module {
  margin: 0;
  padding: 20px;
  border: 0;
  border-radius: 0;
  box-shadow: inset -1px -1px 0 var(--border);
}
.profile-modules-grid > .profile-module-wide,
.profile-modules-grid > [data-profile-kind='attendance'] {
  box-shadow: inset 0 -1px 0 var(--border);
}
.profile-modules-grid > :last-child.profile-module-wide,
.profile-modules-grid > [data-profile-kind='attendance']:last-child {
  box-shadow: none;
}
.member-profile .community-card {
  background: var(--bg-card);
}
.profile-module-wide,
.profile-modules-grid > [data-profile-kind='attendance'],
.profile-modules-grid > .empty-state {
  grid-column: 1/-1;
}
.profile-module-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.profile-module-heading h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16px;
}
.profile-module-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: var(--accent);
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.profile-module-symbol .icon {
  width: 17px;
  height: 17px;
}
.profile-introduction {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}
.profile-introduction .community-banner {
  display: block;
  width: 100%;
  height: 200px;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}
.profile-introduction .community-profile-heading {
  padding: 20px;
  flex-wrap: wrap;
}
.profile-introduction .community-avatar {
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.profile-identity-copy {
  flex: 1;
  min-width: min(100%, 180px);
}
.profile-introduction .profile-display-name {
  margin: 0 0 12px;
  line-height: 1.2;
}
.profile-detail-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.profile-detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 5px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.profile-detail-tag :is(.icon, .wow-role-icon) {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.profile-detail-tag.profile-tag-active {
  color: #9cdbab;
  border-color: #48634e;
  background: #29362c;
}
.profile-identity-character {
  display: grid;
  gap: 12px;
  min-width: 0;
  font-size: 12px;
}
.profile-identity-character a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}
.profile-identity-character a > img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.profile-identity-character a > span {
  display: grid;
  gap: 4px;
}
.profile-identity-character small {
  color: var(--text-secondary);
}
.profile-identity-character a:hover strong {
  color: var(--accent);
}
.profile-character-info {
  width: 100%;
  min-width: 0;
}
.profile-character-info h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.profile-character-info p {
  margin: 6px 0 10px;
  color: var(--text-secondary);
  font-size: 12px;
}
.profile-card-footnote {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 11px;
}
.profile-card-footnote .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.profile-character-info p.profile-card-footnote {
  padding-top: 10px;
  margin: 12px 0 0;
  border-top: 1px solid var(--border);
}
.profile-module .community-facts dt {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.profile-module .community-facts dt .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}
.profile-build-preview {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.profile-build-preview li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.profile-build-preview li > span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.profile-build-preview strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.profile-build-preview small {
  color: var(--text-secondary);
  font-size: 11px;
}
.profile-build-preview .profile-detail-tag {
  flex-shrink: 0;
}
.profile-profession-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-profession-heading .prof-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-warm);
  color: var(--accent);
}
.profile-profession-heading h3 {
  font-size: 14px;
  margin: 0 0 4px;
}
.profile-profession-heading p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.profile-skill-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 8px;
  font-size: 12px;
}
.profile-skill-label > span:first-child {
  margin-right: auto;
  color: var(--text-secondary);
}
.profile-profession-card progress {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  appearance: none;
  background: var(--bg-warm);
  accent-color: var(--accent);
}
.profile-profession-card progress::-webkit-progress-bar {
  background: var(--bg-warm);
}
.profile-profession-card progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: 6px;
}
.profile-profession-card progress::-moz-progress-bar {
  background: var(--accent);
}
.profile-module .community-feed-mark {
  display: grid;
  place-items: center;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
}
.profile-module .community-feed-mark .icon {
  width: 20px;
  height: 20px;
}
.profile-module .community-feed-item p {
  margin-top: 0;
}
.profile-module .community-feed-item time {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-secondary);
}
.profile-module .community-feed {
  margin: 0 0 16px;
}
.profile-module .community-stat strong {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.profile-module .community-stat span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-module .community-stat .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.profile-module .community-history-title {
  gap: 10px;
}
.profile-module .community-history time {
  font-size: 12px;
  color: var(--text-secondary);
}
.profile-module .community-history > section > p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.profile-module .community-history .badge {
  background: var(--bg-warm);
}
.profile-module-compact .profile-introduction .community-profile-heading {
  padding: 12px;
}
.profile-module-compact .profile-build-preview {
  margin-top: 6px;
}
.profile-module-compact .profile-build-preview li {
  padding: 6px 0;
}
.profile-module-compact .profile-skill-label {
  margin-top: 10px;
}
@media (max-width: 600px) {
  .profile-introduction .community-profile-heading {
    padding: 14px;
    gap: 14px;
  }
  .profile-identity-character {
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .profile-module-heading {
    flex-wrap: wrap;
  }
  .profile-module-heading .profile-module-moves {
    margin-left: auto;
  }
}
.profile-module-moves {
  display: flex;
  gap: 4px;
}
.profile-module-options {
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.profile-module-options details {
  margin: 0;
}
.profile-module-options summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
}
.profile-module-options details[open] > summary {
  margin-bottom: 12px;
}
.profile-module-options .community-form-grid {
  margin-bottom: 12px;
}
.profile-module-hidden {
  border-style: dashed;
}
.profile-module-hidden [data-module-body] {
  opacity: 0.6;
}
.profile-module [data-module-body] > section > .community-section-heading h2,
.profile-module [data-module-body] > section > h2,
.profile-module [data-module-body] > .community-history > section > h2 {
  display: none;
}
.profile-module [data-module-body] > .community-history {
  margin-top: 0;
}
/* Module presentation stays scoped to profiles; shared community pages keep their layout. */
.profile-module [data-module-body] {
  min-width: 0;
}
.profile-module [data-module-body] > :first-child {
  margin-top: 0;
}
.profile-module [data-module-body] > :last-child {
  margin-bottom: 0;
}
.profile-module .community-section-heading {
  margin: 0 0 12px;
}
.profile-module .community-history {
  gap: 16px;
}
.profile-module .community-history > .community-card {
  padding: 0;
  border: 0;
  border-radius: 0;
}
.profile-module .community-history .community-filters {
  margin: 0;
}
.profile-module
  [data-module-body]
  :is(.community-grid, .community-stack, .community-feed, .community-facts, .community-stats) {
  min-width: 0;
}
.profile-module [data-module-body] .empty-state {
  padding: 24px 16px;
}
.profile-module [data-module-body] .empty-symbol {
  font-size: 26px;
  margin-bottom: 8px;
}
.profile-module [data-module-body] .empty-state p {
  margin-bottom: 0;
}
.profile-module .recognition-card > div {
  min-width: 0;
}
.profile-module .recognition-card .community-actions {
  margin: 0 0 8px;
  gap: 6px;
}
.profile-module .recognition-card h2 {
  margin: 0 0 8px;
  font-size: 16px;
}
.profile-module .recognition-card p {
  margin: 8px 0;
}
.profile-module-cards
  [data-module-body]
  :is(.community-grid, .community-stack, .community-feed, .community-facts, .community-stats) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}
.profile-module-cards [data-module-body] :is(.community-grid, .community-stack) > .community-card,
.profile-module-cards .community-feed-item,
.profile-module-cards .community-facts > div,
.profile-module-cards .community-stat,
.profile-module-cards .community-history-row {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
}
.profile-module-cards [data-module-body] :is(.community-member, .recognition-card, .community-feed-item) {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.profile-module-cards .community-member > img {
  width: 48px;
  height: 48px;
}
.profile-module-cards .community-facts > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.profile-module-cards .community-facts dd {
  font-weight: 600;
}
.profile-module-cards .community-history-row {
  align-content: start;
}
.profile-module-cards[data-profile-kind='content'] [data-module-body] {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
}
.profile-module:is(.profile-module-list, .profile-module-compact)
  [data-module-body]
  :is(.community-grid, .community-stack, .community-feed) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.profile-module:is(.profile-module-list, .profile-module-compact)
  [data-module-body]
  :is(.community-grid, .community-stack)
  > .community-card {
  padding: var(--profile-row-padding, 14px) 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.profile-module:is(.profile-module-list, .profile-module-compact)
  [data-module-body]
  :is(.community-grid, .community-stack)
  > .community-card:last-child {
  border-bottom: 0;
}
.profile-module:is(.profile-module-list, .profile-module-compact)
  [data-module-body]
  :is(.community-member, .recognition-card) {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.profile-module-list :is(.community-member > img, .recognition-symbol, .recognition-image) {
  width: 36px;
  min-width: 36px;
  height: 36px;
  font-size: 20px;
  border-radius: 6px;
}
.profile-module-list .community-avatar {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  font-size: 28px;
}
.profile-module-list .community-banner {
  height: 140px;
  margin-bottom: 16px;
}
.profile-module-list .community-profile-heading {
  gap: 16px;
}
.profile-module:is(.profile-module-list, .profile-module-compact) .community-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.profile-module:is(.profile-module-list, .profile-module-compact) .community-stat {
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.profile-module-list .community-stat strong {
  font-size: 20px;
}
.profile-module-list .empty-state {
  text-align: left;
  border: 0;
  border-left: 2px solid var(--border);
  border-radius: 0;
}
.profile-module-list .empty-state p {
  max-width: none;
}
.profile-module-list .empty-symbol {
  display: none;
}
.profile-modules-grid > .profile-module-compact {
  --profile-row-padding: 8px;
  padding: 20px;
}
.profile-module-compact .profile-module-heading {
  margin-bottom: 8px;
}
.profile-module-compact [data-module-body] {
  font-size: 12px;
}
.profile-module.profile-module-compact
  [data-module-body]
  :is(.community-grid, .community-stack)
  > .community-card,
.profile-module-compact .community-feed-item,
.profile-module-compact .community-history-row {
  padding: 8px 0;
  gap: 8px;
}
.profile-module-compact
  :is(.community-member > img, .recognition-symbol, .recognition-image, .community-feed-mark) {
  width: 28px;
  min-width: 28px;
  height: 28px;
  font-size: 16px;
  border-radius: 5px;
}
.profile-module-compact .community-avatar {
  width: 40px;
  height: 40px;
  font-size: 22px;
  border-radius: 8px;
}
.profile-module-compact .community-banner {
  height: 90px;
  margin-bottom: 10px;
}
.profile-module-compact .community-profile-heading {
  gap: 12px;
}
.profile-module-compact .profile-display-name {
  font-size: 18px;
}
.profile-module-compact .community-profile-heading p {
  margin: 2px 0;
}
.profile-module-compact [data-module-body] :is(h2, h3) {
  font-size: 14px;
  margin-bottom: 4px;
}
.profile-module-compact [data-module-body] p {
  line-height: 1.5;
  margin-block: 4px;
}
.profile-module-compact .community-facts > div,
.profile-module.profile-module-compact .community-stat {
  padding: 6px 0;
  gap: 8px;
}
.profile-module-compact .community-stat strong {
  font-size: 16px;
}
.profile-module-compact .community-stats {
  margin-block: 10px;
}
.profile-module-compact [data-module-body] .empty-state {
  padding: 10px 0;
  border: 0;
  text-align: left;
}
.profile-module-compact .empty-state p {
  max-width: none;
}
.profile-module-compact .empty-symbol {
  display: none;
}
.profile-module-compact .community-markdown {
  line-height: 1.5;
}
.profile-module[data-profile-kind='identity'] [data-module-body] {
  container: profile-identity / inline-size;
}
.profile-identity-character {
  min-width: min(100%, 260px);
  max-width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}
.profile-identity-character a > span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.profile-identity-character a > :is(img, .icon) {
  flex-shrink: 0;
}
.profile-identity-character a > .icon {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  color: var(--text-muted);
}
.profile-main-character strong {
  font-size: 14px;
  line-height: 1.4;
}
.profile-character-label,
.profile-character-count,
.profile-main-character-role {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-wrap: anywhere;
}
.profile-character-label {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
.profile-character-count {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.profile-main-character-role {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}
:is(.profile-character-label, .profile-character-count) .icon,
.profile-main-character-role .wow-role-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.profile-module-cards [data-module-body] .profile-character-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
}
.profile-module [data-module-body] .community-member.profile-character-card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
}
.profile-module-cards [data-module-body] .profile-character-grid > .profile-character-card {
  padding-left: 12px;
}
.profile-module .profile-character-card > img {
  width: 40px;
  height: 40px;
  min-width: 0;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.profile-module .profile-character-card h3 {
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.profile-character-card h3 > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.profile-character-card .profile-detail-tag {
  padding: 2px 6px;
  font-size: 10px;
}
.profile-module .profile-character-card .profile-character-meta {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.profile-character-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}
.profile-character-details > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.profile-character-details :is(.icon, .wow-role-icon) {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.profile-character-details .icon {
  color: var(--accent);
}
.profile-module-list .profile-character-card > img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}
.profile-module.profile-module-compact [data-module-body] .profile-character-card {
  gap: 8px;
  padding-block: 8px;
}
.profile-module-compact .profile-character-card > img {
  width: 28px;
  height: 28px;
  border-radius: 5px;
}
.profile-module-compact .profile-character-details {
  margin-top: 3px;
}
.profile-module .profile-character-card > .icon {
  top: calc(50% - 9px);
}
.profile-identity-character a:focus-visible,
.profile-website:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.profile-about {
  display: grid;
  gap: 16px;
}
.profile-bio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--bg-secondary);
}
.profile-bio-icon {
  display: flex;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 3px;
}
.profile-bio-icon .icon {
  width: 18px;
  height: 18px;
}
.profile-module .profile-bio p {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.7;
}
.profile-module .profile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  margin: 0;
}
.profile-module .profile-facts > div {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 14px 14px 14px 56px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  min-width: 0;
}
.profile-module .profile-facts dt {
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.profile-fact-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
.profile-fact-icon > img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: inherit;
}
.profile-fact-icon > .wow-role-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.profile-module .profile-facts dd {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.profile-website {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 0;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.profile-website .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.profile-website:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.profile-module:is(.profile-module-list, .profile-module-compact) .profile-facts {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.profile-module:is(.profile-module-list, .profile-module-compact) .profile-facts > div {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 0 14px 40px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.profile-module:is(.profile-module-list, .profile-module-compact) .profile-facts > div:last-child {
  border-bottom: 0;
}
.profile-module:is(.profile-module-list, .profile-module-compact) .profile-facts dd {
  text-align: right;
}
.profile-module:is(.profile-module-list, .profile-module-compact) .profile-fact-icon {
  left: 0;
  width: 28px;
  height: 28px;
}
.profile-module:is(.profile-module-list, .profile-module-compact) .profile-fact-icon > img {
  max-width: 100%;
  max-height: 100%;
}
.profile-module.profile-module-compact .profile-facts > div {
  padding-block: 9px;
  padding-left: 34px;
}
.profile-module.profile-module-compact .profile-fact-icon {
  width: 24px;
  height: 24px;
  background: transparent;
}
.profile-module-compact .profile-bio {
  padding: 10px;
  gap: 8px;
}
.profile-module-compact .profile-identity-character {
  padding: 10px;
}
@container profile-identity (max-width: 640px) {
  .profile-introduction .community-profile-heading {
    gap: 14px;
  }
  .profile-identity-character {
    width: 100%;
  }
}
.profile-module[data-profile-kind]
  [data-module-body]
  :is(.community-grid, .community-stack)
  > .community-card.profile-content-link {
  position: relative;
  padding-right: 40px;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}
.profile-content-link > .icon {
  position: absolute;
  right: 12px;
  top: 16px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}
.profile-module:is(.profile-module-list, .profile-module-compact) .profile-content-link > .icon {
  top: calc(50% - 9px);
}
.profile-module
  [data-module-body]
  :is(.community-grid, .community-stack)
  > .profile-content-link:is(:hover, :focus-visible) {
  background: var(--bg-warm);
  border-color: var(--accent);
}
.profile-content-link:is(:hover, :focus-visible) > .icon {
  color: var(--accent);
}
.profile-content-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.profile-editor-bar,
.profile-tab-tools {
  margin-bottom: 24px;
}
.profile-editor-bar .community-actions,
.profile-tab-tools .community-actions {
  margin: 0;
  align-self: end;
}
.profile-editor-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 18px;
}
.profile-editor-bar h2 {
  margin-bottom: 4px;
}
.profile-editor-actions {
  grid-column: 1/-1;
  grid-row: 2;
}
.profile-editor-actions [data-profile-save-status] {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 13px;
}
.profile-accent-picker {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}
.profile-tab-tools > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
}
.profile-tab-tools[open] > summary {
  margin-bottom: 20px;
}
.profile-tab-tools > p {
  margin-top: 16px;
}
.profile-library-row {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-card);
}
.profile-library-row > div {
  flex: 1;
  min-width: 0;
}
.profile-library-row > button {
  flex-shrink: 0;
}
.profile-library-row h3 {
  margin: 0 0 6px;
}
.profile-library-row p {
  margin: 0 0 6px;
}
.profile-module-library .community-actions:last-child {
  margin-bottom: 0;
}
.profile-editor-bar p {
  margin: 4px 0;
}
.profile-tab-bar [aria-selected='true'] {
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}
.profile-theme-ember {
  --accent: #e89b69;
}
.profile-theme-frost {
  --accent: #7dbce5;
}
.profile-theme-forest {
  --accent: #91c891;
}
.profile-theme-violet {
  --accent: #bea0e6;
}
@media (max-width: 760px) {
  .profile-editor-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-editor-actions,
  .profile-accent-picker {
    grid-column: auto;
    grid-row: auto;
  }
  .profile-editor-actions [data-profile-save-status] {
    flex-basis: 100%;
    margin-left: 0;
  }
  .profile-library-row {
    align-items: start;
    flex-direction: column;
  }
  .profile-modules-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-module-heading {
    flex-wrap: wrap;
  }
  .profile-modules-grid > .profile-module {
    box-shadow: inset 0 -1px 0 var(--border);
    padding: 16px;
  }
  .profile-modules-grid > .profile-module:last-child {
    box-shadow: none;
  }
  .profile-module:is(.profile-module-list, .profile-module-compact) .community-profile-heading {
    flex-direction: row;
    align-items: center;
  }
  .profile-tab-bar {
    gap: 5px;
  }
  .profile-module-options .community-form-grid {
    grid-template-columns: 1fr;
  }
}

.community-view-switch {
  height: 42px;
  min-height: 42px;
  align-self: end;
  align-items: stretch;
}
.community-view-switch button {
  min-height: 0;
  padding-block: 0;
  gap: 6px;
}
.directory-results-heading {
  display: flex;
  align-items: center;
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 13px;
}
.directory-results-heading p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.directory-results-heading .icon {
  margin-right: 2px;
}
.directory-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-content: start;
  padding: 20px;
  background: var(--bg-card);
  border-left: 3px solid currentColor;
  border-radius: var(--radius);
  text-decoration: none;
  transition:
    background 150ms,
    box-shadow 150ms;
}
.directory-card:hover,
.directory-card:focus-visible {
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px currentColor;
}
.directory-identity,
.directory-character {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.directory-member-name,
.directory-character > div {
  min-width: 0;
}
.directory-card h2 {
  font-size: 17px;
  color: var(--text-primary);
  margin: 0 0 5px;
}
.directory-guild-role,
.directory-source,
.directory-open,
.directory-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.directory-guild-role .icon,
.directory-source .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.directory-character {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.directory-character .wow-class-icon,
.directory-character-placeholder {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.directory-character-placeholder {
  display: grid;
  place-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
}
.directory-character strong {
  overflow-wrap: anywhere;
  font-size: 15px;
}
.directory-character p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.directory-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.directory-role {
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.directory-role .wow-role-icon {
  width: 18px;
  height: 18px;
}
.directory-open {
  justify-content: flex-end;
  color: var(--accent);
  font-weight: 600;
}
.directory-open .icon {
  width: 17px;
  height: 17px;
}
.community-initial {
  overflow: hidden;
}
.community-initial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.community-members-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.community-members-list .directory-card {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  padding: 16px 20px;
}
.community-members-list .directory-character {
  border: 0;
  padding: 0;
}
.community-members-list .directory-details {
  gap: 6px;
  align-items: flex-start;
  flex-direction: column;
}
@media (max-width: 850px) {
  .community-members-list .directory-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .community-members-list .directory-details {
    flex-direction: row;
    align-items: center;
  }
}
@media (max-width: 480px) {
  .community-members-list .directory-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .community-members-list .directory-character {
    border-top: 1px solid var(--border);
    padding-top: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .directory-card {
    transition: none;
  }
}

.guide-content-field > .community-section-heading {
  margin-bottom: 8px;
}
.guide-content-field > .community-section-heading label {
  font-size: 15px;
  font-weight: 600;
}
.guide-compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.guide-compose-grid.has-preview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.guide-writing-pane {
  min-width: 0;
}
.guide-writing-pane textarea {
  width: 100%;
  min-height: 480px;
  line-height: 1.7;
  resize: vertical;
  font-family: ui-monospace, monospace;
}
.guide-preview-pane {
  min-width: 0;
  height: var(--guide-editor-height, 480px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.guide-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.guide-preview-bar h2 {
  margin: 0;
  font-size: 14px;
}
.guide-preview-bar span {
  font-size: 12px;
}
.guide-preview-pane > .community-markdown {
  padding: 16px;
  min-height: 0;
  overflow: auto;
  flex: 1;
}
.guide-preview-pane[hidden] {
  display: none;
}
[data-guide-editor] > fieldset {
  margin-bottom: 0;
}
[data-guide-word-count] {
  margin: 8px 0;
}
@media (max-width: 950px) {
  .guide-compose-grid.has-preview {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide-preview-pane {
    min-height: 180px;
  }
  .guide-writing-pane textarea {
    min-height: 350px;
  }
}

.profile-display-name {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}

[data-profile-kind='achievements'] > .profile-module-heading {
  margin-bottom: 4px;
}
#achievements > h2 {
  margin-bottom: 4px;
}
#achievements > p {
  margin: 0 0 20px;
}

.profile-editor-form {
  gap: 20px;
}
.profile-editor-form > p {
  margin: 0;
}
.profile-editor-form fieldset {
  margin: 0;
  padding-bottom: 20px;
}
.profile-editor-form legend {
  margin-bottom: 14px;
}
.profile-editor-form .community-form-grid {
  gap: 16px 20px;
  align-items: start;
}
.profile-editor-form .community-field textarea {
  min-height: 96px;
}
.profile-editor-form .community-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 20px;
  margin: 16px 0;
}
.profile-editor-form > .community-actions {
  margin: 0;
}
.profile-images-grid [data-image-preview] {
  display: grid;
  place-items: center;
  width: 100%;
  height: 144px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  overflow: hidden;
}
.profile-images-grid [data-image-preview]:empty::before {
  content: 'No image selected';
  font-size: 12px;
  color: var(--text-muted);
}
.profile-images-grid .community-image-preview {
  width: 100%;
  height: 122px;
  max-height: 122px;
  object-fit: contain;
}
.profile-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-image-actions .button {
  margin: 0;
  min-height: 42px;
}
.profile-image-actions [data-image-library] {
  flex: 1 1 auto;
}
@media (max-width: 650px) {
  .profile-editor-form .community-checks {
    grid-template-columns: minmax(0, 1fr);
  }
}

.community-detail-back,
.badge-page-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.hall-detail .recognition-detail {
  padding: clamp(20px, 4vw, 40px);
  border-top: 3px solid var(--accent-border);
  background: linear-gradient(125deg, var(--bg-warm), var(--bg-card));
}
.hall-detail .recognition-cover {
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
}
.recognition-table-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
button.recognition-table-item {
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  max-width: 100%;
}
button.recognition-table-item:hover {
  color: var(--badge-rarity-color);
  background: transparent;
}
button.recognition-table-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button.recognition-table-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.recognition-table-item :is(img, .recognition-symbol) {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: cover;
  border-radius: 6px;
}
button.recognition-table-item :is(img, .recognition-symbol) {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--badge-rarity-color) 60%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--badge-rarity-color) 25%, var(--bg-secondary));
  object-fit: contain;
}
.character-history [data-label] > small {
  display: block;
  color: var(--text-muted);
  margin-top: 5px;
}

.guide-page-banner {
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-warm);
  background: var(--bg-warm);
}
.guide-page-banner img {
  display: block;
  width: 100%;
  height: clamp(160px, 22vw, 320px);
  object-fit: cover;
}
.guide-page .page-heading {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-warm);
}
.guide-width-standard [data-guide-body] {
  max-width: 82ch;
  width: 100%;
  justify-self: center;
  line-height: 1.8;
}
.guide-width-wide [data-guide-body] {
  width: 100%;
  line-height: 1.7;
}
.guide-presentation {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 8px;
}
.guide-presentation legend {
  color: var(--text-warm);
  padding-inline: 8px;
}
.guide-wowhead-link {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.community-markdown blockquote {
  border-left: 3px solid var(--accent);
  background: var(--bg-warm);
  padding: 16px 20px;
  margin-inline: 0;
}
@media (max-width: 700px) {
  .guide-presentation {
    grid-template-columns: 1fr;
  }
}