/* Shared page rhythm and controls complement the existing Warframe panel theme. */
.site-frame [hidden] { display: none !important; }
.site-frame main { min-width: 0; }
.site-frame :is(.account-shell, .dashboard-shell, .analytics-shell, .content-shell, .compare-shell, .guide-shell, .recruit-shell) { padding-top: 28px; padding-bottom: 48px; }
.site-frame :is(.content-shell, .compare-shell, .recruit-shell) { width: min(calc(100% - 2 * var(--page-pad)), var(--content)); max-width: var(--content); margin-inline: auto; padding-inline: 0; }
.site-frame :is(.account-heading, .dashboard-heading, .analytics-heading, .content-hero, .compare-heading, .editorial-hero) { margin: 0 0 28px; }
.site-frame :is(.account-heading, .dashboard-heading, .analytics-heading, .content-hero, .compare-heading, .editorial-hero, .recruit-hero) h1 { margin: 0; color: var(--ink); font-size: clamp(28px, 3vw, 36px); font-weight: 650; line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.site-frame :is(.account-heading, .dashboard-heading, .analytics-heading, .content-hero, .compare-heading, .editorial-hero, .recruit-hero) p:not(.eyebrow) { max-width: 700px; margin: 12px 0 0; color: var(--muted-bright); font-size: 14px; line-height: 1.7; }
.site-frame main .eyebrow { margin: 0 0 8px; font-size: 10px; font-weight: 750; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.site-frame .breadcrumbs { margin: 0 0 24px; font-size: 12px; line-height: 1.6; }
.site-frame :is(.account-shell, .dashboard-shell, .analytics-shell, .content-shell, .compare-shell, .guide-shell, .submission-shell, .recruit-shell) .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 14px; font-size: 13px; line-height: 1.4; font-weight: 650; text-transform: none; letter-spacing: 0; border-radius: 4px; white-space: normal; text-align: center; }
.site-frame :is(.account-shell, .dashboard-shell, .analytics-shell, .content-shell, .compare-shell, .guide-shell, .recruit-shell) a:not(.button) { text-underline-offset: 3px; }
.site-frame :is(button, a, input, textarea, summary, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-frame :is(button, input, textarea, select):disabled { cursor: not-allowed; }
.site-frame :is(.account-panel, .analytics-panel, .content-panel, .guide-card, .claim-context) { border-radius: 4px; }
.site-frame :is(.account-panel, .analytics-panel, .content-panel) { padding: 24px; }
.site-frame :is(.account-panel, .analytics-panel, .content-panel, .guide-card, .faq-item) h2 { font-size: 20px; line-height: 1.35; font-weight: 650; letter-spacing: -.015em; }
.site-frame :is(.account-panel, .analytics-panel) p { color: var(--muted-bright); font-size: 13px; line-height: 1.75; }
.site-frame :is(.account-form, .analytics-toolbar, .claim-context) :is(input, textarea) { color: var(--ink); border: 1px solid var(--line); border-radius: 3px; background: var(--inset-gradient); box-shadow: var(--inset-shadow); font-size: 13px; }
.site-frame .account-form { gap: 18px; }
.site-frame .account-form label { font-size: 12px; }
.site-frame .account-form :is(input, select) { min-height: 44px; }
.site-frame .account-form small, .site-frame .account-panel .account-muted { color: var(--muted); font-size: 12px; line-height: 1.65; }
.owner-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 28px; padding: 5px; width: fit-content; max-width: 100%; border: 1px solid var(--frame-edge); border-radius: 5px; background: var(--inset-gradient); box-shadow: var(--inset-shadow); }
.owner-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 16px; border: 1px solid transparent; border-radius: 3px; color: var(--muted-bright); font-size: 13px; line-height: 1.4; font-weight: 600; text-align: center; text-decoration: none; }
.owner-nav a:hover { background: var(--surface-raised); color: var(--ink); }
.owner-nav a[aria-current] { border-color: var(--line-strong); background: var(--control-gradient); color: var(--accent-strong); box-shadow: var(--control-shadow); }
.ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.site-frame .ui-gate { max-width: 768px; padding: clamp(24px, 4vw, 36px); border: 1px solid var(--frame-edge); border-radius: 4px; background: var(--panel-gradient); box-shadow: var(--panel-shadow); }
.ui-gate__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; border: 1px solid var(--accent-border-subtle); border-radius: 8px; color: var(--accent); background: rgb(var(--accent-rgb) / 0.039); }
.ui-gate__icon svg { width: 25px; height: 25px; }
.site-frame .ui-gate h2 { margin: 0; font-size: clamp(21px, 2.5vw, 25px); font-weight: 650; line-height: 1.35; letter-spacing: -.02em; }
.site-frame .ui-gate p:not(.eyebrow) { max-width: 540px; margin: 14px 0 24px; color: var(--muted-bright); font-size: 13px; line-height: 1.75; }
.site-frame .ui-gate .ui-gate__note { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.ui-loading, .ui-error { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--inset-gradient); }
.ui-loading p, .ui-error p { margin: 6px 0 0; color: var(--muted-bright); font-size: 13px; line-height: 1.6; }
.ui-error { justify-content: space-between; border-color: #805a4d; }
.ui-error h2 { margin: 0; font-size: 18px; font-weight: 650; }
.ui-spinner { width: 22px; height: 22px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: ui-spin 900ms linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted-bright); background: var(--inset-gradient); font-size: 12px; line-height: 1.4; font-weight: 650; vertical-align: middle; font-variant-numeric: tabular-nums; }
/* The same custom selects are used on every page, including account forms and reports. */
.panel-select { text-transform: none; letter-spacing: 0; }
.panel-select__trigger { font-size: 13px; }
.filter-control:has(.panel-select) > .select-chevron { display: none; }
.directory-filters .filter-control:has(.panel-select) { display: block; }
.directory-filters .panel-select__trigger { min-height: 32px; padding: 4px 0; border: 0; background: transparent; box-shadow: none; color: var(--ink); font-size: 13px; }
.directory-filters .panel-select__trigger:not(:disabled):is(:hover, [aria-expanded="true"]) { background: transparent; box-shadow: none; color: var(--accent); }
.directory-filters .panel-select__trigger:focus-visible { outline-offset: 4px; }
.sort-control .panel-select { min-width: 160px; }
.sort-control .panel-select__trigger { min-height: 40px; }
.site-frame :is(.account-notice, .analytics-empty, .recruit-notice) { border: 1px solid var(--accent-border-subtle); border-radius: 4px; background: rgb(var(--accent-rgb) / 0.039); color: var(--muted-bright); font-size: 13px; line-height: 1.7; }
.site-frame #account-error { border-color: #805a4d; color: #ffb5aa; }
.site-frame .account-tabs { gap: 8px; margin-bottom: 24px; }
.site-frame .account-tabs a { min-height: 40px; padding: 10px 14px; font-size: 12px; background: var(--inset-gradient); }
.site-frame .account-portrait { border: 1px solid var(--line-strong); background: var(--inset-gradient); color: var(--accent); }
.site-frame .account-page-card { padding-block: 16px; }
.site-frame .account-page-card h3 { font-size: 15px; }
.site-frame .account-page-actions { gap: 10px; }
.account-layout > section { scroll-margin-top: 80px; }
.site-frame .analytics-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) auto auto; gap: 12px; align-items: end; padding: 18px; border: 1px solid var(--frame-edge); border-radius: 4px; background: var(--panel-gradient); box-shadow: var(--panel-shadow); }
.analytics-toolbar label { min-width: 0; font-size: 12px; font-weight: 650; }
.site-frame .analytics-metric { border-radius: 4px; padding: 20px; }
.site-frame .analytics-metric dt { font-size: 12px; color: var(--muted-bright); }
.site-frame .analytics-metric dd { margin: 10px 0; font-size: 28px; color: var(--ink); overflow-wrap: anywhere; }
.site-frame .analytics-metric p { font-size: 12px; color: var(--muted); }
.site-frame .analytics-chart rect { fill: var(--accent); }
.site-frame .analytics-period { font-size: 12px; color: var(--muted); line-height: 1.6; }
.site-frame .analytics-panel > details { margin-top: 18px; }
.site-frame .analytics-panel summary { min-height: 40px; padding: 10px 0; font-size: 13px; cursor: pointer; }
/* Editorial pages keep readable prose within the shared site width. */
.site-frame .guide-shell.claim-shell { width: min(calc(100% - 2 * var(--page-pad)), 768px); max-width: 768px; padding-inline: 0; }
.site-frame .claim-context { padding: 24px; }
.site-frame .claim-guide { padding: 24px; border: 1px solid var(--frame-edge); border-radius: 4px; background: var(--panel-gradient); box-shadow: var(--panel-shadow); }
.site-frame .claim-guide p, .site-frame .claim-guide label { color: var(--muted-bright); font-size: 13px; line-height: 1.75; }
.site-frame .claim-guide strong { color: var(--ink); }
.site-frame #claim-message { background: var(--inset-gradient); color: var(--ink); border-color: var(--line); }
.site-frame .claim-guide .claim-actions { margin-block: 20px; }
.site-frame .claim-next { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.site-frame :is(.guide-shell, .content-shell) :is(.guide-body, .content-prose, .content-panel, .faq-item) :is(p, li) { color: var(--muted-bright); line-height: 1.8; overflow-wrap: anywhere; }
.site-frame .faq-item { border: 1px solid var(--line); border-radius: 4px; background: var(--inset-gradient); padding: 24px; }
.site-frame .faq-item h2 { margin-top: 0; font-size: 17px; }
.site-frame .faq-item p { font-size: 13px; }
.site-frame .home-clan-help { max-width: var(--content); }
.site-frame .home-clan-help :is(p, li), .site-frame .learning-links p { max-width: 78ch; font-size: 13px; color: var(--muted-bright); line-height: 1.8; }
.site-frame .home-clan-help h2, .site-frame .discovery-links h2 { font-size: 22px; line-height: 1.35; font-weight: 650; }
.site-frame .home-clan-help h3 { font-size: 16px; line-height: 1.4; font-weight: 650; }
.site-frame .home-clan-help a { color: var(--accent); }
.site-frame .content-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.site-frame .comparison-empty { padding: 32px; border: 1px solid var(--frame-edge); border-radius: 4px; background: var(--panel-gradient); box-shadow: var(--panel-shadow); }
.site-frame .comparison-empty p { color: var(--muted-bright); font-size: 14px; line-height: 1.7; }
.site-frame .compare-table-wrap { max-width: 100%; }
.site-frame .match-card, .site-frame .offer-card { border: 1px solid var(--line); border-radius: 4px; background: var(--inset-gradient); padding: 20px; }
.site-frame :is(.match-card, .offer-card) h3 { margin-top: 0; font-size: 17px; }
.site-frame .offer-message { color: var(--muted-bright); font-size: 13px; line-height: 1.75; }
.site-frame .offer-meta { color: var(--muted); font-size: 12px; line-height: 1.6; }
body[data-recruit-manager] .recruit-hero { display: block; }
body[data-recruit-manager] .recruit-hero > div { margin-bottom: 24px; }
body[data-recruit-manager] .recruitment-nav { display: none; }
/* Keep dialogs compact, readable, and inside the mobile viewport. */
.site-frame dialog, dialog.auth-overlay { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); border-radius: 6px; }
.site-frame dialog h2 { font-size: 22px; line-height: 1.35; font-weight: 650; }
.site-frame dialog :is(label, p) { font-size: 13px; line-height: 1.7; }
@media (max-width: 780px) {
  .site-frame .analytics-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-frame .account-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .site-frame :is(.account-shell, .dashboard-shell, .analytics-shell, .content-shell, .compare-shell, .guide-shell, .recruit-shell) { padding-top: 24px; padding-bottom: 32px; }
  .site-frame :is(.account-panel, .analytics-panel, .content-panel, .claim-context, .claim-guide, .faq-item) { padding: 20px; }
  .owner-nav { width: 100%; margin-bottom: 24px; }
  .owner-nav a { flex: 1 1 90px; padding-inline: 8px; font-size: 12px; }
  .site-frame .analytics-toolbar { padding: 14px; }
  .site-frame .analytics-toolbar > label:first-child { grid-column: 1 / -1; }
  .site-frame .analytics-toolbar > a { grid-column: 1 / -1; }
  .site-frame .directory-display-controls { min-width: 0; }
  .sort-control .panel-select { min-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-spinner { animation: none; }
  html { scroll-behavior: auto !important; }
  .site-frame *, .site-frame *::before, .site-frame *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Home and Clans share identical directory content and quick filters. */
.site-frame .directory-tabs button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted-bright); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.site-frame .directory-tabs button[aria-pressed="true"] { border-color: var(--line-strong); background: var(--control-gradient); box-shadow: var(--control-shadow); color: var(--accent-strong); }
.site-frame .directory-tabs button:hover { color: var(--ink); }
@media (max-width: 600px) { .site-frame .directory-tabs button { flex: 1; min-height: 44px; } }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 12px 18px; border: 1px solid var(--accent); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 14px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; }
.site-frame .comparison-empty h2 { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.35; }

.site-frame .comparison-root { scrollbar-color: var(--line-strong) var(--surface-inset); }
.site-frame .comparison-root .comparison-loading { padding: 24px; color: var(--muted-bright); font-size: 14px; }
.site-frame .comparison-root .comparison-error { padding: 20px; border: 1px solid #805a4d; border-radius: 4px; color: #ffb5aa; font-size: 13px; }
@media (max-width: 639px) { .site-frame .owner-dashboard .dashboard-heading { align-items: stretch; } .owner-dashboard .dashboard-heading > .button { width: 100%; } }

/* Small interaction details keep browsing and help pages consistent. */
.finder-home .directory-hero h1 { font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
.finder-home .directory-hero .eyebrow { margin-bottom: 10px; color: var(--accent); font-size: 10px; line-height: 1.5; }
.directory-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.directory-active-filters button { max-width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--inset-gradient); color: var(--accent); font: inherit; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; cursor: pointer; }
.directory-active-filters button:hover { background: var(--surface-raised); color: var(--ink); }
.directory-result-range, .directory-load-status { margin: 0 0 16px; font-size: 12px; line-height: 1.6; color: var(--muted-bright); font-variant-numeric: tabular-nums; }
.site-frame .directory-load-error { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; padding: 18px; border: 1px solid #805a4d; border-radius: 4px; background: var(--inset-gradient); }
.directory-load-error p { flex: 1 1 280px; margin: 0; color: var(--muted-bright); font-size: 13px; line-height: 1.7; }
.directory-load-error .button { flex-shrink: 0; min-height: 42px; font-size: 13px; }
.site-frame .empty-state { border-radius: 4px; }
.site-frame .empty-state p + p { font-size: 13px; line-height: 1.7; color: var(--muted-bright); }
.site-frame .directory-pagination { align-items: center; gap: 6px; }
.site-frame .directory-pagination a { border-color: var(--line); border-radius: 4px; background: var(--inset-gradient); color: var(--muted-bright); text-decoration: none; font-size: 13px; }
.site-frame .directory-pagination a:hover { border-color: var(--accent); color: var(--accent); }
.site-frame .directory-pagination a[aria-current] { border-color: var(--line-strong); background: var(--control-gradient); color: var(--accent); box-shadow: var(--control-shadow); }
.pagination-gap { padding: 0 2px; color: var(--muted); }
.pagination-position { margin-left: auto; color: var(--muted-bright); font-size: 12px; font-variant-numeric: tabular-nums; }
.comparison-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--inset-gradient); }
.comparison-summary p { margin: 0; font-size: 13px; color: var(--muted-bright); }
.site-frame .profile-panel > h2 { font-size: 20px; line-height: 1.35; letter-spacing: -.015em; text-transform: none; font-weight: 650; }
.site-frame :is(.managed-profile-title, .indexed-profile) h1 { font-weight: 650; }
.site-frame .profile-panel__copy { font-size: 14px; line-height: 1.8; }
.site-frame .faq-search { border: 1px solid var(--frame-edge); border-radius: 4px; background: var(--panel-gradient); box-shadow: var(--panel-shadow); }
.site-frame .faq-search label { font-size: 12px; }
.site-frame .faq-search :is(input, button) { background: var(--inset-gradient); border-color: var(--line); border-radius: 4px; color: var(--ink); font-size: 13px; }
.site-frame .faq-search button:disabled { color: var(--muted); opacity: .65; }
.site-frame .faq-topic > h2 { font-size: 21px; line-height: 1.35; font-weight: 650; letter-spacing: -.015em; }
.site-frame .faq-answer { margin: 8px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--inset-gradient); scroll-margin-top: 80px; }
.site-frame .faq-answer summary { font-size: 14px; line-height: 1.6; }
.site-frame .faq-answer[open] { border-color: var(--line-strong); }
.site-frame .faq-answer:target { border-color: var(--accent); }
.site-frame .faq-answer p { font-size: 13px; color: var(--muted-bright); }
.site-frame .faq-permalink { padding-bottom: 0; color: var(--accent); font-size: 12px; }
@media (min-width: 700px) { .faq-search > .panel-select { grid-area: 2 / 2; } }
@media (max-width: 420px) {
  .site-frame .directory-pagination { gap: 4px; }
  .site-frame .directory-pagination a { min-width: 32px; padding-inline: 5px; }
  .pagination-position { width: 100%; margin: 6px 0 0; }
  .comparison-summary { align-items: stretch; }
  .comparison-summary .button { width: 100%; }
}

/* Recruitment management follows the same account heading and panel hierarchy. */
body[data-recruit-manager] .recruit-account-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
body[data-recruit-manager] .recruit-account-heading > div { min-width: 0; flex: 1 1 360px; }
body[data-recruit-manager] .recruit-account-heading > .button { flex-shrink: 0; }
body[data-recruit-manager] .recruit-account-heading h1 { font-size: clamp(27px, 3vw, 36px); line-height: 1.2; }
body[data-recruit-manager] .recruit-account-heading p:not(.eyebrow) { max-width: 58ch; margin-top: 10px; font-size: 14px; line-height: 1.65; }
body[data-recruit-manager] :is(.recruit-owner, .recruit-owner.is-new, .offers-management, .recruit-publish) { margin: 0 0 24px; padding: 24px; border: 1px solid var(--frame-edge); border-radius: 4px; background: var(--panel-gradient); box-shadow: var(--panel-shadow); }
body[data-recruit-manager] :is(.recruit-owner, .recruit-section-heading) .eyebrow { display: block; margin: 0 0 8px; color: var(--accent); font-size: 10px; line-height: 1.5; font-weight: 750; letter-spacing: .12em; }
body[data-recruit-manager] :is(.recruit-owner, .recruit-owner.is-new) > h2,
body[data-recruit-manager] .recruit-section-heading h2 { margin: 0; color: var(--ink); font-size: 21px; font-weight: 650; letter-spacing: -.015em; line-height: 1.35; }
body[data-recruit-manager] #recruit-owner-copy { margin: 10px 0 20px; max-width: 65ch; color: var(--muted-bright); font-size: 13px; line-height: 1.7; }
body[data-recruit-manager] .recruit-owner-actions { margin: 0; gap: 10px; }
body[data-recruit-manager] .recruit-listing-help { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
body[data-recruit-manager] .recruit-listing-help summary { width: fit-content; min-height: 36px; padding-block: 8px; color: var(--muted-bright); font-size: 12px; line-height: 1.6; cursor: pointer; }
body[data-recruit-manager] .recruit-listing-help p { max-width: 78ch; margin: 10px 0 0; font-size: 12px; line-height: 1.75; }
body[data-recruit-manager] .recruit-section-heading { gap: 16px; margin-bottom: 18px; }
body[data-recruit-manager] .offers-management > .offer-meta { margin: 0 0 20px; }
body[data-recruit-manager] #incoming-offers > .offer-meta { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--inset-gradient); font-size: 13px; line-height: 1.7; }
body[data-recruit-manager] :is(.past-offers, #outgoing-section) > summary { min-height: 44px; padding-block: 12px; color: var(--muted-bright); font-size: 13px; cursor: pointer; }
@media (max-width: 639px) {
  body[data-recruit-manager] .recruit-account-heading { align-items: stretch; gap: 16px; margin-bottom: 24px; }
  body[data-recruit-manager] .recruit-account-heading > div { flex-basis: 100%; }
  body[data-recruit-manager] .recruit-account-heading > .button { width: 100%; }
  body[data-recruit-manager] :is(.recruit-owner, .recruit-owner.is-new, .offers-management, .recruit-publish) { padding: 20px; }
  body[data-recruit-manager] #incoming-offers > .offer-meta { padding: 16px; }
}