/* The categories directory (categories.html).
 *
 * Every group and every subcategory on one page, each a link to its tenders:
 * the "All categories" pattern of large marketplaces, because a directory with
 * nothing folded is the one layout where you can predict what is inside a group
 * before you tap it. No icons (a decision, not an omission): a group is told
 * apart by its name, its number and its colour, which the rest of the app
 * already uses for it.
 */

.cat-lede {
  margin: 2px 4px 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  max-width: 70ch;
}

.cat-toolbar {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}
.cat-search {
  flex: 1 1 auto;
  padding: 10px 16px;
  margin: 0;
}
.cat-choose-btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.is-choosing .cat-choose-btn { display: none; }

/* The directory. Columns rather than a grid: cards are 3 to 8 rows tall, and
   a grid would leave a hole under every short one. Groups read top to bottom,
   then across, the way a printed directory does. */
.cat-directory {
  columns: 3 300px;
  column-gap: 16px;
}

.cat-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 16px;
  break-inside: avoid;
  border-radius: 16px;
  border: 1px solid var(--glass-edge);
  border-top: 3px solid var(--accent);
  background: var(--surface-solid);
  box-shadow: 0 1px 2px var(--shadow-color);
  scroll-margin-top: 90px;
  overflow: hidden;
}
.cat-card[hidden] { display: none; }

.cat-card-head {
  margin: 0;
  font-size: inherit;
}
.cat-card-head a,
.cat-card-head label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  color: var(--text-primary);
  text-decoration: none;
}
.cat-card-name {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.cat-card-head a:hover .cat-card-name { text-decoration: underline; text-underline-offset: 3px; }
.cat-card-head a:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }

.cat-list {
  list-style: none;
  margin: 0;
  padding: 0 6px 8px;
}

/* One line per subcategory: the whole width is the target, never less than
   44px tall, with the number where the eye expects it. */
.cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.35;
  cursor: pointer;
}
.cat-row:hover { background: var(--surface-soft); }
.cat-row:focus-visible,
.cat-row:focus-within { outline: none; box-shadow: var(--focus-ring); }
.cat-row-name { flex: 1 1 auto; }
.cat-row.is-empty .cat-row-name { color: var(--text-tertiary); }

.cat-count {
  flex: 0 0 auto;
  min-width: 2.2em;
  text-align: right;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cat-card-head .cat-count {
  color: var(--text-primary);
  font-size: 14px;
}

/* Browsing: the one sign that a line is followed. Words, not a symbol. */
.cat-following {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ebid-gold-soft);
  color: var(--ebid-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Choosing: every line is a tick box, and so is each group's name. */
.cat-tick {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ebid-gold);
  cursor: pointer;
}
.cat-card-head .cat-whole {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}

.cat-choose-hint {
  margin: -6px 4px 14px;
  color: var(--text-secondary);
  font-size: 13.5px;
}

.cat-choose-bar {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, calc(100% - 32px));
  padding: 10px 12px 10px 18px;
  border-radius: 18px;
}
.cat-choose-bar[hidden] { display: none; }
.cat-choose-count {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.cat-choose-note {
  font-size: 12.5px;
  color: var(--text-secondary);
}
.cat-choose-bar .btn { padding: 10px 18px; font-size: 13.5px; }
/* Room under the last card so the bar never covers it. */
.is-choosing .cat-directory { padding-bottom: 96px; }
/* Ask AI floats bottom right, which on a phone is on top of Done. Choosing is
   a mode with its own two ways out, so the button waits until it is over. */
.is-choosing .ai-fab { display: none; }

@media (max-width: 640px) {
  .cat-toolbar { flex-direction: column; }
  .cat-choose-btn { width: 100%; }
  .cat-directory { columns: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .cat-row { transition: background-color 120ms ease; }
}