/*
 * Catalogue styles (site/app/ui/catalog.js).
 * Two colours only (--earth, --white), solid rules, no radius, shadow, opacity or italics.
 * Tiles carry no border: the grid gap separates them. A selected tile shows its name
 * and code in inverted colours with a 4 px rule under the preview; keyboard focus keeps
 * the global :focus-visible outline (style.css).
 * Works at 360 px: the grid wraps to three columns, nothing is wider than the page.
 */

.cat {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.cat-label {
  font-weight: 700;
  font-size: 0.875rem;
  display: grid;
  gap: 6px;
}

.cat-search {
  width: 100%;
  font-size: 1rem;
  padding: 8px 10px;
}

.cat-count {
  font-size: 0.875rem;
  font-weight: 700;
}

/* The tile grid is its own vertical scroll area: the search box and the count/bulk bar stay
   above it, and its height leaves --cat-peek of the next section (the hint, or the detail
   area) visible at the bottom of the first screen. --cat-head is the largest distance from
   the top of the page to the top of the grid at that width (header + search + count/bulk bar,
   measured: 232 px on desktop, 226-276 px on phones where the bulk button may wrap). dvh
   follows the mobile browser's address bar; vh is the fallback. The 4 px padding keeps the
   2 px :focus-visible outline (offset 2 px) of edge tiles inside the scroll area, and
   scroll-padding keeps a focused tile fully in view when Tab scrolls it. The scrollbar is
   drawn in the two site colours only. */
.cat-grid {
  --cat-head: 240px;
  --cat-peek: 72px;
  list-style: none;
  margin: 0;
  padding: 4px 4px 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px 16px;
  min-width: 0;
  max-height: max(200px, calc(100vh - var(--cat-head) - var(--cat-peek)));
  max-height: max(200px, calc(100dvh - var(--cat-head) - var(--cat-peek)));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: auto;
  scroll-padding: 8px 0;
  scrollbar-color: var(--earth) var(--white);
  border-bottom: 1px solid var(--earth);
}

.cat-cell {
  min-width: 0;
  display: flex;
}

.cat-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--earth);
  font-weight: 400;
  text-align: left;
  container-type: inline-size;
}

.cat-tile:hover {
  background: var(--white);
  color: var(--earth);
}

.cat-tile:hover .cat-name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.cat-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  background: var(--white);
  border-bottom: 4px solid var(--white);
  overflow: hidden;
}

.cat-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.cat-thumb-error {
  display: block;
  padding: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cat-name {
  display: block;
  padding: 4px 6px;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Second line: the code. Lighter and smaller than the name, never wrapped or cut:
   the font shrinks so that --code-len monospace characters fit the tile width
   (0.6 em per character plus 12 px padding). */
.cat-code {
  display: block;
  padding: 0 6px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: min(0.75rem, calc((100cqi - 12px) / (var(--code-len, 9) * 0.62)));
  line-height: 1.4;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
}

.cat-tile[aria-pressed="true"] .cat-thumb {
  border-bottom-color: var(--earth);
}

.cat-tile[aria-pressed="true"] .cat-name,
.cat-tile[aria-pressed="true"] .cat-code {
  background: var(--earth);
  color: var(--white);
}

.cat-empty,
.cat-error {
  font-weight: 700;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.cat-grid[hidden],
.cat-empty[hidden],
.cat-error[hidden] {
  display: none;
}

@media (max-width: 479px) {
  .cat-grid {
    --cat-head: 280px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* style.css makes buttons full width on phones; tiles already fill their cell */
  .cat-tile {
    width: 100%;
  }
}

/* ---------- detail area below the catalogue ---------- */

.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  border-bottom: 2px solid var(--earth);
  padding-bottom: 8px;
  margin-bottom: 16px;
  min-width: 0;
}

.detail-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-title h2 {
  margin-bottom: 4px;
}

.detail-meta {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.detail-back {
  font-size: 0.875rem;
  padding: 4px 10px;
  width: auto;
}

.detail-body {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.settings {
  border-top: 1px solid var(--earth);
  border-bottom: 1px solid var(--earth);
  min-width: 0;
}

.settings > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 12px 0;
  list-style-position: inside;
}

.settings[open] > summary {
  border-bottom: 1px solid var(--earth);
}

.settings-body {
  display: grid;
  gap: 24px;
  padding: 16px 0;
  min-width: 0;
}

.detail[hidden] {
  display: none;
}

/* ---------- count line with the bulk ZIP export (bulkExport.js) ---------- */

.cat-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 16px;
  min-width: 0;
}

.cat-bar .cat-count {
  margin: 0;
  padding: 10px 0;
}

.cat-bulk {
  flex: 1 1 260px;
  min-width: 0;
}

.bulk {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.bulk-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.bulk-start {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.bulk-cancel {
  flex: 0 0 auto;
}

.bulk-start:disabled,
.bulk-cancel:disabled {
  cursor: default;
  background: var(--white);
  color: var(--earth);
}

.bulk-progress,
.bulk-result {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.bulk-failures {
  margin: 0;
  padding: 0 0 0 1.2em;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.bulk-buttons [hidden],
.bulk-progress[hidden],
.bulk-result[hidden],
.bulk-failures[hidden] {
  display: none;
}

@media (max-width: 479px) {
  .bulk-cancel {
    width: 100%;
  }
}