/* ============================================================
   M6 INTERACTIVE STUDBOOK
   All colors use only tokens.css values.
   Gold is ONLY on shared-ancestor highlight and champion nodes.
   Sire line: --green; dam line: --crimson; strain overlay: --runner-4.
   Extracted from views.css (over 800-line cap) per BUILD-SPEC section 3.
   ============================================================ */

/* ----- Studbook page layout ----- */
.studbook-view { padding-block: 32px 64px; }
.studbook-view h1 { margin-block-end: 24px; }
.studbook-view .concept-note { margin-block-end: 24px; }

/* ----- Fan tree container ----- */
.fan-tree {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  padding-block: 16px;
  padding-inline: 8px;
}

/* RTL: fan fans right-to-left (ancestor nodes expand toward the right).
   LTR: fan fans left-to-right. Uses --end and --ax custom properties. */
[dir="rtl"] .fan-tree { flex-direction: row-reverse; }
[dir="ltr"] .fan-tree { flex-direction: row; }

.fan-tree__self {
  flex-shrink: 0;
  align-self: center;
}

.fan-tree__level {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  justify-content: space-around;
  /* Expand toward the logical end (right in RTL, left in LTR). */
  transform-origin: var(--end, 100%) center;
}

/* ----- Pedigree nodes (studbook fan tree variant) ----- */
/* Note: the passport .ped-node rules in views.css are a separate, simpler
   grid variant. The fan-tree .ped-node below overrides that variant when
   inside .fan-tree context. */
.fan-tree .ped-node {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: .82rem;
  min-width: 110px;
  max-width: 170px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.fan-tree .ped-node:hover,
.fan-tree .ped-node:focus-within {
  border-color: var(--sand-dim);
  box-shadow: 0 0 0 2px var(--line-soft);
}

/* Sire line: green accent */
.ped-node--sire,
.ped-node.line--sire {
  border-inline-start: 3px solid var(--green);
}

/* Dam line: crimson accent */
.ped-node--dam,
.ped-node.line--dam {
  border-inline-start: 3px solid var(--crimson);
}

/* Self node */
.ped-node--self {
  border: 2px solid var(--green);
  background: var(--surface-3);
}

/* Champion node: gold border (honor) */
.ped-node--champion {
  border-color: var(--gold);
}

/* Shared ancestor: gold highlight (honor) */
.ped-node--shared,
.shared-ancestor {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--surface-2) 85%, var(--gold));
}

/* Oral record stub */
.ped-node--oral,
.oral-record {
  opacity: .65;
  border-style: dashed;
  cursor: default;
}

/* ----- PRD 1.2: hover tooltip ----- */
.ped-node__tip {
  display: none;
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 20;
  min-width: 160px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-3);
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.ped-node:hover .ped-node__tip,
.ped-node:focus-within .ped-node__tip {
  display: flex;
}

.ped-node__tip-ar {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.2;
}

.ped-node__tip-en {
  font-size: .78rem;
  color: var(--sand-dim);
}

.ped-node__tip-speed {
  font-family: var(--f-mono);
  font-size: .8rem;
  color: var(--green-deep);
  unicode-bidi: isolate;
  direction: ltr;
}

/* ----- Node labels ----- */
.ped-node__ar { font-weight: 600; color: var(--text-strong); line-height: 1.2; }
.ped-node__en { font-size: .72rem; color: var(--sand-dim); }
.ped-node__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--green-deep);
  unicode-bidi: isolate;
  direction: ltr;
}
.ped-node__pill-sep { color: var(--muted); }

/* Strain overlay: togglable third color (--runner-4 = violet, non-gold) */
.fan-tree--strain .ped-node { border-inline-start-color: var(--node-strain-color, var(--muted)); }

/* ----- PRD 1.3: ancestor drawer (end-side, RTL-aware slide-in) ----- */
.ancestor-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(380px, 92vw);
  background: var(--surface-2);
  border-inline-start: 1px solid var(--line);
  box-shadow: -4px 0 24px rgba(60,30,10,.12);
  overflow-y: auto;
  z-index: 300;
  transform: translateX(var(--ax, 0));
  transition: transform .28s var(--ease-out, ease-out);
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* RTL: drawer slides in from the right edge */
[dir="rtl"] .ancestor-drawer { transform: translateX(var(--ax, 0)); }
/* LTR: drawer slides in from the right edge too (end side) */
[dir="ltr"] .ancestor-drawer { inset-inline-end: 0; inset-inline-start: auto; }

.ancestor-drawer[hidden] { display: none; }

.drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer__close {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--sand-dim);
  cursor: pointer;
  padding: 4px 8px;
  font-size: .85rem;
  flex-shrink: 0;
}
.drawer__close:hover { color: var(--text); border-color: var(--sand-dim); }

.drawer__federation-note {
  font-size: .78rem;
  color: var(--muted);
  border-block-start: 1px solid var(--line);
  padding-block-start: 12px;
  margin-block-start: auto;
}

/* ----- Compare view ----- */
.compare-view { padding-block: 32px 64px; }
.compare-view h1 { margin-block-end: 24px; }

.compare__sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 767px) {
  .compare__sides { grid-template-columns: 1fr; }
}

.compare-side { overflow-x: auto; }
.compare-side__title { font-size: 1rem; margin-block-end: 12px; color: var(--sand); }

.compare__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  text-align: center;
  padding: 24px;
  gap: 12px;
}

/* ----- Compare curves SVG ----- */
.compare__curves { margin-block: 24px; }
.compare-curves { width: 100%; height: 100px; display: block; }
.compare__curves-legend {
  display: flex;
  gap: 16px;
  font-size: .78rem;
  color: var(--sand-dim);
  margin-block-start: 6px;
}
.legend__a { color: var(--green-deep); }
.legend__b { color: var(--crimson); }

/* ----- Rankings tables ----- */
.rankings-section { margin-block-start: 40px; }
.rankings-section h2 { margin-block-end: 16px; }
.rankings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 767px) { .rankings-grid { grid-template-columns: 1fr; } }

.sire-rankings,
.dam-rankings {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 16px;
  border: 1px solid var(--line);
}
.sire-rankings h3 { color: var(--green); margin-block-end: 12px; }
.dam-rankings h3 { color: var(--crimson); margin-block-end: 12px; }

/* ----- Breeder mode / cross-search ----- */
.breeder-section { margin-block-start: 32px; border-block-start: 1px solid var(--line); padding-block-start: 24px; }
.breeder-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  font-size: .85rem;
}
.breeder-toggle:hover { border-color: var(--sand-dim); }
.breeder-toggle[aria-pressed="true"] { border-color: var(--green); color: var(--green-deep); }

.cross-search { margin-block-start: 16px; }
.cross-search__pdpl { font-size: .78rem; color: var(--muted); margin-block-start: 8px; }
.cross-search__no-match { color: var(--muted); padding: 12px; }

/* ----- Strain and concept badges ----- */
.strain-badge { font-size: .72rem; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--sand-dim); background: var(--surface-3); }
.concept-badge { font-size: .72rem; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); color: var(--sand-dim); background: var(--surface-3); display: inline-block; }

/* ----- Reduced motion: disable drawer transition and node hover animation ----- */
@media (prefers-reduced-motion: reduce) {
  .ancestor-drawer { transition: none; }
  .fan-tree .ped-node { transition: none; }
}

/* ----- High contrast: stronger borders ----- */
@media (prefers-contrast: more) {
  .fan-tree .ped-node { border-width: 2px; }
  .ped-node--sire, .ped-node.line--sire { border-inline-start-width: 4px; }
  .ped-node--dam, .ped-node.line--dam { border-inline-start-width: 4px; }
}