// ─── Mixins ──────────────────────────────────────────────────────────────────

.cel-section-header() {
  font-family: var(--cel-font-title);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cel-green);
  border-bottom: 1px solid var(--cel-border);
  padding-bottom: 2px;
  margin-bottom: 6px;
}

.cel-input-std() {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--cel-border);
  border-radius: 2px;
  padding: 2px 4px;
  color: #1a1209;
  font-family: var(--cel-font-body);
}

.cel-box() {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2px solid var(--cel-border);
  border-radius: 3px;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  &.checked { background: var(--cel-orange); border-color: var(--cel-orange); }
}

.cel-rollable() {
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  &:hover {
    background: var(--cel-orange-light);
    color: #1a0a00;
    border-radius: 3px;
  }
}

.cel-item-row() {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(139,115,85,0.3);
  transition: background 0.1s;
  &:hover { background: rgba(224,123,0,0.08); }

  .item-icon {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border: 1px solid var(--cel-border);
    border-radius: 2px;
  }

  .item-name { flex: 1; font-style: italic; }

  .item-controls {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    a { color: var(--cel-orange); cursor: pointer; }
  }

  &:hover .item-controls { opacity: 1; }
}