@import url("/styles-20260926c.css");

.account-avatar { overflow: hidden; }
.account-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Prominent publishing and claim actions. */
.site-nav a[href="/list-your-clan/"] {
  display: inline-flex;
  min-height: 2.55rem;
  align-items: center;
  padding: 0 1rem;
  border: 1px solid color-mix(in srgb, var(--gold) 70%, var(--line-strong));
  background: rgba(217, 170, 99, .11);
  color: #edc783;
}
.site-nav a[href="/list-your-clan/"]:hover,
.site-nav a[href="/list-your-clan/"]:focus-visible { border-color: var(--gold); background: rgba(217, 170, 99, .18); color: #ffe2aa; }

.claim-flag {
  display: inline-flex;
  align-items: center;
  margin-left: .45rem;
  padding-left: .45rem;
  border-left: 1px solid var(--line);
  color: #aeb5ff;
  font-size: .55rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
}
.claim-flag:hover,
.claim-flag:focus-visible { color: #d9dcff; }

.indexed-claim-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(88, 101, 242, .5);
  background: linear-gradient(135deg, rgba(88, 101, 242, .13), rgba(5, 13, 18, .72));
}
.indexed-claim-alert[hidden] { display: none; }
.indexed-claim-alert strong { color: #e4e6ff; font-size: .82rem; }
.indexed-claim-alert p { margin: .35rem 0 0; color: var(--muted-bright); font-size: .76rem; line-height: 1.5; }
.indexed-claim-alert > div:last-child { display: flex; flex: 0 0 auto; gap: .5rem; }

.form-actions .button--primary { min-height: 3.35rem; padding-inline: 1.4rem; }

/* Owner media upload and focal-position editor. */
.media-editor-grid { display: grid; grid-template-columns: minmax(16rem, .75fr) minmax(24rem, 1.25fr); gap: 1rem; }
.media-editor { min-width: 0; padding: 1rem; border: 1px solid var(--line); background: rgba(5, 13, 18, .56); }
.media-editor__heading { display: flex; min-height: 3.8rem; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.media-editor__heading strong { color: var(--ink); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
.media-editor__heading p { margin: .35rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.media-drop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding: .75rem; border: 1px dashed var(--line-strong); color: var(--cyan); font-size: .68rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.media-drop input { max-width: 13rem; color: var(--muted); font-size: .65rem; }
.media-preview { position: relative; display: grid; margin-top: .8rem; overflow: hidden; place-items: center; border: 1px solid var(--line-strong); background: #050c11; }
.media-preview--avatar { width: min(100%, 15rem); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; }
.media-preview--banner { aspect-ratio: 16 / 5; }
.media-preview canvas { display: block; width: 100%; height: 100%; }
.media-preview > span { color: var(--muted); font-size: .7rem; font-weight: 700; }
.media-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: .9rem; }
.media-controls label { display: grid; grid-template-columns: 1fr auto; gap: .35rem; color: var(--muted-bright); font-size: .62rem; }
.media-controls input { grid-column: 1 / -1; width: 100%; accent-color: var(--cyan); }
.media-controls output { color: var(--cyan); font-variant-numeric: tabular-nums; }

/* Published owner artwork. */
.clan-sigil { overflow: hidden; }
.clan-sigil img { object-fit: cover; }
.profile-hero__banner { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-hero.has-custom-banner::before {
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 14, 19, .97), rgba(6, 14, 19, .78) 57%, rgba(6, 14, 19, .32));
  filter: none;
}
.profile-hero.has-custom-banner::after { z-index: 0; pointer-events: none; }
.profile-hero.has-custom-banner > :not(.profile-hero__banner) { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .media-editor-grid { grid-template-columns: 1fr; }
  .indexed-claim-alert { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .media-controls { grid-template-columns: 1fr; }
  .indexed-claim-alert > div:last-child { width: 100%; flex-direction: column; }
  .media-drop { align-items: flex-start; flex-direction: column; }
}