/* sidebar_customize.css - left-sidebar customize strip + collapse + reorder.
 *
 * The chip strip sits under the connection ("online") header. Each chip shows
 * or hides one heavy sidebar block; a hidden block collapses to its chip (the
 * "tab" the spec asks for). IT119 adds per-chip up/down reorder arrows + a
 * stat-picker hidden class. Purely additive: with sidebar_customize.js absent
 * the strip is never built and none of these rules apply. */

#sidebar-cz-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
}

.cz-chip {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 0.62rem;
  line-height: 1;
  padding: 3px 7px;
  min-height: 1.4rem;
  color: var(--accent);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, opacity 0.12s;
}

.cz-chip:hover {
  background: var(--bg);
  color: var(--fg);
}

/* A chip whose block is hidden reads as a dimmed "closed tab" - click to
 * bring the block back. */
.cz-chip.cz-off {
  color: var(--fg-dim);
  opacity: 0.6;
  text-decoration: line-through;
}

.cz-reset {
  margin-left: auto;
  color: var(--fg-dim);
  font-size: 0.8rem;
  padding: 3px 6px;
}
.cz-reset:hover {
  color: var(--accent);
}

/* The collapse itself: a hidden block is removed from the stack. */
.cz-hidden {
  display: none !important;
}

/* IT119 Part A - reorder. A chip + its up/down arrows ride together as one
 * group so the arrows stay glued to their chip when the strip wraps. */
.cz-chip-group {
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
}

.cz-arrow {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 0.55rem;
  line-height: 1;
  padding: 2px 3px;
  min-width: 1.1rem;
  min-height: 1.4rem;
  color: var(--fg-dim);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.cz-arrow:hover {
  background: var(--bg);
  color: var(--accent);
}

/* IT119 Part B - stat-picker. A de-selected vital bar / quick-stat cell is
 * removed from the stack the same way as a hidden block. Re-applied each turn
 * by the JS because the app rebuilds those nodes on every viewer update. */
.cz-stat-hidden {
  display: none !important;
}