/* Dataset-Maker UI. Colours come from Gradio theme variables so light and
   dark mode both work; only the pass/fail marks define their own. */

.gradio-container {
  max-width: 1440px !important;
  margin: 0 auto !important;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --dm-pass: #15803d;
  --dm-fail: #b91c1c;
  --dm-warn: #a16207;
}
.dark .gradio-container, .gradio-container.dark {
  --dm-pass: #4ade80;
  --dm-fail: #f87171;
  --dm-warn: #facc15;
}
.gradio-container code, .gradio-container pre { font-family: var(--font-mono); }

/* ---- header ------------------------------------------------------------ */
#dm-header { padding: 6px 2px 10px; }
#dm-header h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.dm-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dm-meta { font-family: var(--font-mono); font-size: 12px; color: var(--body-text-color-subdued); }
.dm-meta a { color: var(--link-text-color); }
.dm-sub { margin: 2px 0 6px; font-size: 15px; font-weight: 500; }
.dm-desc, .dm-why { margin: 0 0 4px; max-width: 980px; font-size: 13px; line-height: 1.5;
  color: var(--body-text-color-subdued); }
.dm-why b { color: var(--body-text-color); font-weight: 600; }

.dm-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 8px 0 0; }
.dm-tags li { font-family: var(--font-mono); font-size: 11.5px; padding: 2px 8px;
  border: 1px solid var(--border-color-primary); border-radius: 3px;
  background: var(--block-background-fill); color: var(--body-text-color); }
.dm-steps { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 10px 0 0;
  font-family: var(--font-mono); font-size: 12px; }
.dm-steps li { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 0;
  color: var(--body-text-color); }
.dm-steps li + li::before { content: "\2192"; margin-right: 10px; color: var(--body-text-color-subdued); }
.dm-steps span { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 1px solid var(--border-color-primary); border-radius: 3px;
  font-size: 11px; color: var(--body-text-color-subdued); }

/* ---- section labels ---------------------------------------------------- */
.dm-section { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--body-text-color-subdued); margin: 6px 0 -2px; }
.dm-note { font-size: 12px; color: var(--body-text-color-subdued); line-height: 1.45; }
.dm-note code { font-size: 11.5px; }

/* ---- tables / key-value --------------------------------------------------- */
.dm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.45; }
.dm-table th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--body-text-color-subdued); padding: 4px 8px;
  border-bottom: 1px solid var(--border-color-primary); }
.dm-table td { padding: 5px 8px; vertical-align: top; border-bottom: 1px solid var(--border-color-primary); }
.dm-table td:first-child { white-space: nowrap; font-weight: 600; }
.dm-table code { font-size: 11.5px; }
.dm-guarantees td:first-child { width: 150px; }
.dm-guarantees td:last-child { width: 260px; color: var(--body-text-color-subdued); }

.dm-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px;
  font-size: 12.5px; line-height: 1.5; }
.dm-kv dt { color: var(--body-text-color-subdued); }
.dm-kv dd { margin: 0; font-family: var(--font-mono); font-size: 12px; }

.dm-pass { color: var(--dm-pass); font-weight: 600; }
.dm-fail { color: var(--dm-fail); font-weight: 600; }
.dm-warn { color: var(--dm-warn); font-weight: 600; }

/* ---- run summary strip -------------------------------------------------- */
.dm-summary { font-size: 12.5px; line-height: 1.6; padding: 8px 10px;
  border: 1px solid var(--border-color-primary); border-radius: 4px;
  background: var(--block-background-fill); }
.dm-summary.dm-empty { color: var(--body-text-color-subdued); }
.dm-summary .dm-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--font-mono); font-size: 12px; }
.dm-summary .dm-stats span b { font-weight: 600; }
.dm-summary .dm-timing { font-family: var(--font-mono); font-size: 11.5px; color: var(--body-text-color-subdued); margin-top: 2px; }

.dm-pre { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; margin: 0; padding: 10px 12px;
  border: 1px solid var(--border-color-primary); border-radius: 4px; background: var(--background-fill-secondary);
  overflow-x: auto; }
.dm-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; }
.dm-list li { margin-bottom: 3px; }

.dm-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color-primary);
  font-size: 12px; color: var(--body-text-color-subdued); }

/* ---- components ---------------------------------------------------------- */
/* Gradio 4.44 sets the Gallery box to a fixed height with overflow hidden, but
   the inner container is not tied to it, so the grid grows past the box and is
   clipped instead of scrolling. Make the container fill the box and scroll the
   grid inside it. */
#dm-gallery { max-height: 60vh; }
#dm-gallery .gallery-container { height: 100%; }
#dm-gallery .grid-wrap { max-height: 100%; overflow-y: auto; }
#dm-gallery .thumbnails { max-height: 60vh; overflow-y: auto; }
#dm-gallery .caption-label { font-family: var(--font-mono); font-size: 11px; }

#dm-gt-table table { font-family: var(--font-mono); font-size: 12px; }
.tab-nav button { font-size: 13px; }
#dm-generate { font-weight: 600; }

/* Gradio lets the main content box grow to fill the window, which parks the
   footer at the bottom and leaves a blank band under short tabs (manifest,
   Export) on tall screens. It is an inline style, hence !important. */
.gradio-container .wrap > .contain { flex-grow: 0 !important; }

/* ---- narrow screens ------------------------------------------------------ */
/* Gradio sets an inline min-width on blocks, so the summary needs !important to
   wrap below the page dropdown instead of shrinking to a sliver. */
#dm-summary { flex: 1 1 320px; min-width: min(320px, 100%) !important; }

/* Tables keep their desktop layout and scroll sideways when the column is
   too narrow (phones, tablets), instead of spilling past their card. */
.dm-scroll { overflow-x: auto; max-width: 100%; }