/* SPDX-FileCopyrightText: 2023-2026 Helmholtz-Zentrum Dresden-Rossendorf e.V (HZDR) */ 
/* SPDX-License-Identifier: MIT */




/* TITLE */
.labfrog-title {
  display: inline-block;    /* arrow + text treated as one unit */
  font-size: 1.3em;
  font-style: italic;
  font-weight: bold;
  color: #004c99;
  margin-top: 15px;        /* spacing from logos */
  transform: skewX(-4deg);
  position: relative;
}

/* Left arrow */
.labfrog-title::before, .labfrog-title::after {
  content: "➤";
  color: #ff6600;
  font-size: 1em;
  margin-right: 0.4em;        /* space between arrow and text */
  margin-left: 0.3em;
  position: relative;
  top: 0.05em;                /* vertical align */
}



/* Force markers for lists tagged with 'force-bullets' */
.rst-content ul.force-bullets,
.rst-content ul.simple.force-bullets {
  list-style-type: disc !important;
  list-style-position: outside !important;
  padding-left: 1.5rem !important;
  margin-bottom: 1.2em !important;
}

/* Ensure items render as list items and remove extra gaps */
.rst-content ul.force-bullets > li,
.rst-content ul.simple.force-bullets > li { 
  display: list-item !important;
  margin: 0 !important;
}
.rst-content ul.force-bullets > li > p,
.rst-content ul.simple.force-bullets > li > p {
  margin: 0 !important;
}

/* As a last resort, paint the marker */
.rst-content ul.force-bullets > li::marker,
.rst-content ul.simple.force-bullets > li::marker {
  content: "• ";
}

/* ------------------------------------------------------------------ */
/* Carousel shortcode styling                                         */
/* ------------------------------------------------------------------ */

.lf-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 1rem 0 0.75rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.lf-carousel::-webkit-scrollbar {
  height: 8px;
}

.lf-carousel::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.lf-carousel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.lf-carousel__item {
  flex: 0 0 260px;
  scroll-snap-align: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.lf-carousel__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
}

.lf-carousel__item figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #2a2a2a;
}

.lf-slider__slide[data-tint="mint"],
.lf-carousel__item[data-tint="mint"] {
  background: linear-gradient(135deg, rgba(56, 176, 166, 0.18), rgba(24, 132, 110, 0.12));
}

.lf-slider__slide[data-tint="gold"],
.lf-carousel__item[data-tint="gold"] {
  background: linear-gradient(135deg, rgba(239, 179, 60, 0.2), rgba(217, 141, 13, 0.14));
}

.lf-slider__slide[data-tint="plum"],
.lf-carousel__item[data-tint="plum"] {
  background: linear-gradient(135deg, rgba(120, 82, 255, 0.18), rgba(78, 32, 202, 0.12));
}

.lf-slider__slide[data-tint="rose"],
.lf-carousel__item[data-tint="rose"] {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(190, 24, 93, 0.12));
}

/* Slider badge styling mirrors Hugo preview */
.lf-slide-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.76);
}

.lf-slide-icon {
  font-size: 1rem;
  line-height: 1;
}

.lf-slide-tip {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: rgba(34, 43, 53, 0.95);
}

/* Slider container (shared with Hugo preview) */
.lf-slider {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.035);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.lf-slider__viewport {
  overflow: hidden;
}

.lf-slider__track {
  display: flex;
  transition: transform 0.45s ease;
}

.lf-slider__slide {
  flex: 0 0 100%;
  padding: 1.5rem;
  box-sizing: border-box;
}

.lf-slider__slide figure {
  margin: 0;
  text-align: center;
}

.lf-slider__slide img {
  max-width: 100%;
  /* The track is a flex row, so every slide's box is as tall as the tallest
     screenshot. add-new-field.png ("Adjust Parameters") is the one portrait
     capture (1680x2035) among otherwise landscape shots, and without a cap it
     stretched the carousel for all thirteen slides, leaving the rest floating
     in empty space. Capping height keeps any single tall capture from setting
     the height of the whole carousel. */
  max-height: 540px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  background: #fff;
}

.lf-slider__slide figcaption {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: rgba(34, 43, 53, 0.95);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Video feature block matches slider styling */
.lf-video {
  margin: 1.5rem auto;
  max-width: 960px;
  padding: 1.25rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(120, 82, 255, 0.16), rgba(24, 132, 110, 0.12));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.lf-video video {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  background: #000;
}

.lf-video figcaption {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(34, 43, 53, 0.95);
}

.lf-slider__control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: #005aa0;
  transition: background 0.25s ease, color 0.25s ease;
}

.lf-slider__control:hover,
.lf-slider__control:focus {
  background: #005aa0;
  color: #fff;
}

.lf-slider__control--prev {
  left: 1rem;
}

.lf-slider__control--next {
  right: 1rem;
}

.lf-slider__dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 0 0 1.25rem;
}

.lf-slider__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.lf-slider__dot[aria-current="true"] {
  background: #005aa0;
  transform: scale(1.2);
}

/* Inline screenshot frame */
.lf-shot-card {
  margin: 1.2rem 0;
  border-radius: 18px;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(0, 90, 160, 0.07), rgba(0, 90, 160, 0.02));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 90, 160, 0.12);
}

.lf-shot-card__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.lf-shot-card__media img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.24));
}

.lf-shot-card__caption {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: rgba(34, 43, 53, 0.95);
  text-align: center;
}

.lf-shot-card--narrow,
.lf-shot-card--wide {
  margin-left: auto;
  margin-right: auto;
}

.lf-shot-card--narrow {
  max-width: 520px;
}

.lf-shot-card--wide {
  max-width: 900px;
}

/* Developer map layout */
.lf-doc-grid {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0;
}

.lf-doc-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lf-doc-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lf-doc-card,
.lf-signal-card {
  border: 1px solid rgba(0, 90, 160, 0.14);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 246, 255, 0.88));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.lf-doc-card h3,
.lf-signal-card h3 {
  margin-top: 0;
  margin-bottom: 0.55rem;
}

.lf-signal-details {
  padding: 0;
  overflow: hidden;
}

.lf-signal-details summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 3.4rem 1rem 1.1rem;
}

.lf-signal-details summary::-webkit-details-marker {
  display: none;
}

.lf-signal-details summary::marker {
  content: "";
}

.lf-signal-details summary::after {
  content: "+";
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #005aa0;
  background: rgba(0, 90, 160, 0.08);
}

.lf-signal-details[open] summary::after {
  content: "−";
}

.lf-signal-details summary,
.lf-signal-details {
  position: relative;
}

.lf-signal-details summary:hover,
.lf-signal-details summary:focus {
  background: rgba(0, 90, 160, 0.04);
}

.lf-signal-detail-body {
  padding: 0 1.1rem 1rem;
  border-top: 1px solid rgba(0, 90, 160, 0.1);
  background: rgba(248, 251, 255, 0.8);
}

.lf-signal-detail-body p {
  margin: 0.75rem 0 0;
}

.lf-signal-detail-body p:first-child {
  margin-top: 0.9rem;
}

.lf-doc-card p:last-child,
.lf-signal-card p:last-child {
  margin-bottom: 0;
}

.lf-flow-strip {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, auto));
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.lf-flow-step {
  min-width: 180px;
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  background: linear-gradient(160deg, rgba(0, 90, 160, 0.08), rgba(0, 90, 160, 0.02));
  border: 1px solid rgba(0, 90, 160, 0.16);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.lf-flow-step strong {
  display: block;
  margin-bottom: 0.3rem;
}

.lf-flow-step span {
  display: block;
  font-size: 0.88rem;
  color: #334155;
}

.lf-flow-arrow {
  font-size: 1.35rem;
  color: #005aa0;
  text-align: center;
}

.lf-flow-strip--stacked {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  padding-bottom: 0;
}

.lf-flow-strip--stacked .lf-flow-step {
  min-width: 0;
  padding: 0.65rem 0.8rem;
}

.lf-flow-strip--stacked .lf-flow-arrow {
  font-size: 1.2rem;
  line-height: 1;
}

.lf-runtime-panel {
  max-width: 760px;
  margin: 1rem auto;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(0, 90, 160, 0.16);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 255, 0.92));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.lf-runtime-boot {
  max-width: 760px;
  margin: 0 auto 0.7rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1px dashed rgba(245, 158, 11, 0.42);
  background: rgba(255, 248, 235, 0.9);
  color: #6b4f00;
}

.lf-runtime-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.7rem 0;
}

.lf-runtime-step + .lf-runtime-step {
  border-top: 1px solid rgba(0, 90, 160, 0.1);
}

.lf-runtime-arrow {
  width: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #005aa0;
  line-height: 1;
  flex-shrink: 0;
}

.lf-runtime-arrow--start {
  font-size: 1rem;
  color: #0d6efd;
}

.lf-runtime-return {
  width: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: transparent;
  flex-shrink: 0;
}

.lf-runtime-return--active {
  color: #0f766e;
}

.lf-runtime-return--storage {
  color: #0b8a7d;
}

.lf-runtime-step > div strong,
.lf-runtime-step > div span {
  display: block;
}

.lf-runtime-step > div span {
  color: #334155;
}


.lf-fix-card {
  border: 1px solid rgba(0, 90, 160, 0.16);
  border-radius: 18px;
  padding: 1.1rem 1.15rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(235, 244, 255, 0.92));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.lf-fix-card h3 {
  margin-top: 0;
  margin-bottom: 0.45rem;
}

.lf-fix-lead {
  margin: 0 0 0.9rem;
  color: #334155;
}

.lf-fix-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.65rem;
  margin: 0.95rem 0 0;
}

.lf-fix-step {
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 90, 160, 0.12);
}

.lf-fix-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #005aa0;
  font-weight: 700;
  line-height: 1;
  transform: rotate(90deg);
}

.lf-fix-note {
  margin: 0.95rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 90, 160, 0.1);
  color: #334155;
}

.lf-fix-branches {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.95rem;
}

.lf-fix-branch {
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 90, 160, 0.12);
}

.lf-fix-branch strong,
.lf-fix-branch span {
  display: block;
}

.lf-fix-branch span {
  margin-top: 0.35rem;
  color: #334155;
}

.lf-store-card {
  border: 1px solid rgba(0, 90, 160, 0.14);
  border-radius: 16px;
  padding: 1rem 1.05rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.9));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.lf-store-card h4 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  color: #0f172a;
}

.lf-store-card p {
  margin: 0.55rem 0 0;
}

.lf-store-card p:first-of-type {
  margin-top: 0;
}

.lf-signal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
}

.lf-signal-meter {
  margin-top: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.lf-signal-meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d6efd, #38bdf8);
}

.wy-table-responsive table td,
.wy-table-responsive table th {
  white-space: normal;
}

.lf-bench-table-wrap {
  margin: 1.5rem auto;
  overflow-x: visible;
}

.lf-bench-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  border: 1px solid rgba(0, 76, 153, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.lf-bench-table th,
.lf-bench-table td {
  padding: 0.9rem 0.85rem;
  border-bottom: 1px solid rgba(0, 76, 153, 0.08);
  vertical-align: top;
}

.lf-bench-table thead th {
  background: linear-gradient(180deg, rgba(0, 76, 153, 0.1), rgba(0, 76, 153, 0.04));
  color: #12304d;
  font-weight: 700;
}

.lf-bench-table tbody tr:nth-child(even) {
  background: rgba(0, 76, 153, 0.02);
}

.lf-bench-table tbody tr:hover {
  background: rgba(255, 153, 0, 0.06);
}

.lf-bench-table tbody tr.lf-bench-row-muted {
  background: #f1f3f5;
}

.lf-bench-table tbody tr.lf-bench-row-muted:hover {
  background: #eceff2;
}

.lf-bench-table tbody tr.lf-bench-row-muted .lf-bench-scenario span {
  color: #5f6b78;
}

.lf-bench-table tbody tr.lf-bench-row-group td {
  border-top: 1px solid rgba(18, 48, 77, 0.14);
  border-bottom: 1px solid rgba(18, 48, 77, 0.1);
}

.lf-bench-table tbody tr.lf-bench-row-group:first-child td {
  border-top: none;
}

.lf-bench-table tbody tr.lf-bench-group-in-memory {
  background: #f4f8fc;
}

.lf-bench-table tbody tr.lf-bench-group-local-realdb {
  background: #f4faf6;
}

.lf-bench-table tbody tr.lf-bench-group-remote-realdb {
  background: #fff7f1;
}

.lf-bench-table tbody tr.lf-bench-row-group.lf-bench-group-in-memory {
  background: #e9f1fa;
}

.lf-bench-table tbody tr.lf-bench-row-group.lf-bench-group-local-realdb {
  background: #e8f5ec;
}

.lf-bench-table tbody tr.lf-bench-row-group.lf-bench-group-remote-realdb {
  background: #ffecde;
}

.lf-bench-table tbody tr.lf-bench-row-group.lf-bench-group-in-memory td:first-child,
.lf-bench-table tbody tr.lf-bench-row-scenario.lf-bench-group-in-memory td:first-child {
  border-left: 4px solid #6c8fb3;
  padding-left: 0.65rem;
}

.lf-bench-table tbody tr.lf-bench-row-group.lf-bench-group-local-realdb td:first-child,
.lf-bench-table tbody tr.lf-bench-row-scenario.lf-bench-group-local-realdb td:first-child {
  border-left: 4px solid #5d8f6e;
  padding-left: 0.65rem;
}

.lf-bench-table tbody tr.lf-bench-row-group.lf-bench-group-remote-realdb td:first-child,
.lf-bench-table tbody tr.lf-bench-row-scenario.lf-bench-group-remote-realdb td:first-child {
  border-left: 4px solid #cc8245;
  padding-left: 0.65rem;
}

.lf-bench-table tbody tr.lf-bench-row-separator td {
  padding: 0;
  height: 0.9rem;
  border: none;
  background: transparent;
}

.lf-bench-table tbody tr.lf-bench-group-in-memory:hover {
  background: #edf4fb;
}

.lf-bench-table tbody tr.lf-bench-group-local-realdb:hover {
  background: #ecf7ef;
}

.lf-bench-table tbody tr.lf-bench-group-remote-realdb:hover {
  background: #fff2e7;
}

.lf-bench-table tbody tr.lf-bench-row-separator:hover {
  background: transparent;
}

/* Benchmark table tuning (edit only these):
   Runtime rule: scenario + stats + updated = 100%
   Browser rule: setup + stats + updated = 100%
*/
:root {
  /* Runtime table controls */
  --lf-runtime-table-width: 100%;
  --lf-runtime-share-scenario: 28%;
  --lf-runtime-share-stats: 54%;
  --lf-runtime-share-updated: 18%;

  /* Browser table controls */
  --lf-browser-table-width: 100%;
  --lf-browser-share-setup: 18%;
  --lf-browser-share-stats: 67%;
  --lf-browser-share-updated: 15%;

  --lf-bench-cell-pad-y: 0.48rem;
  --lf-bench-cell-pad-x: 0.42rem;

  --lf-runtime-col-scenario: var(--lf-runtime-share-scenario);
  --lf-runtime-col-metric: calc(var(--lf-runtime-share-stats) / 3);
  --lf-runtime-col-updated: var(--lf-runtime-share-updated);

  --lf-browser-col-setup: var(--lf-browser-share-setup);
  --lf-browser-col-metric: calc(var(--lf-browser-share-stats) / 3);
  --lf-browser-col-updated: var(--lf-browser-share-updated);
}

.lf-bench-table-runtime {
  table-layout: fixed;
  width: var(--lf-runtime-table-width);
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
}

.lf-bench-table-runtime .lf-bench-col-runtime-scenario {
  width: var(--lf-runtime-col-scenario);
}

.lf-bench-table-runtime .lf-bench-col-runtime-metric {
  width: var(--lf-runtime-col-metric);
}

.lf-bench-table-runtime .lf-bench-col-runtime-updated {
  width: var(--lf-runtime-col-updated);
}

.lf-bench-table-runtime th,
.lf-bench-table-runtime td {
  padding: var(--lf-bench-cell-pad-y) var(--lf-bench-cell-pad-x);
}

.lf-bench-table-runtime thead th:nth-child(2),
.lf-bench-table-runtime thead th:nth-child(3),
.lf-bench-table-runtime thead th:nth-child(4) {
  text-align: right;
}

.lf-bench-table-runtime thead th:nth-child(5),
.lf-bench-table-runtime tbody tr.lf-bench-row-scenario td:nth-child(5) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lf-bench-table-runtime tbody tr.lf-bench-row-scenario td:nth-child(2),
.lf-bench-table-runtime tbody tr.lf-bench-row-scenario td:nth-child(3),
.lf-bench-table-runtime tbody tr.lf-bench-row-scenario td:nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lf-bench-table-runtime tbody tr.lf-bench-row-scenario td:nth-child(2) .lf-bench-scenario,
.lf-bench-table-runtime tbody tr.lf-bench-row-scenario td:nth-child(3) .lf-bench-scenario,
.lf-bench-table-runtime tbody tr.lf-bench-row-scenario td:nth-child(4) .lf-bench-scenario {
  justify-items: end;
}

.lf-bench-table-browser {
  table-layout: fixed;
  width: var(--lf-browser-table-width);
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
}

.lf-bench-table-browser .lf-bench-col-browser-setup {
  width: var(--lf-browser-col-setup);
}

.lf-bench-table-browser .lf-bench-col-browser-metric {
  width: var(--lf-browser-col-metric);
}

.lf-bench-table-browser .lf-bench-col-browser-updated {
  width: var(--lf-browser-col-updated);
}

.lf-bench-table-browser th,
.lf-bench-table-browser td {
  padding: var(--lf-bench-cell-pad-y) var(--lf-bench-cell-pad-x);
}

.lf-bench-table-browser thead th:nth-child(5),
.lf-bench-table-browser tbody tr.lf-bench-row-scenario td:nth-child(5) {
  text-align: center;
}

.lf-bench-table-browser tbody tr.lf-bench-row-scenario td:nth-child(5) {
  font-variant-numeric: tabular-nums;
}


.lf-bench-rank {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 76, 153, 0.08);
  color: #12304d;
  font-weight: 700;
  white-space: nowrap;
}

.lf-bench-rank--best {
  background: linear-gradient(135deg, rgba(255, 166, 0, 0.22), rgba(255, 118, 0, 0.18));
  color: #7a3f00;
}

.lf-bench-scenario,
.lf-bench-metric {
  display: grid;
  gap: 0.28rem;
}

.lf-bench-scenario span,
.lf-bench-metric small {
  color: #4a5b6d;
}

.lf-bench-metric-bars {
  display: grid;
  gap: 0.34rem;
  min-width: 0;
}

.lf-bench-bar-row {
  display: grid;
  grid-template-columns: 1.65rem minmax(2.2rem, 1fr) 3.4rem;
  align-items: center;
  gap: 0.22rem;
  font-variant-numeric: tabular-nums;
}

.lf-bench-bar-label {
  color: #4a5b6d;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.lf-bench-bar-track {
  display: block;
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(18, 48, 77, 0.09);
}

.lf-bench-bar-track span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d6efd, #38bdf8);
}

.lf-bench-bar-row:nth-child(2) .lf-bench-bar-track span {
  background: linear-gradient(90deg, #1e9e75, #79c99d);
}

.lf-bench-bar-row:nth-child(3) .lf-bench-bar-track span {
  background: linear-gradient(90deg, #f0781e, #f6b15f);
}

.lf-bench-bar-value {
  color: #12304d;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.lf-bench-value-bar {
  display: grid;
  grid-template-columns: minmax(2.25rem, 1fr) 3.2rem;
  align-items: center;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
}

.lf-bench-value-bar strong {
  color: #12304d;
  font-size: 0.76rem;
  text-align: right;
  white-space: nowrap;
}

.lf-bench-table-runtime,
.lf-bench-table-browser {
  font-size: 0.84rem;
}

.lf-bench-table-runtime .lf-bench-setup-cell strong,
.lf-bench-table-browser .lf-bench-setup-cell strong {
  font-size: 0.84rem;
}

.lf-bench-table-runtime .lf-bench-setup-cell span,
.lf-bench-table-browser .lf-bench-setup-cell span {
  font-size: 0.76rem;
}
.lf-browser-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.lf-browser-ranking-list {
  display: grid;
  gap: 0.55rem;
}

.lf-browser-ranking-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}

.lf-browser-ranking-browser {
  min-width: 0;
}

.lf-browser-ranking-metric {
  color: #12304d;
  font-weight: 600;
  white-space: nowrap;
}

.lf-browser-weakness {
  min-width: 0;
}

.lf-browser-logo {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.lf-bench-track {
  position: relative;
  width: 100%;
  height: 0.72rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(18, 48, 77, 0.08);
}

.lf-bench-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1e9e75, #0a7d60);
}

.lf-bench-track--overall span {
  background: linear-gradient(90deg, #ffb000, #f27a1a);
}

.lf-bench-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 166, 0, 0.18);
  color: #8b4d00;
  font-size: 0.78rem;
  font-weight: 700;
  vertical-align: middle;
}

.lf-bench-figure {
  margin: 1.5rem 0 1rem;
  padding: 1rem;
  border: 1px solid rgba(0, 76, 153, 0.12);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 76, 153, 0.035), rgba(0, 76, 153, 0.015));
}

.lf-bench-chart {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
}

.lf-bench-figure figcaption {
  margin-top: 0.75rem;
  color: #4a5b6d;
  font-size: 0.94rem;
}

@media (max-width: 1100px) {
  .lf-doc-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .lf-doc-grid--2,
  .lf-doc-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .lf-flow-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .lf-flow-arrow {
    transform: rotate(90deg);
  }
}