/* Palette sampled from public/warframe-clan-finder-icon.png:
   royal-blue field #113177; illuminated details #91b0f5 and #b3cafd;
   gold rim #c1a741, softened for container outlines. */
: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: #aaa9ba;
  --muted-bright: #bebdca;
  --brand-blue: #113177;
  --brand-gold: #c1a741;
  --brand-gold-rgb: 193 167 65;
  --panel-edge: rgb(var(--brand-gold-rgb) / .34);
  --panel-edge-hover: rgb(var(--brand-gold-rgb) / .52);
  --accent: #91b0f5;
  --accent-rgb: 145 176 245;
  --accent-border-subtle: #2b3c63;
  --accent-strong: #b3cafd;
  /* Compatibility aliases keep older components on the shared accent palette. */
  --cyan: var(--accent);
  --cyan-strong: var(--accent-strong);
  --gold: var(--accent-strong);
  --on-accent: #ffffff;
  --on-solid-accent: #0a1630;
  --focus: var(--accent-strong);
  --line: #41434f;
  --line-strong: #587dbd;
  --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: 2px;
  --control-radius: 1px;
  --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, #19418f, var(--brand-blue));
  --accent-hover-gradient: linear-gradient(180deg, #254f9e, #193e8a);
  --accent-shadow: inset 0 0 0 1px #6386cd, inset 0 2px 0 #ffffff26, 0 2px 3px #0006;
  --nav-ink: #c8c7d4;
  --nav-accent: var(--accent);
  --nav-accent-gradient: var(--accent-gradient);
  --nav-accent-hover-gradient: var(--accent-hover-gradient);
  --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. */

/* Blue headings and restrained outlines echo the navigation menu. */
.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; }
}