assets/styles.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* Header links: transparent background, white text, grow on hover */
.no-bg-link {
  background-color: transparent !important;
  color: #ffffff !important;
  transition: transform 0.12s ease, background-color 0.12s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  padding: 6px 14px; /* keep spacing consistent with inline styles */
  border-radius: 18px;
}

/* Subtle hover tint and scale for interactivity */
.no-bg-link:hover {
  transform: scale(1.06);
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Make logo images scale smoothly on hover */
.no-bg-link img {
  transition: transform 0.12s ease;
}
.no-bg-link:hover img {
  transform: scale(1.06);
}

/* Read the paper button: scale up on hover */
.paper-button {
  transition: transform 0.12s ease;
  will-change: transform;
}
.paper-button:hover {
  transform: scale(1.06);
}

/* Hugging Face brand text to use Inter and visually match HF typography */
.hf-brand-text {
  font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  font-weight: 1000;
  font-size: 14px;
  line-height: 1;
  margin-left: 8px;
  color: #FFFFFF;
  display: inline-block;
  transform-origin: center;
}

/* Paper link: position relative for arrow, overflow visible */
.paper-link {
  position: relative; /* needed for positioning the arrow */
  overflow: visible;
  display: inline-flex !important;
  align-items: center !important;
  /* padding: 6px 12px !important; */
  font-size: 14px !important;
  background-color: #AC482A !important; /* restore previous button color */
  color: #FFFFFF !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  transition: transform var(--default-transition-duration, .15s) var(--default-transition-timing-function, cubic-bezier(.4,0,.2,1)), background-color var(--default-transition-duration, .15s);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small arrow placed inline to the right of the text */
.paper-link::after {
  content: "↗";
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: #FFFFFF;
  opacity: 0.95;
  transition: transform var(--default-transition-duration, .15s) var(--default-transition-timing-function, cubic-bezier(.4,0,.2,1));
  transform-origin: center;
  pointer-events: none;
  vertical-align: baseline;
}

/* Hover/focus states */
.paper-link:hover,
.paper-link:focus {
  transform: scale(1.06);
  background-color: #95371f !important; /* slightly darker on hover */
}
.paper-link:hover::after,
.paper-link:focus::after {
  transform: scale(1.08);
}

/* Apply same interactive behavior to leaderboard "show top" toggles and download controls */
/* Matches elements with ids like "top_countries-toggle" and download anchors like "download-top_countries" */
[id$="-toggle"],
button[id$="-toggle"],
[id^="download-"],
a[id^="download-"],
button[id^="download-"],
.leaderboard-toggle,
.download-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none !important;
  background-color: transparent;
  color: #082030;
  transition: transform var(--default-transition-duration, .15s) var(--default-transition-timing-function, cubic-bezier(.4,0,.2,1)), background-color var(--default-transition-duration, .15s);
  will-change: transform;
}

/* Hover / focus: subtle scale + tint similar to header links */
[id$="-toggle"]:hover,
[id^="download-"]:hover,
button[id$="-toggle"]:hover,
button[id^="download-"]:hover,
.leaderboard-toggle:hover,
.download-btn:hover,
[id$="-toggle"]:focus,
[id^="download-"]:focus,
button[id$="-toggle"]:focus,
button[id^="download-"]:focus {
  transform: scale(1.06);
  outline: none;
}

.chip-hover-darken {
  transition: background-color 0.15s;
}
.chip-hover-darken:hover,
.chip-hover-darken:focus {
  background-color: #e1f2fd !important; /* slightly darker than #F0F0F0 */
}

/* Header status row */
.header-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.live-row {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
}
.live-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #AC482A;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 6px #AC482A;
}
.live-label {
  background-color: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
  vertical-align: middle;
  display: inline-block;
}
.last-updated {
  background-color: #1B344D;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 15px;
  vertical-align: middle;
  display: inline-block;
  border-radius: 8px;
  padding: 4px 14px;
  box-shadow: 0 1px 4px rgba(8,32,48,0.10);
  margin-left: 0px;
}
.header-links-row {
  display: flex;
  align-items: center;
}
.header-link {
  display: inline-flex !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  color: #FFFFFF !important;
  border-radius: 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-right: 12px !important;
  align-items: center !important;
}
.header-logo-img {
  height: 28px;
  vertical-align: middle;
  padding-right: 8px;
}
.main-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.intro-paper-link {
  color: #AC482A;
  font-weight: 700;
  text-decoration: underline;
}
.filter-label-row {
  display: inline-flex;
  align-items: center;
}
.filter-label-container {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.filter-segmented-row {
  display: flex;
  align-items: center;
}
.filter-label {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
}
.filter-description {
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
}
.filter-description-margin {
  margin-top: 32px !important;
}
.global-toggle-status {
  margin-left: 8px;
  display: inline-block;
  margin-top: 6px;
}
.main-content-left {
  flex: 1;
  min-width: 220px;
}
.main-content-right {
  flex: 2;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.tip-section {
  background-color: #F5ECE6;
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 28px;
  box-shadow: 0 1px 4px rgba(8,32,48,0.04);
  border: 1px solid #f0e3d6;
}
.tip-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  color: #082030;
  display: flex;
  align-items: center;
}
.tip-highlight {
  font-weight: 600;
  color: #AC482A;
}
.tip-description {
  font-size: 13px;
  color: #082030;
  line-height: 1.6;
}
.tab-description {
  font-size: 14px;
  margin-top: 18px;
  margin-bottom: 12px;
  text-align: left;
}
.meta-var {
  font-weight: bold;
  color: #082030;
}

/* Leaderboard table column sizing to avoid % column getting squished */
.leaderboard-table th.rank-col { width: 6%; }
.leaderboard-table th.name-col { width: 30%; }
.leaderboard-table th.metadata-col { width: 40%; }
.leaderboard-table th.percent-col { width: 24%; }

/* Ensure body cells follow header widths and metadata wraps */
.leaderboard-table td.metadata-cell {
  white-space: normal;
  word-break: break-word;
  vertical-align: middle;
}

.leaderboard-table td.percent-cell {
  vertical-align: middle;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Make inner progress bar fill available cell width */
.leaderboard-table td.percent-cell > div {
  width: 100% !important;
  box-sizing: border-box;
}

/* On narrow screens, relax fixed layout so table can flow naturally */
@media (max-width: 720px) {
  .leaderboard-table {
    table-layout: auto !important;
  }
  .leaderboard-table th.rank-col,
  .leaderboard-table th.name-col,
  .leaderboard-table th.metadata-col,
  .leaderboard-table th.percent-col {
    width: auto !important;
  }
}

@media (max-width: 1150px) {
    .responsive-main-content {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 18px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .responsive-main-content > div {
        min-width: 0 !important;
        width: 100% !important;
    }
    .responsive-header {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
        width: 100vw !important;
        box-sizing: border-box !important;
    }
    /* Fix header link squishing: stack links vertically and center them */
    .responsive-header .header-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        font-size: 15px !important;
        flex-wrap: wrap !important;
    }
    .responsive-header > div:last-child {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .responsive-header .header-link img {
        margin-bottom: 0 !important;
        margin-right: 8px !important;
    }
    .responsive-title-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 28px !important;
    }
    .responsive-intro {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
    .responsive-tabs {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 12px !important;
    }
    .responsive-table-wrapper {
        overflow-x: auto;
    }
}