/* Petology Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  font-family: var(--font-sans);
  background-color: #09090b;
  color: #a1a1aa;
  /* Safety net against page-level horizontal scroll on narrow phone
     screens - any content that genuinely needs to scroll sideways (wide
     tables, the pedigree tree, etc.) already has its own overflow-x-auto
     wrapper, so this only clips accidental overflow, never an intentional
     one. */
  overflow-x: hidden;
}


h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #09090b;
}

::-webkit-scrollbar-thumb {
  background: #27272a; /* zinc-800 */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46; /* zinc-700 */
}

/* Custom Glassmorphism */
.glass-panel {
  background: rgba(24, 24, 27, 0.85); /* zinc-900/85 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(63, 63, 70, 0.4); /* zinc-700/40 */
}

.glass-card-hover {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card-hover:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.5); /* amber-500/50 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Pedigree Tree Line Connections */
.pedigree-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 1.5rem;
  align-items: center;
  position: relative;
  overflow-x: auto;
  padding: 1rem 0;
}

.pedigree-col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  min-height: 480px;
  position: relative;
}

/* Connector Lines using absolute positioning */
.pedigree-connector-right::after {
  content: '';
  position: absolute;
  right: -0.75rem;
  top: 50%;
  width: 0.75rem;
  height: 2px;
  background: #3f3f46; /* zinc-700 */
  z-index: 1;
}

.pedigree-connector-fork::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 25%;
  width: 2px;
  height: 50%;
  background: #3f3f46;
  z-index: 1;
}

.pedigree-connector-left::after {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 50%;
  width: 0.75rem;
  height: 2px;
  background: #3f3f46;
  z-index: 1;
}

/* Paywall Blur styling */
.paywall-blur {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

/* High Contrast Accent Borders */
.accent-border {
  border-image: linear-gradient(to right, #f59e0b, #d97706) 1;
}

/* Circular Progress Ring Animation */
.progress-ring-circle {
  transition: stroke-dashoffset 0.6s ease-in-out;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Shimmer animation for loading states or metric charts */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-bg {
  background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Active tab styles mimicking shadcn-ui buttons */
.tab-active {
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  background-color: rgba(245, 158, 11, 0.08);
  color: #fbbf24; /* amber-400 */
}

aside nav button {
  border: 1.5px solid transparent;
  transition: all 150ms ease-in-out;
}

/* Ribbons and brags colors */
.ribbon-gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.ribbon-silver {
  background: linear-gradient(135deg, rgba(161, 161, 170, 0.15) 0%, rgba(113, 113, 122, 0.15) 100%);
  border: 1px solid rgba(161, 161, 170, 0.3);
  color: #e4e4e7;
}

.ribbon-bronze {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.15) 0%, rgba(146, 64, 14, 0.15) 100%);
  border: 1px solid rgba(180, 83, 9, 0.3);
  color: #fb923c;
}

/* High Contrast Indicators */
.indicator-pulse-high {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: .6;
    transform: scale(1.1);
  }
}

/* AI Conformation Angle Scan Animation */
@keyframes scan {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.angle-scan-anim {
  animation: scan 1.8s linear infinite;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* ===== Interactive SVG Pedigree Tree ===== */
.ped-node-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: rgba(24, 24, 27, 0.9);
  border: 1px solid #3f3f46;
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  transition: box-shadow 0.15s, opacity 0.2s, border-color 0.15s;
  overflow: hidden;
}
.ped-node-card.clickable { cursor: pointer; }
.ped-node-card.clickable:hover { border-color: #f59e0b; }
.ped-node-card.unknown { border-style: dashed; color: #71717a; justify-content: center; }
.ped-node-card.root { border-color: #f59e0b; border-width: 2px; }
.ped-node-thumb {
  width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
  background: #27272a; border: 1px solid #3f3f46;
}
.ped-node-name {
  font-size: 9px; font-weight: 700; color: #fff; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ped-node-title { font-size: 7px; color: #f59e0b; font-weight: 700; }
.ped-node-sub { font-size: 7.5px; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ped-line { stroke: #52525b; stroke-width: 1.5; fill: none; transition: stroke 0.2s, stroke-width 0.2s, opacity 0.2s; }
.ped-line.highlighted { stroke: #f59e0b; stroke-width: 2.5; filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.9)); }

.pedigree-trace-active .ped-line:not(.highlighted) { opacity: 0.12; }
.pedigree-trace-active .ped-node-card:not(.highlighted) { opacity: 0.3; }
.ped-node-card.highlighted {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5), 0 0 14px rgba(245, 158, 11, 0.55);
}

#pedigree-hover-tooltip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  background: #18181b;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 10px;
  color: #fff;
  max-width: 200px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  display: none;
}
#pedigree-hover-tooltip img {
  width: 100%; height: 90px; object-fit: cover; border-radius: 4px; margin-bottom: 6px; border: 1px solid #3f3f46;
}

/* ===== Light Mode =====
   Replaces an earlier filter:invert(1) hue-rotate(180deg) hack, which
   technically flipped dark<->light but produced muddy, hue-shifted colors,
   washed-out accents, and broken-looking native checkboxes (the invert
   turned their default white fill into solid black squares). This version
   does a real, per-class color swap: every zinc-shade utility Petology
   actually uses (verified via grep across index.html, including the
   custom in-between shades like zinc-750/850 the site relies on but
   Tailwind's default scale and the config below didn't fully define) gets
   an explicit light-mode equivalent, producing a clean soft-white
   background with true near-black text rather than an inverted negative.

   [class*="..."] attribute selectors are used instead of exact class
   matches so one rule also catches every opacity variant of that shade
   (bg-zinc-900/40, bg-zinc-900/60, etc.) without enumerating each one.

   Two deliberate exclusions:
   - text-zinc-900/950 are never remapped: on this site they're used
     exclusively as dark text ON amber/white buttons and badges (e.g.
     "bg-amber-500 text-zinc-950"), not as page copy, so they must stay
     dark in both themes or button labels lose contrast.
   - Full-viewport modal backdrops (fixed + inset-0 + an opacity-suffixed
     zinc-950/black) stay dark in both themes, same as most light-themed
     apps - only in-card dimming overlays (paywalls, etc., which use
     "absolute inset-0" instead of "fixed inset-0") flip light. */
html.light-mode { color-scheme: light; }

/* ---- Backgrounds (page/card/panel surfaces, darkest -> lightest) ---- */
html.light-mode [class*="bg-zinc-950"] { background-color: #fafaf9 !important; }
html.light-mode [class*="bg-zinc-900"] { background-color: #ffffff !important; }
html.light-mode [class*="bg-zinc-850"] { background-color: #f2f2f3 !important; }
html.light-mode [class*="bg-zinc-800"] { background-color: #eaeaea !important; }
html.light-mode [class*="bg-zinc-750"] { background-color: #e2e2e2 !important; }
html.light-mode [class*="bg-zinc-700"] { background-color: #d8d8d8 !important; }

/* In-card gradient panels (not photo-overlay gradients - those keep
   from-zinc-900/950/via-.../to-transparent and are intentionally untouched
   so captions over photos stay legible) collapse to a flat light panel.
   The :not() exclusions are the actual enforcement of that intent: any
   element whose class also contains "to-transparent" or "via-transparent"
   is a photo-darkening scrim (e.g. the Stud Directory card's
   "absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent
   to-transparent" overlay), not a solid panel background. Without this
   exclusion the stud photo overlay was matched by [class*="from-zinc-900"]
   and got flattened into a fully opaque #f2f2f3 rectangle covering the
   entire photo in light mode - the fix for "stud images don't render in
   light mode". */
html.light-mode [class*="from-zinc-900"]:not([class*="to-transparent"]):not([class*="via-transparent"]),
html.light-mode [class*="to-zinc-950"]:not([class*="to-transparent"]):not([class*="via-transparent"]) {
  background-image: none !important;
  background-color: #f2f2f3 !important;
}

/* ---- Borders ---- */
html.light-mode [class*="border-zinc-950"],
html.light-mode [class*="border-zinc-900"],
html.light-mode [class*="border-zinc-850"] { border-color: #e4e4e7 !important; }
html.light-mode [class*="border-zinc-800"] { border-color: #d4d4d8 !important; }
html.light-mode [class*="border-zinc-750"],
html.light-mode [class*="border-zinc-700"],
html.light-mode [class*="border-zinc-650"],
html.light-mode [class*="border-zinc-600"] { border-color: #c7c7cd !important; }

html.light-mode [class*="divide-zinc-900"] > :not([hidden]) ~ :not([hidden]),
html.light-mode [class*="divide-zinc-850"] > :not([hidden]) ~ :not([hidden]),
html.light-mode [class*="divide-zinc-800"] > :not([hidden]) ~ :not([hidden]) {
  border-color: #e4e4e7 !important;
}

/* ---- Text (excludes zinc-900/950 - see note above) ---- */
html.light-mode [class*="text-white"],
html.light-mode [class*="text-zinc-100"],
html.light-mode [class*="text-zinc-200"] { color: #18181b !important; }
html.light-mode [class*="text-zinc-250"],
html.light-mode [class*="text-zinc-300"] { color: #27272a !important; }
html.light-mode [class*="text-zinc-350"],
html.light-mode [class*="text-zinc-400"] { color: #3f3f46 !important; }
html.light-mode [class*="text-zinc-450"],
html.light-mode [class*="text-zinc-500"] { color: #52525b !important; }
html.light-mode [class*="text-zinc-550"],
html.light-mode [class*="text-zinc-600"] { color: #6b6b74 !important; }
html.light-mode [class*="text-zinc-650"],
html.light-mode [class*="text-zinc-700"] { color: #71717a !important; }
html.light-mode [class*="text-zinc-800"] { color: #9a9aa2 !important; }

html.light-mode [class*="placeholder-zinc-700"]::placeholder,
html.light-mode [class*="placeholder-zinc-500"]::placeholder { color: #a1a1aa !important; }

/* ---- Full-viewport modal backdrops stay dark for legibility in both
   themes (checked via "zinc-950/" or "black/" with the slash, so this
   never catches the plain, non-transparent bg-zinc-950 the landing-page
   greeting overlay uses as its actual page background). ---- */
html.light-mode [class*="fixed"][class*="inset-0"][class*="zinc-950/"],
html.light-mode [class*="fixed"][class*="inset-0"][class*="black/"] {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Native checkbox/select chrome: let the browser render these with the
   light-mode colors set above (bg-zinc-950/border-zinc-800 on a checkbox
   now resolve to a real light gray box) instead of forcing a dark
   color-scheme that would fight the palette swap. */
html.light-mode input,
html.light-mode select,
html.light-mode textarea { color-scheme: light; }

/* ---- Custom hand-written classes (not Tailwind utilities, so none of
   the [class*="..."] rules above touch them) that carry their own
   hardcoded dark colors. Found by auditing every plain CSS class in this
   file for hex/rgba color values - these are the ones that render visible
   UI, e.g. .glass-panel is the stud/marketplace card background used on
   every directory card, and .ped-node-* is the Interactive Pedigree Tree,
   so leaving these out would mean two of the app's flagship views stayed
   dark islands in an otherwise light page. ---- */
html.light-mode .glass-panel {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(228, 228, 231, 0.9);
}
html.light-mode .shimmer-bg {
  background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%);
  background-size: 200% 100%;
}
html.light-mode .ped-node-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: #d4d4d8;
}
html.light-mode .ped-node-card.unknown { color: #71717a; }
html.light-mode .ped-node-thumb {
  background: #e4e4e7;
  border-color: #d4d4d8;
}
html.light-mode .ped-node-name { color: #18181b; }
html.light-mode .ped-node-sub { color: #52525b; }
html.light-mode .ped-line { stroke: #a1a1aa; }
html.light-mode .pedigree-connector-right::after,
html.light-mode .pedigree-connector-fork::before,
html.light-mode .pedigree-connector-left::after { background: #d4d4d8; }
html.light-mode #pedigree-hover-tooltip {
  background: #ffffff;
  border-color: #f59e0b;
  color: #18181b;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
html.light-mode .ribbon-silver { color: #52525b; }

/* Arbitrary-value Tailwind classes (bg-[#09090b], bg-[#111113]) used for
   the stud profile modal shell and its Overview/Quick Specs/Assessment/
   Gallery panels - these are literal hex values, not zinc-utility class
   names, so none of the [class*="bg-zinc-..."] rules above ever match
   them. Found by grepping index.html for every bg-[#...] arbitrary value
   after noticing these exact panels were still rendering dark islands
   inside an otherwise-white modal. */
html.light-mode [class*="bg-[#09090b]"] { background-color: #fafaf9 !important; }
html.light-mode [class*="bg-[#111113]"] { background-color: #f2f2f3 !important; }

/* The PDF certificate always renders to a fixed white/black print layout
   regardless of site theme - it's already plain white/black in its own
   markup, so simply leave it out of every above rule by scoping nothing
   special here; no invert-cancellation is needed anymore. */