/* CLYD3 shared subpage brand mark
   Mirrors the orbit/core/node construction used on the main homepage. */

.brand-badge,
.atlas-mark {
  width: 38px !important;
  height: 38px !important;
  aspect-ratio: 1;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 38px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink, var(--text, #111111)) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: -0.08em !important;
  overflow: visible !important;
  isolation: isolate;
}

/* Orbit */
.brand-badge::before,
.atlas-mark::after {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid var(--ink, var(--text, #111111)) !important;
  border-radius: 50% !important;
  background:
    linear-gradient(-35deg,
      transparent 49.35%,
      var(--line, rgba(17,17,17,.18)) 49.35% 50.65%,
      transparent 50.65%) center / 55% 55% no-repeat !important;
  box-shadow: none !important;
  transform: rotate(0deg);
  transition: transform 450ms cubic-bezier(.2,.7,.2,1), border-color 220ms ease;
  z-index: 0;
}

/* Core text */
.brand-badge > span,
.atlas-mark > span {
  position: relative !important;
  z-index: 2 !important;
  display: inline !important;
  margin: 0 !important;
  color: var(--ink, var(--text, #111111)) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.08em !important;
}

/* Signal node. FUT already used ::after; Listening Atlas used ::before. */
.brand-badge::after,
.atlas-mark::before {
  content: '' !important;
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--teal, var(--green, #0d7c78)) !important;
  right: 1px !important;
  top: 8px !important;
  left: auto !important;
  bottom: auto !important;
  inset: auto 1px auto auto !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal, #0d7c78) 8%, transparent) !important;
  transform: translate(0,0);
  transition: background 220ms ease, transform 450ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease;
  z-index: 3 !important;
}

/* Main-site hover behavior: orbit rotates and signal node shifts crimson. */
.brand:hover .brand-badge::before,
.brand:hover .atlas-mark::after,
.brand:focus-visible .brand-badge::before,
.brand:focus-visible .atlas-mark::after {
  transform: rotate(28deg);
}

.brand:hover .brand-badge::after,
.brand:hover .atlas-mark::before,
.brand:focus-visible .brand-badge::after,
.brand:focus-visible .atlas-mark::before {
  background: var(--crimson, #a63d45) !important;
  transform: translate(-2px, 8px);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--crimson, #a63d45) 8%, transparent) !important;
}

/* Keep the module lockups subordinate to the shared CLYD3 mark. */
.sidebar .brand {
  gap: 13px !important;
}
.sidebar .brand > div:last-child strong {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink, var(--text, #111111)) !important;
}
.sidebar .brand > div:last-child span {
  margin-top: 3px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase;
  color: var(--soft-ink, var(--muted, #5f5d57)) !important;
}

.site-header .brand {
  gap: 13px !important;
}
.site-header .brand > span:last-child {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}

/* FUT dark theme ---------------------------------------------------------
   fut/clyd3.css historically assigned the same light variables to both
   html[data-theme="light"] and html[data-theme="dark"]. Because this shared
   integration stylesheet loads after fut/clyd3.css, these scoped rules restore
   the actual CLYD3 graphite/night-paper theme without touching dashboard logic. */
html[data-theme="dark"] body:has(.app) {
  --paper: #101210;
  --ink: #f0eee7;
  --soft-ink: #aaa79f;
  --line: rgba(240,238,231,.18);
  --teal: #3ba8a2;
  --crimson: #d05a64;

  --bg: #101210;
  --bg2: #101210;
  --surface: rgba(20,22,20,.78);
  --surface2: rgba(240,238,231,.045);
  --surface3: rgba(240,238,231,.065);
  --text: #f0eee7;
  --muted: #aaa79f;
  --green: #3ba8a2;
  --lime: #3ba8a2;
  --cyan: #3ba8a2;
  --gold: #d05a64;
  --orange: #d05a64;
  --red: #d05a64;
  --shadow: 0 18px 44px rgba(0,0,0,.18);

  background: var(--paper) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] body:has(.app)::before {
  opacity: .18 !important;
  background-image: linear-gradient(
    to right,
    transparent calc(100% - 1px),
    rgba(240,238,231,.12) 1px
  ) !important;
}

html[data-theme="dark"] body:has(.app)::after {
  border-color: rgba(59,168,162,.12) !important;
  box-shadow:
    0 0 0 9vw rgba(59,168,162,.018),
    0 0 0 18vw rgba(208,90,100,.012) !important;
}

html[data-theme="dark"] .app .sidebar {
  background: rgba(16,18,16,.88) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .app .dna-card,
html[data-theme="dark"] .app .panel,
html[data-theme="dark"] .app .kpi,
html[data-theme="dark"] .app .legend-feature,
html[data-theme="dark"] .app .legend-feature.captain,
html[data-theme="dark"] .app .legend-feature.goat,
html[data-theme="dark"] .app .c99,
html[data-theme="dark"] .app .filters {
  background: rgba(240,238,231,.035) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .app .chip-btn,
html[data-theme="dark"] .app .icon-btn,
html[data-theme="dark"] .app .search-box,
html[data-theme="dark"] .app .filters select,
html[data-theme="dark"] .app .pager button,
html[data-theme="dark"] .app .metric-switch,
html[data-theme="dark"] .app .depth-toggle {
  background: rgba(240,238,231,.035) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .app .metric-switch button.active,
html[data-theme="dark"] .app .depth-toggle button.active {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

html[data-theme="dark"] .app .dna-meter,
html[data-theme="dark"] .app .compare-track,
html[data-theme="dark"] .app .bar-track,
html[data-theme="dark"] .app .depth-track {
  background: rgba(240,238,231,.075) !important;
}

html[data-theme="dark"] .app .compare-track.collection i {
  background: rgba(240,238,231,.12) !important;
}

html[data-theme="dark"] .app .compare-track.usage i {
  background: rgba(59,168,162,.36) !important;
}

html[data-theme="dark"] .app .ring-bg {
  stroke: rgba(240,238,231,.10) !important;
}

html[data-theme="dark"] .app .pitch {
  border-color: rgba(59,168,162,.24) !important;
  background:
    linear-gradient(90deg,rgba(59,168,162,.035) 50%,transparent 50%),
    repeating-linear-gradient(90deg,rgba(59,168,162,.022) 0 12.5%,transparent 12.5% 25%),
    #121713 !important;
}

html[data-theme="dark"] .app .pitch::before,
html[data-theme="dark"] .app .pitch::after,
html[data-theme="dark"] .app .pitch-circle {
  border-color: rgba(240,238,231,.18) !important;
}

html[data-theme="dark"] .app .pitch-card {
  background: rgba(16,18,16,.94) !important;
  border-color: rgba(240,238,231,.14) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] .app thead {
  background: rgba(16,18,16,.97) !important;
}

html[data-theme="dark"] .app th,
html[data-theme="dark"] .app td,
html[data-theme="dark"] .app .rank-item,
html[data-theme="dark"] .app .market-item,
html[data-theme="dark"] .app .feature-line {
  border-color: rgba(240,238,231,.09) !important;
}

html[data-theme="dark"] .app .rating-pill,
html[data-theme="dark"] .app .summary-grid div {
  background: rgba(240,238,231,.055) !important;
}

html[data-theme="dark"] .app .endgame-callout {
  background: rgba(208,90,100,.035) !important;
}

html[data-theme="dark"] .app .kpi::after {
  border-color: rgba(59,168,162,.18) !important;
}

@media (max-width: 980px) {
  html[data-theme="dark"] .app .sidebar {
    background: rgba(16,18,16,.97) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-badge::before,
  .atlas-mark::after,
  .brand-badge::after,
  .atlas-mark::before {
    transition: none !important;
  }
}

/* Exact homepage brand lockup -------------------------------------------
   The previous integration only approximated the CLYD3 mark. These final
   rules mirror the homepage hierarchy: orbit + diagonal signal line + C3
   core + teal node, followed by the CLYD3 wordmark. Module names are metadata. */

.brand-badge,
.atlas-mark {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  isolation: isolate !important;
}

/* Exact circular orbit */
.brand-badge::before,
.atlas-mark::before {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid var(--ink, var(--text, #111111)) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: rotate(0deg) !important;
  transition: transform 450ms cubic-bezier(.2,.7,.2,1) !important;
  z-index: 0 !important;
}

/* Signal node */
.brand-badge::after,
.atlas-mark::after {
  content: '' !important;
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  right: 1px !important;
  top: 8px !important;
  left: auto !important;
  bottom: auto !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--teal, var(--green, #0d7c78)) !important;
  box-shadow: none !important;
  transform: translate(0,0) !important;
  transition: background 220ms ease, transform 450ms cubic-bezier(.2,.7,.2,1) !important;
  z-index: 3 !important;
}

/* C3 core and the same diagonal orbital line used on the homepage. */
.brand-badge > span,
.atlas-mark > span {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.08em !important;
  color: var(--ink, var(--text, #111111)) !important;
}

.brand-badge > span::before,
.atlas-mark > span::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 55% !important;
  height: 1px !important;
  background: var(--line, rgba(17,17,17,.18)) !important;
  transform: translate(-50%,-50%) rotate(-35deg) !important;
  z-index: -1 !important;
}

.brand:hover .brand-badge::before,
.brand:focus-visible .brand-badge::before,
.brand:hover .atlas-mark::before,
.brand:focus-visible .atlas-mark::before {
  transform: rotate(28deg) !important;
}

.brand:hover .brand-badge::after,
.brand:focus-visible .brand-badge::after,
.brand:hover .atlas-mark::after,
.brand:focus-visible .atlas-mark::after {
  background: var(--crimson, #a63d45) !important;
  transform: translate(-2px,8px) !important;
}

/* FUT: render the homepage wordmark exactly, then module metadata below. */
.sidebar .brand > div:last-child {
  display: grid !important;
  gap: 3px !important;
  align-content: center !important;
}

.sidebar .brand > div:last-child strong {
  display: block !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.sidebar .brand > div:last-child strong::before {
  content: 'CLYD3' !important;
  display: block !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  color: var(--ink, var(--text, #111111)) !important;
}

.sidebar .brand > div:last-child span {
  display: block !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.sidebar .brand > div:last-child span::before {
  content: 'SYSTEM 08 / FUT CLUB INTELLIGENCE' !important;
  display: block !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 7px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--soft-ink, var(--muted, #5f5d57)) !important;
}

/* Listening Atlas: same homepage wordmark, module identity as metadata. */
.site-header .brand > span:last-child {
  display: grid !important;
  gap: 3px !important;
  align-content: center !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.site-header .brand > span:last-child::before {
  content: 'CLYD3' !important;
  display: block !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  color: var(--ink, var(--text, #111111)) !important;
}

.site-header .brand > span:last-child::after {
  content: 'SYSTEM 09 / LISTENING ATLAS' !important;
  display: block !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 7px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--soft-ink, var(--muted, #5f5d57)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .brand-badge::before,
  .brand-badge::after,
  .atlas-mark::before,
  .atlas-mark::after {
    transition: none !important;
  }
}