/* ============================================================================
   Contour · Gallery layout
   Every rule is scoped under .view-gallery — the mounted canvas and the config
   panel both carry that class. Colour, size, radius and motion come from
   css/tokens.css only; there is not one literal colour in this file.
   ========================================================================== */

.view-gallery {
  --gal-card-w: 248px;
  --gal-cover-h: 150px;
  --gal-gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
}

/* ---- shell ------------------------------------------------------------- */

.view-gallery.gal-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--canvas);
}

.view-gallery.gal-view[data-size="small"]  { --gal-card-w: 184px; --gal-cover-h: 110px; }
.view-gallery.gal-view[data-size="medium"] { --gal-card-w: 248px; --gal-cover-h: 150px; }
.view-gallery.gal-view[data-size="large"]  { --gal-card-w: 324px; --gal-cover-h: 196px; }

.view-gallery .gal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.view-gallery .gal-grow { flex: 1 1 auto; min-width: 0; }
.view-gallery .gal-dim { color: var(--text-2); }
.view-gallery .gal-yes { color: var(--success); font-weight: var(--fw-medium); }
.view-gallery .gal-ellipsis {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-gallery .gal-live {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.view-gallery .gal-ico { display: inline-flex; width: 14px; height: 14px; flex: none; }
.view-gallery .gal-ico svg { width: 100%; height: 100%; }
.view-gallery .gal-ico-lg { width: 26px; height: 26px; }

/* ---- sections (grouping) ------------------------------------------------ */

.view-gallery .gal-section { display: flex; flex-direction: column; gap: var(--sp-2); }

.view-gallery .gal-section-head {
  position: sticky; top: calc(var(--sp-3) * -1); z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; height: var(--row-h); padding: 0 var(--sp-2);
  border: 0; border-radius: var(--radius);
  background: var(--canvas); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.view-gallery .gal-section-head:hover { background: var(--hover); }
.view-gallery .gal-dot {
  flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--c, var(--obj-gray));
}
.view-gallery .gal-count {
  min-width: 18px; padding: 0 var(--sp-1);
  border-radius: var(--radius-pill); background: var(--sunken);
  color: var(--text-2); font-size: var(--fs-xs); line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.view-gallery .gal-section-head .gal-dim { margin-left: auto; font-size: var(--fs-sm); }

/* ---- grid --------------------------------------------------------------- */

.view-gallery .gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--gal-card-w), 1fr));
  gap: var(--gal-gap);
  align-items: start;
}

/* ---- cards -------------------------------------------------------------- */

.view-gallery .gal-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.view-gallery .gal-card:hover { box-shadow: var(--shadow-md); }
.view-gallery .gal-card:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 1px;
}

/* conditional colour rules · first match wins */
.view-gallery .gal-card[data-rule="row"] {
  background: color-mix(in srgb, var(--rule-c) var(--tint-weak), var(--surface));
  border-color: color-mix(in srgb, var(--rule-c) 38%, var(--line-2));
}
.view-gallery .gal-card[data-rule="cell"] {
  background: color-mix(in srgb, var(--rule-c) var(--tint-chip), var(--surface));
  border-color: color-mix(in srgb, var(--rule-c) 45%, var(--line-2));
}
.view-gallery .gal-card[data-rule="marker"] { box-shadow: inset 0 3px 0 var(--rule-c), var(--shadow-xs); }
.view-gallery .gal-card[data-rule="marker"] .gal-cover { border-top: 3px solid transparent; }
.view-gallery .gal-card[data-rule="text"] .gal-title {
  color: color-mix(in srgb, var(--rule-c) 76%, var(--text));
}

.view-gallery .gal-cover {
  position: relative;
  height: var(--gal-cover-h);
  flex: none;
  background: var(--sunken);
  border-bottom: var(--border-soft);
  overflow: hidden;
}
.view-gallery .gal-cover img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  background: var(--sunken);
}
.view-gallery.gal-view[data-crop="fit"] .gal-cover img { object-fit: contain; }

.view-gallery .gal-cover-blank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1);
  background: color-mix(in srgb, var(--c, var(--obj-gray)) var(--tint-weak), var(--surface));
  color: color-mix(in srgb, var(--c, var(--obj-gray)) 70%, var(--text));
}
.view-gallery .gal-initials {
  font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  opacity: .75;
}
.view-gallery .gal-filename {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  max-width: 90%; padding: 0 var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-2);
  font-size: var(--fs-xs); line-height: 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-gallery .gal-badge {
  position: absolute; right: var(--sp-2); bottom: var(--sp-2);
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
  background: var(--scrim); color: var(--text-inverse);
  font-size: var(--fs-xs); line-height: 18px;
}

.view-gallery .gal-body {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3);
  min-width: 0;
}
.view-gallery.gal-view[data-size="small"] .gal-body { padding: var(--sp-2); }

.view-gallery .gal-title {
  font-weight: var(--fw-medium);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.view-gallery .gal-sub {
  color: var(--text-2); font-size: var(--fs-sm);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.view-gallery .gal-facts {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-2);
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
}
.view-gallery .gal-facts dt {
  color: var(--text-2);
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 124px;
}
.view-gallery.gal-view[data-size="small"] .gal-facts dt { max-width: 92px; }
.view-gallery .gal-facts dd { margin: 0; min-width: 0; }

.view-gallery .gal-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.view-gallery .gal-chip {
  display: inline-flex; align-items: center; max-width: 100%;
  height: 20px; padding: 0 var(--sp-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c, var(--text-3)) var(--tint-chip), var(--surface));
  color: color-mix(in srgb, var(--c, var(--text-2)) 78%, var(--text));
  font-size: var(--fs-sm); line-height: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-gallery .gal-restricted {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0 var(--sp-1);
  border: var(--border-w) dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--sunken); color: var(--text-2);
  font-size: var(--fs-sm);
}

/* ---- new-card tile ------------------------------------------------------ */

.view-gallery .gal-new {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1);
  min-height: calc(var(--gal-cover-h) + var(--sp-10));
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: transparent; color: var(--text-2);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.view-gallery .gal-new:hover { background: var(--hover); border-color: var(--accent-line); color: var(--text); }
.view-gallery .gal-new:focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 1px; }

.view-gallery .gal-composer { cursor: default; border-color: var(--accent-line); }
.view-gallery .gal-composer-foot { display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* ---- controls ----------------------------------------------------------- */

.view-gallery .gal-btn {
  height: var(--control-h); padding: 0 var(--sp-3);
  border: var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.view-gallery .gal-btn:hover { background: var(--hover); }
.view-gallery .gal-btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.view-gallery .gal-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.view-gallery .gal-note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-2);
  border: var(--border-w) solid var(--info-line); border-radius: var(--radius);
  background: var(--info-soft); color: var(--info);
  font-size: var(--fs-sm);
}

/* ---- draft composer ----------------------------------------------------- */

.view-gallery .gal-composer { grid-row: span 1; }
.view-gallery .gal-draft { gap: var(--sp-2); }
.view-gallery select.gal-input[multiple],

.view-gallery .gal-filelist .gal-filename { position: static; max-width: 100%; }
.view-gallery .gal-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; flex: none;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-2); cursor: pointer;
}
.view-gallery .gal-x:hover { background: var(--hover); color: var(--text); }

/* ---- a cover this view cannot set --------------------------------------- */

.view-gallery .gal-derived {
  position: absolute; left: var(--sp-2); bottom: var(--sp-2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--radius-pill);
  background: var(--scrim); color: var(--text-inverse);
}
.view-gallery .gal-derived .gal-ico { width: 12px; height: 12px; }
.view-gallery .gal-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.view-gallery .gal-cfg-lock { display: flex; align-items: flex-start; gap: var(--sp-2); }

/* archived: kept in the references, marked rather than dropped */
.view-gallery .gal-valuewrap { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.view-gallery .gal-archived-tag {
  flex: none;
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
  background: var(--sunken); color: var(--text-2);
  font-size: var(--fs-xs); line-height: 16px; white-space: nowrap;
}
.view-gallery .gal-chip.is-archived {
  color: var(--text-2);
  text-decoration: line-through;
}

/* ---- footer + empty ----------------------------------------------------- */

.view-gallery .gal-foot {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--viewbar-h); padding: 0 var(--sp-3);
  border-top: var(--border-soft);
  background: var(--surface);
  font-size: var(--fs-sm);
}

.view-gallery .gal-empty-view {
  margin: auto; max-width: 420px; padding: var(--sp-8);
  text-align: center; color: var(--text-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.view-gallery .gal-empty-view h2 {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--text);
}
.view-gallery .gal-empty-view p { margin: 0; }

/* ---- config panel (lives in the shell's Configure rail) ----------------- */

.view-gallery.gal-cfg { display: flex; flex-direction: column; gap: var(--sp-2); }
.view-gallery .gal-cfg-list {
  display: flex; flex-direction: column; gap: var(--sp-1);
  max-height: 176px; overflow: auto;
  padding: var(--sp-1);
  border: var(--border-soft); border-radius: var(--radius);
  background: var(--surface);
}

/* ---- narrow windows ----------------------------------------------------- */