/* ----------------------------------------------------------------
 * images.css — /images tool. Visual language matched to the rest of
 * the platform (rounded surfaces, soft shadows) but tuned for the
 * image-heavy domain: lots of room for thumbs, denser grids, and a
 * dedicated mosaic view that lets the whole set read as one gradient.
 * ---------------------------------------------------------------- */

/* ---------- URL input panel (form section) ---------- */
.im-url-panel input[type="text"] {
  font-size: 1.05rem;
  padding: 14px 18px;
  letter-spacing: -0.01em;
}
.im-url-panel input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
}
/* ---------- stats strip ---------- */
.im-stats-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.im-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px;
  flex: 1 1 auto;
}
.im-stat {
  display: flex; flex-direction: column; gap: 6px;
  padding-left: 14px;
  border-left: 3px solid #e2e8f0;
}
.im-stat:first-child { border-left-color: #6366f1; }   /* indigo for "Images" */
.im-stat:nth-child(2) { border-left-color: #ec4899; }  /* pink for "Themes" */
.im-stat-num {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.im-stat-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.im-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- view tabs (Wall / Themes / Colours / All / Experiments) ---------- */
.im-view-tabs {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.im-tab {
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.im-tab:hover { color: var(--text); }
.im-tab.active {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* ---------- panels ---------- */
.im-panels { margin-top: 16px; }
.im-panel { display: grid; gap: 18px; }

#im-panel-themes {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
#im-panel-colors,
#im-panel-all { grid-template-columns: 1fr; }

/* ---------- cluster cards ---------- */
.im-cluster {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}
/* Subtle accent strip on the left so cards aren't visually flat. */
.im-cluster::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
}

/* Cluster header: title on the left, count on the right */
.im-cluster-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.im-cluster-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.im-cluster-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.im-cluster-count {
  font-size: 0.78rem;
  font-weight: 800;
  background: #f1f5f9;
  color: var(--text);
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ---------- thumbs ---------- */
.im-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
#im-panel-all .im-thumbs {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.im-thumb {
  position: relative;
  display: block;
  padding: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.im-thumb:hover {
  border-color: #6366f1;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(99, 102, 241, 0.18);
}
.im-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.im-thumb.is-error {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.74rem;
  color: var(--text-faint);
  font-weight: 700;
  padding: 6px;
  text-align: center;
}

/* ---------- imagewall — every image as a tile of one unified mural ---------- */
.im-wall-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}
.im-wall-card::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg,
    #ef4444 0%, #f97316 16%, #facc15 33%, #22c55e 50%,
    #06b6d4 66%, #6366f1 83%, #ec4899 100%);
}
/* Legend: list of theme chips with swatch + label + count */
.im-wall-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.im-wall-legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 0.78rem; font-weight: 700;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  max-width: 280px;
}
.im-wall-legend-swatch {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.18);
}
.im-wall-legend-count {
  font-size: 0.74rem; font-weight: 800;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
/* The mural itself: dense small tiles. Cluster border colour is set
 * inline by JS on each .im-tile. */
.im-wall-mural {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 5px;
}

/* ---------- spectrum mosaic — every image as a "pixel" ---------- */
.im-spectrum-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}
/* Rainbow accent on the left edge gives the spectrum view its own
 * identity vs. the other panels' indigo/orange strips. */
.im-spectrum-card::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg,
    #ef4444 0%, #f97316 16%, #facc15 33%, #22c55e 50%,
    #06b6d4 66%, #6366f1 83%, #ec4899 100%);
}
.im-spectrum-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.im-spectrum-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: -0.01em;
  flex: 1 1 auto;
  min-width: 0;
}

/* Toolbar: rotate + 2 download buttons. Sits in the header so users
 * find it where they already are. Buttons are visual siblings of the
 * .btn-secondary style but compact — they share the spectrum card's
 * visual budget with title + count. */
.im-spectrum-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.im-spectrum-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.im-spectrum-tool:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.im-spectrum-tool:active:not(:disabled) { transform: scale(0.97); }
.im-spectrum-tool:disabled {
  opacity: 0.45;
  /* Plain disabled cursor; only the actively-busy download buttons get
   * the progress cursor (see .is-busy below). */
  cursor: not-allowed;
}
.im-spectrum-tool.is-busy { cursor: progress; }
/* Icon-only variant for the rotate + grid toggle: a square button
 * that's the same height as the labelled buttons. The SVG inside
 * inherits `currentColor`, so :hover / .is-active simply tweak the
 * button text colour to repaint the icon. */
.im-spectrum-icon-only {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}
.im-spectrum-icon-only svg { display: block; }
/* Active state for toggle-style icon buttons (currently the grid /
 * continuous-mode toggle). Filled dark pill instead of the outlined
 * pill, so the "on" state is unmistakable. */
.im-spectrum-tool.is-active {
  background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
  border-color: #0f172a;
  color: #ffffff;
}
.im-spectrum-tool.is-active:hover:not(:disabled) {
  background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
}
/* Reference rainbow strip — a thin band at the top of the mosaic
 * showing what hue order the images are in. */
.im-spectrum-reference {
  height: 8px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: linear-gradient(90deg,
    #ef4444 0%, #f97316 14%, #facc15 28%, #22c55e 42%,
    #06b6d4 57%, #6366f1 72%, #a855f7 85%, #ec4899 100%);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}
/* Column-mosaic rail: each column = one hue range, tiles stacked
 * vertically within. Columns sit side-by-side via flexbox so the
 * sequence reads left→right as a colour wheel. */
.im-spectrum-columns {
  display: flex;
  align-items: flex-start;   /* each column grows down from its own top */
  gap: 6px;
  overflow-x: auto;          /* many hues + narrow viewport → scroll */
  padding-bottom: 4px;
}
.im-spectrum-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 64px;
  max-width: 110px;
  border-radius: 10px;
  padding: 6px;
  /* Very subtle tint behind the column makes the colour categorisation
   * visible without needing to read tile contents. The custom property
   * is set inline by JS to the column's reference hex. */
  background: color-mix(in srgb, var(--column-tint, #f1f5f9) 8%, #ffffff);
}
.im-spectrum-column.is-neutral {
  background: #f8fafc;
}
.im-spectrum-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px 4px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  margin-bottom: 4px;
}
.im-spectrum-swatch {
  display: block;
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: var(--column-tint, #cbd5e1);
}
.im-spectrum-column-count {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.im-spectrum-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.im-spectrum-stack .im-tile {
  width: 100%;
  /* Stays roughly square; in a thin column on mobile this naturally
   * shrinks because aspect-ratio adapts to the flex width. */
}

/* ---------- horizontal orientation ----------
 * Toggle via `data-orient="horizontal"` on the card. Same DOM, swap
 * the directions so each hue lives in a horizontal row instead of a
 * vertical column. The columns rail itself becomes a vertical stack
 * of rows; each "column" becomes a row; its inner tile stack flows
 * left-to-right and wraps. */
.im-spectrum-card[data-orient="horizontal"] .im-spectrum-columns {
  flex-direction: column;
  align-items: stretch;
  overflow-x: visible;
  overflow-y: auto;
}
.im-spectrum-card[data-orient="horizontal"] .im-spectrum-column {
  flex-direction: row;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  align-items: stretch;
}
.im-spectrum-card[data-orient="horizontal"] .im-spectrum-column-head {
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  margin-bottom: 0;
  margin-right: 6px;
  padding: 0 6px 0 0;
  flex: 0 0 auto;
  align-self: stretch;
  justify-content: flex-start;
  gap: 4px;
}
.im-spectrum-card[data-orient="horizontal"] .im-spectrum-stack {
  flex-direction: row;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-content: flex-start;
}
.im-spectrum-card[data-orient="horizontal"] .im-spectrum-stack .im-tile {
  width: 64px;          /* fixed square in horizontal layout — keeps the
                         * mosaic dense and predictable when 50+ tiles
                         * flow on one row */
  flex: 0 0 auto;
}

/* ---------- continuous mode ----------
 * Drops swatch headers and per-hue dividers — every tile flows in a
 * single dense grid (still ordered by colour). Useful when the user
 * wants to place the mosaic side-by-side with the colour-map export,
 * since neither side has any decoration getting in the way.
 *
 * The reference rainbow strip is kept: it still tells the user that
 * the order is left-to-right by hue, even though the boundaries
 * between hues are no longer drawn. */
.im-spectrum-card[data-mode="continuous"] .im-spectrum-flat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 4px;
}

.im-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  /* Neutral surface so transparent images (crests/logos) render as-is
   * instead of being tinted by their dominant colour. */
  background: #f8fafc;
  transition: transform 0.18s ease, box-shadow 0.18s ease, z-index 0s ease 0.18s;
}
.im-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.im-tile:hover {
  transform: scale(1.4);
  z-index: 5;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.im-tile.is-error { background: #e2e8f0 !important; cursor: not-allowed; }

/* ---------- empty states ---------- */
.im-empty {
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
}
.im-empty-icon {
  font-size: 3rem;
  margin-bottom: 8px;
  filter: grayscale(0.2);
}
.im-empty-text {
  font-weight: 600;
  color: var(--text-faint);
  max-width: 36ch;
  margin: 0 auto;
  line-height: 1.5;
}

/* ---------- details panel ---------- */
.im-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.8rem;
}
.im-details-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  word-break: break-word;
}
.im-details-body {
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 720px) {
  .im-details-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.im-details-preview {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px;
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.im-details-preview img {
  max-width: 100%; max-height: 520px;
  object-fit: contain;
  border-radius: 10px;
}
.im-details-meta {
  margin: 0;
  display: grid; grid-template-columns: max-content 1fr;
  gap: 10px 18px;
  font-size: 0.92rem;
}
.im-details-meta dt {
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  align-self: center;
}
.im-details-meta dd {
  margin: 0;
  color: var(--text);
  word-break: break-all;
  overflow-wrap: anywhere;
}
.im-details-meta dd.im-color-swatch {
  display: flex; align-items: center; gap: 10px;
}
.im-color-chip {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
  flex: 0 0 auto;
}

/* ---------- per-image colour palette (details panel) ----------
 * Shown on click → one row per top-N colour: swatch · proportional
 * bar · hex + % label. Reads vertically so 5 close hues stay legible
 * (a horizontal stack would smear into a single rainbow strip).
 */
.im-details-meta dd.im-palette-cell {
  /* Each row is a flex line itself; the dd just wraps them. */
  display: flex;
  flex-direction: column;
}
.im-palette {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.im-palette-row {
  display: grid;
  grid-template-columns: 22px minmax(60px, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.im-palette-swatch {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
  flex: 0 0 auto;
}
.im-palette-bar {
  position: relative;
  height: 10px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}
.im-palette-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  /* `background` is set inline (the swatch colour) so the bar reads as
   * the same colour it represents — no need for a label colour key. */
}
.im-palette-pct {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- aggregates card ---------- */
.im-aggregates { padding: 22px; }
.im-aggregates:empty { display: none; }
.im-aggregates > h3 {
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.im-agg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.im-agg-block { display: flex; flex-direction: column; gap: 10px; }
.im-agg-block-title {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.im-agg-list {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 4px;
}
.im-agg-list li {
  position: relative;
  display: flex; justify-content: space-between;
  gap: 14px;
  font-size: 0.92rem;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
  isolation: isolate;
}
/* Horizontal bar growing from the left: width set inline by JS via the
 * --bar custom property. Shows magnitude visually without needing a
 * real chart library. */
.im-agg-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--bar, 0%);
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04));
  z-index: -1;
  transition: width 0.35s ease;
}
.im-agg-list li .name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.im-agg-list li .value {
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* ---------- responsive ---------- */
@media (max-width: 600px) {
  .im-stats-card { flex-direction: column; align-items: stretch; }
  .im-actions { justify-content: flex-end; }
  .im-stat-num { font-size: 1.6rem; }
}

/* ---------- experiments (model comparison) ---------- */
.im-exp-pills { flex-wrap: wrap; margin-bottom: 14px; }
.im-tab.is-unavailable { opacity: 0.45; }
.im-exp-metrics { font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; }