/* Original component source (locally adapted to OSRS): Warframe Clan Finder / profile-20260928f.css */
/* Claimed profiles use the shared Clan Finder banner and overlapping avatar layout. */
.managed-clan-page .profile-wrap {
  width: min(calc(100% - 2 * clamp(16px, 5vw, 64px)), 1080px);
}
.managed-profile-hero { overflow: hidden; border: 1px solid #ffffff24; border-radius: 4px; background: #0e1518; box-shadow: 0 1px 3px #0003; }
.managed-profile-banner { position: relative; width: 100%; height: 144px; overflow: hidden; border-bottom: 1px solid #ffffff24; background: #151515; }
.managed-profile-banner--empty { background: inherit; border-bottom: 0; }
.managed-profile-banner .profile-hero__banner { position: absolute; z-index: auto; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.managed-profile-body { padding: 0 20px 28px; }
.managed-profile-top { display: grid; gap: 20px; align-items: start; }
.managed-profile-identity { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.managed-profile-avatar { position: relative; z-index: 1; flex-shrink: 0; width: 112px; height: 112px; margin: -64px auto 0; overflow: hidden; border: 4px solid #1f1f1f; border-radius: 50%; background: #111; box-shadow: 0 0 0 2px #75c9d366, 0 8px 24px #0004; }
.managed-profile-avatar .clan-sigil { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; }
.managed-profile-avatar .clan-sigil img { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; }
.managed-profile-copy { min-width: 0; }
.managed-profile-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.managed-profile-title h1 { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.15; font-weight: 900; letter-spacing: -.025em; overflow-wrap: anywhere; }
.managed-profile-title .listing-state { font-size: 10px; letter-spacing: .025em; }
.managed-profile-summary { margin: 8px 0 0; max-width: 48rem; font-size: 18px; font-weight: 600; line-height: 28px; color: #b4b6b5; overflow-wrap: anywhere; }
.managed-profile-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.managed-profile-meta > div { min-width: 0; padding: 8px 12px; border: 1px solid #ffffff24; border-radius: 4px; background: #0a1114; }
.managed-profile-meta dt { font-size: 10px; font-weight: 700; color: #8c999e; text-transform: uppercase; }
.managed-profile-meta dd { margin: 4px 0 0; font-size: 14px; line-height: 20px; font-weight: 700; overflow-wrap: anywhere; }
.managed-profile-hero .managed-profile-actions { display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; gap: 8px; width: auto; min-width: 0; }
.managed-profile-actions .button, .managed-profile-actions .community-action, .managed-profile-actions .text-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; width: auto; padding: 8px 12px; border: 1px solid #ffffff24; border-radius: 6px; background: #0c1316; color: #d8dedd; font: inherit; font-size: 14px; font-weight: 650; line-height: 20px; letter-spacing: 0; text-transform: none; text-decoration: none; }
.managed-profile-actions .discord-button { border-color: #75c9d35c; color: var(--cyan); }
.managed-profile-actions .community-actions--profile { display: contents; }
.managed-profile-actions .community-actions--profile .community-action { flex-direction: row; flex: 0 0 auto; gap: 8px; padding: 8px 12px; border: 1px solid #ffffff24; }
.managed-profile-actions .compare-toggle { order: 0; flex: 0 0 auto; width: auto; }
.managed-profile-actions .discord-button { flex: 0 0 auto; white-space: nowrap; }
.managed-profile-actions .community-action svg { width: 16px; height: 16px; }
.managed-profile-actions .community-action span { display: inline; }
.managed-profile-actions .community-action strong { font-size: 12px; }
.managed-profile-actions .profile-action-links { display: contents; }
.managed-profile-actions .button:hover, .managed-profile-actions .community-action:hover, .managed-profile-actions .text-action:hover { border-color: var(--cyan); background: #15252a; }
.managed-profile-stats { display: grid; gap: 12px; margin: 28px 0 0; }
.managed-profile-stats > div { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 96px; padding: 12px; border: 1px solid #ffffff24; border-radius: 6px; background: #0a1114; }
.managed-stat-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border: 1px solid #75c9d34d; border-radius: 4px; color: var(--cyan); background: #111; }
.managed-stat-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.managed-profile-stats dl { min-width: 0; margin: 0; }
.managed-profile-stats dt { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #8c999e; }
.managed-profile-stats dd { margin: 8px 0 0; font-size: 16px; line-height: 22px; font-weight: 800; overflow-wrap: anywhere; }
.managed-clan-page .profile-layout { grid-template-columns: minmax(0,1fr); gap: 24px; align-items: start; margin-top: 24px; }
.managed-clan-page .profile-column { gap: 24px; align-content: start; min-width: 0; }
.managed-clan-page .profile-panel { min-width: 0; padding: 20px; border: 1px solid #ffffff24; border-radius: 4px; background: #0e1518; }
.managed-clan-page .profile-panel h2 { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -.015em; }
.managed-clan-page .profile-panel__copy { margin-top: 12px; font-size: 16px; line-height: 28px; white-space: pre-line; overflow-wrap: anywhere; }
.managed-clan-page .profile-panel .tag-list { margin-top: 16px; }
.managed-clan-page .profile-panel .tag-list li { padding: 6px 10px; font-size: 12px; }
.managed-clan-page .profile-discovery-links { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.managed-clan-page .profile-discovery-links strong { width: 100%; }
.managed-clan-page .profile-discovery-links a { color: var(--cyan); line-height: 24px; }
/* Recruitment details read as one quiet list, without nested cards. */
.managed-clan-page .recruitment-detail-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; margin-top: 16px; border: 0; background: none; }
.managed-clan-page .recruitment-detail-grid > div { min-width: 0; padding: 16px 0; background: none; }
.managed-clan-page .recruitment-detail-grid > div + div { border-top: 1px solid #ffffff14; }
.managed-clan-page .recruitment-detail-grid > div:first-child { padding-top: 0; }
.managed-clan-page .recruitment-detail-grid > div:last-child { padding-bottom: 0; }
.managed-clan-page .recruitment-detail-grid h3 { margin: 0 0 4px; color: #e1e8e8; font-size: 14px; font-weight: 650; line-height: 22px; letter-spacing: 0; text-transform: none; }
.managed-clan-page .recruitment-detail-grid p { margin: 0; color: #b4c3c8; font-size: 14px; line-height: 23px; white-space: pre-line; overflow-wrap: anywhere; }
.managed-clan-page .profile-facts div { gap: 16px; }
.managed-clan-page .profile-facts dd { overflow-wrap: anywhere; }
/* Match the responsive banner proportions in the owner editor as well. */
.listing-form { grid-template-columns: minmax(0,1fr); }
.listing-form .form-actions { flex-wrap: wrap; }
.listing-form > *, .listing-form .form-field, .listing-form .choice-group { min-width: 0; }
.listing-form input, .listing-form select, .listing-form textarea { min-width: 0; max-width: 100%; }
.media-preview--banner { aspect-ratio: 1184 / 144; }
.media-editor-grid, .media-preview, .media-preview canvas { min-width: 0; max-width: 100%; }
[data-preview-mode="mobile"] .media-preview--banner { width: min(100%,350px); margin-inline: auto; aspect-ratio: 350 / 144; }
.banner-preview-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.banner-preview-switch button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: #0c1316; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.banner-preview-switch button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.banner-preview-switch button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (min-width: 640px) {
  .managed-profile-banner { height: auto; aspect-ratio: 1184 / 144; }
  .managed-profile-body { padding-inline: 28px; }
  .managed-profile-identity { flex-direction: row; align-items: flex-start; }
  .managed-profile-avatar { width: 144px; height: 144px; margin: -80px 0 0; }
  .managed-profile-copy { padding-top: 24px; }
}
@media (min-width: 768px) {
  .managed-profile-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .managed-profile-top { grid-template-columns: minmax(0,1fr) 384px; }
  .managed-profile-avatar { width: 160px; height: 160px; margin-top: -96px; }
  .managed-profile-copy { padding-top: 28px; }
  .managed-profile-hero .managed-profile-actions { width: 384px; justify-content: flex-end; padding-top: 28px; }
  .managed-profile-actions .button, .managed-profile-actions .community-action, .managed-profile-actions .text-action { min-height: 40px; }
}
@media (min-width: 1200px) {
  .managed-clan-page .profile-layout { grid-template-columns: minmax(0,1fr) 340px; }
}
@media (min-width: 640px) and (max-width: 1199px) {
  .managed-clan-page .profile-wrap { max-width: 900px; }
}
@media (max-width: 900px) {
  .media-editor-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 700px) {
  .listing-form .form-grid { grid-template-columns: minmax(0,1fr); }
}

/* Fixed pairs keep support controls together as labels and counts change. */
.site-frame .managed-profile-hero .managed-profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; width: 100%; max-width: 384px; }
.site-frame .managed-profile-actions :is(.button, .community-action, .text-action) { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px; font-size: 12px; line-height: 18px; text-align: center; }
.site-frame .managed-profile-actions .community-actions--profile { display: contents; }
.site-frame .managed-profile-actions :is(.button, .community-action, .text-action) { order: 0; }
.site-frame .managed-profile-actions .discord-button { order: 3; grid-column: 1 / -1; }
.site-frame .profile-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding-block: 12px; }
.site-frame .profile-facts dt { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.site-frame .profile-facts dd { min-width: 0; line-height: 1.5; }
.site-frame .profile-facts dt :is(svg, img) { flex: 0 0 20px; width: 20px; height: 20px; color: var(--accent); }
.site-frame .profile-facts dt svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-frame .profile-facts dt .discord-mark { fill: currentColor; stroke: none; }
.site-frame .managed-profile-actions .community-action { flex-wrap: wrap; }
@media (max-width: 380px) {
  .site-frame .managed-profile-actions .community-action { gap: 4px; padding-inline: 6px; font-size: 11px; }
}

/* Original component source (locally adapted to OSRS): Warframe Clan Finder / clan-panel-20261019.css */
/* OSRS Clan Finder reference: app/globals.css, app/site-theme.css and
   components/SiteHeader.module.css. WoW uses the same charcoal/gold system. */
:root {
  color-scheme: dark;
  --bg: #111219;
  --page-background: linear-gradient(180deg, #061014 0%, #04090c 42%, #020506 100%), repeating-linear-gradient(135deg, #ffffff03 0 1px, transparent 1px 24px), var(--bg);
  --surface: #22232c;
  --surface-raised: #292b35;
  --surface-soft: #30333f;
  --surface-inset: #1b1c25;
  --surface-hover: #30333f;
  --ink: #e6e6ee;
  --muted: #bebdca;
  --muted-bright: #bebdca;
  --brand-gold: #ffcf6f;
  --brand-gold-rgb: 255 207 111;
  --panel-edge: #3d3f4b;
  --panel-edge-hover: #686052;
  --accent: #ffcf6f;
  --accent-rgb: 255 207 111;
  --accent-border-subtle: #5b513c;
  --accent-strong: #ffd58f;
  /* Compatibility aliases keep older components on the shared accent palette. */
  --cyan: var(--accent);
  --cyan-strong: var(--accent-strong);
  --gold: #e9bf78;
  --on-accent: #21170c;
  --on-solid-accent: #21170c;
  --focus: var(--accent-strong);
  --line: #41434f;
  --line-strong: #ba995a;
  --panel-selected: #3a3c48;
  --accent-wash: rgb(var(--accent-rgb) / .12);
  --accent-glint: rgb(var(--accent-rgb) / .05);
  --feature-glow: #ffffff04;
  --panel-shade: linear-gradient(180deg, #15161d33, #15161d66);
  --panel-radius: 10px;
  --control-radius: 5px;
  --frame-edge: #101117;
  --panel-gradient: linear-gradient(180deg, #292b35, #21222b);
  --panel-shadow: inset 0 0 0 1px var(--panel-edge), inset 0 3px 0 #ffffff08, inset 0 -3px 0 #0003, 0 0 0 1px #30323d, 0 3px 6px #0008;
  --panel-hover-shadow: inset 0 0 0 1px var(--panel-edge-hover), inset 0 3px 0 #ffffff08, inset 0 -3px 0 #0003, 0 0 0 1px #30323d, 0 3px 6px #0008;
  --inset-gradient: linear-gradient(180deg, #171820, #1d1e27);
  --inset-shadow: inset 0 2px 4px #0009, 0 1px 0 #ffffff0d;
  --control-gradient: linear-gradient(180deg, #343743, #262832);
  --control-hover-gradient: linear-gradient(180deg, #3b3e4c, #2b2e39);
  --control-shadow: inset 0 0 0 1px #484b59, inset 0 2px 0 #ffffff0a, 0 2px 3px #0006;
  --control-hover-shadow: inset 0 0 0 1px var(--line-strong), inset 0 2px 0 #ffffff0a, 0 2px 3px #0006;
  --control-selected-gradient: linear-gradient(180deg, #1b1d25, #20222c);
  --control-selected-shadow: inset 0 0 0 1px var(--line-strong), inset 0 2px 3px #0004;
  --accent-gradient: linear-gradient(180deg, #ffca72, #edac46);
  --accent-hover-gradient: linear-gradient(180deg, #ffd58f, #f3b653);
  --accent-shadow: inset 0 0 0 1px #f6d098, inset 0 2px 0 #ffffff40, 0 2px 3px #0006;
  --nav-ink: #c8c7d4;
  --nav-accent: #edc582;
  --nav-accent-gradient: linear-gradient(180deg, #f6d18d, #e8b764);
  --nav-accent-hover-gradient: linear-gradient(180deg, #ffe0a7, #f1c57b);
  --nav-accent-shadow: inset 0 1px 0 #fff5, 0 2px 3px #0004;
  --menu-surface: #252732;
  --menu-line: #505361;
  --feature-gradient: var(--panel-gradient);
  --feature-overlay: linear-gradient(180deg, #15172026, #20222b80 40%, #21222bf5 80%, #21222b), linear-gradient(90deg, #151720b3, #15172026);
  --standing-gradient: linear-gradient(180deg, #2c2e39, #23252f);
  --standing-shadow: inset 0 0 0 1px #3b3e4a, inset 0 2px 0 #ffffff08, 0 2px 3px #0006;
}

body { background: var(--page-background); }
::selection { background: var(--accent); color: var(--on-solid-accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* Shared top navigation is styled in site-header-20261019.css. */

/* Shared hierarchy and warm accents from the OSRS reference. */
.finder-home .directory-hero { padding-block: 2.25rem 1.5rem; }
.finder-home .directory-hero h1 { font-weight: 500; letter-spacing: -.035em; }
.directory-heading :is(h1, h2), .spotlight-heading h2, .profile-panel > h2 {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.directory-heading h2 { font-size: 1.2rem; }
.site-frame :is(.directory-scope, .recruitment-evidence) { color: var(--muted-bright); }
.site-frame :is(.directory-scope a, .home-clan-help a) { color: var(--ink); }
.site-frame .directory-filters {
  border: 1px solid var(--frame-edge);
  border-radius: var(--panel-radius);
  padding: .85rem;
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow);
}
.directory-filters .filter-field {
  border-color: var(--frame-edge);
  border-radius: var(--control-radius);
  background: var(--inset-gradient);
  box-shadow: var(--inset-shadow);
}
.directory-filters .filter-field:focus-within {
  border-color: var(--accent);
  box-shadow: var(--inset-shadow), 0 0 0 1px var(--accent);
}
.directory-filters .filter-field__label {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.directory-filters input::placeholder { color: var(--muted); }
.site-frame :is(.filter-reset, .sort-control select, .view-switcher button, .button,
  .secondary-action, .clan-name-discord, .community-action, .compare-toggle,
  .clan-card__view, .managed-profile-actions .text-action, .discovery-link-grid a) {
  border-color: var(--frame-edge);
  border-radius: var(--control-radius);
  background: var(--control-gradient);
  color: var(--muted-bright);
  box-shadow: var(--control-shadow);
  clip-path: none;
  transition: color 140ms ease, box-shadow 140ms ease;
}
.site-frame :is(.filter-reset, .view-switcher button, .button, .secondary-action,
  .clan-name-discord, .community-action, .compare-toggle, .clan-card__view,
  .managed-profile-actions .text-action, .discovery-link-grid a):not(:disabled):is(:hover, :focus-visible) {
  border-color: var(--frame-edge);
  background: var(--control-hover-gradient);
  box-shadow: var(--control-hover-shadow);
  color: var(--ink);
}
.site-frame .primary-action, .site-frame .button.button--primary {
  border: 1px solid var(--frame-edge);
  border-radius: var(--control-radius);
  background: var(--accent-gradient);
  color: var(--on-accent);
  box-shadow: var(--accent-shadow);
}
.site-frame .primary-action:is(:hover, :focus-visible),
.site-frame .button.button--primary:is(:hover, :focus-visible) {
  background: var(--accent-hover-gradient);
  box-shadow: var(--accent-shadow);
  color: var(--on-accent);
}
.site-frame :is(.view-switcher button, .compare-toggle, .community-action)[aria-pressed="true"] {
  border-color: var(--frame-edge);
  background: var(--control-selected-gradient);
  box-shadow: var(--control-selected-shadow);
  color: var(--accent-strong);
}

/* Preserve uploaded artwork and status meaning while unifying shared surfaces. */
.site-frame :is(.clan-card, .profile-panel, .content-panel, .indexed-profile,
  .spotlight-disclosure, .spotlight-feature, .spotlight-race, .guide-card,
  .discovery-hero, .managed-profile-hero, .recruit-card, .submission-gate,
  .analytics-panel, .analytics-metric, .comparison-clan, .form-section, .media-editor,
  .account-panel, .faq-search, .claim-context, .clan-board) {
  border-color: var(--frame-edge);
  border-radius: var(--panel-radius);
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow);
}
.site-frame .clan-card:hover { border-color: var(--frame-edge); box-shadow: var(--panel-hover-shadow); }
.site-frame :is(.clan-card__banner, .managed-profile-banner):not(:has(img)) { background: var(--surface-raised); }
.site-frame div.clan-sigil.clan-initials {
  border-color: var(--frame-edge);
  border-radius: var(--control-radius);
  background: var(--inset-gradient);
  box-shadow: var(--inset-shadow);
  color: var(--muted-bright);
}
.site-frame :is(.clan-card__summary, .clan-card__facts dt) { color: var(--muted); }
.site-frame :is(.clan-card__facts dd, .hero-stats dt) { color: var(--muted-bright); }
.site-frame :is(.tag-list li, .community-actions, .managed-profile-meta > div,
  .managed-profile-stats > div, .managed-stat-icon) {
  border-color: var(--frame-edge);
  border-radius: var(--control-radius);
  background: var(--inset-gradient);
  box-shadow: var(--inset-shadow);
  color: var(--muted-bright);
}
.site-frame .managed-profile-avatar { border-color: var(--line-strong); box-shadow: none; }

/* Compact clan status marks; accessible labels retain the ownership distinction. */
.listing-status { display: inline-flex; align-items: center; vertical-align: middle; }
.site-frame .listing-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: .125rem;
  border: 0;
  background: none;
  color: var(--accent);
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}
.listing-badge svg { display: block; width: 100%; height: 100%; fill: none; }
.listing-badge__frame { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 1.3; stroke-linejoin: round; }
.listing-badge__check { stroke: var(--accent-strong); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.listing-badge--verified .listing-badge__frame { fill: var(--accent); stroke: var(--accent-strong); }
.listing-badge--verified .listing-badge__check { stroke: var(--on-solid-accent); }
.managed-profile-title .listing-badge { width: 1.5rem; height: 1.5rem; }
.listing-badge:is(:hover, :focus-visible) .listing-badge__frame { stroke: var(--accent-strong); }
.clan-tooltip:not([hidden]) {
  display: block;
  position: fixed;
  z-index: 100;
  width: min(18rem, calc(100vw - 1.5rem));
  max-width: none;
  margin: 0;
  padding: .75rem .9rem;
  border: 1px solid var(--menu-line);
  border-radius: var(--control-radius);
  background: var(--menu-surface);
  color: var(--muted-bright);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 .5rem 1.5rem #0006;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  overflow-wrap: anywhere;
  pointer-events: auto;
}
.clan-tooltip > strong { display: block; margin-bottom: .3rem; color: var(--accent-strong); font-size: .82rem; font-weight: 600; }
.clan-tooltip > span { display: block; color: var(--muted-bright); }
.clan-tooltip[hidden] { display: none !important; }

.site-frame :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  border-radius: var(--control-radius);
  accent-color: var(--accent);
}
.site-frame :is(.form-field, .recruit-filters, .analytics-toolbar) :is(input, select, textarea) {
  border-color: var(--frame-edge);
  background: var(--inset-gradient);
  box-shadow: var(--inset-shadow);
  color: var(--ink);
}
.site-footer { border-color: var(--frame-edge); background: linear-gradient(180deg, #21222b, #171820); box-shadow: inset 0 1px 0 #3d3f4b; }
.site-footer a:hover { color: var(--accent-strong); }

/* Carry the panel palette through profiles, recruitment and editorial pages. */
.site-frame :is(.managed-profile-title h1, .indexed-profile h1,
  .discovery-links__heading h2, .recruit-section-heading h2, .form-section h2) { color: var(--accent); }
.site-frame :is(.managed-profile-summary, .profile-panel__copy,
  .recruitment-detail-grid p) { color: var(--muted-bright); }
.site-frame :is(.managed-profile-meta dt, .managed-profile-stats dt) { color: var(--muted); }
.site-frame .managed-stat-icon { color: var(--accent); }
.site-frame :is(.comparison-empty, .comparison-value, .clan-board__signin,
  .board-post, .faq-item) {
  border-color: var(--line);
  background: var(--inset-gradient);
  border-radius: var(--control-radius);
}
.site-frame :is(.comparison-corner, .comparison-label) { background: var(--surface-raised); color: var(--accent); }
.site-frame .managed-profile-actions :is(.button, .community-action, .text-action) {
  border-color: var(--frame-edge);
  border-radius: var(--control-radius);
  background: var(--control-gradient);
  box-shadow: var(--control-shadow);
  color: var(--muted-bright);
}
.site-frame .managed-profile-actions :is(.button, .community-action, .text-action):is(:hover, :focus-visible, [aria-pressed="true"]) {
  border-color: var(--frame-edge);
  background: var(--control-hover-gradient);
  box-shadow: var(--control-hover-shadow);
  color: var(--ink);
}
.community-toast, .compare-toast { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }

/* Authentication is inserted outside the site frame by the account client. */
.auth-dialog, .report-dialog, .board-report-dialog, .recruitment-dialog {
  border-color: var(--frame-edge);
  border-radius: var(--panel-radius);
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow), 0 16px 48px #0009;
}
.auth-dialog__header { border-color: var(--line); background: #15161d33; }
.auth-dialog :is(input, button, .auth-tabs) { border-radius: var(--control-radius); }
.auth-dialog :is(input, .auth-tabs) { border-color: var(--frame-edge); background: var(--inset-gradient); box-shadow: var(--inset-shadow); }
.auth-dialog .auth-close { border-color: var(--frame-edge); background: var(--control-gradient); box-shadow: var(--control-shadow); }
.auth-dialog input:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.auth-dialog input::placeholder,
.site-frame :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
.auth-dialog .auth-tabs button.is-active { background: var(--control-gradient); box-shadow: var(--control-shadow); color: var(--accent-strong); }
.auth-dialog .auth-submit { border-color: var(--frame-edge); background: var(--accent-gradient); box-shadow: var(--accent-shadow); color: var(--on-accent); }
.auth-dialog .auth-submit:is(:hover, :focus-visible) { background: var(--accent-hover-gradient); }
.auth-dialog :is(.auth-switch button, .auth-alternative button) { color: var(--ink); }
.auth-disclosure { border-color: var(--frame-edge); border-radius: var(--control-radius); background: var(--inset-gradient); box-shadow: var(--inset-shadow); color: var(--muted); }

/* Older page components share the palette, including their secondary text and controls. */
.site-frame :is(.directory-filters input, .directory-filters select) { color: var(--ink); }
.site-frame select :is(option, optgroup) { background: var(--surface); color: var(--ink); }
.site-frame .search-icon { stroke: var(--muted); }
.site-frame .select-chevron { stroke: var(--accent); }
.site-frame .directory-toolbar p span { color: var(--muted); }
.site-frame .directory-pagination a { border-color: var(--line); }
.site-frame .directory-pagination a:is([aria-current], :hover, :focus-visible) { border-color: var(--line-strong); background: var(--control-selected-gradient); color: var(--accent-strong); }
.site-frame :is(.site-footer, .breadcrumbs, .profile-note, .profile-facts dt,
  .submission-steps span, .listing-activity-values dt, .listing-activity-note,
  .analytics-metric dt, .analytics-metric p, .analytics-panel p, .analytics-table caption,
  .analytics-period, .faq-search [role="status"], .faq-review, .claim-guide p,
  .account-form small, .account-panel .account-muted) { color: var(--muted); }
.site-frame :is(.breadcrumbs a, .profile-facts dd, .submission-intro > p:last-of-type,
  .dashboard-heading > div > p:last-child, .account-panel p) { color: var(--muted-bright); }
.site-frame .site-footer .brand__text strong { color: var(--ink); }
.site-frame .site-footer .brand__text small { color: var(--accent); }
.site-frame .community-action strong { color: inherit; }
.site-frame :is(.listing-activity a, .profile-status .listing-state--managed) { color: var(--accent-strong); }
.site-frame .profile-status .listing-state { color: var(--muted-bright); }
.site-frame .account-portrait { background: var(--surface-soft); }
.site-frame .account-notice { border-color: var(--line-strong); background: var(--panel-selected); }
.site-frame :is(.faq-search, .badge-tool, .account-form, .claim-guide) :is(input, select, textarea),
.site-frame :is(#claim-clan, #claim-message) { border-color: var(--line); background: var(--inset-gradient); color: var(--ink); }
.site-frame .faq-search button { border-color: var(--frame-edge); background: var(--control-gradient); box-shadow: var(--control-shadow); color: var(--muted-bright); }
.site-frame .faq-search button:hover { background: var(--control-hover-gradient); }
.site-frame :is(#faq-empty, .analytics-table th, .analytics-table td, .analytics-empty) { border-color: var(--line); }
.site-frame :is(.claim-guide strong, #claim-copy) { color: var(--ink); }
.site-frame .claim-guide :is(a, button, textarea, select):focus-visible { outline-color: var(--focus); }
.site-frame .analytics-chart line { stroke: var(--line); }
.site-frame .analytics-chart rect { fill: var(--accent); }
.auth-dialog :is(.auth-dialog__header p, .auth-close, .auth-back, .auth-alternative, .auth-switch, .auth-tabs button) { color: var(--muted); }
.auth-dialog :is(.auth-dialog__header h2, .auth-form input) { color: var(--ink); }
.auth-dialog .auth-form label { color: var(--muted-bright); }
.auth-dialog .auth-back:hover { background: var(--surface-hover); color: var(--ink); }
.auth-toast { background: var(--surface); color: var(--ink); }

/* Native modal keeps the page inert while email and Discord sign-in are open. */
dialog.auth-overlay {
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 1rem;
  border: 0;
  overflow: hidden;
  background: transparent;
  backdrop-filter: none;
  color: var(--ink);
}
dialog.auth-overlay:not([open]) { display: none; }
dialog.auth-overlay::backdrop { background: #090a10cc; backdrop-filter: blur(4px); }
.auth-overlay .auth-dialog {
  --panel-radius: 8px;
  --control-radius: 6px;
  min-height: 0;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 9rem 1rem;
  scrollbar-color: var(--line) var(--surface);
}
.auth-dialog[data-auth-view="discord"] { min-height: 360px; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand img { flex: 0 0 auto; width: 42px; height: 48px; object-fit: contain; }
.auth-overlay .auth-dialog__header { position: sticky; top: 0; z-index: 1; background: var(--surface-raised); }
.auth-dialog .auth-close { width: 44px; height: 44px; color: var(--muted-bright); }
.auth-dialog .auth-close:hover { color: var(--ink); background: var(--control-hover-gradient); }
.auth-dialog .auth-tabs button {
  min-height: 44px;
  padding: .5rem;
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
}
.auth-dialog .auth-email-nav { gap: .5rem; margin-bottom: 1.25rem; }
.auth-dialog .auth-tabs { margin: 0; }
.auth-dialog .auth-back { display: grid; place-items: center; width: 44px; height: 44px; }
.auth-back svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-field { display: grid; gap: .4rem; min-width: 0; }
.auth-dialog .auth-form label { font-size: .875rem; }
.auth-dialog .auth-form input {
  min-width: 0;
  height: 48px;
  border-color: var(--line);
  font-size: 16px;
  font-weight: 400;
}
.auth-field small, .auth-account-note, .auth-progress, .auth-policy {
  margin: 0;
  color: var(--muted-bright);
  font-size: .8rem;
  line-height: 1.55;
}
.auth-password-field { display: flex; align-items: stretch; gap: .5rem; }
.auth-password-field input { flex: 1; }
.auth-dialog .auth-password-toggle {
  flex: 0 0 60px;
  min-height: 44px;
  padding: .5rem;
  border: 1px solid var(--frame-edge);
  background: var(--control-gradient);
  box-shadow: var(--control-shadow);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 600;
}
.auth-dialog .auth-password-toggle:hover:not(:disabled) { background: var(--control-hover-gradient); }
.auth-dialog :is(button, input, .auth-error):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.auth-dialog input:focus { border-color: var(--line-strong); box-shadow: var(--inset-shadow); }
.auth-dialog input[aria-invalid="true"] { border-color: #ed9292; }
.auth-field-error { color: #ffb4b4; font-size: .8rem; line-height: 1.5; }
.auth-dialog .auth-error { font-size: .85rem; font-weight: 500; }
.auth-dialog .auth-submit { min-height: 48px; font-size: .95rem; }
.auth-account-note { margin-top: .85rem; text-align: center; }
.auth-dialog :is(.auth-switch, .auth-alternative) { margin-top: .75rem; font-size: .875rem; }
.auth-dialog :is(.auth-switch, .auth-alternative) button { min-height: 44px; padding-inline: .25rem; color: var(--accent-strong); }
.auth-dialog .auth-disclosure { margin-top: 1rem; font-size: .75rem; line-height: 1.65; color: var(--muted-bright); }
.auth-policy { margin-top: .75rem; text-align: center; }
.auth-policy a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.auth-dialog .discord-auth-button {
  min-height: 48px;
  border-color: #5865f2;
  background: #5865f2;
  box-shadow: 0 2px 3px #0004;
  color: #fff;
  font-size: .875rem;
}
.auth-dialog .discord-auth-button:hover:not(:disabled) { border-color: #4752c4; background: #4752c4; }
.auth-dialog :is(button, input):disabled { cursor: wait; opacity: .65; }
.auth-progress { text-align: center; }
.auth-discord-option .auth-progress:not([hidden]) { margin-top: .75rem; }
.auth-dialog [hidden] { display: none; }

@media (max-width: 700px) {
  .finder-home .directory-hero { padding-block: 1.5rem; }
  .directory-heading h2 { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-frame :is(.button, .primary-action, .secondary-action, .community-action,
    .compare-toggle, .filter-reset, .view-switcher button, .sort-select__trigger,
    .clan-name-discord, .clan-card__view, .managed-profile-actions .text-action,
    .discovery-link-grid a) { transition: none; }
}

/* Original component source (locally adapted to OSRS): Warframe Clan Finder / directory-rows-20261019.css */
/* Directory panels and responsive list/grid layouts. */
body {
  background: var(--page-background);
  background-attachment: scroll;
}
.directory-heading :is(h1, h2),
.site-frame main .eyebrow, .profile-panel > h2 { color: var(--accent); }
.site-frame :is(.primary-action, .secondary-action) { min-height: 2.5rem; }

/* Keep discovery controls close to the first results. */
.finder-home .directory-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.5rem;
}
.finder-home .directory-hero h1 { font-size: clamp(1.65rem, 3vw, 2rem); }
.finder-home .directory-hero__content > p { max-width: 48rem; margin-top: .5rem; font-size: .85rem; line-height: 1.55; }
.finder-home .hero-actions { display: none; }
.finder-home .hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: center;
  width: 24rem;
  max-width: 100%;
  gap: 0;
  margin: 0;
  padding: .85rem 0;
  border: 1px solid var(--frame-edge);
  border-radius: var(--panel-radius);
  background: var(--inset-gradient);
  box-shadow: var(--inset-shadow);
}
.finder-home .hero-stats div {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  min-width: 0;
  gap: .4rem;
  padding: 0 .5rem;
  text-align: center;
}
.finder-home .hero-stats div + div { border-left: 1px solid var(--line); }
.finder-home .hero-stats dd { grid-row: 1; margin: 0; font-size: 1.4rem; line-height: 1.2; color: var(--accent); }
.finder-home .hero-stats dt { grid-row: 2; order: 0; max-width: 8rem; margin-inline: auto; font-size: .7rem; line-height: 1.4; }
.finder-home .directory, .directory-page .directory { padding-top: 1.25rem; }
.site-frame .directory-heading {
  position: relative;
  display: block;
  padding: 1rem;
  border: 1px solid var(--frame-edge);
  border-radius: var(--panel-radius);
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow);
}
.directory-heading__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding-right: 10rem; }
.directory-heading__identity { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.directory-heading__icon { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.site-frame .directory-heading :is(h1, h2) { max-width: none; margin: 0; color: var(--ink); font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; text-transform: none; }
.site-frame .directory-scope { margin: .35rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.directory-tabs { display: inline-flex; flex: 0 0 auto; gap: .2rem; padding: .2rem; border: 1px solid var(--frame-edge); border-radius: var(--control-radius); background: var(--inset-gradient); box-shadow: var(--inset-shadow); }
.directory-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .5rem .85rem; border: 1px solid transparent; border-radius: var(--control-radius); color: var(--muted-bright); font-size: .75rem; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.directory-tabs a.is-active { border-color: var(--frame-edge); background: var(--control-gradient); box-shadow: var(--control-shadow); color: var(--accent-strong); }
.directory-tabs a:is(:hover, :focus-visible) { background: var(--control-hover-gradient); color: var(--ink); }
.site-frame .directory-help { max-width: none; margin: 0; font-size: .75rem; }
.site-frame .directory-help > summary {
  position: absolute;
  top: 1.2rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  color: var(--muted-bright);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.directory-help > summary::-webkit-details-marker { display: none; }
.directory-help > summary::marker { content: ""; }
.directory-help > summary svg { flex: 0 0 1rem; width: 1rem; height: 1rem; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.directory-help__toggle { width: .4rem; height: .4rem; margin: -.2rem .1rem 0 .25rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.directory-help[open] .directory-help__toggle { transform: rotate(225deg); margin-top: .2rem; }
.site-frame .directory-help > summary:is(:hover, :focus-visible),
.site-frame .directory-help[open] > summary { border-color: var(--line-strong); background: var(--surface-raised); color: var(--accent-strong); }
.directory-help__panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.directory-help__definitions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.directory-help__definitions > div + div { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.directory-help__definitions h3 { margin: 0 0 .4rem; color: var(--accent); font-size: .8rem; font-weight: 600; }
.site-frame .directory-help p { margin: 0; color: var(--muted-bright); font-size: .75rem; line-height: 1.6; }
.directory-help__definitions a { display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; min-height: 1.75rem; color: var(--accent-strong); text-decoration: underline; text-underline-offset: .2em; }
.site-frame .directory-help .directory-help__note { margin-top: 1rem; padding: .65rem .8rem; border-left: 2px solid var(--line-strong); background: var(--surface-inset); color: var(--muted); }
@media (max-width: 1000px) {
  .directory-heading__bar { align-items: flex-start; flex-direction: column; padding-right: 0; gap: .85rem; }
  .directory-heading__identity { padding-right: 0; }
  .site-frame .directory-help > summary { top: 4.9rem; }
}
@media (max-width: 600px) {
  .site-frame .directory-heading { padding: .85rem; }
  .directory-heading__bar { gap: .75rem; }
  .directory-heading__identity { align-items: flex-start; gap: .6rem; }
  .directory-heading__icon { flex-basis: 1.2rem; width: 1.2rem; height: 1.2rem; margin-top: .15rem; }
  .site-frame .directory-heading :is(h1, h2) { font-size: 1rem; }
  .directory-tabs { width: 100%; }
  .directory-tabs a { flex: 1; min-height: 2.75rem; }
  .site-frame .directory-help { margin-top: .5rem; }
  .site-frame .directory-help > summary { position: static; min-height: 2.75rem; padding-left: 0; }
  .directory-help__panel { margin-top: .35rem; padding-top: .8rem; }
  .directory-help__definitions { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .directory-help__definitions > div + div { padding: .85rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .directory-help__definitions a { min-height: 2.75rem; }
}
.site-frame .directory-filters { margin-top: .75rem; padding-block: .85rem; gap: .5rem; }
.directory-filters .filter-field { min-height: 3.25rem; padding: .45rem .65rem .3rem; }
.directory-filters :is(input, select) { font-size: .85rem; }
.directory-filters .filter-field__label { font-size: .6rem; }
.directory-filters .more-filters > summary { min-height: 2.25rem; padding-block: .6rem; font-size: .75rem; }
.directory-filters .filter-reset { min-height: 2.25rem; margin-top: -2.75rem; padding-block: .4rem; font-size: .75rem; }
.directory-filters:has(.more-filters[open]) .filter-reset { margin-top: 0; }
.directory-toolbar { margin-block: .85rem; padding: .75rem .85rem; border: 1px solid var(--frame-edge); border-radius: var(--panel-radius); background: var(--panel-gradient); box-shadow: var(--panel-shadow); }
.directory-toolbar p { font-size: .75rem; }
.directory-toolbar :is(.sort-control select, .view-switcher button) { min-height: 2.25rem; }
.view-switcher { gap: .2rem; padding: .2rem; border: 1px solid var(--frame-edge); border-radius: var(--control-radius); background: var(--inset-gradient); box-shadow: var(--inset-shadow); }
.site-frame .directory-toolbar .view-switcher button { border-color: transparent; background: transparent; box-shadow: none; }
.site-frame .directory-toolbar .view-switcher button:is(:hover, :focus-visible) { color: var(--ink); background: #ffffff06; }
.site-frame .directory-toolbar .view-switcher button[aria-pressed="true"] { border-color: var(--frame-edge); background: var(--control-gradient); box-shadow: var(--control-shadow); color: var(--accent-strong); }

/* A compact in-page sort menu with stationary labels and a clear selected row. */
.sort-select { position: relative; width: 11.75rem; min-width: 0; flex: 1; font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sort-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: .6rem .8rem;
  border: 1px solid var(--frame-edge);
  border-radius: var(--control-radius);
  background: var(--control-gradient);
  box-shadow: var(--control-shadow);
  color: var(--muted-bright);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.sort-select__trigger svg { flex: 0 0 1rem; width: 1rem; height: 1rem; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sort-select__trigger:is(:hover, [aria-expanded="true"]) { background: var(--control-hover-gradient); box-shadow: var(--control-hover-shadow); color: var(--ink); }
.sort-select__options {
  position: absolute;
  z-index: 30;
  top: calc(100% + .4rem);
  right: 0;
  width: 100%;
  min-width: 11.75rem;
  margin: 0;
  padding: .3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid var(--menu-line);
  border-radius: var(--panel-radius);
  background: var(--menu-surface);
  box-shadow: var(--panel-shadow), 0 .75rem 2rem #0006;
  scrollbar-color: var(--line-strong) var(--surface);
}
.sort-select[data-placement="above"] .sort-select__options { top: auto; bottom: calc(100% + .4rem); }
.sort-select__option { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: .6rem .65rem; border: 1px solid transparent; border-radius: var(--control-radius); color: var(--muted-bright); cursor: pointer; }
.sort-select__option::before { content: ""; flex: 0 0 1rem; height: 1rem; background: currentColor; clip-path: polygon(10% 49%, 23% 36%, 42% 55%, 77% 20%, 90% 33%, 42% 81%); visibility: hidden; }
.sort-select__option[aria-selected="true"] { color: var(--accent-strong); }
.sort-select__option[aria-selected="true"]::before { visibility: visible; }
.sort-select__option:is(:hover, .is-active) { border-color: var(--line-strong); background: var(--panel-selected); color: var(--accent-strong); }
.sort-select__options[hidden], .sort-control select[hidden] { display: none; }

/* Full-width listings share the identity / actions / stats layout of a clan roster. */
.site-frame .clan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.site-frame .clan-grid .clan-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--frame-edge);
  border-radius: var(--panel-radius);
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow);
  transition: box-shadow 140ms ease;
}
.site-frame .clan-grid .clan-card:is(:hover, :focus-within) { border-color: var(--frame-edge); box-shadow: var(--panel-hover-shadow); }
.site-frame .clan-grid .clan-card::before,
.site-frame .clan-grid .clan-card::after { content: none; }
.site-frame .clan-grid .clan-card__banner { display: none; }
.site-frame .clan-grid .clan-card__body { display: block; min-width: 0; padding: 1.15rem 1.25rem; }
.site-frame .clan-grid .clan-card__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1.5rem; }
.site-frame .clan-grid .clan-card__top { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; }
.site-frame .clan-grid .clan-sigil {
  flex: 0 0 3.75rem;
  width: 3.75rem;
  height: 3.75rem;
  padding: 4px;
  border: 1px solid var(--frame-edge);
  border-radius: var(--control-radius);
  background: var(--inset-gradient);
  box-shadow: var(--inset-shadow);
  color: var(--accent-strong);
  font-size: 1.2rem;
}
.site-frame .clan-grid .clan-card__identity { display: block; min-width: 0; padding-top: .1rem; }
.site-frame .clan-grid .clan-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; min-width: 0; }
.site-frame .clan-grid .clan-sigil img { width: 100%; height: 100%; border-radius: var(--control-radius); object-fit: cover; }
.site-frame .clan-grid h3 { flex: 0 1 auto; margin: 0; font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; }
.site-frame .clan-grid h3 a { color: var(--ink); text-decoration: none; }
.site-frame .clan-grid h3 a:hover { color: var(--accent-strong); }
.site-frame .clan-grid .card-index-state { margin: 0; }
.site-frame .clan-grid .listing-state { font-size: .56rem; letter-spacing: .055em; color: var(--muted); }
.site-frame .clan-grid .listing-state--managed { color: var(--accent); }
.site-frame .clan-grid .clan-card__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: .45rem 0 0;
  color: var(--muted-bright);
  font-size: .8rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.site-frame .clan-grid .spotlight-state { display: inline-block; width: fit-content; margin: .35rem 0 0; font-size: .65rem; }
.site-frame .clan-grid .clan-card__action-rail { display: grid; grid-template-columns: minmax(0, 1fr); justify-self: end; gap: .5rem; min-width: 0; width: auto; margin: 0; }
.site-frame .clan-grid .clan-card__primary-actions { display: flex; align-items: stretch; gap: .45rem; min-width: 0; }
.site-frame .clan-grid .community-actions { display: flex; order: 0; min-width: 0; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: .45rem; }
.site-frame .clan-grid :is(.community-action, .compare-toggle) {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: .4rem .65rem;
  border: 1px solid var(--frame-edge);
  border-radius: var(--control-radius);
  background: var(--control-gradient);
  box-shadow: var(--control-shadow);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.site-frame .clan-grid .community-action span:not(.sr-only) { display: inline; }
.site-frame .clan-grid .community-action strong { position: static; min-width: 1.2rem; margin: 0; padding: .15rem .25rem; border-radius: var(--control-radius); background: #0003; color: inherit; font-size: .7rem; line-height: 1.25; }
.site-frame .clan-grid .community-action svg { flex: 0 0 1rem; width: 1rem; height: 1rem; color: var(--accent); }
.site-frame .clan-grid .compare-toggle::before { content: "+"; flex: 0 0 1rem; width: 1rem; text-align: center; color: var(--accent); font-size: 1.2rem; font-weight: 400; line-height: .8; }
.site-frame .clan-grid .compare-toggle[aria-pressed="true"]::before { content: "✓"; font-size: .9rem; }
.site-frame .clan-grid .clan-card__links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; min-width: 0; }
.site-frame .clan-grid .clan-card__links > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: .45rem .65rem;
  border: 1px solid var(--frame-edge);
  border-radius: var(--control-radius);
  background: var(--inset-gradient);
  box-shadow: var(--inset-shadow);
  color: var(--muted-bright);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.site-frame .clan-grid .clan-card__links .clan-card__view { background: var(--control-gradient); box-shadow: var(--control-shadow); color: var(--accent-strong); font-weight: 700; }
.site-frame .clan-grid .clan-card__links svg { flex: 0 0 .95rem; width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-frame .clan-grid .clan-card__links .discord-mark { fill: currentColor; stroke: none; }

/* The whole control responds, with distinct hover, keyboard and selected states. */
.site-frame .clan-grid .clan-card__action-rail :is(button, a) {
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms ease, box-shadow 140ms ease;
}
.site-frame .clan-grid .clan-card__action-rail :is(button, a):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--surface-inset);
  text-decoration: none;
}
.site-frame .clan-grid :is(.community-action, .compare-toggle)[aria-pressed="true"] {
  border-color: var(--frame-edge);
  background: var(--control-selected-gradient);
  color: var(--accent-strong);
  box-shadow: var(--control-selected-shadow);
}
.site-frame .clan-grid .community-action[aria-pressed="true"] svg,
.site-frame .clan-grid .compare-toggle[aria-pressed="true"]::before { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .site-frame .clan-grid .clan-card__action-rail :is(button, a):not(:disabled):hover {
    border-color: var(--frame-edge);
    background: var(--control-hover-gradient);
    box-shadow: var(--control-hover-shadow);
    color: var(--ink);
    text-decoration: none;
  }
  .site-frame .clan-grid .clan-card__action-rail [aria-pressed="true"]:not(:disabled):hover {
    background: var(--control-selected-gradient);
    box-shadow: var(--control-selected-shadow);
    color: var(--ink);
  }
}
.site-frame .clan-grid .clan-card__action-rail :is(button, a):not(:disabled):active {
  box-shadow: var(--inset-shadow);
  filter: brightness(.92);
}
.site-frame .clan-grid .clan-card__action-rail button:disabled { cursor: wait; opacity: .5; box-shadow: none; }

.site-frame .clan-grid .clan-card__footer { display: flex; flex-direction: column; align-items: stretch; gap: .65rem; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.site-frame .clan-grid .clan-card__tags { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.site-frame .clan-grid .tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.site-frame .clan-grid .tag-list:empty { display: none; }
.site-frame .clan-grid .tag-list li { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .55rem; border: 1px solid var(--frame-edge); border-radius: var(--control-radius); background: var(--inset-gradient); box-shadow: var(--inset-shadow); color: var(--muted-bright); font-size: .65rem; font-weight: 500; letter-spacing: .015em; }
.site-frame .clan-grid .tag-list li::before { content: ""; flex: 0 0 .3rem; width: .3rem; height: .3rem; border: 1px solid var(--accent); transform: rotate(45deg); }
.site-frame .clan-grid .recruitment-evidence { margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.site-frame .clan-grid .listing-icon { flex: 0 0 1rem; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-frame .clan-grid .clan-card__facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: .5rem; width: 100%; margin: 0; padding: 0; border: 0; }
.site-frame .clan-grid .clan-card__facts > div { min-width: 0; padding: .65rem .75rem; border: 1px solid var(--frame-edge); border-radius: var(--control-radius); background: var(--inset-gradient); box-shadow: var(--inset-shadow); }
.site-frame .clan-grid .clan-card__facts dt { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .68rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.site-frame .clan-grid .clan-card__facts dt .listing-icon { color: var(--accent); }
.site-frame .clan-grid .clan-card__facts dd { margin: .4rem 0 0; color: var(--ink); font-size: .85rem; font-weight: 600; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.site-frame .clan-grid .clan-card__metadata { display: flex; align-items: stretch; margin: 0; padding: .6rem .2rem; border: 1px solid var(--frame-edge); border-radius: var(--control-radius); background: var(--inset-gradient); box-shadow: var(--inset-shadow); }
.site-frame .clan-grid .clan-card__metadata > div { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-start; gap: .4rem; min-width: 0; padding: .1rem .65rem; border-right: 1px solid var(--line); }
.site-frame .clan-grid .clan-card__metadata > div:last-child { border-right: 0; }
.site-frame .clan-grid .clan-card__metadata dt { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .65rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.site-frame .clan-grid .clan-card__metadata dd { margin: 0; color: var(--muted-bright); font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.site-frame .clan-grid .clan-card__metadata .clan-card__date { flex: 1.5 1 0; flex-wrap: wrap; gap: .1rem .4rem; }
.site-frame .clan-grid .clan-card__date time { white-space: nowrap; }
.site-frame .clan-grid .alliance-badge { position: relative; inset: auto; }
.site-frame .clan-grid .alliance-badge__button { width: 1.75rem; height: 1.75rem; border-color: var(--frame-edge); border-radius: var(--control-radius); background: var(--inset-gradient); box-shadow: var(--inset-shadow); }
.site-frame .clan-grid .alliance-badge__button img { width: 1rem; height: 1rem; }

/* The optional grid uses the same panels, with actions below the identity. */
.site-frame .clan-grid[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-frame .clan-grid[data-view="grid"] .clan-card__header { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.site-frame .clan-grid[data-view="grid"] .clan-card__action-rail { justify-self: stretch; }
.site-frame .clan-grid[data-view="grid"] .clan-card__primary-actions { justify-content: flex-start; }
.site-frame .clan-grid[data-view="grid"] .clan-card__links { justify-content: flex-start; }
.site-frame .clan-grid[data-view="grid"] .clan-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-frame .clan-grid[data-view="grid"] .clan-card__facts > div:last-child { grid-column: 1 / -1; }
.site-frame .clan-grid[data-view="grid"] .clan-card__metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 0; }
.site-frame .clan-grid[data-view="grid"] .clan-card__metadata > div:nth-child(even) { border-right: 0; }
.site-frame .clan-grid[data-view="grid"] .clan-card__date { grid-column: 1 / -1; }
.site-frame .clan-grid[data-view="grid"] .clan-card__banner { display: block; height: 5rem; margin: 2px 2px 0; border-radius: var(--panel-radius); overflow: hidden; }

@media (max-width: 1050px) {
  .site-frame .clan-grid .clan-card__header { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .site-frame .clan-grid .clan-card__action-rail { display: flex; justify-content: space-between; flex-wrap: wrap; justify-self: stretch; gap: .4rem 1rem; }
  .site-frame .clan-grid .clan-card__links { justify-content: flex-start; }
  .site-frame .clan-grid .clan-card__metadata .clan-card__date { flex: 1.2 1 0; }
}
@media (max-width: 900px) {
  .finder-home .directory-hero { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding-block: 1.1rem; }
  .finder-home .hero-stats { width: 100%; }
  .site-frame .clan-grid[data-view="grid"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .site-frame .clan-grid .clan-card__body { padding: .9rem; }
  .site-frame .clan-grid .clan-sigil { flex-basis: 3rem; width: 3rem; height: 3rem; font-size: 1rem; }
  .site-frame .clan-grid h3 { font-size: 1.1rem; }
  .site-frame .clan-grid .clan-card__action-rail { display: grid; }
  .site-frame .clan-grid .clan-card__primary-actions { gap: .35rem; }
  .site-frame .clan-grid .community-actions { flex: 1 1 auto; gap: .35rem; }
  .site-frame .clan-grid :is(.community-action, .compare-toggle) { flex: 1 1 auto; min-height: 2.75rem; padding: .35rem .4rem; gap: .3rem; font-size: .7rem; }
  .site-frame .clan-grid .community-action strong { min-width: .9rem; padding: .1rem .15rem; font-size: .65rem; }
  .site-frame .clan-grid .clan-card__links { justify-content: space-between; gap: .35rem; }
  .site-frame .clan-grid .clan-card__links > a { flex: 1 1 auto; min-height: 2.75rem; padding-inline: .35rem; gap: .25rem; }
  .site-frame .clan-grid .clan-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-frame .clan-grid .clan-card__facts > div:last-child { grid-column: 1 / -1; }
  .site-frame .clan-grid .clan-card__metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 0; }
  .site-frame .clan-grid .clan-card__metadata > div:nth-child(even) { border-right: 0; }
  .site-frame .clan-grid .clan-card__date { grid-column: 1 / -1; }
  .directory-toolbar :is(.sort-control select, .view-switcher button),
  .directory-filters .filter-reset, .directory-filters .more-filters > summary { min-height: 2.75rem; }
  .directory-filters .filter-reset { margin-top: -3.25rem; }
}
@media (max-width: 360px) {
  .site-frame .clan-grid .clan-card__body { padding: .75rem; }
  .site-frame .clan-grid :is(.community-action, .compare-toggle) { font-size: .65rem; gap: .2rem; padding-inline: .3rem; }
  .site-frame .clan-grid .community-action svg { flex-basis: .85rem; width: .85rem; height: .85rem; }
  .site-frame .clan-grid .clan-card__links .clan-card__view { flex-basis: 100%; }
}
@media (pointer: coarse) {
  .site-frame .clan-grid :is(.community-action, .compare-toggle, .clan-card__links > a) { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-frame .clan-grid .clan-card,
  .site-frame .clan-grid .clan-card__action-rail :is(button, a) { transition: none; }
}

/* Keep support actions together, with comparison and navigation aligned below. */
.site-frame .clan-grid .clan-card__action-rail { display: grid; width: 19rem; max-width: 100%; }
.site-frame .clan-grid .clan-card__primary-actions { display: block; }
.site-frame .clan-grid .community-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.site-frame .clan-grid .clan-card__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.site-frame .clan-grid .clan-card__links > * { order: 0; width: 100%; margin: 0; }
.site-frame .clan-grid .clan-card__links .compare-toggle { grid-column: 1; }
.site-frame .clan-grid .clan-card__links .clan-card__view { grid-column: 2; }
@media (max-width: 1050px) {
  .site-frame .clan-grid .clan-card__action-rail { width: 100%; }
}
.site-frame .clan-grid[data-view="grid"] .clan-card__action-rail { width: 100%; }

/* Original component source (locally adapted to OSRS): Warframe Clan Finder / site-header-20261019.css */
/* OSRS header layout and controls adapted for WoW navigation. */
.site-frame .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #101117;
  border-radius: 0;
  background: linear-gradient(180deg, #292b35, #21222b);
  box-shadow: inset 0 1px 0 #ffffff08, inset 0 -1px 0 #3d3f4b, 0 3px 8px #0005;
  font-family: Lato, Arial, Helvetica, sans-serif;
}
.site-header::before { display: none; }
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1600px;
  height: 64px;
  margin: 0 auto;
  padding: 0 24px;
}
.site-header .brand { display: flex; align-items: center; flex-shrink: 0; min-width: 0; gap: 10px; text-decoration: none; }
.site-header .brand__icon { display: block; flex-shrink: 0; width: 32px; height: 32px; object-fit: contain; }
.site-header .brand__text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.site-header .brand__text strong,
.site-header .brand__text small { display: inline; margin: 0; font-size: 18px; font-weight: 900; line-height: 26px; letter-spacing: -.025em; text-transform: none; }
.site-header .brand__text strong { color: #fff; }
.site-header .brand__text small { margin-left: 4px; color: var(--accent); }
.site-header .site-nav { display: flex; align-items: center; min-width: 0; height: 100%; gap: 0; }
.site-header .site-nav__group { display: flex; align-items: center; gap: 12px; }
.site-header__actions { display: flex; align-items: center; flex-shrink: 0; gap: 12px; margin-left: auto; }
.site-header .site-nav a,
.site-header__actions > a,
.site-header .mobile-nav > nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #c8c7d4;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.site-header .site-nav a::after,
.site-header .mobile-nav > nav a::after { content: none; }
.site-header__actions > a { padding-inline: 8px; }
.site-header .site-nav a:is(:hover, :focus-visible),
.site-header__actions > a:is(:hover, :focus-visible),
.site-header .mobile-nav > nav a:is(:hover, :focus-visible),
.site-header .mobile-nav > summary:hover { background: #343743; color: #f0efe8; }
.site-header .site-nav a[aria-current],
.site-header .mobile-nav > nav a[aria-current],
.site-header .mobile-nav[open] > summary {
  background: linear-gradient(180deg, #1b1d25, #20222c);
  box-shadow: inset 0 0 0 1px #41434f, inset 0 2px 3px #0004;
  color: var(--accent);
}
.site-header .nav-count { background: #30333f; color: var(--accent-strong); }
.site-header__actions > .header-list-clan {
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  background: var(--nav-accent-gradient);
  box-shadow: inset 0 1px 0 #fff5, 0 2px 3px #0004;
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 800;
}
.site-header__actions > .header-list-clan::before { content: "+"; display: inline-flex; justify-content: center; flex: 0 0 16px; width: 16px; font-size: 20px; font-weight: 400; line-height: 16px; }
.site-header__actions > .header-list-clan[data-manage-listing]::before { content: none; }
.site-header__actions > .header-list-clan:is(:hover, :focus-visible) { background: var(--nav-accent-hover-gradient); color: var(--on-accent); }
.header-list-clan__short { display: none; }
.site-header .auth-controls { display: flex; align-items: center; min-width: 0; gap: 8px; padding: 0; border: 0; }
.site-header .auth-header-button,
.site-header .account-menu > summary {
  height: 40px;
  min-height: 0;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #101117;
  border-radius: 6px;
  background: linear-gradient(180deg, #343743, #262832);
  box-shadow: inset 0 0 0 1px #484b59, inset 0 2px 0 #ffffff0a, 0 2px 3px #0005;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}
.site-header .auth-header-button[data-auth-open="login"] { width: 96px; }
.site-header .auth-header-button:is(:hover, :focus-visible),
.site-header .account-menu > summary:is(:hover, :focus-visible),
.site-header .account-menu[open] > summary {
  background: linear-gradient(180deg, #3b3e4c, #2b2e39);
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 2px 0 #ffffff0a, 0 2px 3px #0005;
}
.site-header .auth-login-icon { display: none; }
.site-header .auth-loading { width: 96px; height: 36px; border-radius: 6px; }
.site-header .account-menu > summary { gap: 8px; max-width: 160px; height: 36px; }
.site-header .account-menu > summary::after { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.site-header .account-menu[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.site-header .account-avatar { flex-shrink: 0; width: 24px; height: 24px; border: 0; background: #1b1c25; color: var(--accent); }
.site-header .account-name { font-size: 12px; }
.site-header .account-popover,
.site-header .mobile-nav > nav {
  border: 1px solid #101117;
  border-radius: 9px;
  background: linear-gradient(180deg, #292b35, #21222b);
  box-shadow: inset 0 0 0 1px #414450, inset 0 3px 0 #ffffff08, 0 8px 24px #0008;
}
.site-header .account-popover { max-width: calc(100vw - 24px); }
.site-header .account-popover :is(a, button) { border-radius: 6px; }
.site-header .account-popover :is(a, button):is(:hover, :focus-visible) { background: #343743; color: var(--accent); }
.site-header .mobile-nav { display: none; position: static; flex-shrink: 0; }
.site-header .mobile-nav > summary {
  display: grid;
  place-content: center;
  gap: 4px;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: #c8c7d4;
}
.site-header .mobile-nav > summary span { width: 21px; height: 2px; border-radius: 1px; background: currentColor; }
.site-header .mobile-nav[open] > summary span:first-child { transform: translateY(6px) rotate(45deg); }
.site-header .mobile-nav[open] > summary span:nth-child(2) { opacity: 0; }
.site-header .mobile-nav[open] > summary span:last-child { transform: translateY(-6px) rotate(-45deg); }
.site-header .mobile-nav > nav {
  top: calc(100% + 8px);
  left: 24px;
  right: 24px;
  z-index: 50;
  width: auto;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
}
.site-header .mobile-nav > nav a { display: flex; min-height: 48px; padding: 0 16px; font-weight: 600; }
.site-header .mobile-nav > nav hr { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid #414450; }
.site-header :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

@media (max-width: 1279px) {
  .site-header .site-nav,
  .site-header__actions > a:not(.header-list-clan) { display: none; }
  .site-header .mobile-nav { display: block; }
}
@media (max-width: 1023px) {
  .site-header__inner { gap: 16px; }
  .site-header .brand { flex-shrink: 1; }
  .site-header .brand__text strong,
  .site-header .brand__text small { font-size: 18px; line-height: 27px; }
  .site-header .auth-header-button { height: 44px; }
}
@media (max-width: 767px) {
  .site-header .auth-header-button[data-auth-open="login"] { width: 36px; height: 44px; padding: 0; }
  .site-header .auth-header-button[data-auth-open="login"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .site-header .auth-login-icon { display: block; width: 16px; height: 16px; }
  .site-header .auth-controls .auth-header-button--primary { display: none; }
  .site-header .auth-loading { width: 36px; }
}
@media (max-width: 639px) {
  .site-header__inner { gap: 8px; padding-inline: 12px; }
  .site-header .brand__icon { display: none; }
  .site-header .brand__text strong,
  .site-header .brand__text small { font-size: 15px; line-height: 22.5px; }
  .site-header__actions { gap: 6px; }
  .site-header__actions > .header-list-clan { padding-inline: 8px; }
  .header-list-clan__label { display: none; }
  .header-list-clan__short { display: inline; }
  .site-header .account-menu > summary { justify-content: center; width: 44px; height: 44px; padding: 0; }
  .site-header .account-name,
  .site-header .account-menu > summary::after { display: none; }
  .site-header .mobile-nav > nav { left: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .site-nav a,
  .site-header__actions > a,
  .site-header .mobile-nav > nav a { transition: none; }
}

/* OSRS account-menu spacing, grouping and gold accents. */
.site-header .account-menu { position:relative; display:flex; flex-shrink:0; align-items:center; }
.site-header .account-menu > summary .account-name { position:static; display:block; width:auto; height:auto; margin:0; padding:0; clip:auto; clip-path:none; }
.site-header .account-menu:not([open]) > .account-menu__panel { display:none; }
.site-header .account-menu__panel { position:absolute; top:calc(100% + 20px); right:0; z-index:50; display:flex; flex-direction:column; width:min(22rem,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 88px); overflow:hidden; padding:0; border:1px solid #444651; border-radius:14px; background:#252630; box-shadow:0 16px 48px #0006,0 4px 12px #0003; animation:account-menu-appear 140ms ease-out; }
.site-header .account-menu__identity { display:flex; flex-shrink:0; align-items:center; gap:12px; padding:20px 20px 16px; }
.site-header .account-menu__avatar { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:42px; height:42px; overflow:hidden; border:1px solid #edc58224; border-radius:12px; background:#edc5820a; color:var(--accent); }
.site-header .account-menu__avatar img { width:100%; height:100%; object-fit:cover; }
.site-header .account-menu__identity-copy { min-width:0; }
.site-header .account-menu__name { margin:0; overflow:hidden; color:#f2f1f5; font-size:14px; font-weight:700; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }
.site-header .account-menu__email { margin:2px 0 0; overflow:hidden; color:#aaaab9; font-size:12px; font-weight:400; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }
.site-header .account-menu__shortcuts { display:grid; flex-shrink:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 12px 16px; }
.site-header .account-menu__sections { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 12px; scrollbar-width:thin; scrollbar-color:#50515f transparent; }
.site-header .account-menu__section { padding:14px 0 12px; border-top:1px solid #ffffff0d; }
.site-header .account-menu__section-label { margin:0 10px 6px; color:#a4a4b3; font-size:10px; font-weight:600; letter-spacing:.1em; line-height:1.6; text-transform:uppercase; }
.site-header .account-menu__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 6px; }
.site-header .account-menu__list { display:grid; }
.site-header .account-menu__list:not(.account-menu__grid) { gap:2px; }
.site-header .account-menu__panel .account-menu__link { display:flex; min-width:0; min-height:42px; align-items:center; justify-content:flex-start; gap:10px; width:100%; margin:0; padding:10px; border:0; border-radius:7px; background:transparent; box-shadow:none; color:#dedee7; font-family:inherit; font-size:13px; font-weight:500; line-height:1.4; letter-spacing:0; text-align:left; text-transform:none; text-decoration:none; cursor:pointer; transition:background-color 140ms ease,color 140ms ease; }
.site-header .account-menu__shortcuts .account-menu__link { border:1px solid #ffffff09; background:#ffffff04; }
.site-header .account-menu__icon { display:flex; flex-shrink:0; color:#a4a4b4; }
.site-header .account-menu__icon svg { width:16px; height:16px; stroke-width:1.7; }
.site-header .account-menu__avatar .account-menu__icon { color:inherit; }
.site-header .account-menu__avatar svg { width:21px; height:21px; }
.site-header .account-avatar .account-menu__icon { color:inherit; }
.site-header .account-avatar svg { width:14px; height:14px; }
.site-header .account-menu__link-label { min-width:0; overflow-wrap:anywhere; }
.site-header .account-menu__panel .account-menu__link:is(:hover,:focus-visible) { background:#ffffff08; color:var(--accent-strong); }
.site-header .account-menu__link:is(:hover,:focus-visible) .account-menu__icon { color:inherit; }
.site-header .account-menu__panel .account-menu__link:focus-visible { outline:1px solid #93b8ff80; outline-offset:-1px; }
.site-header .account-menu__footer { display:grid; flex-shrink:0; grid-template-columns:1fr; gap:8px; padding:10px 12px; border-top:1px solid #ffffff0d; background:#00000012; }
.site-header .account-menu__panel .account-menu__signout { color:#aaaab9; }
.site-header .account-menu__count { display:inline-flex; min-width:18px; min-height:18px; align-items:center; justify-content:center; margin-left:4px; padding:0 4px; border-radius:9px; background:#edc58220; color:var(--accent-strong); font-size:11px; }
.site-header .account-menu__panel [hidden] { display:none; }
@keyframes account-menu-appear { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:639px) {
  .site-header .account-menu > summary .account-name { display:none; }
  .site-header .account-menu__panel { position:fixed; top:76px; right:12px; }
  .site-header .account-menu__panel .account-menu__link { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header .account-menu__panel { animation:none; }
  .site-header .account-menu__panel .account-menu__link { transition:none; }
}

/* Original component source (locally adapted to OSRS): Warframe Clan Finder / site-layout-20261019.css */
/* Match OSRS Clan Finder's shared content width and responsive page gutters. */
/* Native restoration and incoming section links must not animate on page load. */
html { scroll-behavior: auto; }

:root {
  --content: 1080px;
  --page-pad: clamp(16px, 5vw, 64px);
}

.site-frame :is(.account-shell, .submission-shell, .dashboard-shell, .analytics-shell) {
  width: min(calc(100% - 2 * var(--page-pad)), var(--content));
  max-width: var(--content);
  margin-inline: auto;
}

.site-frame .analytics-shell { padding-inline: 0; }

.site-frame .guide-shell:not(.claim-shell) {
  max-width: min(calc(100% - 2 * var(--page-pad)), var(--content));
  padding-inline: 0;
}

@media (min-width: 640px) and (max-width: 1199px) {
  :root { --content: 900px; }
}

/* Shared community profile component. */
.social-shell { --rl-text:#e5e5ee; --rl-muted:#bcbccc; --rl-dim:#a4a6bb; --rl-orange:#ffcf6f; --rl-gold-soft:#e9bf78; --rl-bg-deep:#111219; --rl-border:#454650; --rl-border-soft:#41434f; --rl-control-hover:#343743; --site-edge:#101117; --site-panel:linear-gradient(180deg,#292b35,#21222b); --site-panel-shadow:inset 0 0 0 1px #3d3f4b,inset 0 3px 0 #ffffff08,inset 0 -3px 0 #0003,0 0 0 1px #30323d,0 3px 6px #0008; --site-inset:linear-gradient(180deg,#171820,#1d1e27); --site-inset-shadow:inset 0 2px 4px #0009,0 1px 0 #ffffff0d; --site-button:linear-gradient(180deg,#343743,#262832); --site-button-shadow:inset 0 0 0 1px #484b59,inset 0 2px 0 #ffffff0a,0 2px 3px #0006; --community-panel:var(--site-panel); --community-panel-shadow:var(--site-panel-shadow); --community-inset:var(--site-inset); --community-inset-shadow:var(--site-inset-shadow); --community-button:var(--site-button); --community-button-shadow:var(--site-button-shadow); width:min(calc(100% - 2 * var(--page-pad)),var(--content)); margin:0 auto; padding:24px 0 48px; color:var(--rl-text); font-family:Arial,Helvetica,sans-serif; }
.cp-avatar { display: flex; width: 60px; height: 60px; flex: 0 0 60px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #c99b5759; border-radius: 8px; background: var(--site-button); color: #efd5aa; font-size: 22px; font-weight: 800; border-color: var(--site-edge); box-shadow: inset 0 0 0 1px #484b59; }
.cp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.cp-tags span { padding: 5px 8px; border: 1px solid var(--site-edge); border-radius: 4px; background: var(--site-inset); color: var(--rl-muted); font-size: 11px; box-shadow: var(--site-inset-shadow); }
.cp-hero { overflow: hidden; margin-bottom: 22px; border: 1px solid var(--site-edge); border-radius: 10px; background: var(--site-panel); box-shadow: var(--site-panel-shadow); }
.cp-heroCover { height: 64px; background: linear-gradient(110deg,#30323e,#242630); border-bottom: 1px solid #41434f; }
.cp-identity { display: flex; flex-wrap: wrap; align-items: start; gap: 20px; padding: 0 24px 24px; }
.cp-identity .cp-avatar { width: 80px; height: 80px; flex-basis: 80px; margin-top: -24px; border: 4px solid #252630; border-radius: 14px; outline: 1px solid #484b59; font-size: 30px; }
.cp-identityText { flex: 1; min-width: 150px; padding-top: 20px; }
.cp-identityText h1 { margin: 0 0 7px; font-size: 28px; line-height: 1.2; font-weight: 900; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cp-profileEyebrow { display: block; margin-bottom: 7px; color: #e9bf78; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cp-identityText p { margin: 0 0 12px; color: var(--rl-dim); font-size: 12px; }
.cp-identityActions { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 24px; }
.cp-column { display: grid; gap: 22px; min-width: 0; }
.cp-panel { min-width: 0; padding: 26px; border: 1px solid var(--site-edge); border-radius: 10px; background: var(--site-panel); scroll-margin-top: 90px; box-shadow: var(--site-panel-shadow); }
.cp-panel h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: var(--rl-text); font-size: 18px; font-weight: 800; }
.cp-panel h2 svg { color: var(--rl-gold-soft); flex-shrink: 0; }
.cp-panel > p { margin: 0 0 18px; color: var(--rl-muted); font-size: 13px; line-height: 1.8; }
.cp-profileIntro { padding:0 24px 24px; }
.cp-profileIntro .cp-bio { margin:0; color:var(--rl-muted); font-size:14px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.cp-profileIntro .cp-tags { margin-top:14px; }
.social-shell {font-family:Lato,Arial,Helvetica,sans-serif;padding-top:32px;}

/* A simple directory return link and the real revision date. */
.site-frame .profile-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 24px 0; }
.site-frame .profile-back { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent); font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; }
.site-frame .profile-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-frame .profile-back:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.site-frame .profile-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-frame .profile-page-updated { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; line-height: 1.5; }
.site-frame .profile-page-updated svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-frame .profile-page-updated time { color: var(--muted-bright); font-weight: 600; white-space: nowrap; }

/* Match OSRS Clan Finder's blue BadgeCheck mark beside listing names. */
.site-frame .listing-badge--verified svg { fill: #1d9bf0; stroke: #fff; stroke-width: 2; }
.site-frame .managed-profile-title .listing-badge--verified { width: 1.75rem; height: 1.75rem; }
.site-frame .listing-badge--verified:focus-visible { outline: 2px solid #1d9bf0; outline-offset: 3px; border-radius: 50%; }