/* =========================================================
   ZAR DATASETS — BRANDING LAYER

   Dedicated stylesheet for ZAR Datasets-specific brand
   elements in the "My datasets & analyses" workspace:
     - module mark (approved PNG)
     - identity kicker treatment
     - canonical version pill

   Load order: AFTER Styles/shared/zomniverse-datasets.css
   (registered together in FrontendResourceManager.php).

   Tier 1 scope: this file styles only NEW brand-specific
   class names. It does not restructure the existing
   .zom-datasets-header / .zom-datasets-heading layout —
   that change lands with the header markup.
========================================================= */

.zom-datasets-dialog {
  --zd-cyan: #35d0df;
  --zd-cyan-deep: #1ea9be;
  --zd-cyan-faint: rgba(53, 208, 223, 0.14);
  --zd-cyan-line: rgba(53, 208, 223, 0.42);
  --zd-amber: #e4b667;
  --zd-danger: #ef929b;
}

/* ---- header row ----------------------------------------- */
/* The header now carries a module mark on the left and the
   existing close control on the right — centre them. */
.zom-datasets-card > .zom-datasets-header {
  align-items: center;
}

/* ---- module mark ---------------------------------------- */
.zom-datasets-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.zom-datasets-brand__mark {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: block;
}
/* The PNG is a finished app icon (baked rounded corners, glow,
   inner padding) — size it, do not wrap it in another frame. */
.zom-datasets-brand__mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.zom-datasets-brand__text {
  min-width: 0;
  display: grid;
  gap: 4px;
}

/* ZAR Datasets identity kicker — brand accent. */
.zom-datasets-brand .zom-datasets-kicker {
  color: var(--zd-cyan);
}
/* The nested title line replaces the old inline "kicker · title"
   treatment, so drop the separator dot. */
.zom-datasets-brand .zom-datasets-kicker::after {
  content: none;
}

/* title + version pill share one baseline-aligned line */
.zom-datasets-titleline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}
.zom-datasets-titleline h2 {
  margin: 0;
}

/* ---- canonical version pill ----------------------------- */
/* Hidden until JS resolves a canonical version from the
   private_dataset_workspace release collection. No semver
   literal is authored here or in the markup. */
.zom-datasets-ver {
  display: none;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--zd-cyan-line);
  border-radius: 999px;
  background: var(--zd-cyan-faint);
  color: var(--zd-cyan);
  font: 700 12px/1 ui-monospace, "Ubuntu Mono", SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.02em;
}
.zom-datasets-ver.is-resolved {
  display: inline-flex;
}

@media (max-width: 760px) {
  .zom-datasets-brand { gap: 10px; }
  .zom-datasets-brand__mark { width: 40px; height: 40px; }
}