:root {
  --sv-gold: #f6cf49;
  --sv-green: #9ee63f;
  --sv-cyan: #44d7d0;
  --sv-panel: #0b2117;
  --sv-line: rgba(158, 230, 63, .3);
  --sv-text: #f6f8ef;
  --sv-muted: #b9c8bc;
}

.mf-core-directory-page {
  background:
    radial-gradient(circle at 8% 16%, rgba(246, 207, 73, .08), transparent 24rem),
    radial-gradient(circle at 90% 12%, rgba(68, 215, 208, .07), transparent 28rem),
    #020906;
}

/* The shared shell can progressively suppress the first route section while the
   header hydrates. Soccer Vision is server rendered, so its hero must remain
   available without waiting for a client-side reveal. */
body.mf-core-directory-page main#main-content > .sv-hero {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  content-visibility: visible !important;
}

body.mf-core-directory-page :where(a, button, input, select, summary) {
  min-height: 44px !important;
}

body.mf-core-directory-page :where(input, select) {
  height: 44px !important;
}

.sv-hero { border-bottom: 1px solid rgba(246,207,73,.25); }
.sv-hero .mf-core-hero__grid { align-items: stretch; gap: clamp(18px,3vw,36px); }
.sv-hero__copy { align-self: center; }
.sv-hero__copy .mf-core-title { max-width: 720px; font-size: clamp(2.45rem,5vw,4.6rem); line-height: .98; text-wrap: balance; }
.sv-hero__copy .mf-core-lede { max-width: 660px; font-size: clamp(1rem,1.4vw,1.15rem); }
.sv-hero__copy .mf-core-tag strong { color: var(--sv-gold); font-size: 1.05em; }
.sv-hero__visual { min-height: 320px; overflow: hidden; padding: 0; border-color: rgba(246,207,73,.42); box-shadow: 0 20px 60px rgba(0,0,0,.38); }
.sv-hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.sv-panel {
  border: 1px solid var(--sv-line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(14, 39, 27, .96), rgba(5, 17, 11, .98));
}

.sv-filters {
  display: grid;
  grid-template-columns: 1.35fr .8fr .72fr 1fr 1fr;
  gap: 10px;
  padding: 14px;
  margin: 16px 0 10px;
  align-items: end;
}

.sv-filters label { display: grid; gap: 6px; min-width: 0; color: var(--sv-muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.sv-filters input,
.sv-filters select {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(246, 207, 73, .3);
  border-radius: 10px;
  background: #030b07;
  color: var(--sv-text);
  padding: 10px 12px;
  font: inherit;
}
.mf-core-directory-page .sv-filters .mf-core-button {
  justify-content: center;
  min-height: 44px !important;
  height: 44px !important;
}

.sv-directory-status { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 0; color: var(--sv-muted); font-size: .82rem; }
.sv-directory-status strong { color: var(--sv-gold); font-size: 1.1rem; }

.sv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-card {
  min-height: 294px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  background:
    linear-gradient(150deg, rgba(68, 215, 208, .08), transparent 42%),
    #07150e;
  border-color: rgba(246, 207, 73, .26);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sv-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 55%,rgba(246,207,73,.07)); }
.sv-card:hover,.sv-card:focus-within { transform:translateY(-3px); border-color:rgba(246,207,73,.62); box-shadow:0 14px 32px rgba(0,0,0,.28); }
.sv-card__top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.sv-card__logo,
.sv-card__mark { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; }
.sv-card__logo { object-fit: contain; background: #fff; padding: 4px; box-shadow:0 8px 22px rgba(0,0,0,.28); }
.sv-card__mark { display: grid; place-items: center; background: linear-gradient(135deg, var(--sv-gold), var(--sv-cyan)); color: #04100a; font-family: "Archivo Black", Impact, sans-serif; }
.sv-card h3 { margin: 2px 0 0; color: var(--sv-text); font-size: clamp(1.05rem, 1.8vw, 1.32rem); line-height: 1.12; }
.sv-card p { margin: 0; color: var(--sv-muted); line-height: 1.45; font-size: .9rem; }
.sv-card .sv-card__place { color: var(--sv-gold); font-weight: 750; font-size: .8rem; }
.sv-card .mf-core-tags { margin-top: auto; gap: 5px; }
.sv-card .mf-core-tag { font-size: .63rem; padding: 5px 7px; }
.sv-card > .mf-core-button { margin-top: 4px; align-self: flex-start; }
.sv-card--with-logo { background:radial-gradient(circle at 16% 8%,rgba(68,215,208,.16),transparent 42%),linear-gradient(150deg,rgba(246,207,73,.08),transparent 58%),#07150e; }

.sv-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.sv-pagination [aria-current="page"] { background: var(--sv-gold); color: #07120b; }
.sv-purpose-grid .mf-core-source-row { align-items: flex-start; flex-direction: column; }
.sv-purpose-grid .mf-core-source-row .mf-core-button { margin-top: auto; }

/* Submission and profile pages continue to use these shared controls. */
.sv-wrap { max-width: 1180px; margin: auto; padding: 24px 20px 56px; }
.sv-kicker { font: 800 12px/1.2 "JetBrains Mono", monospace; color: var(--sv-gold); letter-spacing: .12em; text-transform: uppercase; }
.sv-actions, .sv-meta, .sv-socials { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sv-btn { display: inline-flex; min-height: 44px; align-items: center; border: 1px solid rgba(246, 207, 73, .38); border-radius: 12px; background: #06110b; color: var(--sv-text); padding: 11px 14px; text-decoration: none; font-weight: 850; }
.sv-btn--primary { border: 0; background: linear-gradient(90deg, var(--sv-gold), var(--sv-green)); color: #07120b; }
.sv-section { margin-top: 28px; }
.sv-section__head { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.sv-section h1, .sv-section h2, .sv-submit-hero h1, .sv-sponsor-callout h2 { color: var(--sv-text); }
.sv-form { padding: clamp(20px, 4vw, 42px); display: grid; gap: 18px; }
.sv-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sv-form label { display: grid; gap: 7px; color: var(--sv-text); font-weight: 700; }
.sv-form input, .sv-form select, .sv-form textarea { border: 1px solid rgba(246, 207, 73, .35); border-radius: 10px; background: #030b07; color: var(--sv-text); padding: 12px 14px; font: inherit; }
.sv-form textarea { min-height: 130px; }
.sv-form .full { grid-column: 1 / -1; }
.sv-profile { display: grid; grid-template-columns: 300px 1fr; gap: 30px; }
.sv-profile__image { width: 100%; border-radius: 18px; max-height: 280px; object-fit: cover; background: #14301e; }
.sv-alert { padding: 14px; border-radius: 12px; background: #153923; color: #e9f9d9; }
.sv-admin-note, .sv-field-help { font-size: 13px; color: var(--sv-muted); }
.sv-submit-hero { padding: clamp(26px, 5vw, 54px); border: 1px solid var(--sv-line); border-radius: 20px; background: linear-gradient(120deg, #0d2c1e, #07110b 62%); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: 32px; align-items: center; }
.sv-submit-hero h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; }
.sv-submit-hero p, .sv-panel p, .sv-sponsor-callout p { color: var(--sv-muted); line-height: 1.5; }
.sv-submit-hero__panel, .sv-value-grid article, .sv-showcase-card { padding: 18px; border: 1px solid var(--sv-line); border-radius: 15px; background: #07150e; }
.sv-steps { list-style: none; counter-reset: steps; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.sv-steps li { counter-increment: steps; display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; }
.sv-steps li::before { content: counter(steps); grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--sv-gold); color: #07120b; font-weight: 900; }
.sv-steps span { color: var(--sv-muted); }
.sv-value-grid, .sv-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.sv-sponsor-callout { margin-top: 28px; padding: clamp(22px, 4vw, 40px); border: 1px solid rgba(246, 207, 73, .4); border-radius: 18px; background: linear-gradient(105deg, #241d0d, #0d2618 56%, #092015); display: flex; justify-content: space-between; gap: 30px; align-items: center; }

@media (max-width: 1080px) {
  .sv-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .sv-hero__visual { min-height: 190px; }
  .sv-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sv-card { min-height: 280px; padding: 13px; }
  .sv-form-grid, .sv-profile, .sv-submit-hero { grid-template-columns: 1fr; }
  .sv-form .full { grid-column: auto; }
  .sv-wrap { padding-inline: 14px; }
  .sv-section__head { align-items: start; flex-direction: column; }
  .sv-value-grid, .sv-showcase-grid { grid-template-columns: 1fr; }
  .sv-sponsor-callout { align-items: start; flex-direction: column; }
}

@media (max-width: 480px) {
  .sv-filters, .sv-grid { grid-template-columns: 1fr; }
  .sv-card { min-height: 0; }
  .sv-hero .mf-core-title { font-size: clamp(2rem, 10vw, 2.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .mf-core-directory-page *, .mf-core-directory-page *::before, .mf-core-directory-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Premium directory alignment - 2026-08-03 */
.mf-core-directory-page .sv-hero{background:linear-gradient(122deg,rgba(3,18,11,.98),rgba(8,41,27,.94));box-shadow:0 24px 60px rgba(0,0,0,.28)}
.mf-core-directory-page .sv-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.mf-core-directory-page .sv-card:hover,.mf-core-directory-page .sv-card:focus-within{transform:translateY(-3px);border-color:rgba(245,207,72,.62);box-shadow:0 18px 38px rgba(0,0,0,.28)}
@media(prefers-reduced-motion:reduce){.mf-core-directory-page .sv-card{transition:none}.mf-core-directory-page .sv-card:hover,.mf-core-directory-page .sv-card:focus-within{transform:none}}
/* Soccer Vision expansion: compact, accessible, verified content layouts */
.sv-dashboard{max-width:1180px;margin:0 auto;padding:clamp(1rem,3vw,3rem) 1rem;color:var(--mf-text,#f4f7f2)}
.sv-dashboard__hero{padding:clamp(1.5rem,4vw,3.5rem);border:1px solid rgba(198,183,67,.35);border-radius:20px;background:linear-gradient(135deg,#081b14,#102b25);margin-bottom:1rem}.sv-dashboard__hero h1{font-size:clamp(2rem,5vw,4rem);margin:.35rem 0}.sv-dashboard__hero p,.sv-lede{max-width:700px;color:#b7c8be}.sv-kicker{font:700 .7rem/1.2 monospace;letter-spacing:.12em;text-transform:uppercase;color:#d7c34b}.sv-subnav{display:flex;gap:.5rem;flex-wrap:wrap;padding:.6rem;border:1px solid rgba(198,183,67,.3);border-radius:14px;margin-bottom:1rem}.sv-subnav a,.sv-btn,.sv-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1rem;border-radius:10px;text-decoration:none}.sv-subnav a{color:inherit}.sv-subnav a[aria-current=page],.sv-btn--primary{background:linear-gradient(110deg,#ffda31,#8deb62);color:#08120c;font-weight:800}.sv-btn{border:1px solid rgba(198,183,67,.5);color:inherit;background:#0c2118}.sv-filter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;padding:1rem;border:1px solid rgba(198,183,67,.28);border-radius:16px;margin:1rem 0}.sv-filter label{display:grid;gap:.35rem;color:#b7c8be;font-weight:700}.sv-filter input{width:100%;box-sizing:border-box;background:#06140f;color:#f4f7f2;border:1px solid #40624f;border-radius:9px;padding:.8rem;min-height:44px}.sv-section-head{display:flex;align-items:end;gap:1rem;flex-wrap:wrap;margin:2rem 0 .8rem}.sv-section-head h2{margin:0}.sv-people-grid,.sv-event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.sv-person-card,.sv-event-card,.sv-profile,.sv-admin-row{background:#0b2118;border:1px solid rgba(198,183,67,.28);border-radius:14px;padding:1rem}.sv-person-card{display:grid;grid-template-columns:96px 1fr;gap:1rem}.sv-person-card img{width:96px;height:96px;object-fit:cover;border-radius:10px}.sv-person-card__mark{display:grid;place-items:center;width:96px;height:96px;background:#132f25;border-radius:10px;color:#d7c34b}.sv-person-card h3,.sv-event-card h3{margin:.35rem 0}.sv-meta{color:#9fb5a7;font-size:.9rem}.sv-empty{padding:2rem;text-align:center;border:1px dashed #40624f;border-radius:14px}.sv-profile{max-width:900px;margin:1rem auto;padding:clamp(1.2rem,4vw,3rem)}.sv-profile h1{font-size:clamp(2rem,5vw,4rem)}.sv-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.sv-actions{display:flex;gap:.7rem;flex-wrap:wrap}.sv-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.sv-admin-row{display:flex;gap:.7rem;align-items:center;justify-content:space-between;margin:.5rem 0}.sv-admin-row span{color:#9fb5a7;font-size:.85rem}
@media(max-width:700px){.sv-filter,.sv-form-grid,.sv-people-grid,.sv-event-grid,.sv-detail-grid,.sv-admin-grid{grid-template-columns:1fr}.sv-person-card{grid-template-columns:72px 1fr}.sv-person-card img,.sv-person-card__mark{width:72px;height:72px}.sv-dashboard__hero{padding:1.25rem}.sv-admin-row{align-items:flex-start;flex-direction:column}}

/* Premium Soccer Vision hero: compact, high-contrast and resilient on production pages. */
.mf-core-directory-page .sv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(246,207,73,.38);
  border-radius: 20px;
  background: radial-gradient(circle at 18% 12%, rgba(68,215,208,.14), transparent 32%), linear-gradient(125deg, #071b12 0%, #06110c 62%, #0b1e18 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.mf-core-directory-page .sv-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(2,9,6,.72), transparent 68%), radial-gradient(circle at 90% 90%, rgba(246,207,73,.11), transparent 26%);
}
.mf-core-directory-page .sv-hero .mf-core-hero__grid { padding: clamp(22px,4vw,46px); }
.mf-core-directory-page .sv-hero__copy .mf-core-title { max-width: 16ch; letter-spacing: -.025em; }
.mf-core-directory-page .sv-hero__visual { min-height: clamp(220px, 28vw, 360px); border-radius: 14px; }
.mf-core-directory-page .sv-hero__visual img { filter: saturate(.9) contrast(1.05); }
@media (max-width:760px) {
  .mf-core-directory-page .sv-hero .mf-core-hero__grid { padding: 18px; gap: 14px; }
  .mf-core-directory-page .sv-hero__copy .mf-core-title { max-width: 100%; font-size: clamp(2rem, 9vw, 2.7rem); }
  .mf-core-directory-page .sv-hero__visual { min-height: 170px; max-height: 220px; }
}
/* Submission form: keep fields readable and use the full panel width. */
.sv-form-section .sv-form { display: block; width: 100%; box-sizing: border-box; }
.sv-form-section .sv-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; }
.sv-form-section .sv-form-grid > label { min-width: 0; }
.sv-form-section .sv-submit-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sv-form-section .sv-submit-actions .sv-admin-note { margin: 0; max-width: 58ch; }
@media (max-width: 700px) {
  .sv-form-section .sv-form-grid { grid-template-columns: 1fr; }
  .sv-form-section .sv-form-grid .full { grid-column: auto; }
  .sv-form-section .sv-submit-actions { display: grid; }
}

/* Editorial-ready submission layout: full-width two-column form, no collapsed rail. */
.sv-form-section { width: 100%; }
.sv-form-section > .sv-form { width: 100%; max-width: none; box-sizing: border-box; }
.sv-form-section > .sv-form > .sv-form-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
.sv-form-section > .sv-form > .sv-form-grid > label { width: 100%; box-sizing: border-box; }
.sv-form-section > .sv-form > .sv-form-grid > .full { grid-column: 1 / -1 !important; }
.sv-form-section > .sv-form input,
.sv-form-section > .sv-form select,
.sv-form-section > .sv-form textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 760px) {
  .sv-form-section > .sv-form > .sv-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .sv-form-section > .sv-form > .sv-form-grid > .full { grid-column: auto !important; }
}