/* Collapsible Rows — paired styles for shared/modules/collapsible-rows.js.
 *
 * CSP-safe: no inline style attributes are emitted by the JS; visibility
 * + accent come from class + data-attribute selectors only.
 *
 * Theme: inherits site CSS custom properties (--color-border,
 * --color-text-dim, --color-text-primary, --color-accent) with sensible
 * dark-theme fallbacks. Works on any page that loads /shared/css/base.css.
 */

tbody[data-collapsed="true"] tr[data-cr-row="hidden"] {
  display: none;
}

tr.cr-expander-row > td.cr-expander-cell {
  padding: 14px 8px;
  text-align: center;
  background: transparent;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

button.cr-toggle-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.14));
  border-radius: 6px;
  color: var(--color-text-dim, rgba(255, 255, 255, 0.72));
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  min-height: 40px;
  min-width: 160px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

button.cr-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--color-text-primary, #fff);
}

button.cr-toggle-btn:focus-visible {
  outline: 2px solid var(--color-accent, #f5b840);
  outline-offset: 2px;
  color: var(--color-text-primary, #fff);
}

button.cr-toggle-btn[aria-expanded="true"] {
  color: var(--color-text-dim, rgba(255, 255, 255, 0.6));
}