dashboard/reference_style.css

/* Adapted from huggingface/lerobot-dashboard (Apache-2.0). */

/* ---- Design tokens ----
   The eight chart hues, in the same fixed order charts.py assigns them, so a
   gradient and a plot on the same screen are visibly the same system. Orange and
   indigo lead: they are the dashboard's accents.  */
:root {
    --viz-1: #d95926;  /* orange */
    --viz-2: #9085e9;  /* indigo */
    --viz-3: #1baf7a;  /* aqua   */
    --viz-4: #c98500;  /* yellow */
    --viz-5: #d55181;  /* magenta*/
    --viz-6: #008300;  /* green  */
    --viz-7: #2a78d6;  /* blue   */
    --viz-8: #e34948;  /* red    */
    --viz-spectrum: linear-gradient(90deg,
        var(--viz-1), var(--viz-4), var(--viz-6), var(--viz-3),
        var(--viz-7), var(--viz-2), var(--viz-5), var(--viz-8));
    --panel-lift: 0 10px 28px -14px rgba(15, 23, 42, 0.42);
}

/* ---- Page & Masthead ---- */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    background:
        radial-gradient(circle at 10% -4%, color-mix(in srgb, var(--viz-1) 14%, transparent), transparent 34rem),
        radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--viz-2) 13%, transparent), transparent 30rem),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--viz-3) 8%, transparent), transparent 34rem),
        var(--background-fill-primary);
}
.dashboard-hero {
    position: relative;
    overflow: hidden;
    margin: 6px 0 18px;
    padding: 30px 30px 28px;
    border: 1px solid var(--border-color-primary);
    border-radius: 20px;
    background:
        linear-gradient(125deg,
            color-mix(in srgb, var(--viz-1) 12%, transparent),
            color-mix(in srgb, var(--viz-2) 10%, transparent) 55%,
            color-mix(in srgb, var(--viz-3) 8%, transparent));
}
/* The spectrum reads as the product's signature without ever encoding data. */
.dashboard-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--viz-spectrum);
}
.dashboard-hero::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -55px;
    top: -70px;
    border: 32px solid color-mix(in srgb, var(--viz-1) 14%, transparent);
    border-radius: 50%;
}
.hero-eyebrow {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
    background: var(--viz-spectrum);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: fit-content;
}
.hero-copy { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.hero-copy h1 { font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1; margin: 0 0 10px; letter-spacing: -0.04em; }
.hero-copy p { color: var(--body-text-color-subdued); font-size: 1.1rem; margin: 0; max-width: 680px; }
.freshness-pill {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    background: var(--background-fill-primary);
    border: 1px solid var(--border-color-primary);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 650;
}
.freshness-pill span {
    width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

/* ---- Metric Cards ---- */
.metric-card {
    --card-accent: var(--viz-1);
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--background-fill-secondary) 90%, transparent);
    border: 1px solid var(--border-color-primary);
    border-radius: 16px;
    padding: 18px 20px;
    text-align: left;
    flex: 1;
    min-width: 140px;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    animation: fadeInUp 0.4s ease-out both;
}
.metric-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--card-accent);
    opacity: 0.72;
    transition: opacity 0.2s ease;
}
.metric-card:hover::after { opacity: 1; }
.metric-card:nth-child(8n + 1) { --card-accent: var(--viz-1); animation-delay: 0.0s; }
.metric-card:nth-child(8n + 2) { --card-accent: var(--viz-2); animation-delay: 0.06s; }
.metric-card:nth-child(8n + 3) { --card-accent: var(--viz-3); animation-delay: 0.12s; }
.metric-card:nth-child(8n + 4) { --card-accent: var(--viz-4); animation-delay: 0.18s; }
.metric-card:nth-child(8n + 5) { --card-accent: var(--viz-5); animation-delay: 0.24s; }
.metric-card:nth-child(8n + 6) { --card-accent: var(--viz-6); animation-delay: 0.30s; }
.metric-card:nth-child(8n + 7) { --card-accent: var(--viz-7); animation-delay: 0.36s; }
.metric-card:nth-child(8n)     { --card-accent: var(--viz-8); animation-delay: 0.42s; }
.metric-card:hover {
    box-shadow: var(--panel-lift);
    border-color: color-mix(in srgb, var(--card-accent) 38%, var(--border-color-primary));
    transform: translateY(-2px);
}
.metric-label {
    font-size: 0.9rem;
    color: var(--body-text-color-subdued);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    font-weight: 600;
}
.metric-value {
    font-size: 2rem;
    font-weight: 760;
    color: var(--body-text-color);
    line-height: 1.2;
}
.metric-trend-label {
    font-size: 0.8rem;
    color: var(--body-text-color-subdued);
    margin-top: 1px;
}
.metric-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 16px 0;
}

/* ---- Insight & source panels ---- */
.insight-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 18px;
}
.insight-card {
    position: relative; overflow: hidden;
    border: 1px solid var(--border-color-primary); border-radius: 16px; padding: 18px;
    background: var(--background-fill-secondary);
}
.insight-card::before, .source-panel::before, .callout::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--viz-spectrum);
}
.insight-label {
    color: var(--body-text-color-subdued); font-size: .84rem; font-weight: 750;
    letter-spacing: .06em; text-transform: uppercase;
}
.insight-value { margin: 7px 0 5px; font-size: 1.65rem; font-weight: 780; }
.insight-card p { margin: 0; color: var(--body-text-color-subdued); font-size: .92rem; line-height: 1.45; }
.source-panel {
    position: relative;
    border: 1px solid var(--border-color-primary); border-radius: 16px; overflow: hidden;
    background: var(--background-fill-secondary);
}
.source-row {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 15px;
    border-bottom: 1px solid var(--border-color-primary);
}
.source-row:last-child { border-bottom: 0; }
.source-row strong { display: block; font-size: .96rem; }
.source-row small { color: var(--body-text-color-subdued); font-size: .86rem; }
.source-badge { border-radius: 999px; padding: 4px 9px; font-size: .78rem; font-weight: 750; }
.source-ok { background: rgba(34,197,94,.12); color: #16a34a; }
.source-stale { background: rgba(245,158,11,.14); color: #d97706; }
.source-unavailable { background: rgba(148,163,184,.14); color: var(--body-text-color-subdued); }

/* ---- Disclaimer & footer ---- */
.disclaimer {
    margin-top: 24px;
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--body-text-color-subdued);
    border-top: 1px solid var(--border-color-primary);
}
.dashboard-footer {
    margin-top: 28px;
    padding: 14px 2px 4px;
    border-top: 1px solid var(--border-color-primary);
    color: var(--body-text-color-subdued);
    font-size: 0.9rem;
    line-height: 1.55;
}
.dashboard-footer p { margin: 0 0 4px; }
.dashboard-footer p:last-child { margin-bottom: 0; }
/* Distinct from the single global footer: this one dates one tab's data. */
.curation-note {
    border-top: 0;
    border-left: 3px solid color-mix(in srgb, var(--viz-2) 55%, transparent);
    padding: 10px 14px;
    margin-top: 20px;
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--viz-2) 6%, transparent);
}

/* ---- Table Column Widths ---- */
table td:first-child, table th:first-child {
    min-width: 200px;
}

/* ---- Callout Box ---- */
.callout {
    position: relative;
    overflow: hidden;
    background: var(--background-fill-secondary);
    border-left: 4px solid var(--viz-1);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 1rem;
    color: var(--body-text-color);
    line-height: 1.5;
    animation: fadeIn 0.5s ease-out;
}

/* ---- Section Headers ---- */
.section-header {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 24px 0 8px 0;
    color: var(--body-text-color);
    border-bottom: 2px solid var(--border-color-primary);
    padding-bottom: 6px;
}

/* ---- General Layout Tweaks ---- */
.gradio-container {
    max-width: 1320px !important;
    width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 17px;
}
.gradio-container * { font-family: inherit; }
.gradio-container .prose { font-size: 1.02rem; }
.gradio-container table { font-size: .95rem; }
.gradio-container .prose h2, .gradio-container .prose h3 {
    width: fit-content;
    padding-bottom: 6px;
    background: var(--viz-spectrum) left bottom / 100% 3px no-repeat;
}
footer {
    display: none !important;
}
.tab-nav button {
    font-size: 1rem !important;
    font-weight: 650 !important;
    border-radius: 10px 10px 0 0 !important;
    transition: color 0.15s ease, background 0.15s ease;
}
.tab-nav button:hover { background: color-mix(in srgb, var(--viz-1) 9%, transparent); }
.tab-nav button.selected {
    position: relative;
    background: color-mix(in srgb, var(--viz-1) 12%, transparent) !important;
    box-shadow: none;
}
.tab-nav button.selected::after {
    content: ""; position: absolute; inset: auto 8px 0; height: 3px; border-radius: 999px;
    background: var(--viz-spectrum);
}
.plot-container, .table-wrap { border-radius: 14px !important; overflow: hidden; }

/* ---- Panel hover ----
   One hover language for every panel on the page: a small lift, a slightly
   warmer border, and a soft shadow. Purely decorative, never encodes data. */
.gradio-container .block:has(.plot-container),
.gradio-container .block:has(.table-wrap),
.insight-card,
.source-panel,
.company-card {
    --card-accent: var(--viz-1);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.gradio-container .block:has(.plot-container):hover,
.gradio-container .block:has(.table-wrap):hover,
.insight-card:hover,
.source-panel:hover {
    box-shadow: var(--panel-lift);
    border-color: color-mix(in srgb, var(--viz-2) 30%, var(--border-color-primary));
    transform: translateY(-2px);
}
.source-row { transition: background 0.15s ease; }
.source-row:hover { background: color-mix(in srgb, var(--viz-2) 7%, transparent); }

/* ---- Company Cards ---- */
.company-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 12px 0;
    max-height: 880px;
    overflow-y: auto;
    padding-right: 5px;
}
.company-card {
    background: var(--background-fill-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    animation: fadeInUp 0.3s ease-out both;
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--card-accent) 70%, transparent);
}
.company-card:nth-child(8n + 1) { --card-accent: var(--viz-1); }
.company-card:nth-child(8n + 2) { --card-accent: var(--viz-2); }
.company-card:nth-child(8n + 3) { --card-accent: var(--viz-3); }
.company-card:nth-child(8n + 4) { --card-accent: var(--viz-4); }
.company-card:nth-child(8n + 5) { --card-accent: var(--viz-5); }
.company-card:nth-child(8n + 6) { --card-accent: var(--viz-6); }
.company-card:nth-child(8n + 7) { --card-accent: var(--viz-7); }
.company-card:nth-child(8n)     { --card-accent: var(--viz-8); }
.company-card:hover {
    box-shadow: var(--panel-lift);
    border-color: color-mix(in srgb, var(--card-accent) 38%, var(--border-color-primary));
    transform: translateY(-2px);
}
.company-card a {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--body-text-color);
    text-decoration: none;
}
.company-card a:hover {
    text-decoration: underline;
}
.company-stats {
    font-size: 0.88rem;
    color: var(--body-text-color-subdued);
    margin-top: 6px;
    line-height: 1.4;
}

/* ---- Organization directory ---- */
.company-card { position: relative; padding-top: 22px; }
.org-badge {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.org-company    { background: color-mix(in srgb, var(--viz-1) 16%, transparent); color: var(--viz-1); }
.org-lab        { background: color-mix(in srgb, var(--viz-2) 18%, transparent); color: var(--viz-2); }
.org-university { background: color-mix(in srgb, var(--viz-3) 16%, transparent); color: var(--viz-3); }
.org-country::before { content: " · "; }

/* ---- Animations ---- */
/* Each circle drifts on its own cadence: enough to suggest a living bubble
   cluster, but too little to disturb labels or hover targets. */
.country-bubble-plot .shapelayer path {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}
.country-bubble-plot .shapelayer path:nth-child(3n + 1) {
    animation: bubbleDriftA 7.5s ease-in-out infinite;
}
.country-bubble-plot .shapelayer path:nth-child(3n + 2) {
    animation: bubbleDriftB 9s ease-in-out -2.5s infinite;
}
.country-bubble-plot .shapelayer path:nth-child(3n) {
    animation: bubbleDriftC 8.25s ease-in-out -5s infinite;
}
@keyframes bubbleDriftA {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2px, -3px); }
}
@keyframes bubbleDriftB {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-3px, 2px); }
}
@keyframes bubbleDriftC {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2px, 2px); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tabitem {
    animation: fadeIn 0.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .metric-card, .company-card, .insight-card, .source-panel, .tabitem,
    .gradio-container .block:has(.plot-container),
    .gradio-container .block:has(.table-wrap) {
        animation: none !important;
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
        transform: none !important;
    }
    .country-bubble-plot .shapelayer path { animation: none !important; }
}

@media (max-width: 760px) {
    .gradio-container { width: 100% !important; }
    .dashboard-hero { padding: 22px 20px; }
    .hero-copy { align-items: flex-start; flex-direction: column; }
    .insight-grid { grid-template-columns: 1fr; }
    .metric-card { min-width: calc(50% - 8px); padding: 15px 14px; }
    .metric-value { font-size: 1.62rem; letter-spacing: -0.03em; }
}