/* 
* DiTracker Project Page Styles
* Refined: consistent IDs, no duplicated blocks, complete table highlight + legend styles
*/

:root {
/* Typography */
--font-primary: 'Wanted Sans Variable', 'Wanted Sans', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

/* Caption Font Size Configuration */
--caption-font-size: 1rem;

/* Colors - Brand */
--color-primary: #22869A;          /* Teal */
--color-primary-light: #2dd4bf;    /* Teal 400 */
--color-primary-dark: #22869A;     /* Teal 700-ish */
--color-cat3d: #8fdcd4;

/* Colors - Grayscale */
--color-bg: #ffffff;
--color-bg-alt: rgb(251, 255, 254);
--color-text-main: #1e293b;   /* Slate 800 */
--color-text-muted: #64748b;  /* Slate 500 */
--color-text-light: #94a3b8;  /* Slate 400 */
--color-border: #e2e8f0;      /* Slate 200 */
--color-border-light: #f1f5f9;/* Slate 100 */

/* Layout */
--container-width: 75rem;
--header-height: 4rem;
--sidebar-width: 160px;

/* ===== Table highlight colors (single teal palette, higher separation) ===== */

  /* Base colors (same as LaTeX) */
  --best-rgb:  34, 102, 154;
  --best2-rgb: 34, 108, 154;
  --best3-rgb: 34, 159, 154;

  /* Background + border (tune alpha like LaTeX best!45 etc.) */
  --best-bg:  rgba(var(--best-rgb),  0.45);
  --best-bd:  rgba(var(--best-rgb),  0.0);

  --best2-bg: rgba(var(--best2-rgb), 0.25);
  --best2-bd: rgba(var(--best2-rgb), 0.0);

  --best3-bg: rgba(var(--best3-rgb), 0.15);
  --best3-bd: rgba(var(--best3-rgb), 0.0);
}

/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
scroll-behavior: smooth;
font-size: 14.5px; /* global scale */
}

body {
font-family: var(--font-primary);
background-color: var(--color-bg);
color: var(--color-text-main);
line-height: 1.6;
padding-left: var(--sidebar-width);
}

img { max-width: 100%; height: auto; display: block; }

a { text-decoration: none; color: inherit; }

/* Typography Defaults */
h1, h2, h3, h4 {
color: #0f172a; /* Slate 900 */
font-weight: 700;
line-height: 1.2;
}

p {
margin-top: 0.8rem;
margin-bottom: 1.5rem;
font-size: 1.2rem;
color: var(--color-text-main);
text-align: left;
line-height: 1.625;
}

/* Layout Components */
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 1rem;
}

.section {
width: 100%;
padding: 3rem 0;
border-top: 1px solid var(--color-border);
}

.section.alt-bg { background-color: var(--color-bg-alt); }

.section-title {
font-size: 2.5rem;
color: var(--color-primary-dark);
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--color-border);
display: inline-block;
}

/* Navigation Sidebar */
.sidebar {
position: fixed;
top: 50%;
left: 2rem;
transform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.sidebar::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 6px;
width: 3px;
background: #e2e8f0;
z-index: 0;
}

.sidebar::after {
content: '';
position: absolute;
left: 6px;
width: 3px;
background: linear-gradient(to bottom, transparent, var(--color-primary), var(--color-primary), transparent);
z-index: 1;
transition: all 0.3s ease;
top: var(--active-position, 0);
height: 100px;
}

.sidebar-item {
display: flex;
align-items: center;
gap: 1rem;
transition: all 0.3s ease;
position: relative;
}

.sidebar-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #cbd5e1; /* Slate 300 */
transition: all 0.3s ease;
border: 2px solid var(--color-bg);
box-sizing: content-box;
position: relative;
z-index: 2;
}

.sidebar-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-muted);
transition: all 0.3s ease;
}

.sidebar-item:hover .sidebar-dot,
.sidebar-item.active .sidebar-dot {
background-color: var(--color-primary);
transform: scale(1.3);
}

.sidebar-item:hover .sidebar-label,
.sidebar-item.active .sidebar-label {
color: var(--color-primary);
font-weight: 700;
}

/* Sidebar → topbar on smaller screens */
@media (max-width: 1280px) {
body { padding-left: 0; }

.sidebar {
    position: sticky;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;

    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;

    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;

    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sidebar::-webkit-scrollbar { display: none; }

.sidebar::before, .sidebar::after { display: none; }
.sidebar-dot { display: none; }

.sidebar-item { gap: 0; padding: 0.5rem; }
.sidebar-label { font-size: 0.95rem; }
}

@media (max-width: 640px) {
.sidebar {
    justify-content: flex-start;
    padding: 1rem 1.5rem;
    gap: 1rem;
}
}

/* Hero Section */
.hero-section {
padding-top: 4rem;
text-align: center;
margin-bottom: 3rem;
}

.hero-container {
max-width: 64rem;
margin: 0 auto 3rem auto;
}

.hero-title {
font-size: 2.rem;
font-weight: 600;
margin-bottom: 1rem;
line-height: 1.25;
}

.hero-title .gradient-text {
background: linear-gradient(to right, var(--color-primary), var(--color-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
.hero-title { font-size: 3.75rem; }
}

.hero-status {
font-size: 1.25rem;
color: var(--color-primary-dark);
font-weight: 600;
margin-bottom: 1.5rem;
display: flex;
justify-content: center;
}

.hero-authors {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 1.5rem;
row-gap: 0.5rem;
font-size: 1.3rem;
margin-bottom: 1.5rem;
max-width: 56rem;
margin-left: auto;
margin-right: auto;
}

.hero-authors span {
color: #334155; /* Slate 700 */
font-weight: 500;
white-space: nowrap;
}

.hero-affiliations {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
color: var(--color-text-muted);
font-size: 1.3rem;
}

.hero-notes {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2rem;
color: var(--color-text-light);
font-size: 0.875rem;
font-style: italic;
}

.hero-buttons {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 3rem;
}

.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
border-radius: 9999px;
background-color: #1e293b; /* Slate 800 */
color: white;
font-weight: 500;
transition: background-color 0.3s;
border: 1px solid transparent;
}

.btn:hover { background-color: #334155; /* Slate 700 */ }

.btn.btn-outline {
background-color: white;
color: var(--color-text-main);
border: 1px solid #cbd5e1; /* Slate 300 */
}

.btn.btn-outline:hover { background-color: var(--color-bg-alt); }

.teaser-container {
width: 100%;
max-width: 72rem;   /* ← same scale as abstract / tables */
margin: 0 auto;
padding: 0 1rem;
}

.tldr-box {
width: 100%;
max-width: 72rem;
margin: 0 auto;
background-color: var(--color-bg-alt);
border: 2px solid var(--color-primary);
border-radius: 12px;
padding: 2rem;
}

.tldr-content {
display: flex;
flex-direction: column;
gap: 1rem;
}

@media (min-width: 768px) {
.tldr-content { flex-direction: row; align-items: center; }
}

.tldr-label {
background-color: var(--color-primary);
color: white;
font-size: 1.125rem;
font-weight: 700;
padding: 0.25rem 1rem;
border-radius: 0.5rem;
flex-shrink: 0;
}

.tldr-text {
font-size: 1.25rem;
color: var(--color-text-main);
font-weight: 500;
line-height: 1.625;
margin: 0 !important;
text-align: center;
}

.tldr-highlight {
color: var(--color-primary);
font-weight: 800;
}

/* Abstract */
.abstract-text {
font-size: 1.25rem;
color: var(--color-text-main);
text-align: left;
line-height: 1.625;
}

/* Analysis Section Containers */
.analysis-image-container {
width: 100%;
background-color: var(--color-bg);
border-radius: 0.5rem;
/* border: 1px solid var(--color-primary); */
padding: 0.5rem;
}

.analysis-image {
width: 100%;
height: auto;
max-height: 400px;
object-fit: contain;
border-radius: 0.5rem;
background-color: var(--color-bg);
}

/* Analysis subtitles */
#analysis > .container > div { margin-bottom: 4rem; }
#analysis > .container > div:last-child { margin-bottom: 0; }

.analysis-subtitle {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}

.analysis-subtitle.highlight { color: var(--color-primary-dark); }

/* Captions */
.results-caption,
.teaser-caption {
width: 100%;
color: #334155;
margin-top: 0.5rem;
}

.results-caption p {
text-align: center;
font-size: var(--caption-font-size);
line-height: 1.625;
margin-bottom: 0;
}

.teaser-caption p {
text-align: left;
font-size: 1.2rem;
line-height: 1.625;
margin-bottom: 0;
}

/* Tables */
.table-figure { margin: 0; }
.table-figure figcaption {
font-size: 0.95rem;
color: var(--color-text-main);
margin-bottom: 0.75rem;
text-align: left;
line-height: 1.5;
}

.table-caption {
font-size: 0.9rem;
color: var(--color-text-main);
margin-bottom: 0.75rem;
text-align: left;
line-height: 1.4;
}

.results-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}

.results-table th,
.results-table td {
padding: 0.45rem 0.35rem;
text-align: center;
border-bottom: 1px solid var(--color-border-light);
}

.results-table td:first-child,
.results-table th:first-child {
text-align: left;
white-space: nowrap;
padding-left: 0.5rem;
}

.results-table th {
font-weight: 700;
color: var(--color-text-main);
border-bottom: 2px solid var(--color-text-main);
}

.results-table .highlight-row {
background-color: #f0fdfa; /* Teal 50 */
font-weight: 700;
}

.results-table .highlight-row td {
color: var(--color-primary-dark);
}

.results-table .group-divider td,
.results-table .separator-row td {
border-bottom: 1px solid var(--color-border);
height: 1px;
padding: 0;
}

.results-table .v-after-method { border-right: 2.5px solid #334155; }
.results-table .v-major        { border-left:  2.5px solid #334155; }
.results-table .v-minor        { border-left:  1.5px solid #94a3b8; }

/* ✅ Best/2nd/3rd highlights + legend */
.legend {
display: inline-flex;
gap: 0.9rem;
margin-left: 0.75rem;
align-items: center;
}

.legend .swatch {
width: 0.95rem;
height: 0.95rem;
border-radius: 0.25rem;
display: inline-block;
border: 1px solid transparent;
vertical-align: middle;
margin-right: 0.3rem;
}

.results-table td.best,
.results-table td.best2,
.results-table td.best3 {
font-weight: 800;
border: 1px solid transparent;
/* border-radius: 0.25rem; */
}

.best  { background: var(--best-bg);  border-color: var(--best-bd); }
.best2 { background: var(--best2-bg); border-color: var(--best2-bd); }
.best3 { background: var(--best3-bg); border-color: var(--best3-bd); }

/* Carousel */
.carousel-container { position: relative; width: 100%; }

.carousel-viewport {
overflow: hidden;
border-radius: 0.75rem;
background-color: white;
transition: height 0.3s ease;
}

.carousel-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
align-items: flex-start;
}

.carousel-slide {
width: 100%;
flex-shrink: 0;
position: relative;
}

.carousel-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2.5rem;
height: 2.5rem;
background-color: var(--color-bg-alt);
border-radius: 50%;
border: 1px solid var(--color-primary);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.2s;
}

.carousel-nav-btn:hover {
color: var(--color-bg-alt);
background-color: var(--color-primary);
}

.carousel-nav-btn.prev { left: -1rem; }
.carousel-nav-btn.next { right: -1rem; }

@media (min-width: 768px) {
.carousel-nav-btn.prev { left: -3rem; }
.carousel-nav-btn.next { right: -3rem; }
}

.carousel-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
}

.carousel-dot {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background-color: #cbd5e1;
border: none;
cursor: pointer;
transition: all 0.3s;
}

.carousel-dot.active {
background-color: var(--color-primary);
width: 1.2rem;
border-radius: 0.4rem;
}

/* Slides */
.results-slide-content { padding: 1rem; width: 100%; }

.results-slide-title {
font-size: 1.875rem;
font-weight: 800;
color: #334155;
margin-bottom: 1rem;
text-align: center;
}

/* Qualitative Grids */
.qual-grid {
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
width: 100%;
align-items: stretch;
}

@media (min-width: 768px) {
.qual-grid { gap: 0.75rem; }
}

.qual-grid2 {
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
width: 100%;
align-items: stretch;
}

@media (min-width: 768px) {
.qual-grid2 { gap: 0.75rem; }
}

.qual-col {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.qual-header {
font-size: 1.2rem;
font-weight: 700;
text-align: center;
margin-bottom: 0.1rem;
color: var(--color-text-muted);
/* text-transform: uppercase; */
letter-spacing: 0.05em;
}

.qual-vid, .qual-image {
width: 100%;
height: auto;
border-radius: 0.5rem;
object-fit: cover;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Results blocks */
.results-block { margin-bottom: 6rem; }
.results-block:last-child { margin-bottom: 0; }

/* Ablation cards */
.ablation-item {
background: white;
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--color-border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ablation-split-container {
display: flex;
gap: 2rem;
align-items: flex-start;
text-align: left;
}

.ablation-table-col,
.ablation-qual-col {
flex: 1;
min-width: 0;
}

.ablation-qual-col .qual-pair-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}

@media (max-width: 1024px) {
.ablation-split-container { flex-direction: column; }
.ablation-table-col, .ablation-qual-col { width: 100%; }
}

/* Citation */
.citation-section {
padding: 8rem 0;
border-top: 1px solid var(--color-border);
margin-top: 2rem;
}

.citation-block {
background-color: var(--color-bg-alt);
color: var(--color-text-muted);
padding: 1rem;
border-radius: 0.25rem;
border: 1px solid var(--color-border);
overflow-x: auto;
position: relative;
text-align: left;
}

.citation-block:hover .citation-copy-btn { opacity: 1; }

.citation-copy-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background-color: white;
border: 1px solid #cbd5e1;
color: var(--color-text-muted);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
transition: opacity 0.2s;
opacity: 0;
cursor: pointer;
}

.citation-code {
font-family: var(--font-mono);
font-size: 1.0rem;
line-height: 1.625;
}

/* Footer */
.footer {
background-color: white;
border-top: 1px solid var(--color-border);
padding: 2rem 0;
margin-top: 2rem;
text-align: center;
color: var(--color-text-light);
font-size: 0.875rem;
}

/* Fade-in */
.fade-in-section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
opacity: 1;
transform: none;
}

/* Mobile text scale */
@media (max-width: 768px) {
p { font-size: 1rem; }
:root { --caption-font-size: 0.875rem; }
}

/* --- 1) force perfect centering for the small-group header row --- */
.results-table thead tr:nth-child(2) th {           /* row with [0%,0.5%) etc */
text-align: center;
padding-left: 0.6rem;
padding-right: 0.6rem;
}

/* --- 2) metric header row (AJ / δavg / OA) centered and consistent --- */
.results-table thead tr:last-child th {
text-align: center;
padding-left: 0.45rem;
padding-right: 0.45rem;
white-space: nowrap;
}

/* --- 3) thick vertical separators (do NOT affect centering) --- */
.results-table thead tr:last-child th.sub-end {
border-right: 2px solid #0f172a; /* same as your black rules */
}

/* Center benchmark titles in Qualitative Results */
#results .qual-benchmark-block .analysis-subtitle {
text-align: center;
}